React Core Concepts

Are you a React JS lover? Do you want to know about React JS ? Then you are in the right place now. Here you will learn about the core concepts of React JS. So welcome here and enjoy learning.

What is React?

Definitely, the first question that will go on your mind is this. React is an effective, and flexible JavaScript library for building user interfaces. It is a tool for building UI components. It’s not a framework, but it’s a magical solution for Facebook to handle billions of posts, millions like count, millions of comments without reloading for the web page.

Why React?

Let me explain it and clear you:

1. If you want to make your UI faster, then you go with react. Because using React you will get a fast user interface without doing much work to correctly optimize for performance.
2. It’s based on components, with simple plain JavaScript code.
3. All the power of HTML, CSS, and JavaScript together inside the component which is very effective & flexible.
4. React allow us to create reusable UI components that can be used in many web pages.
5. React applications are super easy to test.

The Virtual DOM

React use the concept of virtual DOM which helps in the performance. Virtual DOM is basically a JSON representation of the browser DOM.

How Virtual DOM work

The Virtual DOM is an abstraction of the HTML DOM. A virtual DOM object has the same properties as a real DOM object. React’s render() method generates a node tree from React components and updates it in reply to changes in the data model, caused by actions. Manipulating the DOM is slow rather than manipulating the virtual DOM which is much faster.

JSX

JSX is a technology that was introduced by React. We can write and add HTML to React by the help of JSX which is the most amazing feature. The vital contribution of JSX makes React benefit a lot.

Actually, we are not writing HTML in react we are writing JavaScript. Confused…? Ok!! Let me tell you.

JSX is a JavaScript extension that provides syntactic sugar for the React.createElement(component, props, …children) function. So we write HTML code in React, but it’s actually convert JavaScript.

Component

In React, you can say everything is component. Components are the heart and soul of React.

A Component is self-contained reusable building blocks of a web application. Components will allow you to split the UI into independent, reusable pieces. They are two types of component:

1. Functional Component
2. Class Component

Function Component

Props & State

React controls the data flow in the components using props and state.

Talking About Props:

1. In React props are equal to parameters of a pure JavaScript function.
2. Every component is treated as a pure JavaScript function and props are used to send data to those component.
3. The most powerful feature of props is that they can be passed by a parent component to its child components.

Lets move to State now:

1. State is used to store data to the React component.
2. It is mostly used to update the component when the user performed some action.
3. State is belongs to a single Component.

How Props and State work

Hooks

In React hooks are used to implementing state changes and lifecycles in functional components. To change state you can use useState() hook and implement lifecycle you can use useEffect() hook.

Hooks are similar to JavaScript functions, but you need to follow two rules when using them. Rules are:

1. You can’t call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions.
2. You can’t call Hooks from regular JavaScript functions. It’s only to be called from React functions.

Use of useState() and useEffect()

Element VS Component

An element is a plain object which describes that you want to develop on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. When an element is created, it will never be changed.

A component can be declared in different ways. It can be declared as a class with a render() method. Otherwise, in simple cases, it can be defined as a function. In both cases, it takes props as an input and returns a JSX tree as the output.

Component LifeCycle

In React, each component follows a life cycle that you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting.

Component LifeCycle

1. Lets talking about Mounting first

If you want to put element into the DOM, it’s called Mounting. In mounting, React has four built-in methods : constructor(), getDerivedStateFromProps(), render(), componentDidMount().
We usually use render(). Because it’s required most and will always be called.

2. Now moved to Updating

If there is a change in the component’s state or props then a component is updated. When a component is updated, five built-in methods are called: getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate().
We usually use render(). Because it’s required most and will always be called. Others are optional. If you need any one of them, then you can use it.

3. Let’s finished with Unmounting

When a component is being removed from the DOM, the unmounting method is called.
In unmounted, react has only one built-in method that gets called. And the method is componentWillUnmount().

Conclusion

Here I tried to explain what is React, why we should use this magical solution, the core concept of React like Virtual DOM, JSX , Component, State & props, hooks, the difference between element & component. And finally about the React lifecycle. Hope you enjoyed it.