Overview of the basic program

Having created your first React application with the command create-react-app, it’s now time to build a simple React program. You’ll do this by modifying the boilerplate code, learning about the parts needed for your program along the way. You will also see some common mistakes and how you can avoid them.

First steps

We'll start by deleting some files that aren't needed for our basic application. All the files inside the src folder can be removed, except index.js. We can also delete every file in the public folder, apart from index.html.

With that done, we can open the index.js file inside the src folder and make some changes. The file should look similar to the image below:

You may have noticed that there are some errors highlighted in our code. Don't panic — we're going to fix them. We caused these errors by removing some of the files, making them impossible to import. Fortunately, it's easy to resolve this problem by deleting lines of code that aren't required, as you will see.

Imports

Our program only needs two imports:

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

Let's take a brief look at them.

The React import is the library itself. It contains all the methods and functions we require to build our application. For example, we can import the Component class if we want to build our component based on classes. Or, if our component is function-based, we can import the function useState to manage states. As we're focusing on learning how to make our first program, there's no need to worry about which one to use at this stage.

The ReactDOM import is also necessary because it contains the render() function, which allows us to render our components.

The render() function

We'll take a look at the ReactDOM.render() function next. But first, let's clean up our code by removing some unnecessary lines. This is all the code we need for now:

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

ReactDOM.render(
  document.getElementById('root')
);

Hovering your mouse over the render() function should cause a hint box to appear. This makes it clear that render() accepts three arguments:

For the time being, we will only discuss the first two, starting with the container parameter.

When opening the file index.html inside the public folder, we can see that it's an ordinary HTML document. Within the body tag we will find a div with the id root. This is the container or "root" DOM node, and the ReactDOM library will manage all elements within it:

document.getElementById('root')

So, this piece of code is simply taking the container by its id and all the elements that we pass in the first argument to the render() function will be inside this container.

Now we know the purpose of the container, we'll move on to the element parameter.

Hello, World!

An element is nothing more than an HTML tag written in the usual way, like in an HTML document.

You know the tradition, right? Your first program should display Hello, World!, or you might fall victim to the bug curse! So, our element will be a heading containing this text, defined with the h1 tag:

ReactDOM.render(
  <h1>Hello, World!</h1>,
  document.getElementById('root')
);

Now, if you run the command npm start or yarn start, the code will be compiled, and if there aren't any errors, a web page will open. If not, you can access it through the URL http://localhost:3000.

If all went well, you should see the Hello, World! message on the web page. Depending on the browser you're using, you can inspect the page and confirm that the h1 element is inside the root container:

Common mistakes

Everyone makes mistakes when learning something new, and it's no different with React. The good news is that we can learn from those mistakes. So, let's take a look at the most common errors programmers make when working with React:

• Forgetting to import the React library.

  import ReactDOM from 'react-dom';
  
  ReactDOM.render(
    <h1>Hello, World!</h1>,
    document.getElementById('root')
  );
  

• Forgetting to add a comma after the element. As we have learned, render is a function, and when we call it, we must provide it with arguments separated by a comma.

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  ReactDOM.render(
    <h1>Hello, World!</h1>
    document.getElementById('root')
  );
  

• Trying to render two elements without a container or a parent element.

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  ReactDOM.render(
    <h1>Hello, World!</h1>
    <p>My first react app</p>,
    document.getElementById('root')
  );
  

  To fix this issue, you can simply place the two elements inside a <div> or a JSX fragment, which is an empty tag <></> commonly used by React developers.

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  ReactDOM.render(
    <>
      <h1>Hello, World!</h1>
      <p>My first react app</p>
    </>,
    document.getElementById('root')
  );
  

• Forgetting to close one of the tags.

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  ReactDOM.render(
    <>
      <h1>Hello, World!</h1>
      <p>My first react app
    </>,
    document.getElementById('root')
  );
  

Conclusion

In this topic, you learned how to create your first React program and found out why each piece of code is necessary. You became familiar with the React and ReactDOM libraries and discovered why they are needed. You also learned about the render() function and the arguments it requires to render components. Finally, you saw the most common mistakes programmers make and learned how to avoid them. Now, how about putting all this into practice with some exercises?