Creating your first React application

Introduction

It's time to get hands-on and create dynamic front-end applications. Today's post focuses entirely on creating a React application.

Tutorial Steps

This tutorial covers the key steps to complete the project. You might run into issues along the way; that’s why, at the end of the tutorial, I’ll address some common bugs I’ve encountered myself.

Using a Framework

Before we begin, please note that I will be setting up a blank React project—meaning a project without a framework. While frameworks like Next.js can be used to build React apps and solve complex issues that arise as applications scale, in this tutorial, we’ll work with a lightweight project to get a feel for the core elements of React. This learning path is perfect for mastering the basics step-by-step.

Tutorial

1. Prerequisites

To create a React project, you first need to ensure that npm is installed on your machine.

To check this, open a terminal and run the following command:

1npm -v

If you see a version number (any number), then npm is installed:

110.5.0

If not, please follow the installation guide here.

2. Creating the React Application

At this stage of the tutorial, you are finally ready to create your first React project.

In your terminal, navigate to the directory where you want to create your project. Next, use the following command to initialize the React project:

1npx create-react-app mon-application

This command uses npx (Node Package eXecute), a tool included with Node.js starting from npm version 5.2.0. It allows you to run npm packages without installing them globally on your machine.

Next, we enter the create-react-app command, which initializes the React project.

Finally, we specify the project name; in my example, it is mon-application.

Bonus

If you are a fan of TypeScript, you can use the following command to create a React project using that technology:

1npx create-react-app mon-application --template typescript

3. Project details

Great, the project exists. Let's explore its contents.

Navigate to your application's directory:

1cd mon-application

You will find several directories and files.

Basic React application structure

Here is the structure of a React project:

• node_modules/: This directory contains all the dependencies and modules required for your application.

• public/: This directory contains your application's static files, such as index.html, which is the entry point for your React application.

• src/: This is where you will write most of the code. This directory generally contains:

• index.js: The main file that mounts your React application to the DOM.

• App.js: The main component of your application.

• styles/: A directory for your CSS files.

• package.json: Contains information about your project and the necessary dependencies.

• .gitignore: This file specifies which files or directories should be ignored by Git.

• README.md: A documentation file for your project. ### 4. Starting the application

Now, all that remains is to launch the project using the command:

1npm start

Open your web browser and navigate to http://localhost:3000

You should see the following result:

5. Installing packages

You can also install packages that you use or find interesting.

Personally, I like the GSAP library, which makes it easy to create smooth animations; to install it, I could simply run:

1npm install gsap

Make sure to check the documentation for the desired package before installing it.

6. Troubleshooting common bugs

While experimenting, I encountered an issue that prevented me from launching my React application:

1- failed to compile -/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals'

After a quick online search, I identified the problem: it was simply a missing module.

To fix this, just run the following command:

1npm i web-vitals --save-dev

Conclusion

That’s all for today. Now that we have our React project set up, we can finally start diving deeper into React next week.

Sources

1. Create a new React project
2. How to create a new React project without using additional frameworks?
3. React JS npm start shows failed to compile web-vitals