Creating a New React App with Vite

Overview

In this lesson, you'll go through the steps necessary for creating a new React App using a tool called Vite (pronounced veet). This is the recommended way to create a new React App from scratch.

Getting Started

• cd into the directory that you want to create your app in

Creating a New React App

The primary method for creating a brand new React app from scratch is by utilizing Vite. This is the recommended approach for creating a React app from scratch ever since React stopped support for a package called create-react-app (2023).

In short, it is a tool that streamlines the process of working with React and gives us some really neat tools and built-in functionality that you would otherwise have to set up yourself. It's also extremely light-weight, certainly compared to it's predecessor (create-react-app). This makes it a great tool for new developers.

Start by creating a directory for your app to live in.

mkdir <your-app-name>

cd into it. This project will not be initialized as a git repository automatically.

If you need to initialize this project as it's own repository, run...

git init

...and then create and connect your remote repository from GitHub.

Next, set up your Vite app. Run the following command:

npm create vite@latest .

The . tells Vite that you want to create a new app in this directory. Alternatively, if you leave off the ., Vite will ask you to name your project and will create a new directory for you with that name.

First off, you'll be prompted to choose the framework you want to use. Vite can be used to scaffold all kinds of apps. Use the down arrow to choose React and press Enter.

Next, you'll need to select a variant (language & compiler) that you want your app to be created with. You want to choose either JavaScript (which is JavaScript + Babel by default) or JavaScript + SWC (which is JavaScript + Speedy Web Compiler). Both are great and light-weight, but SWC does tend to produce speedier render times (in milliseconds). Select either of those and press Enter.

Once that's done, open the created project up in VS Code with code ..

From here, you'll need to clean up a few things.

Out of the box, you get a few files and folders:

• src
  • this folder is where you'll write the majority of your code.
• public
  • you won't need to do anything in here.
• package.json
  • a file that contains a list of scripts and dependencies your project needs in order to run

In the src folder, open the provided main.jsx file. Replace with this:

import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.querySelector('#root')).render(<App />)

Next, take a look at the App.jsx and replace it with this:

import './App.css'

const App = () => {

  return (
    <>

    </>
  )
}

export default App

The <> and </> are what is known as a "React fragment". It plays the role of a parent JSX element without actually placing any elements on the DOM. This is optional and can be replaced with any desired element if you'd like.

Then, take a look at the App.css and replace it with a basic CSS reset:

body {
  margin: 0;
  box-sizing: border-box;
}

Once you've edited those files, you're ready to install all of your dependencies. When you do that, npm looks in the package.json file at the dependencies values and installs those packages. The package.json is the blueprint for your app.

To do that, run:

npm install

After this completes, to spin up your app, just run:

npm run dev

To open your app in your browser, command + click on the "Local:" URL in your terminal or just go to http://localhost:5173/.

---

Optional

.gitignore

If you want, go ahead and add package-lock.json to your .gitignore file.

The package-lock.json is just a long-form representation of your install of the dependencies from the package.json, so it isn't necessary to push up. Nothing bad will happen if you do, it just serves no purpose outside of your local environment. In some work environments, it may be recommended to push up the package-lock.json, since it is a true representation of the exact environment and package versions that the project was successfully run with. That is why this piece is 100% optional for personal projects.

Your /node_modules have already been added to the .gitignore automatically.

ESLint

Vite comes with ESLint scripts built in. ESLint statically analyzes your code to quickly find problems. These aren't entirely necessary and can also be removed.

To do so, you need to delete the eslint.config.js file from the root directory.

In the package.json, remove the following line from the scripts list:

  "lint": "eslint .",

And these lines from the devDependencies list:

  "@eslint/js": "^9.11.1",

  "eslint": "^9.11.1",
  "eslint-plugin-react": "^7.37.0",
  "eslint-plugin-react-hooks": "^5.1.0-rc.0",
  "eslint-plugin-react-refresh": "^0.4.12",

This would need to be done prior to running npm install for the changes to be reflected. If not, you can always just delete your node_modules folder and package-lock.json and then re-run npm install.

Extra Files/Folders

You can also delete several of the extra files and folders that are no longer necessary for our app. These include:

public/vite.svg - A Vite logo that you removed the reference to. Keep the public folder for any static assets you want your app to be able to use.

src/assets/ - This entire folder can be deleted. Contains a React logo that you removed the reference to.

src/index.css - An additional CSS file that you removed the reference to.

---

Recap

So that's it! That's everything you need to spin up a brand new React App with Vite! This simple tool creates light-weight and fast apps in the blink of an eye. It can even be used to create apps in other frameworks and languages.

Resources

• Vite
• React Recommends Vite