Lakshan Madhuranga
4 min readJul 20, 2019

Introduction to React

  • · Developed and maintained by Facebook and Instagram.
  • · A JavaScript library for creating user interface.
  • · Serves as the view of MVC architecture.
  • · Suitable for large web application which use data and change over the time without reloading the entire page.
  • · React Native caters developing mobile application for various platform and React VR caters developing VR applications.
  • · Aims at Speed, Simplicity and scalability.

Notable features

  • One-Way data flow.

. Single source of truth-data is originated and kept in one place, data is immutable.

. Data flow from the parent component to the child component.

. Action flow from child component to parent component.

. Virtual DOM — Document Object Model

. DOM manipulation is cost instead react create a virtual DOM tree and compare it with the rendered tree and update only what is changed.

  • JSX

. React JS language for defining user interface.

. HTML like syntax.

. Prevents cross-site scripting attacks by converting expressions to strings.

  • Props and State

. Props are used to pass data and behavior from container components to child components.

. Props are read only.

. State is used to keep data which can be updated.

. State is read write enabled.

. Use setState({}) method to update state.

. SetState method is asynchronous so, if you want to use state and props inside setState method use the second form of the method setState((state,props)=>{}).

  • Component life cycle

. React components extends from React. Component parent class inherit a set of methods that belong to react life cycle.

. Render and commit state.

. Controlled and uncontrolled.

. Side effects.

. Constructor.

. Render.

. Component did mount.

. Get derived state from props.

. Should component update.

. Component will unmount.

. Component did catch.

  • Constructor

. JS constructor

. Declare state and bind context to life cycle events.

. Do not call setState.

. Always call super(props) to bind this props.

  • Render

. Rendering of the component.

. Called every time state or props are getting changed.

. Can return JSX, portal, fragments, String, Boolean etc.

  • Component did mount

. Fires after component is mount to DOM.

. Can interact with DOM.

. A JAX calls and update the state.

  • Get derived state from props

. Use this if you want to update your state from props.

. React highly recommends not use this.

. Highly discourage conditionally setting state from props.

  • Should component update

. To decide whether to update the component or not.

. Only as a performance enhancement, if required.

  • Component did update

. After component got update

. Will not run if should component update return false.

. Use this to interact with DOM after a component update.

  • Component will unmount

. Before removing the component.

. Should not call setState.

. Clean up tasks.

  • Get derived sate from error/component did catch

. After an error from decedent component.

. Get derived state from error to get error related state.

. Component did catch for logging and side effects.

About Babel

. Most popular java script compiler. Bale is compiler for java script best known for its ability to turn ES6 into code that runs in your browser today.

. Convert java script ES6 features and beyond to latest compatible version.

. Debugging enabled via source maps.

. In built code optimization.

About Web pack

  • Most famous module bundler.
  • Support for build system as well as module bundling.
  • Split code into multiple files.
  • Support common AMD.
  • Extend using loaders (compiling, css transformation, image optimization).
  • Support production optimizations.
  • Easy configuration with 4 steps (entry->loaders->plugins->output).

About Parcel

  • Fastest module bundler.
  • Relatively new to community.
  • Conventions over configurations.
  • Support JSX, CSS, LESS, SVG, typescript.
  • Plugins available for extension and plugins are automatically detected.

React — Flux concept

Flux is a programming concept, where the data is uni-directional. This data enters the app and flows through it in one direction until it is rendered on the screen.

Flux Elements

Following is a simple explanation of the flux concept.

§ Action — Actions are sent to the dispatcher to trigger the data flow.

§ Dispatcher — this is a central hub of the app. All the data is dispatched and sent to the stores.

§ Store — Store is the place where the application state and logic and held. Every store is maintaining a particular state and it will update when needed.

Lakshan Madhuranga
Lakshan Madhuranga

Written by Lakshan Madhuranga

Undergraduate at university of Kelaniya, and Studies ICT in faculty of computing and technology.

No responses yet