React is a modern JavaScript library for building UI components. In this article, we will go through the steps needed to set up and run a React project. While there is much to be said about React, we will not really delve into theory here as the intention is to get up and running quickly.
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.
You are probably still wondering what React is, what you can do with it, and how/why there is markup within JavaScript! Those, my friend, are topics for another day. 🙂
2 thoughts on “Getting Started with React”