Creating a Project
Like other web frontend libraries and frameworks, React requires
npm. Therefore, the first thing to do is make sure you have Node.js installed, and if that is the case, then you should already have
npm. You can use the following commands to check the version of each (making sure they are installed):
node -v npm -v
We can then use Create React App to create our React project. Simply run the following command in your terminal:
npx create-react-app my-first-react-app
This will download the latest version of
create-react-app automatically if it’s not already available. It takes a couple of minutes to run, and at the end, you will have a directory called my-first-react-app with a basic React project template inside it.
The output at the end (shown above) tells you about the directory that was created, and gives you a few basic commands to get started. In fact, we’ll use the last of those to fire up our web application:
cd my-first-react-app/ npm start
This will open a browser window or tab at the endpoint where the web application is running, which is
localhost:3000 by default, and you should see the example page generated by Create React App, with a spinning React logo in it:
Open the project folder using your favourite text editor (e.g. Visual Studio Code), and you can see the project structure, as well as the App.js file which represents the current page:
With the web application still running, replace the highlighted line above (or any other you prefer) with “Hello world”. When you save, the running web application will automatically reload to reflect your changes:
And that’s all! As you can see, it’s quite easy (even if perhaps time-consuming) to create a React project. It’s also easy to run it, and since the project files are being watched, the running application is reloaded every time you save, making it very fast and efficient to make quick development iterations.