|
1 | 1 | --- |
2 | 2 | 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. |
4 | 4 | ms.topic: install-set-up-deploy |
5 | | -ms.date: 11/25/2024 |
| 5 | +ms.date: 03/23/2026 |
6 | 6 | --- |
7 | 7 |
|
8 | 8 | # Install React directly on Windows |
9 | 9 |
|
| 10 | +This guide walks through setting up a React development environment directly on Windows using the [Vite](https://vitejs.dev/) frontend tooling. |
10 | 11 |
|
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. |
12 | 13 |
|
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). |
14 | 15 |
|
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. |
16 | 19 |
|
17 | 20 | ## Create your React app |
18 | 21 |
|
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 | + ``` |
20 | 30 |
|
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: |
24 | 32 |
|
25 | 33 | ```powershell |
26 | 34 | npm create vite@latest my-react-app -- --template react |
27 | 35 | ``` |
28 | 36 |
|
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. |
30 | 38 |
|
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: |
32 | 40 |
|
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 | + ``` |
35 | 45 |
|
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/). |
37 | 64 |
|
38 | 65 | ## Additional resources |
39 | 66 |
|
40 | 67 | - [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/) |
45 | 71 | - [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