Create React App: A Quick Setup Guide

What is Create React App?

Create React App (CRA) revolutionized how developers started React projects by eliminating complex build configuration. Launched by Facebook in 2016 as an officially supported way to create single-page React applications, CRA became the standard for bootstrapping new React projects for years. The tool eliminated the need for manual webpack and Babel configuration, providing a modern build setup with no configuration required and offering a standardized project structure and build process that included testing, build, and development scripts out of the box.

As documented in the official Create React App documentation, this approach democratized React development by lowering the barrier to entry for new developers while providing a consistent foundation for production applications.

The Official Status: CRA is Deprecated

The React ecosystem has evolved significantly since CRA's introduction, and it's important to understand the current status of this tooling. The official CRA website now displays a prominent banner stating that "Create React App is deprecated." The Facebook and React team officially recommends using modern alternatives for new projects, and CRA is no longer actively maintained with new features. While security updates may still be released, the project is effectively sunset.

Existing CRA projects continue to work, though they face growing compatibility issues with newer React versions and dependency updates. For teams maintaining legacy CRA applications, understanding the setup process remains valuable for maintenance purposes, but new projects should strongly consider the modern alternatives discussed later in this guide. The official React documentation explicitly recommends frameworks like Next.js and React Router v7 over CRA for new projects.

When evaluating your React development stack, our professional web development services can help you choose the right tooling based on your project requirements and long-term maintenance needs.

Setting Up Create React App (Legacy Workflow)

While we recommend using modern alternatives for new projects, understanding the CRA setup process remains valuable for maintaining existing applications or historical reference. Our web development team regularly assists clients with legacy React application maintenance and modernization strategies.

Prerequisites

Before creating a CRA project, ensure your development environment meets the following requirements. You'll need Node.js version 14.0.0 or higher installed on your local machine. The npm package manager version 6.0.0 or higher is required (which comes bundled with Node.js), or alternatively you can use Yarn version 0.25 or higher. Unlike modern tooling that may require additional global installations, CRA requires no additional tooling or configuration beyond these basics.

# Verify your Node.js version
node --version

# Verify your npm version
npm --version

Installation Methods

Create React App can be installed using several methods, each with its own advantages. The most common approaches use npx, npm init, or Yarn to create a new project.

# Using npx (recommended approach)
npx create-react-app@latest my-app

# Using npm init
npm init react-app my-app

# Using Yarn
yarn create react-app my-app

The npx approach, which comes with npm 5.2 and higher, downloads and runs the latest version automatically without requiring a global installation. This makes it the recommended method for most use cases. The npm init alternative provides the same functionality through npm's built-in commands, while Yarn users can leverage their preferred package manager with the create command.

Creating a TypeScript App

CRA includes built-in support for TypeScript through template flags. This allows teams to leverage type safety from the start of their projects without additional configuration.

npx create-react-app my-app --template typescript

This command sets up a CRA project with pre-configured TypeScript compiler settings and enables type-aware IDE integration out of the box. The TypeScript template has been stable for production use and includes appropriate compiler options for React development.

Selecting a Custom Template

Beyond the default JavaScript and TypeScript templates, CRA supports community-created templates for specific use cases.

npx create-react-app my-app --template [template-name]

Templates are published to npm with the naming convention cra-template-[template-name]. Various community templates exist for different needs, including minimal configurations, Redux integration, and other specialized setups. Teams can search npm for available templates that match their requirements.

If you're building a new React project and unsure which tooling and templates best suit your needs, our React development experts can provide guidance on selecting the optimal foundation for your application.

Understanding the Project Structure

Create React App establishes a standardized project structure that promotes consistency across React applications. Understanding this structure is essential for effective development and maintenance, whether you're working with CRA or modern alternatives.

Directory Overview

A typical CRA project contains the following structure:

my-app/
├── node_modules/ # Project dependencies installed via npm/yarn
├── public/ # Static assets served directly
│ ├── index.html # Main HTML file template
│ ├── favicon.ico # Application icon
│ ├── manifest.json # Progressive Web App manifest
│ └── robots.txt # Search engine robots file
├── src/ # Application source code
│ ├── App.css # Component-specific styles
│ ├── App.js # Main App component
│ ├── App.test.js # Component tests
│ ├── index.css # Global application styles
│ ├──index.js # React entry point
│ ├── logo.svg # React logo asset
│ └── serviceWorker.js # Service worker for offline support
├── .gitignore # Git exclusion rules
├── package.json # Project metadata and dependencies
└── README.md # Project documentation

Key Files Explained

Each file in the CRA structure serves a specific purpose in the application's lifecycle. The public/index.html file serves as the single page template that React mounts to, containing the root div where your application renders. This file remains static and is copied directly to the build output without processing.

The src/index.js file acts as the React entry point, responsible for rendering the App component to the DOM. This file handles React DOM rendering and can optionally register a service worker for Progressive Web App functionality. The src/App.js file contains the main functional component that renders your application UI and serves as the starting point for component composition.

The package.json file contains all project metadata including dependencies, scripts, and configuration. This file defines the npm scripts available for development, testing, and production builds. Understanding these scripts is crucial for efficient development workflows and deployment processes.

Our web development services can help you establish optimal project structures for your React applications, whether you're working with CRA or modern alternatives like Vite or Next.js. We also offer comprehensive front-end development services for teams looking to modernize their React applications.

Available Scripts

Create React App includes several built-in npm and Yarn scripts that handle common development tasks. These scripts provide a consistent interface for development workflows across all CRA projects.

npm start or yarn start

The start script launches the development server and is the command you'll use most frequently during active development.

npm start

When executed, this command runs the development server and automatically opens http://localhost:3000 in your default browser. The server supports hot module reloading, meaning the page reloads automatically when you save changes to your source files. Build errors and lint warnings appear directly in the browser console and terminal, making debugging straightforward. The default port is 3000, though this can be configured through environment variables if needed.

npm test or yarn test

The test script launches CRA's integrated test runner, built on the Jest testing framework.

npm test

By default, the test runner operates in watch mode, automatically running tests related to files changed since your last commit. This interactive mode allows you to focus on relevant tests during development. The watch mode also provides options for running specific tests or updating snapshots. Jest's assertion library comes pre-configured, enabling comprehensive unit and integration testing without additional setup.

npm run build or yarn build

The build script prepares your application for production deployment by creating an optimized and minified bundle.

npm run build

This command processes your source files through webpack, applying optimizations like code minification, tree shaking, and bundle splitting. The output is written to the build/ directory with filenames that include content hashes for effective browser caching. The resulting build is ready for deployment to any static hosting service, including platforms like Vercel, Netlify, AWS S3, or traditional web servers.

For teams seeking faster build times and better optimization, migrating to Vite can significantly improve these workflows while maintaining familiar development patterns. Our full-stack development team specializes in helping organizations transition from legacy React tooling to modern build systems.

Why Consider Modern Alternatives?

The React tooling ecosystem has evolved significantly since CRA's introduction. Understanding why modern alternatives have become the recommended choice helps teams make informed decisions about their development stack and position their applications for long-term success.

Performance Benefits

Modern build tools like Vite offer dramatically faster development server startup compared to CRA's webpack-based approach. Vite achieves this by serving files natively over HTTP using ES modules during development, eliminating the need to bundle everything before serving. This approach results in near-instant Hot Module Replacement regardless of application size, making the development experience significantly more responsive, especially as projects grow in complexity. Production builds with modern tools also benefit from optimized bundling strategies that produce smaller bundle sizes.

As detailed in developer community comparisons, Vite's architecture provides orders of magnitude improvement in server startup time for larger projects, with some developers reporting 70-90% reduction in startup wait times.

Build Tool Evolution

The JavaScript build tool landscape has evolved considerably since webpack became the standard. Newer tools like ESBuild and Rollup offer dramatically faster compilation speeds because they're written in native languages like Go and designed specifically for modern JavaScript patterns. Vite leverages ESBuild for lightning-fast development builds while using Rollup for optimized production bundles, combining the best of both worlds.

This evolution reflects broader industry trends toward native module support in browsers, reducing the need for complex bundling during development. Modern bundlers are purpose-built for today's JavaScript ecosystem, offering better tree-shaking, code splitting, and tree-shaking capabilities out of the box.

Modern Features

Contemporary tooling provides out-of-the-box support for features that require significant configuration in webpack-based setups. TypeScript support comes pre-configured without additional dependencies, and modern CSS solutions like CSS Modules and CSS-in-JS libraries integrate seamlessly. The developer experience improvements include faster feedback loops, better error messages, and more informative build output.

Active maintenance and community support ensure these tools stay current with React's evolution, including compatibility with new React features as they're released. This is particularly important given React 19's introduction and ongoing development, where deprecated tooling may face compatibility gaps.

If you're evaluating modern React development tooling, our React development services can help your team transition smoothly while maintaining productivity and improving application performance.

Vite: The Recommended Modern Alternative

Vite has emerged as the community's preferred choice for React project scaffolding, offering a development experience that addresses many of CRA's limitations while maintaining a familiar project structure and workflow. Our web development agency frequently recommends Vite for clients starting new React projects.

Creating a React App with Vite

Vite's command-line interface provides a similar experience to CRA but with significantly faster execution:

# Create React app with Vite
npm create vite@latest my-react-app -- --template react

# With TypeScript
npm create vite@latest my-react-app -- --template react-ts

The command structure will feel familiar to CRA users, making migration straightforward. Vite's project creation is dramatically faster because it doesn't install dependencies during setup--it handles this lazily as needed during development. The template flag specifies whether you want a plain React setup or TypeScript integration.

Vite Project Structure

Vite's project structure is slightly different from CRA but maintains logical organization:

my-react-app/
├── node_modules/
├── public/
├── src/
├── index.html # Entry point in root (different from CRA)
├── package.json
├── vite.config.js # Vite configuration file
└── README.md

The most notable structural difference is that Vite places index.html in the project root rather than in the public folder. This approach, which might seem like a small change, actually reflects a philosophical shift toward treating the browser as a first-class citizen in the development process. The vite.config.js file handles configuration that would typically require webpack.config.js in CRA projects, though Vite's sensible defaults mean many projects never need to modify this file.

For teams building React applications today, Vite represents the best balance of development experience, performance, and long-term maintainability. It is now the official recommendation from the React team for most new projects. Our React development team has extensive experience with Vite and can help your organization adopt modern React tooling effectively.

Next.js: For Full-Stack and Production Apps

While Vite excels at single-page applications, Next.js provides additional capabilities for projects requiring server-side rendering, static generation, or full-stack functionality. Understanding when to choose each tool helps teams select the right foundation for their specific requirements and business objectives.

When to Choose Next.js

Next.js is the preferred choice when your project requires features beyond what a traditional SPA can provide. Server-side rendering (SSR) offers significant SEO advantages by delivering fully rendered HTML to search engine crawlers, which is critical for content-heavy sites. Static site generation (SSG) provides excellent performance for content that doesn't change frequently, pre-rendering pages at build time.

The framework includes built-in API routes, enabling full-stack capabilities within a single project without separate backend services. Next.js's file-based routing system simplifies page organization and navigation structure. The framework also provides optimized production builds with automatic code splitting, image optimization, and font optimization out of the box.

For enterprise applications requiring features like internationalization, authentication integrations, or advanced caching strategies, Next.js offers mature solutions with commercial support options. These capabilities make it particularly well-suited for large-scale applications with complex requirements.

Creating a Next.js App

Next.js provides an interactive setup process that guides you through project configuration:

npx create-next-app@latest my-next-app

During setup, you'll be prompted to configure TypeScript, Tailwind CSS, and ESLint according to your preferences. You'll also choose between the App Router (recommended for new projects) and the Pages Router for backwards compatibility. This interactive approach ensures your project starts with exactly the configuration your team needs.

Our full-stack development services include expertise in both Vite and Next.js, allowing us to recommend and implement the optimal solution based on your specific project requirements and long-term goals. Whether you need a simple SPA or a complex full-stack application, our team can guide you through technology selection and implementation.

Migrating from CRA to Vite

For teams with existing CRA projects, migrating to Vite offers significant performance improvements while maintaining familiar React development patterns. The migration process is straightforward for most applications, and our web development experts have helped numerous clients successfully transition their legacy applications.

Migration Benefits

Migrating to Vite delivers immediate improvements to your development workflow. Development server startup becomes nearly instant, even for larger codebases, eliminating the wait times builds that webpack-based can introduce. Hot Module Replacement becomes more reliable and faster, reducing the feedback loop during UI development. Production builds benefit from modern bundling strategies that typically produce smaller bundle sizes.

Beyond performance, Vite's active maintenance ensures compatibility with evolving React versions and ecosystem tools. This addresses the compatibility challenges CRA projects increasingly face as dependencies become outdated. The modern tooling ecosystem also provides better integration with contemporary development workflows, including improved debugging tools and error overlays.

Migration Steps

Migrating from CRA to Vite involves several key steps:

1. Install Vite and the React plugin - Add vite and @vitejs/plugin-react as development dependencies

2. Create vite.config.js - Configure Vite with the React plugin and any necessary settings

3. Update index.html location - Move your HTML file to the project root and update script references

4. Adjust build scripts - Replace react-scripts commands with vite equivalents in package.json

5. Test thoroughly - Verify all functionality works as expected before production deployment

Most applications can complete migration in a few hours, with the actual effort depending on custom webpack configuration and third-party integrations. The Vite documentation provides detailed guidance for common migration scenarios.

Best Practices for New React Projects in 2025

When starting new React projects, choosing the right foundation from the beginning prevents future migration needs and sets your project up for long-term success. For simple single-page applications, Vite provides the optimal balance of speed, simplicity, and maintainability. For applications requiring SEO optimization, server-side rendering, or full-stack capabilities, Next.js offers comprehensive features that justify its additional complexity.

Consider your team's experience and the specific requirements of your application when making this decision. The table below provides guidance based on common use cases, helping you select the most appropriate tool for your project requirements. Our consulting services can help you evaluate your options and make an informed decision based on your specific use case.

Sources

1. Create React App - Getting Started - Official documentation showing CRA's deprecated status and setup instructions
2. React.dev - Creating a React App - React's official guidance on choosing modern frameworks for new projects
3. DEV Community - How to Create a React App in 2025 - Developer guide comparing CRA, Vite, and Next.js with practical setup instructions