Journey to advance React
## 1. Fundamental of React.js: Nowadays React become very popular among developers for its easy-to-use, lightweight characteristics. React works with virtual DOM. When any state changes in the browser react compare the previous and current state and update the changed data instead of replacing the whole. Difference between DOM and React DOM like this-
DOM works : document.getElementById(‘mountNode’).innerHTML = `
<div>
Hello HTML
</div>
`;
React DOM works like this:
ReactDOM.render(
React.createElement(
‘div’,
null,
‘Hello React’,
),
document.getElementById(‘mountNode2’),
);
To actually show a react element in DOM we use ReactDOM.render. While updating React uses diffing algorithm to find out what parts of the element changed and what to update. React has class-based and function-based components. For a newbie, it is easier to adopt functional components as they are easy to use and the newly introduced hooks that are made with functions make it much easier to manage your code. Hooks are basically special functions as they are assigned to perform specific tasks. The stunning matter about React is they are reusable.
## 2. JSX in depth: In React JSX is combination of JavaScript with XML. Rather insert HTML in DOM tree React use JSX instead.
In react we code like this-
<MyButton color=”blue” shadowSize={2}>Click Me
</MyButton>
Later it converted into
React.createElement(
MyButton,
{color: ‘blue’, shadowSize: 2},
‘Click Me’
)
With the help of transpiler.
The first part of the JSX determines the type of React Element. When an element type starts with a lowercase letter it refers to a built-in component like <div>, <span>, etc. Types that start with uppercase letters refer to React component.
## 3. Virtual DOM: DOM stands for document object model. It represents the UI in our web application. Every time a change happens in our application the state of DOM changed. But repeatedly changing states and DOM manipulation make our application slow. To solve, this React introduces the idea of virtual DOM. During every change react application makes a replica of the current dom. Instead of changing while component it only updates which changed state.
## 4. Optimizing Performance: To avoid data cost in react app there are nice techniques available. Most of them are speed up our application. At first, we have to make sure our application has to be production build. By default, React has many built-in tools those are very useful to develop the application. React developer tools in chrome helps in this perspective.
## 5. Defaultprops: Using default props help us to make web application smooth on the browser. Sometimes missing props cause a breakdown of the codes results in poor UI or sometimes user does not know what happens under the hood. It is wise to pass default props with regular props so that in case of missing props default take the place and helps us to build a smoothly-running site. We have to declare Component. default props = {
Props: default props,
}
## 6. Prop-Types: Prop-types is an npm package to check our value types we declare. When we declare a value we should assign the types so that it will throw an error in the console as we may correct them without affecting the user experience. It is a small tool that can install npm install — save prop-types or yarn add prop-types. It is good practice to validate our data while building applications. Prop-types are a bonus that they ensure us to use correct data types.
## 7. React Components: In React components are independent, and the reusable block of codes. They are the heart of React. The amazing part is that they serve as javascript functions in React but presents as HTML elements. Components come in two parts, functional component, and Class component. When creating a component, it must start with a capital letter. To use component in our application we have to write like this <Component/> or <Component></Component> if it has children inside it.
## 8. Diffing Algorithm: While updating a state in DOM React uses the finding mathematics that which part of the DOM should update instead of replacing the whole. In the case of React, it is called diffing algorithm. As evident from its name its main works is the find out the change from one state to another. The first time we made an element a tree of all the elements is made(point A). On the next update of any state or prop element, the render() function is called again to update a different set of React elements(point B), what react needs is to identify the fattest/ minimal utilization of resources to React from point A to point B. The general solution to this problem has a complexity in the order of O(n3), where n is the number of elements in the tree.
## 9. React as A library: Framework is a broader version of an idea compared to a library. A framework has a total solution for the specific area while considering web applications. But the library is a small instance of code origin. In general, it is nice to hear a complete solution in a framework but there are some obligations to be followed where the library gives us independence. While using the library we are not bound to the set of things as we may use a third-party library or package. As react is a library, besides this, we may use another UI component from the third party to build our application.
## 10.Hooks in React: Hooks in React are basically functions and start writing with use word. Hooks are comprised of an array with 2 elements whare the first one is an object or variables and the second one is a method. Hooks are very powerful and the sky is the limit when it comes to using hooks should be called at the top level. Besides the built-in hooks like useEffect, useState, useReducer, useRef, useMemo, use Context, etc. we may declare our own custom hooks as per our requirement. To do so we have to acquire a better understanding of Reacting and react-hooks.