At last I am learning React: Day 1
Tags: webdev, javascript, beginners, react
Published: 2023-05-24 10:21:44

It is strange that after all these years I still haven't learned React. :disappointed: :sweat:


I was still using vanilla JS and jQuery in my projects. Until now I am determined to work on some projects where I need to use React. At last! :sweat_smile:


![Learning React at Last!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxrbfq3ojx9fc8n8eqqz.jpg)


I have started learning React a few times before but then couldn't keep up. :unamused: :sob: But this time I will try to be consistent. I am learning from this [React JS Tutorial Bangla Series for Beginners | Think in a React way](https://www.youtube.com/watch?v=5Xy-t8k_M4A&list=PLHiZ4m8vCp9M6HVQv7a36cp8LKzyHIePr&pp=iAQB) playlist in youtube. This is in Bangla tutorial from [
Learn with Sumit - LWS - Bangladesh](https://www.youtube.com/@LearnwithSumit). I love the contents of this tutorial. This is better than paid courses. And whatever I will learn each day I will post here.


![Fingers Crossed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6xfnglbuflokpi9g8o7.jpg)


## So, why React? :unamused:


![React everywhere!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwh34ux17opofp6z48nu.jpg)


React is not a language like Javascript. It is a **library** made with **Javascript**. We create interactive UI using **React**. 


But we can create UI with Javascript or jQuery right? Like I have been doing this for years. Then why do we need React? :unamused:


Actually React is introduced to make scalable larger applications with less hassle. Let's look at this JS code below.
```
let number1 = 0;
let number2 = 0;


let button1 = document.querySelector('#button1');
let display1 = document.querySelector('#display1');
let button2 = document.querySelector('#button2');
let display2 = document.querySelector('#display2');


button1.addEventListener('click', () => {
    number1++;
    display1.textContent = number1;
});


button2.addEventListener('click', () => {
    number2++;
    display2.textContent = number2;
});
```
In this JS code I created two buttons and two display areas to implement counters. If I click the buttons the display counters will increment independently. So now imagine I want to create hundreds of elements and events using Vanilla JS. How can we manage this? It is possible but I am afraid how much time and effort it would take to make that possible.


![Exhausted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pw4t0cksdtcrkg87rm2.jpg)


So to make it possible and to make the lives of the developers easier in 2011 React was first introduced by Jordan Walke. It was named FaxJS first. It was named ReactJS in 2013 and made open source. :relieved:


**Lets see how React works to make and manage components.**
Let's first create the html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Counter</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
</body>
</html>
```
Now let's create a div inside body with the id **root**.


```
<div id="root"></div>
```
Our React application will be generated inside this `root` div. This means whatever components we create will be inside this `root` div.


Also let's not forget to include the react library scripts inside the body.
```
    <!-- Load React. -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>


```
Here we can see that we have included two scripts. One is `react` and another is `react-dom`.
Here the `react` library generates `HTML` inside the `root` div.
And the `react-dom` library renders the HTML elements which are generated by the `react` library inside the `root` div in the HTML file.
Now let's add our `script` in the `html` file.


```
<script src="./increment.js"></script>
```
By doing this we have already set up our `html` file. From now on we will not add anything extra in the `html`. We will just write the JS code in our `increment.js` file. :relieved:


Let's now open :open_file_folder: the `increment.js` file and check if we are loading the `react` and `react-dom` libraries in this file by using `console.log()`. :arrow_heading_down:


```
console.log(React);
console.log(ReactDOM);
```


![React and ReactDOM loaded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpyfhpdwsz63sx05glyb.png)
As you can see from the above image, the `React` and `ReactDOM` library are both loaded. If you are seeing the same in the `console` area then we have successfully loaded the react libraries.


![Mission accomplished](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5aja5sq8k1dis8pq8m23.jpg)


Now let's jump into creating components in React. Let's update in the `increment.js` file. First let's get the `root` div element using `querySelector` in the variable `domContainer`.
```
const domContainer = document.querySelector('#root');
```
Then we will call the render method in ReactDOM. This render method receives two parameters. In the first parameter we pass what to print and in the second parameter we pass where to print. Let's look at the below code:
```
ReactDOM.render('Hello world!', domContainer);
```
In this way text will be shown in the root div. We created an HTML element this way. Now let's add React elements to the root div using React.


React uses React.createElement method to create elements.
```
let newElement = React.createElement('div', null, 'Hello World!');
// Render inside root div
ReactDOM.render(newElement, domContainer);
```
From the createElement method we can see that it has 3 parameters.


1. We can define which type of element we want to create. We added `div`.
2. Data to pass inside that element. We passed `null`;
3. Content inside that element. We passed `Hello World!`
In the content parameter we can also pass another React element. Check the below code:


```
// Passing React content in the 3rd parameter
let pElement = React.createElement('div', null, React.createElement('p', null, 'Hello World!'));
```
We can also pass multiple React Elements.
```
// Passing Multiple React contents
let multiElement = React.createElement('div', null, [
    React.createElement('p', null, 'Hello World!'),
    React.createElement('p', null, 'New World!'),
]);
```
It's good right? But yeah maybe creating normal html was a bit easy for us.
But let's see how browser works in any webpage.


![Browser creating DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ler7r9s70u4qfbwgz5ns.png)
We can see that Browser actually parses the Web page then by createElement creates DOM. :astonished:


In the same way React also creates elements and creates a separate DOM for React. Which we call Virtual DOM. :fire:


But to make markup like `HTML` while using `React` it gives us a markup syntax. Which is called **JSX**.
Here JSX means JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. :heart_eyes:


I will try to learn about JSX tomorrow. See ya! :wave: Thanks for reading. I will try to keep my pace from now on. :bow: