What is React and How it works ?

React is a Javascript Library for building user interfaces. Now two things are important, one is Javascript Library, another is user interfaces. Library is some collection of code, which we can reuse to make our application. By using React and some collection of code, we can make our web application, mobile, desktop application and user interface.

Whenever we talk about an application, it basically has two parts. One is the frontend (ie the user interface), the other is the backend, where all the logic resides.
The frontend is the part where the user interacts, such as browsing, clicking buttons, submitting forms, etc. Then our frontend responds to it with backend.
And the backend contains a lot of complex logic and data, such as authentication, authorization, data manipulation, etc.
But React is not concerned at all with the backend. React only works with the user interface.

Now if we talk about the web, we know that Javascript is the default programming language of the browser. But React is not a programming language, it's just a Javascript library.
That means, everything we do in React is ultimately nothing more than pure vanilla Javascript.

Well, let me ask you a question. React came in 2013 bro, so didn't we make user interface before that?
Yes, we've done this before with pure Javascript and jQuery.
Now the question is, why React came again? What would be the problem with Javascript?
To understand what problem React actually comes to solve, we need to dig a little deeper. Let's take a deep dive...!

We will see with a small application. We will create a small counter application, as you can see below, a simple HTML code with two ids named counterNumber and button.

Now take a look at the JavaScript code image, there is a simple code. I don't intend to explain this code to you. Pay attention to what I mean.

counterNumber and button are selected as DOM Elements, then the count value is incremented by 1 with addEventListener. Then the value of counterNumberEl is updated there. What is really going on here? If you look carefully, you will understand that there are basically two functions:

1. Grabbing the Elements and working with them is what we want to do.
2. Updating the UI (User Interface)

So, what's the problem here? The code is working! However, suppose you need two counter applications. What to do then?

You need to go back to that HTML and grab a new div, grab it separately with the new ids. Then the UI should be updated later.

Now, I'm only talking about two counter applications, but when there are too many interactions and complex UIs, developers will be overwhelmed. This is the main problem! You are creating functionality on one hand, and on the other hand updating the UI, which becomes very painful.

When a company like Facebook faced this huge problem, Jordan Walke, a Facebook software engineer, created React.js in 2011, inspired by PHP's Component Based Framework XHP-js. It was first implemented in Facebook's newsfeed in 2011, and in 2012 it was used in Instagram. Open sourced React.js in 2013.

Now we know why we use React. So let's do the counter application that we did with vanilla JS now using React. Then your confidence will increase that how much easier the life of developers has become after React. Let's go to the code…

First of all, I will show you how to install React for your convenience, but no one uses React in this way in our project. I am only showing it like this for the convenience of understanding so that you can understand it from the core level.

Here I just connected React with this link as they say from react.org site. Now if I go to the react.js file and write console.log(React) and console.log(ReactDOM), then we can see 2 objects in the console, that means our React is connected. Notice, there is nothing but an empty div inside the body tag, just an id called root.

In JavaScript, we can create elements in the DOM in the same way that we first worked with selectors. Similarly we can create elements in React as well. Here a div is created, inside it is printed Hello World with p tag. While this doesn't seem like a problem at the moment, when you create too many elements, life is over! Doing the same thing over and over again is a problem. That's why React created its own markup, called JSX (JavaScript XML). Although it looks like HTML, it's actually JSX.

This is how it is written in the image above. But the thing is, the browser won't understand this JSX. So to solve this problem comes our transpiler Babel, which will transpile our JSX into vanilla JS, which the browser will understand.

To connect Babel visit our website > Setup > Copy this link below the body tag of my HTML and js file we have I made type=”text/babel” there.

Now since it's JSX, we can write whatever JavaScript we want here. So let's simplify this syntax. First let's put it into a JS function.

Note here, myElement tare I just put in a function called Increment and making the Increment function like this makes it easier to write in React. Now we can write the JS here, if we had worked with the previous JS code here, it would have worked. But React says that if you want to manage state the way I do, you don't have to think about UI updates. So in React they provide a function called useState, I am showing how to use it.

This useState will serve as the state of our increment button. UseState defaults to a value, which will show the default in our state, in this case we have to give 0. The useState function basically returns us an array, which contains 2 things — one is the value we're giving, and the other is a function that updates the state value. So now we have separated the array by destructuring it.

Now if we want counter as our initial value, now after return we can give {counter} like this instead of 0. This is called interpolation. Now the value of the counter will change dynamically. And in the button onClick (since it is JSX, so it should be written following camelcase like onClick) should be called a functionality.

If I give it like this, then it is done, but there is a problem here. If I call the setCounter function like this, it will be already called, which we don't want. We want the button's value to increment when someone clicks on it. So we need to make an anonymous arrow function, then the problem will be solved.

Now if you notice that here we didn't manually update the UI by grabbing any element of the DOM, here we just told React what we want, the rest React updated the UI itself.

Now when we gave the JS example, the major problem we had with JS was — having to manually update the UI. If we wanted to use the application again, we would have to do the same thing again and again.

But React solves both these problems. We have seen how React works without manually updating the UI, now we will see how React helps us if we need to use this application in 2-3 places.

Look here, I just <> In this, I am calling the increment function 2 times, the work is done. Now the most interesting thing is that you can run 2 applications separately, which means they will manage state separately. I mean you understand, you can use it anywhere on the whole website if you want, but again different places will be different, meaning one is not related to another. This is the power of Reactjs.

Basically, you tell React what your functionality will be, and React will automatically update the UI accordingly. This is the beauty of ReactJS.

So what are we talking about React? Why do we use React? Now I fully understand what problem React came to solve. No more such questions can hold you back in the interview board. It is not an easy task to read completely with such patience, brother. You've done it, good luck to you.

Happy Coding!

The above is the detailed content of What is React and How it works ?. For more information, please follow other related articles on the PHP Chinese website!