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:
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.
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.
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.
Open the integrated terminal in visual studio and run the following command:
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:
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:
Once you’ve saved the file, the browser would automatically refresh displaying your first React application as shown in the below image.
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:
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!
Happy coding!
Photo by Caspar Camille Rubin on Unsplash
Umair Arshad is a curious person who enjoys contributing to the software industry.
Career advice, the latest coding trends and languages, and insights on how to land a remote job in tech, straight to your inbox.
.jpg)
