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:

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:

Function Component

Props & State

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

Talking About Props:

Lets move to State now:

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:

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

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.

Front End Developer | MERN Stack Developer | JavaScript & React Enthusiast | Network Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store