How to create a React App
•
4 min read
**How to Create a React App: A Step-by-Step Guide for Beginners (2025)**
React is one of the most popular JavaScript libraries for building user interfaces—and for good reason. It’s powerful, flexible, and backed by a vibrant developer community. If you’re just getting started with React, the good news is that setting up a new project has never been easier.
In this post, we’ll walk you through creating a React app from scratch using the most common and beginner-friendly method: **Create React App (CRA)**. By the end, you’ll have a fully functioning React development environment ready for building your next project.
---
⚙️ Prerequisites
Before we begin, make sure you have the following installed on your machine:
- **Node.js** (version 18 or higher recommended)
- **npm** (comes bundled with Node.js) or **Yarn** (optional but supported)
You can check your installed versions by running:
```bash
node -v
npm -v
```
If you don’t have Node.js installed, download it from [https://nodejs.org](https://nodejs.org).
---
🚀 Step 1: Create a New React App
Open your terminal (or command prompt) and run the following command:
```bash
npx create-react-app my-react-app
```
> 💡 Replace `my-react-app` with your desired project name (e.g., `todo-app`, `portfolio-site`, etc.).
This command uses **npx**, which allows you to run Create React App without installing it globally. Behind the scenes, it sets up a modern React project with:
- A development server with live reloading
- Babel for JavaScript compilation
- Webpack for bundling
- ESLint for code quality
- Jest for testing (optional)
> 🕒 This may take a minute or two while it downloads dependencies.
📂 Step 2: Navigate into Your Project
Once the setup is complete, move into your new project directory:
```bash
cd my-react-app
```
Take a moment to explore the folder structure:
```
my-react-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── App.js
│ ├── index.js
│ └── ...
├── package.json
└── README.md
```
- **`public/index.html`**: The main HTML file.
- **`src/`**: Where your React components live.
- **`App.js`**: The main component rendered on the page.
- **`index.js`**: The entry point that renders your app into the DOM.
▶️ Step 3: Start the Development Server
Run the following command to launch your app in development mode:
```bash
npm start
```
This will open `http://localhost:3000` in your default browser. You should see the default React welcome page!
Any changes you make to your code will automatically refresh the browser—thanks to **hot reloading**.
✏️ Step 4: Start Building!
Now that your environment is ready, it’s time to code! Open your project in your favorite code editor (VS Code, Sublime, etc.).
Try editing `src/App.js`:
```jsx
function App() {
return (
);
}
export default App;
```
Save the file, and watch your browser update instantly.
📦 Bonus: Using Vite Instead (Faster Alternative)
While Create React App is great for beginners, many developers now prefer **Vite** for its speed and modern tooling. To create a React app with Vite:
```bash
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
```
Vite offers near-instant server start times and faster hot updates—ideal for larger projects or if you’re comfortable with slightly more configuration.
---
🧪 Optional: Running Tests
Create React App includes a testing setup with Jest. To run tests:
```bash
npm test
```
This launches an interactive test runner in watch mode.
🚀 Next Steps
Now that you’ve created your React app, consider:
- Learning React fundamentals (components, props, state, hooks)
- Adding routing with **React Router**
- Styling with **CSS Modules**, **Tailwind CSS**, or **Styled Components**
- Deploying your app using **Vercel**, **Netlify**, or **GitHub Pages**
✅ Conclusion
Creating a React app is just the first step in your journey as a React developer—but thanks to tools like Create React App and Vite, it’s never been easier to get started.
With a solid development environment in place, you’re ready to experiment, build, and bring your ideas to life. Happy coding! 💻✨