How to Create React App in 10 Minutes? A Beginner's Guide

Jul 25, 2025 • 19 min read

Building a new React application used to be a maze of configuration files, build tools, and dependency management.

When Create React App launched in 2016, it changed everything by eliminating the complexity that kept developers from focusing on what really matters – building great applications.

Today, you can have a fully functional React app running in just 10 minutes. No prior React experience required.

Create React App packages essential development tools into a single, battle-tested configuration. Instead of wrestling with Webpack setups, Babel configurations, or ESLint rules, you get a streamlined development environment that just works. While the tool has entered maintenance mode, it remains one of the most reliable ways to start your React journey.

React itself is a powerhouse framework that enables you to build everything from simple web applications to complex full-stack platforms with native-quality user interfaces. Whether you're prototyping a startup idea or building enterprise software, React provides the flexibility to scale from proof-of-concept to production.

This guide walks you through the complete process: installing the necessary dependencies, setting up your project structure, and understanding how tools like Webpack bundle your code into deployable applications. We'll cover everything step-by-step, ensuring you understand not just the how, but the why behind each decision.

Ready to build your first React application faster than your lunch delivery arrives? Let's get started.

Step 1: Install Node.js and Prepare Your System

React applications require Node.js to run. Node.js serves as the JavaScript runtime environment that executes JavaScript code outside of web browsers, making it the foundation for modern React development.

Check Node.js and npm versions

Start by checking whether Node.js is already installed on your system. Open your terminal or command prompt and type:

node -v

If Node.js is installed, you'll see a version number. Next, check npm (Node Package Manager), which comes bundled with Node.js:

npm -v

Create React App requires Node.js version 14 or higher. Compare any displayed version numbers with this requirement. If you see error messages or no output, you'll need to install Node.js.

Install Node.js if not already installed

Here's how to get Node.js on your system:

Navigate to the official Node.js website at https://nodejs.org
Download the LTS (Long-Term Support) version recommended for most users
Run the installation wizard for your operating system

The LTS version offers the best compatibility with other frameworks and libraries. Node.js automatically includes npm during installation, which you'll use to manage all your React project dependencies.

Experienced developers might prefer using a Node version manager like nvm (for macOS/Linux) or nvm-windows. These tools allow you to install and switch between multiple Node.js versions, which becomes useful when working on different projects with varying requirements.

Verify installation using terminal commands

Confirm everything installed correctly by running both commands again:

node -v
npm -v

Both should now display version numbers. You can also update npm to its latest version, since npm releases more frequently than Node.js:

npm install -g npm@latest

Windows users should run this command in an administrator command prompt.

With Node.js and npm properly configured, your development environment is ready. This foundation ensures all the React development tools will work seamlessly as you build your application.

Step 2: Create a New React App Using create-react-app

With Node.js properly installed, we can now create your first React application. The create-react-app tool eliminates all the configuration headaches that used to plague React development, giving you a production-ready setup in seconds.

Run the npx create-react-app command

Create React App offers a fast, pre-configured way to set up React projects without worrying about complex build configurations. Open your terminal and run this command:

[npx create-react-app](https://www.netguru.com/blog/next-js-vs-react) my-app

The npx command ensures you always use the latest version of create-react-app. Think of npx as your guarantee that you're getting the most current version without installing anything globally on your system.

If you're working with an older npm version (below 5.2), you'll need a different approach:

npm install -g create-react-app
create-react-app my-app

You also have alternative package managers at your disposal:

npm init react-app my-app    # For npm 6+ users
yarn create react-app my-app # For Yarn 0.25+ users

Choose a project name and folder

When running the create-react-app command, replace "my-app" with your desired project name. The tool creates a directory with this exact name in your current location, so choose something descriptive that reflects your project's purpose.

Need to change your project name later? You can rename the folder and update the name field in both package.json and package-lock.json files.

Navigate to your newly created project:

cd my-app

Understand what the tool installs for you

Create React App generates a complete project structure with all necessary files. Here's what you'll find:

README.md: Documentation for your project
node_modules: Contains all dependencies
package.json: Lists dependencies and scripts
.gitignore: Specifies files Git should ignore
public folder: Contains static assets like HTML files
src folder: Contains your source code

The src folder becomes your primary workspace. It houses essential files including App.js (your main component), index.js (the JavaScript entry point), and CSS files for styling.

Behind the scenes, Create React App installs crucial dependencies including React, ReactDOM, and testing libraries. The entire setup comes pre-configured with Webpack, Babel, and other development tools working seamlessly together.

Ready to see your app in action? Start the development server:

npm start

This command launches your application in development mode at http://localhost:3000, where you can see your React app running. The development server automatically opens your browser and displays your new React application – your first glimpse of what you've just created.

Step 3: Explore the Project Structure and Start Development

Your React application is ready, but what exactly did Create React App build for you? Understanding the project structure is crucial before you start coding – it's the difference between building with purpose and stumbling through a maze of files.

Navigate to your project directory

Open your terminal and move into your newly created project:

cd my-app

This simple command places you at the heart of your React ecosystem. Open the folder in your preferred code editor to see the complete project structure that Create React App generated.

Start the development server with npm start

Here's where the magic happens. Launch your development environment:

npm start

The development server springs to life, automatically opening your browser to http://localhost:3000. What makes this development server particularly valuable?

Every code change triggers an instant browser update
Error messages appear immediately in both browser and console
Zero manual refreshing required during development

This live reload feature becomes your best friend during development – saving you countless hours of manual browser refreshes.

Understand the src, public, and node_modules folders

Your project follows a deliberate organizational pattern. Let's break down the key directories:

src folder: Your primary workspace. Every JavaScript file, CSS stylesheet, and component you create lives here. Key files include:

index.js (application entry point)
App.js (main component)
CSS files for styling
All custom components and modules

public folder: Static assets that bypass webpack processing. Contains:

index.html (your page template)
favicon.ico
manifest files
Images and other static resources

node_modules: The dependency warehouse containing React libraries and all installed packages.

Remember this critical rule: only files inside src get processed by webpack, so all your development code must reside there.

Edit App.js to customize your first component

Time to make this application truly yours. Open App.js in your editor. <citation index="14" link="https://www.w3schools.com/react/react_getstarted.asp" similar_text="Look in the my-react-app directory, and you will find a src folder. Inside the src folder there is a file called App.js, open it and it will look like this: /myReactApp/src/App.js: import logo from './logo.svg'; import './App.css'; function App() { return (

logo

Edit src/App.js and save to reload.

Learn React

); } export default App;">This file contains your main application component:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src="" alt="logo" className="App-logo">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

Replace the default content with something personal. Try this simple modification:

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

Save the file and watch your changes appear instantly – no browser refresh needed. This immediate feedback loop makes React development incredibly satisfying and productive.

Step 4: What to Do Next After Setup

Your React application is running, but what transforms a basic starter project into something genuinely useful? The answer lies in understanding how React fits into the broader web development ecosystem and making strategic choices about which tools to add next.

Add routing with React Router

Most applications need more than a single view. Users expect to navigate between different sections, bookmark specific pages, and share URLs that point to meaningful content. This is where React Router becomes essential for creating multi-page experiences in your single-page application.

Install React Router using npm:

npm install --save react-router-dom

Or with Yarn:

yarn add react-router-dom

Setting up basic routing requires two steps. First, wrap your App component with BrowserRouter in your index.js file:

import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

Then define your routes in App.js:

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

React Router has become the de facto standard because it handles the complex aspects of client-side routing while maintaining a simple API.

Install additional packages like Axios or Tailwind

Real applications rarely exist in isolation. They need to fetch data from APIs, implement sophisticated styling systems, and manage complex state. The generated project includes React and ReactDOM as dependencies along with development scripts, but you'll likely need additional tools.

Consider these common additions based on your project needs:

API clients: Axios simplifies HTTP requests with better error handling and request/response interceptors
UI libraries: Material UI or Chakra UI provide pre-built components that speed up development
CSS frameworks: Tailwind CSS offers utility-first styling that scales well across teams
State management: Redux or Zustand help manage application state as complexity grows

Install any package using npm's standard approach:

npm install --save package-name

The key is adding dependencies strategically rather than overwhelming your project with tools you might not need.

Deploy your app to platforms like Vercel or Netlify

What good is a React application that only runs on your local machine? Modern deployment platforms have made publishing applications remarkably straightforward, often requiring just a few commands.

Vercel Deployment:

Install Vercel CLI: npm install -g vercel
Run vercel in your project directory
Your app receives a unique .vercel.app domain
Vercel automatically detects React and applies correct settings

Netlify Deployment:

Connect your Git repository to Netlify
Set build command to npm run build
Set publish directory to build (for React)

Both platforms provide automatic HTTPS, global CDN distribution, and preview deployments for every commit. For public repositories, GitHub Pages offers another free alternative with minimal setup requirements.

The beauty of these platforms lies in their simplicity - they handle the infrastructure complexities while you focus on building features. Your React application can be live and accessible to users worldwide within minutes of pushing code to your repository.

Conclusion

Building your first React application shouldn't feel like climbing Mount Everest. What once required days of configuration and troubleshooting now takes less time than your average coffee break.

You've just experienced the power of modern development tooling. From Node.js installation to a running application, every step was designed to remove friction between your ideas and their implementation. The development environment you've set up isn't just functional—it's production-ready, battle-tested by millions of developers worldwide.

What happens next depends entirely on your ambitions. Some developers will use this foundation to build the next unicorn startup. Others will create internal tools that solve real business problems. Many will simply enjoy the satisfaction of bringing ideas to life through code. All of these paths are valid, and React provides the flexibility to support whatever direction you choose.

The React ecosystem continues to evolve rapidly. New libraries, patterns, and best practices emerge constantly. What remains constant is React's core philosophy: build user interfaces through composable, reusable components. This approach scales from simple personal projects to applications serving billions of users.

Companies across every industry—from fintech startups to Fortune 500 enterprises—rely on React for their most critical user-facing applications. Your investment in learning React positions you at the center of modern web development. The skills you're building today will remain relevant for years to come.

Don't let perfectionism paralyze your progress. The beauty of React development lies in its iterative nature. Start simple, make mistakes, learn from them, and gradually build more sophisticated features. The development server's instant feedback loop makes experimentation both safe and enjoyable.

Your React journey starts now. Fire up that terminal and watch your ideas come to life in real-time.