ReactJS Fundamental Concepts

ReactJS core concepts

ReactJS is a very fast, most powerful JavaScript library building for user interfaces(UI). It does to design UI in a very simple and easy way. ReactJS is developed in 2011 by Facebook. Though it is not a framework but so much powerful, and robust to the developer community. From the first beginning, ReactJS is a favorite technology for front-end developers. Here the most fundamental concepts of ReactJs

1. Virtual DOM

ReactJS uses Virtual DOM instead of Real DOM. It is faster than real DOM. The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.

2. Everything is Component

In React every UI piece is a component, and each component has a state. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM. This process is called “diffing”.

3. JXS

JSX is a shorthand for JavaScript XML. This type of file is used by React which utilizes the expressiveness of JavaScript along with HTML-like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance. Below is an example of JSX:

render(){
return(
<div>
<h1> Hello, ReactJS</h1>
</div>
);
}

4. Props And PropTypes In React

Props and PropTypes are important mechanisms for passing information between React components, and we’re going to look into them in great detail here. This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props. However, it’s always a good practice to validate the data we are getting through props by using PropTypes. So, you will also learn how to integrate PropTypes in React.

5. Optimizing Performance In React Apps

During the initial rendering process, React builds a DOM tree of components. So, when data changes in the DOM tree, we want to React to re-render only those components that were affected by the change, skipping the other components in the tree that were not affected.

6. React Hooks

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes.

Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule ensures that all the stateful logic in a component is visible in its source code.

to be continued…