S02・V02: Hello World

Course: Section

Get Started with Modern React: Step by Step

Episode: Title

S02・V02: Hello World

Date Created: July 17th, 2019

Last Updated: 27 days ago

Objectives

We will display “Hello, World!” using pure HTML.
We will display “Hello, World!” using pure JavaScript.
We will display “Hello, World!” using React, and compare the imperative JavaScript and declarative React coding approaches.

Watch Video

Duration: 6m 35s

Pure HTML

Let’s say we want to show the text Hello, World! as a heading on a web page.

First, make sure your local development server is running in Terminal. We will start on the blank index.html page in the public/ folder. Using pure HTML, we can create a minimal web page.

public/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>React App</title>
  </head>

  <body>
    <h1>Hello, World!</h1>
  </body>
	
</html>

Save the file and see the header text Hello, World! display on our web page. This is a static web page.

Pure JavaScript

To make a web page dynamic, we need to use JavaScript to manipulate the DOM. For example, we could add a div with an id instead of the h1 element, so that we can add DOM nodes to it.

public/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>  </body>

</html>

Now, to use JavaScript on a web page, we can add a script tag at the bottom of the document’s body.

public/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>

    <script></script>
  </body>

</html>

We can refer to the div we added using the getElementById() method on the document. Now, we can create an element node for our header, using the createElement() method on the document. We also need to create a text node, using the createTextNode() method on the document. Using the appendChild() method, we can add the textNode to the headerNode. Finally, we can add the headerNode to the rootNode.

public/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>

    <script>
      const rootNode = document.getElementById("root");      const headerNode = document.createElement("h1");      const textNode = document.createTextNode("Hello, World!");      headerNode.appendChild(textNode);      rootNode.appendChild(headerNode);    </script>

  </body>

</html>

Save the file and see Hello, World! display on our page, as before.

Our build toolchain “Create React App” automatically injects any JavaScript in our src/index.js file into the body of our public/index.html page. So, we can remove the JavaScript and the script tags from our index.html file:

public/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>  </body>

</html>

And instead, add the same JavaScript code to our index.js file. As before, create the nodes first. Then, append the nodes to each other in the correct order:

src/index.js

const rootNode = document.getElementById("root");
const headerNode = document.createElement("h1");
const textNode = document.createTextNode("Hello, World!");

headerNode.appendChild(textNode);
rootNode.appendChild(headerNode);

Save the file and Hello, World! still appears.

Writing JavaScript to manipulate the DOM is very “imperative” in style. As a developer, you must write code to specify each step necessary to create nodes, and then append nodes in the correct order.

React

React makes it more simple. First, we will delete the imperative JavaScript code. We will import two packages. The first library we will import is react. The second library we will import is react-dom.

src/index.js

import React from "react";import ReactDOM from "react-dom";

As we did in our pure JavaScript code, we will target our root div node on our public/index.html page.

src/index.js

import React from "react";
import ReactDOM from "react-dom";

const rootNode = document.getElementById("root");

Next, we will use our React library to create a React-specific element that represents an h1 header with Hello, World! text. We will explain React’s createElement() method in more detail in the next video.

src/index.js

import React from "react";
import ReactDOM from "react-dom";

const rootNode = document.getElementById("root");
const element = React.createElement("h1", null, "Hello, World!");

Finally, we will use our ReactDOM library to render the element to the root node.

src/index.js

import React from "react";
import ReactDOM from "react-dom";

const rootNode = document.getElementById("root");
const element = React.createElement("h1", null, "Hello, World!");

ReactDOM.render(element, rootNode);

Save the file. As before, we can see Hello, World! in our browser.

This code can be made even simpler by rewriting the React element.

src/index.js

import React from "react";
import ReactDOM from "react-dom";

const rootNode = document.getElementById("root");
const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, rootNode);

Save the file and see that everything is unchanged in the browser.

The <h1>Hello, World!</h1> element added here is not HTML. It is “JSX”. JSX is a syntax extension to JavaScript, which enables us to write HTML-like syntax within React. Within “Create React App”, a library called “Babel” compiles JSX to regular JavaScript code.

You can see that React is “declarative” in style. As a developer, instead of creating the header and text nodes, and then appending them to the root node explicitly, you create the header and its text using React’s createElement() method, or using JSX, and let ReactDOM render them within the root div of the HTML page. In other words, we as developers ‘declare’ what we want to have show on the page, and React takes care of rendering it.

Summary

We showed Hello, World! on a web page using pure HTML, pure JavaScript, manipulating the DOM imperatively, and using React, which uses a declarative style.

Next Up…

In the next video, we will look at React’s createElement() method in more detail.

Get Started with Modern React: Step by Step