How to Create Your First ReactJS App: Hello World Example

Are you a beginner in ReactJS and faced difficulties when trying to create a new app using NodeJS in the Command Prompt/Terminal?

When you create a React app using NodeJS, you’ll come across numerous files and folders in the newly generated directory, which can be quite overwhelming. It’s natural to feel confused about where to start and what to do next.

If you have the same problem, then this article is specifically designed to help you navigate through these challenges and provide clarity.

In this article, we’ll explore how to build a basic React app that displays a Hello World message.

What is ReactJS?

ReactJS is a popular open-source JavaScript library for building user interfaces. It allows developers to create reusable UI components that can be easily combined to build complex and interactive web applications.

ReactJS is also known for its virtual DOM, which allows it to efficiently update and re-render only the parts of the UI that have changed. This results in faster rendering and improved performance, especially for large and complex applications.

Check if NodeJS is Installed on your System

To create a React application, ensure that your system has Node.js version 10 or higher installed. You can check whether Node.js is installed on your system by entering the following command in your command line:

> node -v
v18.15.0

Additionally, you’ll need a code editor such as VS Code to work on your project files.

You are ready to create a new React app if you have met all the above requirements.

Steps to Build a ReactJS Application

Step 1: To create your React application, use the following command. This process may take a few minutes as the necessary packages are installed.

> npx create-react-app practice

Step 2: Once the application is created, change your directory to the newly created application using the following command.

> cd practice

Step 3: Open the folder in your preferred code editor. In this example, we’re using VS Code. Once you’ve opened the folder, you should see the project structure, as shown in the screenshot below.

Step 3: Next, we’ll clean up the default files so that we can start fresh and create our React app from scratch. Navigate to the src folder and delete all the files marked red in the screenshot above, except for index.js. Once you’ve deleted these files, your folder structure should look like the below image:

Step 4: Now that we’ve cleaned up the src folder, open the index.js file and remove all its existing code. Replace it with the below code to display a simple Hello World message:

import React from "react";
import { createRoot } from "react-dom/client";

function MyApp() {
  return (
    <React.Fragment>
      <h1>Hello World!</h1>
    </React.Fragment>
  );
}

const root = createRoot(document.getElementById("root"));
root.render(<MyApp />);

Let’s break it down above code:

1. import React from "react";: This imports the React library which is used to create and manage components in the application.
2. import { createRoot } from "react-dom/client";: This imports the createRoot function from the React DOM library which is used to render the application.
3. function MyApp() {...}: This defines a functional component called MyApp which returns a JSX element.
4. <React.Fragment>...</React.Fragment>: This is a way of grouping multiple elements together in JSX. It is similar to using a <div> but doesn’t create an extra HTML element.
5. <h1>Hello World!</h1>: This is an example of a JSX element. It is similar to HTML but is used to create React components.
6. const root = createRoot(document.getElementById("root"));: This creates a root element in the HTML document with an id of “root” where the React application will be rendered.
7. root.render(<MyApp />);: This renders the MyApp component inside the root element created earlier.

Step 5: To run the application, enter the following command:

> npm start

Step 6: Open your web browser and navigate to http://localhost:3000/. You should see the following output: