DEV Community

Ahmad Jamaly Rabib
Ahmad Jamaly Rabib

Posted on • Updated on

At last I am learning React: Day 1

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! πŸ˜…

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

Fingers Crossed

So, why React? πŸ˜’

React everywhere!

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;
});
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

Now let's create a div inside body with the id root.

<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

React and ReactDOM loaded
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

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');
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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!'));
Enter fullscreen mode Exit fullscreen mode

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!'),
]);
Enter fullscreen mode Exit fullscreen mode

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
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. πŸ™‡

Top comments (6)

Collapse
 
rachelfazio profile image
Rachel Fazio

The GIFs in this post make it super enjoyable, great read!

Collapse
 
rabibsust profile image
Ahmad Jamaly Rabib

Thank you 😊

Collapse
 
vulcanwm profile image
Medea

good luck with your react journey! great work so far

Collapse
 
rabibsust profile image
Ahmad Jamaly Rabib

Thank you 😊

Collapse
 
rantdev profile image
Shahriar Hasan Emon

I am from Bangladesh too brother, for me Scrimba free React course was the best to learn React basics.

Collapse
 
rabibsust profile image
Ahmad Jamaly Rabib

Thank you brother for sharing your experience. I will try to check that.