Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react
windows

How to set up React on Windows

Martin Tiangco

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

React on Windows

React is an open-source JavaScript library developed and maintained by Meta to create user interfaces for websites and applications. This guide will help you to set up React on Windows.

Installing Node.js

Firstly, download the Node.js installer for Windows on their website. The developer recommends the LTS (long-term support) version as it is maintained, offering stability. Use the installer with the default settings.

Verify the installation by opening Command Prompt or PowerShell and typing the following:

node -v # This command outputs the version of Node.js installed
v16.16.0 # An example output

Creating a React project

There are multiple toolchains you can use to create a new React project. Toolchains help with scaling to many files or components, using third-party npm libraries, live-editing in development, efficient building for production, and detecting errors. React recommends Create React App, Next.js, and Gatsby for different use cases:

  • Use Create React App to learn React or to develop a single-page app.
  • Use Next.js to develop a static or server-rendered website with Node.js.
  • Use Gatsby to develop a static content-oriented website.

The following illustrates how to set up React using these three toolchains.

Create React App

Use the following command to create a project with Create React App:

# Create React App creates a project called 'app'
npx create-react-app app
# Navigate to the newly created directory
cd app

Note: npx is a package runner tool from the package manager npm. Installing Node.js automatically installs npm.

Running npx create-react-app creates a new project with the most recent version of React.

After navigating to the directory of the project, use the following command to start the local environment on http://localhost:3000:

npm start # start the local environment on http://localhost:3000

Go to your browser and visit http://localhost:3000 to see the following page:

Create React App's local environment on http://localhost:3000.
Create React App's local environment on http://localhost:3000.

Next.js

Use the following command to create a project with Next.js:

# Creates a Next.js application called 'app'
npx create-next-app app --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
# Navigate to the newly created directory
cd app

To start the local environment, run the following command:

# Start the local environment on http://localhost:3000
npm run dev

Go to your browser and visit http://localhost:3000 to see the following page:

Next.js's local environment on http://localhost:3000.
Next.js's local environment on http://localhost:3000.

Gatsby

Use the following command to create a project with Gatsby:

# Creates a Gatsby application
npm init gatsby

You will be prompted to enter a title for your website, the project's directory name and if you want to use JavaScript or TypeScript. You will also be prompted if you want to add other features to your project.

Run the following commands to navigate to your directory and start the local environment.

# Navigate to the newly created directory
cd your_app_name
# Start the local environment on http://localhost:8000
npm run develop

Go to your browser and visit http://localhost:8000 to see the following page:

Gatsby's local environment on http://localhost:8000.
Gatsby's local environment on http://localhost:8000.

Stopping the local environments

For all toolchains, use the shortcut "ctrl + c" on the terminal to stop the local environment. The following prompt will ask to terminate the batch job:

Terminate batch job (Y/N)? # Reply 'Y' to terminate, or 'N' to keep the environment running.

RELATED TAGS

react
windows

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring