# Using Vite to create a new React app

> Learn how to create a new React app with Vite instead of create-react-app, running npm create vite@latest, picking React, then npm install and npm run dev.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-01-08 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/vite-react-app/

When I need multiple different pages and create a [React](https://flaviocopes.com/book/react/) app that needs a backend, my go-to framework is [Next.js](https://flaviocopes.com/book/next/).

It provides a lot of things built-in, it’s very popular, and its set of conventions avoids me a lot of analysis paralysis and decision making.

But sometimes I just want to create a [React](https://flaviocopes.com/react/) app, maybe for a demo or to start a project, and I don’t need all the other stuff that [Next.js](https://flaviocopes.com/nextjs/) gives me.

I don’t want to worry, I just want to freely experiment with React.

I used to use [create-react-app](https://flaviocopes.com/react-create-react-app/) but these days I use [Vite](https://vitejs.dev/).

It’s a modern tool that provides a development server, is very fast, and many people in the JS community consider it optimal.

Also, it’s not a React-specific tool, so anything you learn about it can be ported to other frameworks supported like [Svelte](https://flaviocopes.com/book/svelte/) [Vue](https://flaviocopes.com/tags/vue/) and more.

To create a project using Vite you first go into the folder where you host all your projects, in my case it’s a `dev` folder in my user’s home folder.

Then run `npm create vite@latest`

![Untitled](https://flaviocopes.com/images/vite-react-app/Untitled.png)

Choose a name for the project. That will also be the project’s folder name. In this case “test”:

![Untitled](https://flaviocopes.com/images/vite-react-app/Untitled%201.png)

Now you can choose a framework. Pick “React”.

![Untitled](https://flaviocopes.com/images/vite-react-app/Untitled%202.png)

Pick [JavaScript](https://flaviocopes.com/book/js/) or [TypeScript](https://flaviocopes.com/typescript/), whatever you prefer. You can optionally use [SWC](https://swc.rs).

![Untitled](https://flaviocopes.com/images/vite-react-app/Untitled%203.png)

Done!

![Untitled](https://flaviocopes.com/images/vite-react-app/Untitled%204.png)

Now go in the newly created project folder:

```jsx
cd test
```

and run

```jsx
npm install
```

to install the dependencies, followed by

```jsx
npm run dev
```

to start the application:

![Untitled](https://flaviocopes.com/images/vite-react-app/Untitled%205.png)

The application should be running at [http://localhost:5173](http://localhost:5173/) (the port might be different if it’s already used)

![Untitled](https://flaviocopes.com/images/vite-react-app/Untitled%206.png)

Now you're ready to work on this application!

Here’s the application folder opened in [VS Code](https://flaviocopes.com/vscode/).

As you can see, Vite created a basic application and you can now open `src/App.jsx` to start working on it.

![Untitled](https://flaviocopes.com/images/vite-react-app/Untitled%207.png)

The beauty of a tool like this is that now you can add files and Vite will automatically recognize them, without the need of restarting `npm run dev` like we had to do with our [Node.js](https://flaviocopes.com/nodejs/) projects.

And when you save a component, it’s automatically updated in your browser.

It makes development very fast and fun!