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.