React core concept.
What is React?
React is defined as a JavaScript library for building user interfaces.
1.React is a JavaScript library or Framework?
The library is a simple thing, you can take your own decision, but the framework follows that predefined written code, you can only this code(many smart design decisions are already made for you). That is the main difference between the library and the framework.
React is a library for building composable user interfaces. It encourages the creation of reusable UI components that present data that changes over time.
What is the Framework?
Framework: At their most basic, JS frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine programming features and tasks — literally a framework to build websites or web applications around.
2. JSX : JSX stands for JavaScript XML. JSX allows us to write HTML in React.JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
JSX converts HTML tags into react elements.
3. Virtual-DOM : In modern web development,DOM crucial understand.In modern JavaScript DOM stands for document object model.it’s mainly used to create a Nodes using JavaScript.DOM is heart of modern interactive web,but using a simple dom is lot slower then the javascript operation.If you have list of fruits,if you choose your favorite fruit from the list ,the javascript framework would rebuild the entire list we only need to rebuild seleted item but not the remaining this extra work is adequate for smaller application using list is not a big deal in the browser but modern website use a huge amount of dough manipulation so this approach definitely slow down your web application.This problem solve Virtual-DOM.In JavaScript dom there is corresponding Virtual-dom.Virtual-dom is object identical to the javascript object .If I describe the Virtual-dow,that is represention of the javascript dom.Virtual-dom has the some power and has properties and method like the DOM object.
How Virtual-DOM work ?
let say if you have a few dom elements this pure javaScript dom elements,and the other hand you have virtual-dom representing the same dom elements when you make any changes in the react component every single virtual-dom gets updated,it sound slightly insignificant,but virtual-dom can update so quickly then actual dom.Once virtual dom updated then the react compare the virtual dom with virtual dom a snapshot that was taken right before the update by comparing the new virtual dom wit a pre updated version.Then react figure out exactly which virtual dom object have changes this process is called diffing. In this case react maintains two virtual-dom one with the update state virtual-dom and other previous state virtual-dom .Once react knows which virtual-dom object have changed then react update those object and only those object on the real dom.In process we know that ,react only update the component which updated previously.
4.The React language
You have an array ,how to display to an array element in the web application.That is very easy,when you use react.Each of these actions will require the app to do a DOM operation to create, insert, update, or delete DOM nodes. With React, you don’t worry about all of these DOM operations. You don’t worry about when they need to happen or how to efficiently perform them.
5.The Component Lifecycle:
Each component has several “lifecycle methods” that you can override to run code at particular times in the process.components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle.
Mounting:These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
- constructor();
- static getDerivedStateFromProps()
- render()
- componentDidMount()
Updating:An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:]
1.static getDerivedStateFromProps()
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate()
5.componentDidUpdate()
Unmounting:This method is called when a component is being removed from the DOM:
1.componentWillUnmount()
Error Handling:These methods are called when there is an error during rendering.
1.componentWillUnmount()
2.static getDerivedStateFromError()
3.componentDidCatch()
Other APIs:
1.setState()
2.forceUpdate()
Class Properties:
1.defaultProps
2.displayName
Instance Properties:
1.props
2.state
6.How pass data to child components:
Very easy way,you can send data from parent components to child components. see the example:
7.How to use data from parent components:
In React data goes down the tree of the components. If you want to pass data from parent to child component you need to use props.
8.State:State is very important tool in react , you declear any type of data type as like (object,array, string ,number,boolean) etc,and also change the value of the data type. example : const[count,setCount] = useState(0);
count is a variable , seCount function that use for change the variable value.
9.Conditional rendering: conditional rendering is one kind of javascript if and else type . you can give your own decision using conditional operator(||,&&,!,etc).
In this example,when you click the button count goes to update (count = true). 12 line result is Md.Tahsin Amin. 13 line result is before click button(text-primary) after click button (text-white)
10.What exactly are hooks?
A hook in a React component is a call to a special function. All hooks functions begin with the word “use”.Some hook name is useState,useEffect,useReduce,useRef,useContext,ete.
Happy coding.
