React: 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 the 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)):

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

Image description

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

We just explored the process of creating a "Hello World!" React app using just a single HTML page. Now, we will delve into the separation of our JavaScript code from our HTML page and learn how to create reusable components.

This is the code we have till now:

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

Now, let's first move our JS code to a separate file called app.js and include it in our HTML page using a script tag.

<!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 src="./app.js"></script>
  </body>
</html>

// app.js
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));

If we run this project now, the output will remain the same.

Let's create our first component:

// app.js

const Student = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "John"),
    React.createElement("h2", {}, "Male"),
    React.createElement("h3", {}, "21"),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Hello World!"),
    React.createElement(Student),
  ]);
};

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

Here we have created a component called Student which uses React.createElement to create a DOM structure with a parent "div" element and three child elements ("h1," "h2," and "h3"). When this component is rendered, it will produce the following HTML structure:

<div>
  <h1>John</h1>
  <h2>Male</h2>
  <h3>21</h3>
</div>

The output would be something like this:

output

Now that we have a component, we can utilize it multiple times by simply calling it.

// app.js

const Student = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "John"),
    React.createElement("h2", {}, "Male"),
    React.createElement("h3", {}, "21"),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Hello World!"),
    React.createElement(Student),
    React.createElement(Student),
  ]);
};

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

And the output would be.

output

Here, we can see that it doesn't make any sense to use the component twice, as it gives the same output. That's because, until now, we have been using static data only.

Let's make this component dynamic using props:

// app.js

const Student = (props) => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h2", {}, props.gender),
    React.createElement("h3", {}, props.age),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Hello World!"),
    React.createElement(Student, { name: "John", gender: "Male", age: 21 }),
    React.createElement(Student, { name: "Mary", gender: "Female", age: 20 }),
  ]);
};

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

Here, we have used props to pass some dynamic data to the component, and then we are using them accordingly. Let's see the output.

output

As a result, we've successfully separated our JavaScript code from the HTML, created components, and gained a deeper understanding of how React operates.

React: Behind the Scenes

Comments (1)

More from this blog

Exploring Data Visualization with D3.js and Nivo

Generics in Typescript

Taming the Bugs: Mobile App Testing Strategies

Data Behind the Data - How Metadata Drives Digital Intelligence

Understanding Virtual DOM 🆚 Real DOM in React

Command Palette

Comments (1)

More from this blog