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.
Learn React
In this React course, you’ll build powerful interactive applications with one of the most popular JavaScript libraries.Try it for freeSetting 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
With yarn:
yarn create vite
With pnpm:
pnpm create vite
After running the command, follow the interactive prompts:
- enter your project name (e.g.,
my-react-app
) - select
React
as your framework - 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:
# npmnpm create vite@latest my-react-app -- --template react# yarnyarn create vite my-react-app --template react# pnpmpnpm create vite my-react-app --template react
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 ViteApp.jsx
- the main React component of your applicationApp.css
- styles for the App componentmain.jsx
- the entry point for your React application (this file serves the same purpose asindex.js
orindex.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 serverbuild
: creates a production-ready buildpreview
: 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:
Complete your React learning journey to master React fundamentals.
Set up your debugging environment: Check out our React Developer Tools article to learn how to inspect components and track performance.
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!
'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'
Meet the full teamRelated articles
- Article
How to Build Web Apps Using Vite
Learn how to set up, configure, and optimize a web app using Vite, a fast and efficient build tool with Hot Module Replacement and plugin support. - Article
How to use React Developer Tools
Learn how to install, inspect components, and modify React elements using React Developer Tools. Explore Chrome DevTools to debug your react applications effectively. - Article
Getting started with Node Package Manager
Learn how to use Node Package Manager (NPM) to install, manage, and update dependencies in Node.js projects with best practices and examples.
Learn more on Codecademy
- Free course
Learn React
In this React course, you’ll build powerful interactive applications with one of the most popular JavaScript libraries.Intermediate13 hours - Free course
Learn React: Introduction
Build powerful interactive applications with React, a popular JavaScript library.Beginner Friendly6 hours - Free course
Learn React: Additional Basics
Take your React skills to the next level by learning how to apply styles and use forms to get user input.Beginner Friendly1 hour