How to setup a React Project


Scaffolding a new React project was historically a convoluted multistep process that involved setting up a JavaScript build toolchain. Nowadays, there are several build tools at our disposal, so we can stop worrying about most of the complicated systems of modern front-end development and focus on writing React code.

In this guide, we will be using Vite, a lightweight build tool that let’s you start building modern web projects by providing a development server and a lightning-fast build command. The development server makes use of modern browser support for ES modules, with Hot Module replacement which will instanly load any codebase changes into the browser as well as a build command (using Rollup) preconfigured to create highly optimized code.

Vite was originally developed for Vue, but can also create React projects out of the box. By the end of this guide, you’ll have a running React app that you can use as the foundation for your next application so that you can use the latest JavaScript features and a modern build setup with sensible defaults that are highly extensible via Plugins.


To follow along, you will need Node ≥ 14.00 and npm ≥ 5.6 on your machine.

Creating a new project with Vite

First, let’s create a new application by running the Vite tool from the command line. We will be using the npm package manager to install and run the application.

Run the following command in your terminal to kick off a new Project:

$ npm create vite@latest

This command will run the create-vite executable which will configure necessary tools to scaffold our application and start a series of command line prompts to configure our project.

You will first be prompted to provide a name for your project, in our case we will be using codepath-vite:

? Project name: › codepath-vite

Next, we need to select a framework. We will be selecting react

? Select a framework: › - Use arrow-keys. Return to submit.
❯   react

After selecting React as our framework, you are prompted to select a variant type (JavaScript or TypeScript). Let’s select react which defaults to JavaScript.

? Select a variant: › - Use arrow-keys. Return to submit.
❯   react

Once the above is selected, the tool will create a directory named codepath-vite that holds the base code and you will see an output similar to:

% npm create vite@latest
✔ Project name: … codepath-vite
✔ Select a framework: › react
✔ Select a variant: › react

Scaffolding project in /**your-file-path**/codepath-vite...

Done. Now run:

  cd codepath-vite
  npm install
  npm run dev

Our new project is now set up! Let’s change to the new directory:

$ cd codepath-vite

And use the npm command to install the dependencies:

$ npm install

Inspecting the Starter code

Vite provides a simple directory structure for our React project, with only the files you need to build your app.

├── node_modules/
├── src/
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

Let’s go over them briefly:

  • node_modules/ contains all the third-party JavaScript packages used by the application. You will rarely interact with this directory.
  • src/ contains your React app JavaScript code. Most of your work will be in this directory
  • .gitignore default git ignore file specific to React apps. The directories and files ignored tend to be larger ones that do not need to be in source control.
  • index.html contains the base HTML which is the entry point to your application
  • package.json contains metadata about your project, such as it’s name, version number and dependencies. It also contains scripts that you will use to run & build your project
  • package-lock.json file generated after we run npm install. This file will be used by npm to make sure the packages match an exact version.
  • vite.config.js Vite config file to extend functionality with its Plugin API and JavaScript API

The index.html page template

The index.html file is the root of your React application. This is the main file being served when a browser request your app.

The HTML is a short page template with relevant tags that you can later customize to better describe your app.

Vite treats index.html as source code and part of the module graph. It resolves <script type="module" src="..."> that references your JavaScript source code. Even inline <script type="module"> and CSS referenced via <link href> also enjoy Vite-specific features.

The src/main.jsx entry point

When we look at a Vite project, the src/main.jsx is React JavaScript entry code.

The file has the following line:

    <App />

This code tells React to find an element with an id of root within your HTML and render the enclose element there. <App /> is your root component element, and everything branches from there.

Beyond this, you also see a few imports, like the index.css, which tells Vite tool to include that CSS code as well.

Starting the Development Server

To verify that our project is working, let’s start the development server.

Inside our codepath-vite directory, run the following:

$ npm run dev

You will then see the following running output

vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 227ms.

Next, open your browser and visit http://localhost:3000/. You should see a sample React project running on port 3000 . If so, we have successfully scaffolded our React Project with Vite.

Using Vite binaries

Vite provides some built-in commands within our npm script that uses vite package

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
  • npm run dev Runs the app in development mode by starting the development server on http://localhost:3000
  • npm run build Builds a production ready app into the dist directory
  • npm run preview Runs the dist build app for local testing.


Fork me on GitHub