How React Works

Back to: ReactJS Tutorials

How React Works?

In this article, I am going to discuss How React Works. Please read our previous article where we discussed Introduction to JSX. In our previous article, we learned about JSX and all other stuff. Let’s now see those things in code.

Here, we have JSX code in the App function. And we have this code here because, with React, we ultimately built our own custom HTML elements as you learned. We built those components and a component is basically just a custom HTML element. And we do that with the declarative approach. As we mentioned, declarative means with React, we defined the desired target state and React is then responsible for generating and running the actual DOM instructions which update what’s visible on the screen.

The above code is our desired target state. We want to render a div with an h2 tag with some text inside of it, on our screen. Because in index.js, we rendered as an App component, this custom <App /> HTML element, and inside of this custom element, which turns out just to be a function, inside of that, we in the end just return the above HTML code (inside div tag). So therefore ultimately, this HTML code is rendered on the screen.

Now let’s tweak this code a little bit. Here, in App.js, in the App function, in the returned HTML block here, let’s add a paragraph,

<p>We want to learn React </p>

If you add the above statement after <h2> tag and save this file, the output will be,

If the development server is running, which you should, it’ll automatically pick up this change. It’ll notice when this file changes, and it will automatically update what you see on the page. And therefore, we now also see the text here. So that’s how we can work with that.

Now keep in mind, in regular JavaScript, you would kind of select the element on the page for example, with document.getElementByID(‘root’) as we are doing it in index.js, but then you would not be done. If you then want to add a paragraph, you either set the inner HTML content to something,

document.getElementById(‘root’).innerHTML = ‘We want to learn React’;

or you, first of all, create a new element with the document.createElement, creating a paragraph. And you would set the textContent to “We want to learn React”.

const para = document.createElement(‘p’);

para.textContent = ‘We want to learn React’;

And then you would reach out to someplace in the DOM and then simply call the append method and add this created paragraph as,

document.getElementById(‘root’).append(para);

That is how you would do it in regular JavaScript. And this is called the imperative approach. Because you are giving clear instructions, step-by-step instructions, and what JavaScript and the browser should be doing.

Now, this works, but it can get cumbersome, or complex user interfaces with dozens or hundreds of elements, which also might be changing: appearing and disappearing all the time.

It is very cumbersome to write all these instructions. With React instead, we just define the desired end state, that we want a div, an h2 tag, and a paragraph, and React will then generate these instructions behind the scenes to bring that onto the screen. That’s how this works behind the scenes.

React embraces this concept of components. As we already mentioned, we do have our first component in index.js, <App />. So, the App function in App.js is a component that is used like a custom HTML element here in index.js.

In the next article, we will build our first custom component in the context of the expense tracker that we already discussed in our previous articles. Here, in this article, I try to explain How React Works with Examples. I hope you enjoy this How React Works article.