React Basics | What is happening behind the scene?

In this blog, you will be learning very basics concepts about React. Topics that will be covered in this blog are below:

1. Pre-Requisites
2. What exactly React is?
3. How React Works Behind the Scene?

Pre Requisites before Learning React

Every framework comes with its own pre-requisites. React comes with its pre-requisites as well. Below I have mentioned the pre-requisites of React before starting React Journey.

1. HTML
2. CSS
3. JavaScript (ES6)

Now the question is why the hell do we need to learn all pre-requisites? So, the answer is simple. React is a framework of JavaScript. This means it is a library of javascript code that helps us to develop web apps easily with high performance. So a framework is just a library of a specific language. You need to learn its core language to know more about the framework. HTML and CSS are building blocks of developing any website. Learning HTML and CSS is a must.

What exactly React is?

So React is a framework of javascript which allows us to develop websites with higher performance and well structure code. Now how it helps websites to perform better than using conventional development tools?. In React there is a library known as React DOM. You must have heard about JavaScript DOM, the concept in react is the same but with different functions. So let me explain what does React DOM does.

React DOM:
So before React DOM, when we had to switch to a new page, or we have to change a specific area of the website, we had reload the entire page to make changes, which was taking much reloading time lowering the website performance. So then React DOM comes in handy for dealing with this problem. Now, using ReactDOM, we don’t need to reload the entire page for changing a single component. For example, we have to show the new latest news on the page, React DOM will help us to change the specific component instead of the entire page and the website doesn’t need to be reloaded.

How React Works Behind the Scene?

Before jumping straight into React coding let me clear what are the things required to create a react web app. Below are the things we need before starting the code.

1. React
2. React DOM
3. Babel

When we import React, React DOM, and Babel then we would be able to start coding.

Importing React and React DOM in Codepen

I have imported the React and ReactDOM in the CodePen. Now we need Babel so we can move further.

Setting Babel for our React Project

Now we have successfully imported Babel into our project. Now we can create ours react app.

Write HTML Div with Id Root

So Next I have created a Div with the Id root so we can put our code into it and show it.

Next thing is to create React Element using Javascript and Push it into our website. For that, we will be using React Object with the createElement method.

This method requires 3 parameters,

1. In the first parameter, you need to tell what element you want to create.
   For example, I want to create an H1 element.
2. In the second parameter, you need to tell if you want to put any attribute in the element you want to create, in my case I don’t want any attribute I will put Null. By putting Null, it will understand that I don’t want to put any attribute in the parameter.
3. In the third parameter, you will tell what content you want to add to it. In my case, I want to add “Hello React Basics.”

Now we need to render our element in the DOM. For that, I will be using the render method using ReactDOM.

Now ReactDOM.render requires 2 parameters

1. In the first parameter, you will tell that what element you want to render. In my case I want to render the element I have created Earlier.
2. In the second parameter, you will tell that where do you want to render the element. In my case, I will be rendered in the div which we had created earlier with the id of root.

So this is how React works behind the scenes. I hope you liked my blog. If my blog helped to increase your knowledge please clap and share it with your fellows so they can learn as well.

Follow me on LinkedIn: www.linkedin.com/in/saifswl86