Set Up a React Project with Create-React-App

React is a JavaScript library for building user interfaces. React lets you break down a complex UI into reusable components.

The easiest and fastest way to set up a react project is the create-react-app tool. With this method, you do not need to install Babel or Webpack.

In this tutorial, we'll focus on setting up a react project by running the simple command npx create-react-app my-app.

Prerequisite

Knowledge of React.
Knowledge of the terminal.
Browser installed on your machine.

Before we create-react-app, we need to install some useful tools. Let's get started.

Install Node.js

To install Node.js, go to nodejs.org. If you already have Node.js installed on your machine, run the command below on your terminal to confirm the version of the Node.js on your machine. You will need a version greater than or equal to 10.16.

node --version

Node package manager(npm) automatically comes with node installation. To check the version of npm on your machine, run the command below

npm --version

You will need a version of npm greater than or equal to 5.6. If you have a version below the ones listed, update Node.js and npm on your device.

Download and install a code editor

Code editor.png

You can use any code editor of your choice. If you don't have any installed, I recommend Visual Studio Code (VS Code). Go to code.visualstudio.com to download VS Code.

Run create-react-app command

If you've ever installed create-react-app globally on your device using the command npm install -g create-react-app, you have to uninstall the package. Run the command below to uninstall:

npm uninstall -g create-react-app

yarn global remove create-react-app

Now, you can run the command below in your terminal

npx create-react-app my-app

It will take a few minutes to setup and at the end, a message will be displayed similar to the one below.

npx is a package runner tool that comes with npm version 5.2.

After running the npx create-react-app my-app, a folder will appear on your device called my-app.

Open up the my-app folder with a code editor. It contains a good number of files you will need for your project.

Start the React development server

In your terminal, change the directory to the my-app folder.

cd my-app

Next, run the command below to start the development server.

npm start

After running the command, a tab will automatically open up in your browser that points to http://localhost:3000/. This tab will display a page similar to the image below.

There you have it! You've set up a react project with the create-react-app tool. Now, you can go back to your code editor and code away.

Articles by Efe