How To Create React App In Windows

React.js (React) is an open-source JavaScript library useful in edifice user interfaces. React is a library so our main focus for this article is installing a JavaScript environs and a Package Manager and then that we can download and install libraries including React.

When we are done, you will take a React surroundings you can use to beginning evolution on your Liquid Web VPS server.

Install Node.js

The commencement footstep is to download the Node.js installer for Windows. Let'south utilise the latest Long Term Support (LTS) version for Windows and choose the 64-bit version, using the Windows Installer icon.

Once downloaded, nosotros run the Node.js installer (.msi fuke) and follow the steps to complete the installation.

Now that we have Node.js installed, we can motility on to the next stride.

The Command Prompt Environment

We'll demand to apply the command prompt (command line) to interact with Node.js and the Node Package Manager (NPM) to install React. Let'due south take a few minutes to cover the commands we'll need to employ to get around. Here are the basic commands we will need to get around and create folders/directories:

Open a Command Prompt in Windows

Click the Start Menu (ane), commencement typing the word command (2), then cull either Command Prompt or the Node.js control prompt (3) -- either choice will work.

A command prompt window will open with the path showing every bit C:\Users\<username> where the <username> on your organization will be the user y'all are logged in as.

To execute a command, we blazon the command and any required options, and then printing Enter to execute it and run into the results. Let's walk through each of the commands listed above to meet what happens:

Now, let's look at the contents of the downloads folder with this control:

The path shows we are still in the directory C:\Users\ReactUser>, however, we are looking at the contents of C:\Users\ReactUser\downloads, and we see that it has one file. Let's move to the downloads directory with this control:

We've changed to the downloads folder as the control prompt shows C:\Users\ReactUser\Downloads>. Yous can utilise the dir control to run into the contents of this directory/binder. Next, let's go back to the previous directory with this command:

Now we are back to where we started. Let'southward create a new directory for our outset projection and proper name it reactproject1. We'll use the control:

Again, we apply the dir command to list the files within our current folder.

Install React on Windows

At that place are 2 ways to install React for your projects. Let's look at each approach so that you can make up one's mind which i you prefer to use.

Option ane

• Create a project binder
• Change to the project folder
• Create a package.json file
• Install React and other modules you choose

This install option allows yous to total control over everything that is installed and divers equally dependencies.

Step 1: To go started, we need to open a command prompt. Hitting the Windows+R keys to open a run command box. Blazon in 'cmd' and and then hit the OK push button.

Step two: Create a projection folder named reactproject1:

Press Enter to execute the control, and we get a new directory called reactproject1. If you did this every bit part of the Command Prompt examples, you could skip this footstep as information technology will tell yous that information technology already exists.

Footstep 3:Move to the project folder, using cd reactproject1, so we can install React into it.

At this signal, you will meet your prompt point C:\Users\ReactUser\reactproject1.

Step 4: Create a packet.json file. The following controlwill walk you through creating a package.json file.

Pace 5: Install React and other modules using npm install -- relieve react, this will install React into your projection and update the package.json file with dependencies.

Nosotros can install boosted packages using npm install -- save and the proper noun of the package we desire to install. Here we are installing react-dom: npm install -- salve react-dom

            npm install --save react-dom          

Option 2

• Install Create-React-App parcel to simplify the process of creating and installing React into your projects

Step 1: To get started, we need to open a command prompt using Win+R and blazon 'cmd'. And so, type in the following control.

            npm install -g create-react-app          

This installs the Create-React-App module which makes information technology effortless to create and deploy React into projects with a single control.

            npm install -g create-react-app          

Note

When using create-react-app ensure you are in the desired directory/binder location as this command will create the project binder in the current path.

The Create-React-App module is now installed in the following location.

            C:\Users\<username>\AppData\Roaming\npm\node_modules\create-react-app\          

One time the Create-React-App module is installed, we tin use it to create a project folder and install React and dependencies automatically.

To make sure y'all are in the desired directory when creating a new project, you lot can use dir to encounter where y'all are, and cd <directory_name> or cd.. to go to the desired location.

Step two: To create a new projection and deploy React into it, we volition run the post-obit command to create reactproject2.

            create-react-app reactproject2          

The unabridged process is automatic and begins with creating a new React app binder for the project, and so installs packages and dependencies. The default packages include react, react-dom, and react-scripts. The installation will take a few minutes.

Run a React Project Application

To run our new project, we demand to apply the command prompt to change to the project folder, so start information technology. The cd reactproject2  command volition take usa to the reactproject2 folder.

The npm start command will run the project awarding.

Next, the default browser will open and load the project:

You now have your environment set up for building out projects!  If you are running our lightning fast servers, our support team is at your disposal for whatever questions you may accept.

Our support staff is always available to assist with whatever issues related to this article, 24 hours a day, 7 days a week 365 days a yr.

We are bachelor, via our ticketing systems at back up@liquidweb.com, by phone (at 800-580-4986) or via a LiveChat or whatever method you prefer. Nosotros work hard for you then you can relax.

Source: https://www.liquidweb.com/kb/install-react-js-windows/

Posted by: thomasgove1986.blogspot.com

Share this post