Creating a New React App

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.

check for node

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’.

navigating to folders

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

Next, type ‘npm install -g create-react-app’.

install create-react-app

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.

create new app

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

navigate to new app

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

npm start

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

default React app

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.

src files

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.