Creating a React App

React is a powerful JavaScript library developed by Meta (formerly Facebook) for building dynamic user interfaces. Its component-based architecture and efficient rendering have fueled widespread adoption among developers, ranking it as the second most loved web framework in the 2024 StackOverflow developer survey. This article will walk you through setting up your first React app and assumes you are familiar with text editors and command line navigation.

Note: We’ve previously recommended using create-react-app (CRA) to bootstrap a React project. Since then, the React team has sunsetted this tool. This article focuses on using Vite, pronounced “veet”, the modern build tool that has become the preferred non-framework lightweight solution for React development.

Getting Ready

We will be using the Node package manager (npm), so you will need to have Node installed on your computer. To check if you have Node installed, run this command in your terminal:

node -v

If you have Node installed, this command will return a version number, like v23.1.0.

If it’s not already installed, follow the steps in Setting Up Node Locally before moving on.

To use Vite, you’ll need Node v18+ or 20+, so make sure to install the correct version before proceeding!

When you install Node, you automatically get npm installed on your computer as well. However, npm is separate from Node.js and tends to update more frequently. As a result, even if you’ve just installed Node (and therefore npm), it’s a good idea to update your npm. Luckily, npm knows how to update itself!

To upgrade to the latest version of npm on *nix (OSX, Linux, etc.), you can run this command in your terminal:

sudo npm install -g npm@latest

To upgrade on Windows, follow the steps found in the npm documentation.

Setting Up the Boilerplate Application

While it’s possible to manually create a React app, using a build tool like Vite allows us to quickly generate a boilerplate React application with all the necessary configuration.

Using Vite provides several benefits:

• a consistent project structure you’ll recognize across different React projects
• an optimized build process out-of-the-box
• a fast development server with hot module replacement
• modern frontend tooling with minimal configuration

To create a new Vite project, you can use npm’s create command, which runs the create-vite package without installing it globally first. When you run the command, npm will ask for your permission to download and execute the package. This approach keeps your global dependencies clean and ensures you’re always using the latest version of the tool.

Open your terminal and run one of the following commands based on your preferred package manager:

With npm:

npm create vite@latest

to clipboard
Copy to clipboard

With yarn:

yarn create vite

to clipboard
Copy to clipboard

With pnpm:

pnpm create vite

to clipboard
Copy to clipboard

After running the command, follow the interactive prompts:

1. enter your project name (e.g., my-react-app)
2. select React as your framework
3. choose your preferred variant (JavaScript or TypeScript)

We’ll use the JavaScript variant, which does not have type-checking. Locally, you should use what is appropriate for your use case.

You can also specify these options directly in the command:

# npm
npm create vite@latest my-react-app -- --template react

# yarn
yarn create vite my-react-app --template react

# pnpm
pnpm create vite my-react-app --template react

to clipboard
Copy to clipboard

Upon completion, you will get a recap of your prompt selection and the project location:

> npx
> create-vite

│
◇  Project name:
│  my-react-app
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Scaffolding project in /Users/codecademy/Desktop/vite/my-react-app...
│
└  Done. Now run:

 cd my-react-app
 npm install
 npm run dev

Following the instructions, change directory into your project folder (cd my-react-app), then run the command to install your dependencies (npm install, yarn, or pnpm install). This will differ based on your chosen package manager. Before we run the app, let’s look at the project structure to see what Vite has created for us.

React App Structure

Open the app using the text editor of your choice. You should see the following file structure:

└── 📁my-react-app
    ├── 📁public
    │   └── vite.svg
    ├── 📁src
    │   ├── App.css
    │   ├── App.jsx
    │   ├── 📁assets
    │   │   └── react.svg
    │   ├── index.css
    │   └── main.jsx
    ├── .gitignore
    ├── eslint.config.js
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── README.md
    └── vite.config.js

Vite has taken care of setting up the application’s main structure and several developer settings. Most of what you see will not be visible to visitors of your web app. Vite uses a modern build system that transforms the directories and files here into optimized static assets. Visitors to your site are served those static assets.

Don’t worry if you don’t know much about build tools. One of the benefits of using Vite to set up our React application is that we can bypass any manual configuration for the build process. Vite handles this complexity for us while providing extremely fast development and optimized production builds.

Let’s explore what each file and directory does:

Key Directories

/node_modules

This directory contains all the dependencies and sub-dependencies specified in your package.json file. You don’t need to modify anything here, and it’s automatically added to .gitignore since these files don’t need to be committed to your repository.

/public

This directory contains static assets that will be served directly without being processed by Vite. Files in this directory will be copied to the build directory during production. It contains:

• vite.svg - The Vite logo, which you can replace with your own favicon.

/src

This is where your React application code lives and where you’ll spend most of your time. The initial structure includes:

• /assets - a directory for storing static assets like images that will be processed by Vite
• App.jsx - the main React component of your application
• App.css - styles for the App component
• main.jsx - the entry point for your React application (this file serves the same purpose as index.js or index.jsx in other React setups)
• index.css - global styles for your application

Note: Throughout Learn React, we’ll refer to index.jsx as the entry point file, which is common in many React projects. In Vite’s default template, this file is named main.jsx instead, but it serves the exact same purpose. If you prefer to follow the lessons exactly, you can rename main.jsx to index.jsx and update the script reference in index.html accordingly.

Key Files

index.html Located in the root directory, this HTML file serves as the entry point for your application. Vite injects your JavaScript into it during the build process. You can directly edit this file to add meta tags, change the page title, or include additional scripts or styles.

package.json This file outlines all the settings for your React app, including:

• dependencies required for the application
• scripts for development, building, and previewing your app
• other metadata about your project

Here, you’ll find important scripts like:

• dev: starts the development server
• build: creates a production-ready build
• preview: serves the production build locally for testing

vite.config.js This is the configuration file for Vite, where you can customize the build tool’s behavior. By default, it simply includes the React plugin, but you can extend it to add features like:

• alias paths for imports
• custom build options
• additional plugins
• proxy settings for API requests

eslint.config.js This file configures ESLint for your project, which helps catch errors and enforce code style. The Vite template comes with a basic configuration that extends the React recommended rules.

.gitignore This file tells Git which files and directories to ignore when committing code, such as node_modules, build directories, and environment files.

As your React app grows, it is common to add a /components directory to organize components and component-related files and a /views directory to organize React views and view-related files.

Starting the React App Development Server

Earlier, you changed directories into your project, the only thing left to do now is to start your project with npm run dev, yarn dev, or pnpm dev.

The app should now be on http://localhost:5173/. You can manually enter this address into the URL bar of your browser. You will find yourself looking at a page resembling the following image:

Any changes to the source code will live updated here. Let’s see that in action. Leave the current terminal tab running (it’s busy serving the React app) and open src/App.jsx in your favorite text editor. You’ll see what looks like a mashup of JavaScript and HTML. This is JSX, which is how React adds XML syntax to JavaScript. It provides an intuitive way to build React components and is compiled to JavaScript at runtime. We’ll talk more about this in other content, but for now, let’s make a simple edit and see the update in the browser.

In App.jsx, replace the content with the following:

import './App.css'

function App() {
 return (
 <>
 Hello, Codecademy!
 </>
 )
}

export default App

If you left the terminal running, you should be able to switch over to your browser and see the update:

Congratulations! You’re up and running with React and can begin adding functionality to your application.

Next Steps

Now that you’ve set up your first React application with Vite, here’s what to do next:

1. Complete your React learning journey to master React fundamentals.

2. Set up your debugging environment: Check out our React Developer Tools article to learn how to inspect components and track performance.

3. Consider exploring React frameworks: Once you understand React basics, try Learn Next.js for production features like server-side rendering and optimized routing.

Practice building small projects to reinforce what you’ve learned, and keep exploring the React ecosystem as you grow your skills. Happy coding!