At last I am learning React: Day 1

#webdev #javascript #beginners #react

It is strange that after all these years I still haven't learned React. 😞 😓

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! 😅

I have started learning React a few times before but then couldn't keep up. 😒 😭 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 playlist in youtube. This is in Bangla tutorial from
Learn with Sumit - LWS - Bangladesh. I love the contents of this tutorial. This is better than paid courses. And whatever I will learn each day I will post here.

So, why React? 😒

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? 😒

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.

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. 😌

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. 😌

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

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

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.

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.

We can define which type of element we want to create. We added div.
Data to pass inside that element. We passed null;
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.

We can see that Browser actually parses the Web page then by createElement creates DOM. 😲

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

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. 😍

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