DEV Community

Cover image for Creating a New React App
Laura Todd
Laura Todd

Posted on • Edited on

Creating a New React App

In this post, I'll be taking you through a simple way to set up a new React App.

First, you'll need to install Node.js. If you're not sure if you have it you can check using Command Prompt or Terminal.

If you've never use the Command Prompt or Terminal before, it is an application which will already be installed on your computer. To find it on a PC, go to the start menu and begin typing 'Command Prompt' - it will display in the menu. To find it on a Mac, go to Spotlight and begin typing 'Terminal' - the icon will display.

To check if you have Node.js type 'node -v' in the terminal and press enter.

Alt Text

If Node is already installed on your machine, the version will be displayed in the line below.

If you don't have Node installed, you can download it from here. Download and install the LTS version. Once you have Node installed, you can create a new app using npm.Back in the Terminal, navigate to the folder in which you want to create your app. If you've not done this in the Terminal before, preface the path with 'cd'. For example, if I wanted to navigate to a folder called GitHub in my Documents folder, I would type 'cd documents/GitHub'.

Alt Text

This will take me to 'C:/Users/laura/Documents/Github.

Next, type 'npm install -g create-react-app'.

Alt Text

Then, type 'create-react-app my-app'. The 'my-app' part of this command is the name of your app so you can call it whatever you like. Press enter, this may take a couple of minutes while npm creates the files.

Alt Text

Navigate to your new app by typing 'cd my-app' (or whatever you've called your app).

Alt Text

Enter 'npm start'. This will open your app in a local server.

Alt Text

To begin with, it will display the default React App which will look something like this -

Alt Text

Open up the folder holding your app files either in file explorer or in your Text Editor. Go to the 'src' folder - you can delete all of the files in this folder.

Alt Text

In the public folder, you will find an 'index.html' file. You can either keep this file or replace it with your own but it is set up with a root div and has some useful meta tags already set up so I tend to keep it.

You can then create new a new index.js file in the 'src' folder and begin building your app from there.

Top comments (1)

Collapse
 
projektorius96 profile image
LG

I am quite profound into React , but I will give a thumb cause I am not a garbage truck which means I try to appreciate people time writing tutorials like this : spick & span . Carry on !