Skip to main content

Hello World App Using React Without JSX

· 3 min read
Joby Joseph
Joby Joseph

React is a JavaScript library which can be easily added to any project. If you have worked with jQuery, you know how easy it is to add a jQuery file reference in your web page and start using it. In a similar manner, it is very easy to work with React also.

We are going to create a single HTML file that creates a UI interface using React.

Project Setup​

Create a folder hello-world-app. Inside the folder, create an index.html file which is going to contain all our code. Fill the html file with following boilerplate code.

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

So far nothing special. Next we will add reference to React library.

React Library Reference​

In order for React library to run, we need to add reference to two JavaScript files. One is react.js and other one is react-dom.js.

In the <head> section add following two lines.

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

The first file react.development.js contains code to create React components. You can visualize a component as portion of UI.

The second file react-dom.development.js does the efficient work to render the component in the browser.

Creating First Component​

Ideally in a real project, we write component creation code in a separate JavaScript file. Here we are going to write the first component code inside a <script> block.

Just above the closing </body> tag, add the following code inside a <script> tag.

const MyComponent = React.createElement("h1", null, "Hello World!");

Let us understand what happened here. When react.development.js file is added to our page, it adds a React object globally. React object contains a method createElement() which is used to create a component. Our code created a component which will render following html in browser when rendered.

<h1>Hello World!</h1>

Rendering in Browser​

In the previous section, we only create a component. But we did not render it in browser. In order to render the component, we need to first set a placeholder in our html page. For that, we are adding a <div> tag with id myComponent inside <body>.

<body>
  <div id="myComponent"></div>
  ...
</body>

Now we need to tell React to render the component inside the div we just created. As mentioned earlier, rendering job is done by react-dom.development.js file. When this file is added to a page, it creates a global object called ReactDOM. This object contains a render() method which places the component inside our div block.

In our <script> block, after creating component, add following line.

ReactDOM.render(MyComponent, document.getElementById("myComponent"));

The render() method accepts two arguments. First one is the component to be rendered and the second is the DOM node where the component needs to be placed.

Complete code​

Here is the final HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World React App</title>
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
  </head>
  <body>
    <div id="myComponent"></div>

    <script>
      const MyComponent = React.createElement("h1", null, "Hello World!");
      ReactDOM.render(MyComponent, document.getElementById("myComponent"));
    </script>
  </body>
</html>

This HTML file when opened in a browser displays a H1 tag with "Hello World!" text.