React Exploring With Jana Alam
Published: 2021-12-30 14:57:32


**JSX**: JSX means Javascript XML that is just the syntactic sugar of React. createElement() function. It allows us to write HTML codes inside of react application. It is the javascript Extension but the browser is not able to run the JSX code. At this time we have to convert this code to javascript where Babel helps us to do that.

**VirtualDOM and Diff Algorithm**:  React is a popular javascript library that becoming more famous day by day. Now we will discuss the virtual DOM that React uses for its application. We get the fast performance of the react application and virtual DOM is one of the reasons. React creates a javascript object which is the coy of the Document Object Model (DOM) is known as virtual DOM. That means now virtual DOM and the original DOM is the same. Now, if any data changes or interactions happen for which state/value will be changed then UI needs to re-render for the latest update. If we manipulate the original DOM then for a single change of the nodes full DOM will re-render which is very much expensive. What the react does, it doesn’t manipulate the DOM directly. Instead, it compares the latest changes with the copied virtual DOM. React has a special algorithm which is known as the Diff algorithm that can easily find out the differences between the latest update and the virtual DOM. Then react updates only th changed or affected nodes of the original DOM.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bcs2b1dzym7eyxaesmp.png)

**SPA**: SINGLE PAGE APPLICATION:
SPA means Single Page Applications which is a web application that continuously changes its content dynamically by re-writing the codes whenever users interact with the browser or data is modified or changed from the server. There are some benefits which are as follows: 
User Experience is better
Performance is better
Loading Time is less
Bandwidth Less also workable

**React Router Dom**:  react-router dom is a javascript library that is used with the react application to route the URL throughout the application. The main feature of this library is that it doesn’t reload the application rather it just routes from one page to another page. Recently react-router has the latest update of version 6 and they made huge changes to the library from the earlier version. I will tell some upgrades/changes of the react-router version 6:
Switch Changed to Routes: <Routes> is replace the <Switch> component and <Routes> component is more powerful than <Switch>.
useNavigate replace the useHistory hook
In <NavLink> the props active class name and active style is dropped and instead conditionally apply styles basis active state with isActive.
Replace useRouterMatch with useMatch

**Props Drilling:** In React we have to pass data/state from one component to another children component via props. From that children component, we can follow the same procedure as previous to flow the data/state downward components. This type of data flowing through props is called prop drilling. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps1r55nxxolq31jcxazv.png)
Now if we have a project where we have to send the data downwards for 5-6 layers down and what will be the situation. We have to send the data to the bottom component by doing props drilling to 4-5 components which are not good at all. Moreover, the state it passes through a component will re-render on every change of the state which can make the application slow. To make the solution Redux came into as a solution. Its’s idea is to create a store where all of the application state will be maintained centrally. So that any of the component from anywhere in the project can get the state data as it require. It has also action to update the state in the store. Moreover in the latest versions of react application, it brings the context API on basis the idea of redux. So, context API is the same type but a simpler version of redux. 
So, if your project is a very simple project then you can apply context API to manage the state centrally and if your project is a bit more complex when state value is needed anywhere, state management is complex then redux will be the solution.