Loading...
New webinar: "The Remote Job Search: My Microverse Journey" with graduate Paul Rail
Watch Now

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.

Getting Started

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.
  • Has an NPM: NPM (Node Package Manager) is probably the best package manager for this task. We will be dealing with JavaScript in this piece of programming, and to run the framework of JavaScript in the given environment, we need NPM.To use this you’ll need to install Node.js. Once you’ve downloaded Node.js, NPM is automatically installed.

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:

  • hello-world

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:

  • npm-install-create-react-app-g

After installing it, use another command as follows:

  • create-react-app<project_name>

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.

In Conclusion

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

Subscribe to our Newsletter

Get Our Insights in Your Inbox

Career advice, the latest coding trends and languages, and insights on how to land a remote job in tech, straight to your inbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.