Why React? - Yusef Habib

React Basics is a series of posts on why there is a need for JavaScript, front-end frameworks, and especially React

Note: Feel free to follow along by copy/pasting and running the examples locally or in a service like CodeSandBox.

Why do we need anything in the first place?

We could write HTML code and be happy with it, right?

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>The time is: 12:24</p>
  </body>
</html>

But from this snippet, we can already spot the limitations of not having a programming language to help us handle dynamic data, like the time.

HTML and CSS are powerful tools to display data appealingly, but they don't like logic, so we need a programming language, one like JavaScript.

Now we can make our website dynamic by using JavaScript to calculate the current time when the user lands on our website.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>The time is:</p>
 
    <script type="module">
      const p = document.querySelector('p');
      const date = new Date();
      const currentTime = `${date.getHours()}:${date.getMinutes()}`;
      p.innerText = `The time is: ${currentTime}`;
    </script>
  </body>
</html>

In the code above, we are doing three things:

Getting a reference to the HTML element that we want to change
Calculating the current time
Changing the content of the HTML element to the one we calculated in the previous step

We have solved our initial problem, but we might feel that something is wrong or at least weird. This feeling comes from the imaginary division we have just created for our content. Some content is written in the HTML file, but some others in the JavaScript one.

Front-end frameworks to the rescue!! In the following example, we can see how we treat everything in the same way, removing the previously created division and handling all the content together.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
 
  <body>
    <div id="root"></div>
 
    <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
 
    <script type="text/babel">
      const date = new Date();
      const currentTime = `${date.getHours()}:${date.getMinutes()}`;
      const content = (
        <div>
          <h1>Hello World</h1>
          <p>The time is: {currentTime}</p>
        </div>
      );
      ReactDOM.render(content, document.getElementById('root'));
    </script>
  </body>
</html>

Some comments regarding the code above:

Now our website is "initially" empty. If it is not for JavaScript, we will not be showing anything.
We load three libraries: React, ReactDOM, and BabelJS.
JavaScript now is not only in charge of calculating the current time but is also rendering the title <h1>Hello world</h1>

Bonus Points

React vs ReactDOM

Ever wonder why we need to include both React and ReactDOM libraries?

React is the main library. We use it to define and create elements, to attach event listeners, lifecycle events, hooks.... 99% of the things you used, and you've learned come from the React library.

While ReactDOM works more as the glue between the library and the DOM. This split allowed the React team to be able to target other environments like a mobile with react-native. We usually only call ReactDOM once, and it is at the top of our application to mount it into the #root element with ReactDOM.render().

You can read the original post from the React team here.

BabelJS

We also have two more "weird" things going on in the last snippet. We load a library that we don't directly use: <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js">

And we changed the type of our script to <script type="text/babel">

If you undo these two changes, you will see that the application no longer works and the reason for this is JSX. We will take a more in-depth look into this dark magic called JSX in the next entry of this series, but for now is enough to know that without this, the browser can't process JavaScript code that contains it, like: <h1>Hello world</h1>