SATOHOST
No Result
View All Result
Thứ Ba, Tháng Một 26, 2021
  • Login
  • vps giá rẻ
  • cpanel nulled
  • bitcoin exchange script
  • Home 1
Subscribe
SATOHOST
  • vps giá rẻ
  • cpanel nulled
  • bitcoin exchange script
  • Home 1
No Result
View All Result
SATOHOST
No Result
View All Result
Home Blog

How to Install React JS in Windows

admin by admin
Tháng Tám 12, 2019
in Blog
6 min read
0
153
SHARES
1.9k
VIEWS
Share on FacebookShare on Twitter

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

When we are done, you will have a React environment you can use to start development on your Liquid Web server.

 

Install Node.js

The first step is to download the Node.js installer for Windows. Let’s use the latest Long Term Support (LTS) version for Windows and choose the 64-bit version, using the Windows Installer icon.

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

Now that we have Node.js installed, we can move on to the next step.

 

The Command Prompt Environment

We’ll need to use the command prompt (command line) to interact with Node.js and the Node Package Manager (NPM) to install React. Let’s take a few minutes to cover the commands we’ll need to use 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 (1), start typing the word command (2), then choose either Command Prompt or the Node.js command prompt (3) — either choice will work.

A command prompt window will open with the path showing as C:Users<username> where the <username> on your system will be the user you are logged in as.

To execute a command, we type the command and any required options, then press Enter to execute it and see the results. Let’s walk through each of the commands listed above to see what happens:

dir

Let’s look at the contents of the downloads folder with this command:

dir downloads

The path shows we are still in the directory C:UsersReactUser>, however, we are looking at the contents of C:UsersReactUserdownloads and we see that it has one file. Let’s move to the downloads directory with this command:

cd downloads

We’ve changed to the downloads folder as the command prompt shows C:UsersReactUserDownloads>. You can use the dir command to see the contents of this directory/folder. Next, let’s go back to the previous directory with this command:

cd..

Now we are back to where we started. Let’s create a new directory for our first project and name it reactproject1. We’ll use the command:

mkdir reactproject1

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

dir

If you want to learn more about commands, please check out these links:

  • https://commandwindows.com/command3.htm
  • https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/windows-commands

 

Install React on Windows

There are two ways to install React for your projects. Let’s look at each approach so that you can decide which one you prefer to use.

 Option 1 

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

This install option allows you to full control over everything that is installed and defined as dependencies.

Step 1: To get started, we need to open a command prompt.

Step 2: Create a project folder named reactproject1:

mkdir reactproject1

Press Enter to execute the command, and we get a new directory called reactproject1. If you did this as part of the Command Prompt examples, you could skip this step as it will tell you that it already exists.

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

cd reactproject1

At this point, you will see your prompt indicate C:UsersReactUserreactproject1.

Step 4: Create a package.json file, the following command will walk you through creating a package.json file.

npm init

Step 5: Install React and other modules using npm install — save react, thiswill install React into your project and update the package.json file with dependencies.

npm install --save react

We can install additional packages using npm install — save and the name of the package we want to install. Here we are installing react-dom: npm install — save react-dom

npm install --save react-dom

 

 Option 2 

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

 

 

Step 1: To get started, we need to open a command prompt and type npm install -g create-react-app. This installs the Create-React-App module which makes it very easy to create and deploy React into projects with a single command.

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

npm install -g create-react-appCreate-React-App is installed in the following location: C:Users<username>AppDataRoamingnpmnode_modulescreate-react-app

Once Create-React-App is installed, we can use it to create a project folder and install React and dependencies automatically.

To make sure you are in the desired directory when creating a new project, you can use di
r
to see where you are, and cd <directory_name> or cd.. to get to the desired location.

Step 2: To create a new project and deploy React into it, we run create-react-app <project_name>. Let’s do this to create reactproject2.

create-react-app reactproject2

The entire process is automated and begins with creating a new React app folder for the project, then 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 need to use the command prompt to change to the project folder, then start it. The cd reactproject2  command will take us to the reactproject2 folder.

cd reactproject2

And npm start will run the project application.

The default browser will open and load the project:

To learn more about React, you may find these links helpful:

  • https://www.codecademy.com/articles/how-to-create-a-react-app
  • https://www.tutorialspoint.com/reactjs/index.htm
  • https://www.techomoro.com/?s=React

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

Tags: blogDevelopmentenvironmentinstallationjavascriptlibrariesNode.jspackage managerwindows
admin

admin

Related Posts

Blog

LINUX BACKUP & RESTORE FULL OS

Tháng Mười Hai 16, 2020
Blog

VPS Ram 4GB Chỉ 199k/tháng Miễn Phí Gsuite,

Tháng Tám 29, 2020
Blog

Tài Khoản Google Drive Unlimited 2020 50k – Google Drive Không Giới Hạn – Google drive unlimited 2020

Tháng Bảy 11, 2020
Bán tài khoản MOVO CASH USA ACCOUNT (VCC+VBA)
Blog

Bán tài khoản MOVO CASH USA ACCOUNT (VCC+VBA)

Tháng Bảy 11, 2020
Blog

Hướng dẫn kích hoạt bản quyền Windows Server 2012 R2 không cần crack

Tháng Sáu 10, 2020
Hướng dẫn cài đặt và cấu hình Openstack toàn tập từ A-Z
Blog

Hướng dẫn cài đặt và cấu hình Openstack toàn tập từ A-Z

Tháng Sáu 4, 2020
Hướng dẫn Tự Tạo Ứng Dụng Họp Online Phòng Học Online Miễn Phí với Jitsi
Blog

Hướng dẫn Tự Tạo Ứng Dụng Họp Online Phòng Học Online Miễn Phí với Jitsi

Tháng Tư 13, 2020
Hướng dẫn sử dụng Remote Desktop để truy cập VPS
Blog

Hướng dẫn sử dụng Remote Desktop để truy cập VPS

Tháng Tư 12, 2020
Download Kali Linux 2020.1
Blog

Download Kali Linux 2020.1

Tháng Tư 12, 2020
vps giá rẻ
  • Trending
  • Comments
  • Latest
Hướng dẫn cài DirectAdmin Nulled mới nhất 2020

Hướng dẫn cài DirectAdmin Nulled mới nhất 2020

Tháng Sáu 10, 2020
Wowza Streaming Engine 4.7.7 Crack Linux/Windows

Wowza Streaming Engine 4.7.7 Crack Linux/Windows

Tháng Mười Một 15, 2020
Nén và giải nén trong linux centos 6 centos 7 nén zip, tar.gz và tar.bz2.

Khuyến mãi vps 50k/tháng SSD 50Gb

Tháng Sáu 15, 2019
Bán tài khoản MOVO CASH USA ACCOUNT (VCC+VBA)

Bán tài khoản MOVO CASH USA ACCOUNT (VCC+VBA)

Tháng Bảy 11, 2020

Cpanel Nulled Cpanel/whm Nulled on Centos VPS/Dedicated Servers

Tháng Mười 8, 2020
Hướng dẫn cài đặt và cấu hình Openstack toàn tập từ A-Z

Hướng dẫn cài đặt và cấu hình Openstack toàn tập từ A-Z

Tháng Sáu 4, 2020

LINUX BACKUP & RESTORE FULL OS

0

Milestones & Timeline

0

The Economics of Websites

0

The Landing Page Guide

0

The Next Big Thing

0

UX Design Is Easy

0

LINUX BACKUP & RESTORE FULL OS

Tháng Mười Hai 16, 2020

VPS Ram 4GB Chỉ 199k/tháng Miễn Phí Gsuite,

Tháng Tám 29, 2020

Tài Khoản Google Drive Unlimited 2020 50k – Google Drive Không Giới Hạn – Google drive unlimited 2020

Tháng Bảy 11, 2020
Bán tài khoản MOVO CASH USA ACCOUNT (VCC+VBA)

Bán tài khoản MOVO CASH USA ACCOUNT (VCC+VBA)

Tháng Bảy 11, 2020

Hướng dẫn kích hoạt bản quyền Windows Server 2012 R2 không cần crack

Tháng Sáu 10, 2020
Hướng dẫn cài đặt và cấu hình Openstack toàn tập từ A-Z

Hướng dẫn cài đặt và cấu hình Openstack toàn tập từ A-Z

Tháng Sáu 4, 2020
  • vps giá rẻ
  • cpanel nulled
  • bitcoin exchange script
  • Home 1
Call us: 0975757375

© 2020

No Result
View All Result
  • vps giá rẻ
  • cpanel nulled
  • bitcoin exchange script
  • Home 1

© 2020

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In