Skip to content

Commit e55b330

Browse files
Fix react-on-windows: remove dead links, fix step numbering, fix CRA reference, add prereqs
1 parent bc61269 commit e55b330

1 file changed

Lines changed: 45 additions & 21 deletions

File tree

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,72 @@
11
---
22
title: Install React on Windows
3-
description: Install a React development environment on Windows.
3+
description: Install a React development environment directly on Windows using Vite and Node.js.
44
ms.topic: install-set-up-deploy
5-
ms.date: 11/25/2024
5+
ms.date: 03/23/2026
66
---
77

88
# Install React directly on Windows
99

10+
This guide walks through setting up a React development environment directly on Windows using the [Vite](https://vitejs.dev/) frontend tooling.
1011

11-
This guide will walk through installing React directly on Windows using the [vite](https://vitejs.dev/) frontend tooling.
12+
We recommend these instructions if you are new to React or building a project that does not need a Linux environment. If you plan to use Bash tooling extensively or deploy to a Linux server, consider [installing React on WSL](./react-on-wsl.md) instead.
1213

13-
We recommend following these instructions if you are new to React and just interested in learning. If you are creating a single-page app (SPA) that you would like to use Bash commands or tools with and/or plan to deploy to a Linux server, we recommend that you [install with vite on Windows Subsystem for Linux (WSL)](./react-on-wsl.md).
14+
For background on React and the different scenarios — web apps, mobile apps (React Native), and native desktop apps (React Native for Desktop) — see the [React overview](./react-overview.md).
1415

15-
For more general information about React, deciding between React (web apps), React Native (mobile apps), and React Native for Desktop (desktop apps), see the [React overview](./react-overview.md).
16+
## Prerequisites
17+
18+
- **[Node.js](./nodejs-on-windows.md)**: Required to run Vite and npm. Install using nvm-windows for easy version management.
1619

1720
## Create your React app
1821

19-
To install Create React App:
22+
1. Open a terminal (Windows Command Prompt or PowerShell).
23+
24+
2. Create a new project folder and enter it:
25+
26+
```powershell
27+
mkdir ReactProjects
28+
cd ReactProjects
29+
```
2030
21-
1. Open a terminal(Windows Command Prompt or PowerShell).
22-
2. Create a new project folder: `mkdir ReactProjects` and enter that directory: `cd ReactProjects`.
23-
3. Install React using vite :
31+
3. Create a new React app using Vite:
2432
2533
```powershell
2634
npm create vite@latest my-react-app -- --template react
2735
```
2836
29-
4. Once installed, change directories into your new app ("my-react-app" or whatever you've chosen to call it): `cd my-react-app`, install the dependencies: `npm install` and then start your local development server: `npm run dev`
37+
Vite will scaffold a new React project in the `my-react-app` folder.
3038
31-
This command will start up the Node.js server and launch a new browser window displaying your app. You can use **Ctrl + c** to stop running the React app in your command line.
39+
4. Navigate into the new app folder and install dependencies:
3240
33-
> [!NOTE]
34-
> Vite includes a frontend build pipeline using [Babel](https://babeljs.io/), [esbuild](https://esbuild.github.io/) and [Rollup](https://rollupjs.org/), but doesn't handle backend logic or databases. If you are seeking to build a server-rendered website with React that uses a Node.js backend, we recommend [installing Next.js](./nextjs-on-wsl.md), rather than this Vite installation, which is intended more for single-page apps(SPAs). You also may want to consider [installing Gatsby](./gatsby-on-wsl.md) if you want to build a static content-oriented website.
41+
```powershell
42+
cd my-react-app
43+
npm install
44+
```
3545
36-
6. When you're ready to deploy your web app to production, running `npm run build` to create a build of your app in the "dist" folder. You can learn more in the [Deploying a Static Site](https://vitejs.dev/guide/static-deploy.html).
46+
5. Start the local development server:
47+
48+
```powershell
49+
npm run dev
50+
```
51+
52+
Your app will be available at `http://localhost:5173`. Use **Ctrl+C** to stop the server.
53+
54+
6. When you are ready to deploy, build a production bundle:
55+
56+
```powershell
57+
npm run build
58+
```
59+
60+
Output is placed in the `dist` folder. See [Deploying a Static Site](https://vitejs.dev/guide/static-deploy.html) for hosting options.
61+
62+
> [!NOTE]
63+
> Vite is ideal for single-page apps (SPAs). If you need server-side rendering or a Node.js backend, consider [Next.js](https://nextjs.org/docs) instead. For static site generation, see [Gatsby](https://www.gatsbyjs.com/docs/).
3764
3865
## Additional resources
3966
4067
- [React docs](https://react.dev)
41-
- [Vite](https://vitejs.dev/)
42-
- [Install Next.js](./nextjs-on-wsl.md)
43-
- [Install Gatsby](./gatsby-on-wsl.md)
44-
- [Install React Native for Desktop](https://microsoft.github.io/react-native-windows/docs/getting-started)
68+
- [Vite docs](https://vitejs.dev/)
69+
- [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)
70+
- [React learning path on Microsoft Learn](/training/paths/react/)
4571
- [Install NodeJS on Windows](./nodejs-on-windows.md)
46-
- [Install NodeJS on WSL](./nodejs-on-wsl.md)
47-
- Try the tutorial: [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)
48-
- Try the [React learning path](/training/paths/react/)
72+
- [React Native for Desktop (UWP/WPF)](https://microsoft.github.io/react-native-windows/docs/getting-started)

0 commit comments

Comments
 (0)