If you're not familiar with how to set up a React app from scratch it can be pretty difficult, especially since there aren’t yet tutorials on the topic. However, after reading this article, you should be able to thoroughly understand how to run React.js projects in localhost.
Before you get started, there are some prior conditions or prerequisites required by your system. Make sure that your system:
- Has a good installer: In the process, you will be downloading multiple software packages, so in order to have a fluent and hassle-free process, you need a decent installer or a package manager.
Installing NPM and Nord.js:
- Go to this link Node.js
- Download the current latest features version - not the LTS version
- While installing Node.js, install NPM with it too
Why Install Node.js?
While installing Node.js, in the customs settings options you will see an option for NPM package manager. As noted by its name Node Package Manager (NPM) is basically an additional feature that you get with Node.js along with its useful features.
You can’t have the Node Package Manager (NPM) separately without installing the Node.js, so you need to have Node.s for this task.
Install a Text Editor
You also need to have a text editor. You aren’t bound to a specific editor, however I recommend you choose the text editor by Visual Studio also called the VS Code or the Visual Studio Code. It can be easily downloaded from Visual Studio’s website here.
Using Create React App: The NPX method
This method is called the NPX method, the general form of a NPX command that has to be used is as follows: npx create-react-app<project_name>
To make a new Create application, we use the Create React App which is a command-line interface tool. The purpose of Create React App is to enable you to make, and run, the React applications without having to do any configurations. With the Create React App, all you need to do is run a simple command and your desired React project has been made.
Follow these steps:
Open the integrated terminal in visual studio and run the following command:
- npx create-react-app hello-world
Here we chose “hello world” as the name of our project. You can choose whatever you like.
After running this command successfully, you should be able to see an application folder created with the name you chose.
Now to run this app, you’ll need to initially need to navigate within the folder containing the project. This can be done by the following command:
After this, use another command:
- yarn start
Once you’ve applied this command, it will lead you to your web browser where you would be able to see http://localhost:3000/ running with your application.
Instructions will soon pop up, as shown in the below image:
Now go back to your Visual Studio:
- Click on the arrow icon next to the “hello world” folder to see further options by expanding it
- From there expand the source folder by clicking on the arrow next to “src”
- From the displayed options open “ App.js”
- Edit the text by changing it to Hello Word
- Save your work in the file
Once you’ve saved the file, the browser would automatically refresh displaying your first React application as shown in the below image.
Using the NPM Method
There is an alternate method which is known as the NPM method. To do this, you will have to create the React app globally. After doing this, you can use the package to create projects or apps.
Install the package globally by using the following command:
After installing it, use another command as follows:
Why do we use the NPX approach rather than the NPM method?
The NPX approach makes completing your task easier and hassle-free as you don’t need to install the package globally. With the NPM method, you need to install it globally and constantly update the Create app package.
Hopefully, now you have a much better understanding of this process. Running a JS project in localhost should no longer seem difficult. In fact, all you need is to install the prerequisites in your system, learn basic concepts and a few commands, and implement those commands in the right way, as outlined in this article. Then you should be able to run React,js projects in localhost with no problems!