How to set up React on Windows
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 installedv16.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 directorycd app
Note:
npxis a package runner tool from the package managernpm. Installing Node.js automatically installsnpm.Running
npx create-react-appcreates 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:
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 directorycd app
To start the local environment, run the following command:
# Start the local environment on http://localhost:3000npm run dev
Go to your browser and visit http://localhost:3000 to see the following page:
Gatsby
Use the following command to create a project with Gatsby:
# Creates a Gatsby applicationnpm 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 directorycd your_app_name# Start the local environment on http://localhost:8000npm run develop
Go to your browser and visit http://localhost:8000 to see the following page:
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.