How well do we know about React JS? Let’s dive to see

Difference between Framework and Library — A library usually focuses on a narrow scope. It provides a set of helper functions, methods, etc which you can call in your project to achieve specific functionality. It’s basically a collection of class definitions that is written mainly to promote code reuse. There’s no need to start from scratch every time, you can easily use written by others to save time and energy. As Library has a narrow scope, the APIs are also smaller and ultimately the project requires fewer dependencies to get things done.

Whereas, Frameworks are like the foundation on which developers build programs for specific platforms. These are designed to decrease the number of issues that a computer programmer faces during the development. Frameworks may have defined or undefined functions and objects which the programmer can use or overwrite to create an application. The major task of a framework is to provide a standardized code that can be applied to a variety of application projects.

React Virtual Dorm — React is fast because it only manipulates the DOM as much as it needs to. Let’s say we have some sort of button on our website that changes to a different color when a user clicks it (remember, we’re talking about user interfaces when it comes to React). Rather than re-building all the parts of the DOM tree, React will render only what has changed between these two representations. From a performance standpoint, that’s what makes it so fast. Updating changes are much faster than rebuilding the entire DOM tree from scratch. It’s able to do this because it keeps the virtual DOM representation from the last time we updated or rendered our component in memory. It then compares the two versions and updates the changes.

JSX in React: JSX looks like everything in the HTML tag But this is all about JavaScript. In react, app JSX babel pre-set will transform these expressions into actual Javascript code. Babel is typically used and recommended for transforming JSX expression.

 //JSX
return <div className=”title”>
<h1>Hello World!</h1>
</div>

This is a simple JSX code inside the React component return method.

Transform into Javascript codereturn React.createElement( “div”, null, React.createElement(“h1”, { class: “title” }, “Hello World!”) );

In this way react babel preset transform JSX code into javascript code. After import, React create an element like JSX code using the createElement method The createElement accepts three-parameter first one for tag name as like HTML tag and second one attribute and last one for children.

Webpack — Webpack is a JavaScript module bundler. It can also transform front-end assets like HTML, CSS, and images if additional configurations are added.

It takes modules with dependencies and generates static assets representing those modules.

Babel — Babel is a JavaScript compiler. It is a tool-chain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments.

It is mostly used to transform syntax Polyfill features that are missing in the target environment and transform source code

React Components Lifecycle: When component called. inside of that, the constructor function will call first. It will call whenever components get loads. It will be called only one time.

1) componentWillMount():

It will call after the constructor gets called. This also gets called only one time of component get loads. render function will call after this function. mostly first render won’t have any component-related data. If you want to get data in the first render itself. you have to make sure to get the data from this function itself.

2) componentDidMount():

It will call after first render() (render function purpose is same as how other programming languages have the main function).it will call after whenever render called. mostly API request takes place inside of this function.

3) componentWillUpdate():

It will call whenever a component gets updated (state or props get updated)

4)componentDidUpdate():

Render will get called after component will update was called.componentDidUpdate will get called after this render.

5) shouldComponentUpdate():

Always this function will return Boolean. By default, it will return true. If you change it as false means it will restrict the update calls of components to get called(WillUpdate, DidUpdate).

6)componentWillReceiveProps():

It will be called whenever props get updated.

If you are getting one variable from the parent component.if suppose it gets changed in the parent component. It will get affected in the child component also. At the time this function gets called. Inside of this function, you can able to set the state with new data. but calling set state in remaining component lifecycles is not good practice.

7)componentWillUnmount():

It will be called when the user gets away from the current component. mostly if the user adds some event listeners inside of the component. Then can remove those listeners here.