Know Your React Deeply

Is it farmwork or a library?

Every React developer 1st knows that react.js is a library of Javascript. It’s not exactly a framework. React focuses on one thing that is building user interfaces. extremely easy to mix it with other 3rd party libraries. It is a declarative, efficient, and flexible javascript library.

Server-Side Rendering

Server-side rendering is a better experience for users because they receive viewable content. Rendering can quickly become a performance bottleneck.

Props in React

Props is a special keyword in React, which means for properties and it is used for passing data from one component to another. Since React is a component-based library, props can only be passed to components in the only parent to child.

Difference between react props vs. state

One of the core concepts of react is the difference between props and state. Only changes in props and state trigger react to re-render components and update the DOM.

The biggest difference is that re-rendering of the component based on input in state is done entirely within the component, whereas you with using props can receive new data from outside the component and re-render.

React State

React components has a built-in state object. The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.

Example:

const {user, setUser} = useState({});

In this example, the user is a state and its initial value is empty. If we want to change the value of the state we can use the setUser function. Look at below:

const newUser = {

name: ‘William’

passion: ‘programming

}

setUser(newUser);

Now, the user state has the new value of the newUser object.

Lazy Loading

It is a built-in system that imports the component dynamically. The function of this system is React.Lazy(). It mainly loads the component when a page needs to be used for that component.

In React what Is JSX ? How it work?

JSX is not HTML or not JavaScript. It converted with HTML and JavaScript. Its most useful and easier. If I give you once example it will be clear up to you

import React from 'react';const component= () => {return (
<div>
<h1> Hello World</h1>
</div>
);};
export default component;

About Virtual DOM

Virtual DOM is a process where ideal or virtual representation kept in memory and this process is called Virtual DOM. Link a library with real DOM such as a reactDOM.VDOM has power, properties, method same as DOM. VDOM statement looks like a tree.

How Virtual DOM works

React makes two copies from real DOM. When needing any change to application or element, a first copy goes to re-render. After re-rendering the first copy compares to the second copy. And isolate the change. Finally, update the only change section on real DOM.

Functions vs classes

React only use the arrow function. By this function react Everything works. Without Function react doesn’t complete his work. The component created the Arrow function. by that function react Complete his work start to finish.

import React from 'react';const component= () => {return (
<div>
<h1> Hello Lorem</h1>
</div>
);};
export default component;