Training
Learning path
Creating your first web apps with React - Training
Get started with your first React project using JavaScript, create custom components, and manage state and events.
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
This guide will walk through installing React on a Linux distribution (ie. Ubuntu) running on the Windows Subsystem for Linux (WSL) using the vite frontend tooling.
We recommend following these instructions 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 or use Docker containers. If you are brand new to React and just interested in learning, you may want to consider installing with vite directly on Windows.
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.
wsl -l -v
Important
Installing a Linux distribution with WSL will create a directory for storing files: \\wsl\Ubuntu-20.04
(substitute Ubuntu-20.04 with whatever Linux distribution you're using). To open this directory in Windows File Explorer, open your WSL command line, select your home directory using cd ~
, then enter the command explorer.exe .
Be careful not to install NodeJS or store files that you will be working with on the mounted C drive (/mnt/c/Users/yourname$
). Doing so will significantly slow down your install and build times.
To install the full React toolchain on WSL, we recommend using vite.
Open a WSL command line (ie. Ubuntu).
Create a new project folder: mkdir ReactProjects
and enter that directory: cd ReactProjects
.
Install React using vite :
npm create vite@latest my-react-app -- --template react
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
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.
Note
Vite includes a frontend build pipeline using Babel, esbuild and Rollup, 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, rather than this Vite installation, which is intended more for single-page apps(SPAs). You also may want to consider installing Gatsby if you want to build a static content-oriented website.
npm run build
to create a build of your app in the "dist" folder. You can learn more in the Deploying a Static Site.Windows developer feedback
Windows developer is an open source project. Select a link to provide feedback:
Training
Learning path
Creating your first web apps with React - Training
Get started with your first React project using JavaScript, create custom components, and manage state and events.