React Core Concepts

React is a JavaScript library that is used for building user interfaces. React not only used for web applications but also mobile applications. For the web, we use react-dom, and for mobile react-native. However, I am going to discuss here React and react-dom.

Why React?

Well, React is a lightweight javascript library, building for the user interfaces. React has utilized javascript power. The proper DOM manipulation and optimization React has got popularity. React is a single-page application that is a fast run time because of virtual DOM manipulation. The component feature has brought the power of React. The state management system is easy and really appreciatable

Virtual DOM

DOM means document object model, each HTML file is a document, all HTML elements individually is an object and HTML tree structure is the model. However, at the end of the day, DOM is a javascript object. We know that multipage applications reload the page for every single change but due to virtual DOM, React perfectly handles these changes. React make a copy of browser DOM and compare it to the main DOM with React DOM, If any changes occur, it doesn’t change the whole DOM, just change where it needs to change. React efficiently handle virtual DOM and final output gives the browser DOM.

React — JSX

JSX is a react mark-up language, which means JavaSctript XML. It supports both javascript and HTML syntax. We can dynamically set variables in JSX of javascript. JSX is not fully javascript code, so need to translate it into javascript code and BABEL does it. In general, curly braces are used for javascript variables into JSX.

React-Components

React is the component base library. The component concept is so imported but it is very easy. Because of javascript function. Modern React is following function to create component but this is not the only way, there is another is called class component. The component helps to reduce code repetition. You can call multiple times any component like HTML elements ( <Home/> ). One component holds mainly one element/ tag at a time. For example — below component return only one <div> </div> element

Props

This is like an HTML attribute, you can any data from parents to children using the props concept. Child components accept this data by object destructuring method. You can pass one or more data at the same time. For data sharing, this is an easy process.

State manage

We are developers, have to manage different data. Some are static and some are dynamic. To manage dynamic data that is changeable we use state in React application. React is really flexible to handle data flow. We use React build-in module ‘useState’ & need to import from React package. Initially, we have to set the default value according to our task. It has two properties, one is value, and the other is function. The function is used to update values. And we get any data from value. For example –

const [value, setValue] = React.useState(0);

here, setValue is a function.

Context — API

For data sharing, context-API is now a hot topic instead of redux. Large or any size application we use context-API for sharing data. We can use one or more context-API in our project. Now a day, context-API and props are now enough for sharing data of our project. Context-API has to declare parent component so that all child components can access.

React — Router

React is not a framework, it is a library. React sometimes for some features is depends on other packages. If we want to use it in our project, we have to import a React-Router package. React gives flexibility for developers to choose external packages to build user interface according to developers mind set. React-Router provides Router, Route, Switch, PrivateRoute, and some hooks that are so much useful for developers.

React-Redux

For data sharing, React-Redux is used for large-scale projects. Before context-API, redux is used monopolistically. Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable. It works simple way, there is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another. There are three parts — actions(dispatch), store, reducers.