DEV Community

Cover image for Setup a new React Application
Eli Brown-Henderson
Eli Brown-Henderson

Posted on

Setup a new React Application

React is one of the most popular JavaScript libraries for creating interactive user interfaces.
It makes it easy to integrate your HTML with JavaScript by using JSX.

It is extraordinarily easy to get started using React with minimal knowledge of web-pack, or babble by using create react app. Setting up quickly allows you to get straight into learning to develop react applications, and exploring the concept of the Virtual DOM without having to worry about setting up a bunch of building tools and dependencies.

To Get started with using React, you should first make sure that you have an updated version of node on your system.

You can check your node version by using the command node -v in your terminal.
Alt Text

Once you are sure that you have a properly updated version of node, you can get started with creating your React application.

Next, you can create a new directory, then open your terminal and cd into that directory.

After you have entered the directory that you are going to create your application in, you can enter the command npx create-react-app demo

Alt Text

This will create a new directory inside of your project directory with the name demo, the demo directory contains your newly created React project.

It is useful to create the directory inside of the project directory if you would like to set up a back-end, or service directory in your project.

If you just want to create the React project directly in the directory that you created, you have to make sure that the directory has all lowercase letters and no spaces(Failure to do this will result in an error when trying to create the react project). You then enter the command npx create-react-app.

Alt Text

The ‘.’ allows the project to be created in the current directory.

All that is left is to start the project.
Cd into the new project with your terminal, and enter the command npm start

Alt Text
The react project will start and open up in your current browser.

Alt Text

Now you can get to learning more about developing react applications.

Top comments (0)