React JS in-depth Knowladge- Part 1

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Declarative programming is a programming paradigm.that expresses the logic of a computation without describing its control flow. For Declarative programming developer has less control over process and control flow, tells other or other process to do the job.

Such as: Ask your friend to do your homework, he or she will do that, you don’t care.

REACT IS DECLARATIVE PROGRAMMING. OS IT WILL TAKE LESS TIME FOR DEVELOPER TO DEVELOP THE APPLICATION.

What is Virtual DOM?

Virtual DOM is any kind of representation of a real DOM. Virtual DOM is about avoiding unnecessary changes to the DOM, React create the tree of custom Object of when it is render any client (e.g: Browser, Mobile application using React).

Instate of creating actual DOM element, it creates DOM Object and Sub DOM object in a tree. When any change happen by event or action, React will change its DOM (Virtual DOM) very quickly without Touching Actual or Real DOM.

When the Virtual DOM render is complete .React using Driffing Algorithm to Real DOM tree to find out minimal change within DOM tree, then Apply the changes to Real DOM.

The Procedure for how Virtual DOM works in REACT,

  1. Create a Virtual DOM with a new State
  2. Compare it with Old Virtual DOM using Driffing Algorithm
  3. Update only differ nodes within React DOM
  4. Assign new Virtual DOM as Older Virtual DOM

In Older Procedure of using Javascript for Render Object in client is “find the DOM Object → Manipulate the DOM Object → Replace the DOM Object or Rerender the DOM Object” is heavyweight Process, it can Slowdown website on client or browser. And Virtual DOM do not using this procedure. The Process of Virtual DOM is lightweight and faster and easy, so it will provide better and faster performance then other framework.

REACT JS USING VIRUTAL DOM TO RENDER IT’S COMPONENT TO CLIENT

We must need to Understand about pure function and how it’s work when render the React Component.

What is Pure Function?

The function always returns the same result for same arguments or parameter are passed in. It does not depend on any state, or data, change during a program’s execution, external entity or variable and It depend on its own input arguments.The function does not produce any observable side effects such as network requests, input and output devices, or data mutation.

Side effects include, Making a HTTP request, Mutation, console printing, DOM Manipulation.One of the major benefits of using pure functions is they are immediately testable. They will always produce the same result if you pass in the same arguments. Example of Pure Function.

You need to know about basic syntax ofes6 for wrining the code at react js

What is ES6?

ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. Languages like JavaScript, Jscript and ActionScript are governed by this specification. This tutorial introduces you to ES6 implementation in JavaScript.

Simple Example For Starting The React Project

For Learning purpose, I will use create-react-app boilerplate to provide basic understanding about react component and how the are working:

Add create-react-app to command line as global package by using Command Line or Terminal by

Create new React JS project by using command line

The main concept of the react js is component based development. React JS has two types of component , one is smart or container component and the other is dump or presentational component. Developer must know about those types of component, which component type are need for which purpose.

Go to Project Folder react-js-in-depth and open the project by vscode and atom or any other code editor which you are comfortable with:

Create React App Project Structure

All the folder structure are generated automatically by create-react-app . for learning purpose, I have created components folder. Then i have created two file named DumpComponent and SmartComponent. Dump Component and Smart Component is important feature for React JS .

Dump or Presentational Component

This type of component only used for present something to the DOM. It has not responsibility to modified the business logic, it means this type of component has no state. it has no state management to modify the state of the component. it only have render() method and is often just Javascript function. It does not know how to change the data it is presenting if it is asked for. it I provide the example dump or presentational component below.

In this code syntax, component name is DumpComponent , if it only work with render() function , so we can write the code using return statement. import React from 'react' is important because without it node do not identify is it function for react component. This component has not state only a presentational information included.

Smart or Container Component

This type of component concerned with how things works. it contains both dump and another smart component. It contains the business logic and has state management functions to change the state of the component. it may have callback or ajax function for serving datasoruce, sometimes smart component called as statefull component. it also help application to connect with state management tools redux or mobex or Flux also. Most of the Component are using the class feature. Example of Smart Component is

React Has Component Class, which has predefined methods, Developer need to extends Component class to get smart component features.

constructor

constructor for a React component is called before it is mounted. Developer will initialize the state and bind the action in constructor .If Developer do not want to initialize state and bind methods, he/she do not need to implement a constructor for your React component.

props

this.props for smart component and props for dum component contains components properties and its value which is needed for render and re-render the component. In particular, this.props.children is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.

The valid React component accepts a single “props”. “props” Stand for Properties.

state

The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.If some value isn’t used for rendering or data flow developer don’t have to put it in the state. Never mutate this.state directly, Developer must call setState() for change and mutate the state of the component, And Do not use setState() in render() function of component. Treat this.state as if it were immutable. Example are there

To know about Reac JS component. Developer must need to know about life cycle of the react component:

Mounting

Mounting is starting step for create the react component. when this method is called, component instance is created, and then insert into DOM tree. methods call for mounting the component:

constructor()static getDerivedStateFromProps()render()

getDerivedStateFromProps() function will call before render() method, this method should return an object for updating the state or null to update nothing. this method will not accessable at instance class. it will fire every time when render the component.

Updating

Updating can changes the props or state of component. Method calling order for updating and re-rendering the React Component are provide below:

getDerivedStateFromProps()shouldComponentUpdate()render() getSnapshotBeforeUpdate()componentDidUpdate()componentDidMount()

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to.It enables your component to capture some information from the DOM, before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().

componentDidUpdate() method is not called for the initial render. It is a good place to do network requests as long as you compare the current props to previous props.

componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.

componentDidMount() is invoked immediately after a component is mounted or inserted into dom tree. If developer needs to load data from a remote endpoint, this is also a good place for network request. Example Code shows below:

Unmounting

componentWillUnmount() is call when component is unmounted and destroyed. This function is used for perform any necessary cleanup for component before is destroyed, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().

After the end of the discussion, I have to presented those information about react to developer will be needed for learn React JS . I also discuss about The life cycle of the react JS component. how it is work.

React JS in-depth Knowladge- Part 2, will discuss about how state works, how props is works, how ref and list will works when render the component, it Will be publish soon ……

Tariqul Islam have 9+ years of software development experience. He knows Python, Node Js and Java, C# , PHP.