React: Behind the Scenes Part 1

#javascript #react #beginners #webdev

Hey All 👋🏻👋🏻👋🏻

It's been a long time since I've written something, life's been busy but I will try to write more moving forward. Today we will talk about how react works behind the scenes.

Generally, when we start writing a react code we start with a create-react-app setup and write our code in a JSX file but today we will use just a single HTML file.

We will start with setting up a project and creating one HTML file called index.html with starter code:-



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React BTS</title>
</head>
<body>

</body>
</html>

Let's add a root div where we will render our react app. Also, we will add two script tags which are basically used to include react library and react-dom. Then, we will add one empty script tag where we will write our code.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React BTS</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>

    </script>
  </body>
</html>

First script tag is used to include the React library in our web page.

Second script tag is used to include ReactDOM, which used for integrating React with the DOM (Document Object Model). ReactDOM is used for rendering React components into the actual HTML DOM.

Now let's add our react code, we will add a very simple h1 with a text Hello World! :-



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React BTS</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      const App = () => {
        return React.createElement(
          "div",
          {},
          React.createElement("h1", {}, "Hello World!")
        );
      };

      const container = document.getElementById("root");
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));
    </script>
  </body>
</html>

Let's break this code :

const App = () => { ... }:

This code defines a React functional component called App. Functional components are a way to define React components using JavaScript functions.
Inside the component, there is a return statement that uses the React.createElement function to create a virtual DOM element. Here, it creates a div element containing an h1 element with the text "Hello World!"

const container = document.getElementById("root"):

Here we have fetched an HTML element with the id "root" using document.getElementById. This element will serve as the container in which the React application will be rendered.

const root = ReactDOM.createRoot(container):

This creates a React Root using ReactDOM.createRoot(). A React Root is a new rendering API introduced in React 18 to enable concurrent rendering.
The container element we obtained earlier is passed as an argument to createRoot(), indicating that this is where the React application will be rendered.

root.render(React.createElement(App)):

Last line of code renders the App component into the specified container using the React Root's render method.
React.createElement(App) creates an instance of the App component, and the root.render() method renders it into the container.

Let's run this code and see the output: -

You can see we have created our Hello world react app with just few lines of code. At the end of the day all the JSX code we write is transformed into the React.createElement() calls by transpilers like Babel before it's executed by a JavaScript engine.

Thanks for reading :)