react-fundamentals

why we use react js?

Originally developed for Facebook, React is a JavaScript library that builds user interfaces for single-page applications by dividing UI into composable components. Since it requires only a minimal understanding of HTML and JavaScript, React has risen in popularity as a front-end web development tool.

7 Reasons why you should use React :

1. Fast Learning Curve
2. Reusable Components
3. Fast render with Virtual DOM
4. React Has Facebook’s Support/Resources
5. Flux and Redux
6. Great Developer Tools
7. React Native

React Lifecycle

Each component in React has a lifecycle that you can monitor and manipulate during its three main phases.
The three phases are Mounting, Updating, and Unmounting.

React Mounting

Mounting is the phase in which our React component mounts on the DOM. This method is called just before a component mounts on the DOM or the render method is called. After this method, the component gets mounted.

React Unmounting

React has a top-level API called unmountComponentAtNode() that removes a component from a specific container. The function unmountComponentAtNode() takes an argument as a container from which the specific component should be removed.

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.

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.

Now. ‘props’ are passed into the child component and the functional component passes the ‘props’ as an argument which in turn will be handled as an object. The property ‘title’ is accessible in the child component from the parent component.

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.

class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: “Ford”};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}

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 on DOM elements

You have to avoid spreading props into DOM elements because it adds unnecessary HTML attributes that are really bad practice in react.

Mode Flag

If you use module bundler which is webpack 4 for your React application, you can set the mode option as production. As a result, webpack use built-in optimization.

Use React Fragment

If you use React Fragment, it helps you not to use an extra node.

class Comments extends React.MyComponent{
render() {
return (
<React.Fragment>
<h1>Hello</h1>
<p>world</p>
</React.Fragment>
);
}
}