Convert Figma logo to code with AI

facebook logocreate-react-app

Set up a modern web app by running one command.

102,511
26,767
102,511
2,241

Top Related Projects

124,777

The React Framework

67,112

Next generation frontend tooling. It's fast!

78,194

Cybernetically enhanced web apps

207,677

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

CLI tool for Angular

55,199

The best React-based framework with performance, scalability and security built in.

Quick Overview

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration required, allowing developers to focus on writing code instead of managing build tools.

Pros

  • Zero configuration required to start a new React project
  • Includes a development server with hot reloading
  • Optimized production build out of the box
  • Easily extendable with custom configurations

Cons

  • Limited flexibility for advanced configurations without ejecting
  • Can be overkill for small projects or learning React basics
  • Slower build times compared to more lightweight alternatives
  • Ejecting makes it difficult to receive future updates

Code Examples

  1. Creating a new React app:
npx create-react-app my-app
cd my-app
npm start
  1. Using React hooks in a functional component:
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  1. Adding environment variables:
// In .env file
REACT_APP_API_URL=https://api.example.com

// In React component
const apiUrl = process.env.REACT_APP_API_URL;

Getting Started

To create a new React app using Create React App, follow these steps:

  1. Ensure you have Node.js installed (version 14 or higher)
  2. Open your terminal and run:
npx create-react-app my-app
cd my-app
npm start

This will create a new React app in a directory called my-app, install all necessary dependencies, and start a development server. Open http://localhost:3000 to view your app in the browser. The page will automatically reload if you make changes to the code.

Competitor Comparisons

124,777

The React Framework

Pros of Next.js

  • Built-in server-side rendering (SSR) and static site generation (SSG)
  • Automatic code splitting for faster page loads
  • Simplified routing with file-system based routing

Cons of Next.js

  • Steeper learning curve for developers new to SSR concepts
  • Less flexibility in project structure compared to Create React App
  • Potential overhead for simple single-page applications

Code Comparison

Next.js:

// pages/index.js
export default function Home() {
  return <h1>Welcome to Next.js!</h1>
}

Create React App:

// src/App.js
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Welcome to Create React App!</h1>
    </div>
  );
}

export default App;

Next.js simplifies the initial setup with its file-system based routing, while Create React App requires more manual configuration for routing. Next.js also provides built-in SSR capabilities, which are not available out-of-the-box with Create React App.

Both frameworks offer excellent developer experiences, but Next.js is better suited for applications requiring SSR or SSG, while Create React App is ideal for client-side rendered single-page applications with a simpler learning curve.

67,112

Next generation frontend tooling. It's fast!

Pros of Vite

  • Significantly faster build and development times due to native ES modules
  • Leaner project structure with minimal configuration required
  • Supports multiple frameworks beyond React (Vue, Svelte, etc.)

Cons of Vite

  • Less mature ecosystem and community compared to Create React App
  • Fewer built-in features and optimizations out of the box
  • Potential compatibility issues with some older libraries

Code Comparison

Create React App:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Vite:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

Summary

Vite offers faster development and build times with a more flexible, lightweight setup, making it attractive for modern web development. However, Create React App provides a more established ecosystem with robust features and optimizations tailored specifically for React applications. The choice between the two depends on project requirements, team familiarity, and desired development experience.

78,194

Cybernetically enhanced web apps

Pros of Svelte

  • Smaller bundle sizes and faster runtime performance due to compile-time optimization
  • Simpler, more intuitive syntax with less boilerplate code
  • Built-in state management without additional libraries

Cons of Svelte

  • Smaller ecosystem and community compared to React
  • Fewer job opportunities and less widespread adoption in large-scale applications
  • Limited tooling and IDE support

Code Comparison

Svelte component:

<script>
  let count = 0;
  const increment = () => count += 1;
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

Equivalent React component:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  return (
    <button onClick={increment}>
      Clicks: {count}
    </button>
  );
}

The Svelte example demonstrates its more concise syntax and built-in reactivity, while the React example showcases its use of hooks and JSX. Both achieve the same functionality, but Svelte requires less code and has a more straightforward approach to state management.

207,677

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Pros of Vue

  • Simpler learning curve and more intuitive syntax
  • Built-in state management (Vuex) and routing (Vue Router)
  • Smaller bundle size and better performance for small to medium-sized applications

Cons of Vue

  • Smaller ecosystem and community compared to React
  • Fewer job opportunities and enterprise-level adoption
  • Limited native mobile development options

Code Comparison

Vue component:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

React component (using Create React App):

import React from 'react';

function App() {
  return (
    <div>
      <p>Hello, React!</p>
    </div>
  );
}

export default App;

Vue offers a more template-based approach with clear separation of concerns, while Create React App provides a more JavaScript-centric structure. Vue's single-file components combine template, script, and style in one file, whereas Create React App typically separates these concerns into different files.

Both frameworks have their strengths, and the choice between them often depends on project requirements, team expertise, and personal preference.

CLI tool for Angular

Pros of Angular CLI

  • Provides a more comprehensive toolset for full-stack development
  • Offers built-in testing tools and end-to-end testing support
  • Generates more opinionated project structure, promoting consistency across Angular projects

Cons of Angular CLI

  • Steeper learning curve due to TypeScript and Angular-specific concepts
  • Less flexibility in project structure and configuration compared to Create React App
  • Larger initial bundle size for small applications

Code Comparison

Angular CLI component generation:

ng generate component my-component

Create React App component creation:

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

Angular CLI focuses on CLI commands for scaffolding, while Create React App relies more on manual file creation. Angular CLI generates more boilerplate code, including separate files for component, template, and styles, whereas Create React App typically uses JSX for combined component and template files.

Both tools provide excellent development experiences, with Angular CLI offering more structure and tooling out of the box, while Create React App provides a simpler setup with more flexibility. The choice between them often depends on project requirements and team preferences.

55,199

The best React-based framework with performance, scalability and security built in.

Pros of Gatsby

  • Built-in performance optimizations like code splitting and image optimization
  • Static site generation for improved SEO and faster load times
  • Large ecosystem of plugins for easy integration of various features

Cons of Gatsby

  • Steeper learning curve due to GraphQL and Gatsby-specific concepts
  • Potentially slower build times for large sites
  • Less flexibility for dynamic content compared to traditional React apps

Code Comparison

Create React App:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Gatsby:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
  return <Link to="/about/">About</Link>;
}

The main difference in the code examples is that Gatsby uses its own routing system with the Link component, while Create React App typically uses React Router for navigation. Gatsby also has a specific page structure and build process, whereas Create React App provides a more flexible setup for traditional React applications.

Both projects aim to simplify React development, but Gatsby focuses on static site generation and performance optimization, while Create React App offers a more general-purpose React setup.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Create React App Build & Test PRs Welcome

Logo

Create React apps with no build configuration.

Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.
If you have questions or need help, please ask in GitHub Discussions.

Quick Overview

npx create-react-app my-app
cd my-app
npm start

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

npm start

Get Started Immediately

You don’t need to install or configure tools like webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

Create a project, and you’re good to go.

Creating an App

You’ll need to have Node 14.0.0 or later version on your local development machine (but it’s not required on the server). We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-react-app my-app

(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create react-app my-app

yarn create <starter-kit-package> is available in Yarn 0.25+

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

No configuration or complicated folder structures, only the files you need to build your app.
Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

Build errors

npm test or yarn test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

Read more about testing.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

User Guide

You can find detailed instructions on using Create React App and many tips in its documentation.

How to Update to New Versions?

Please refer to the User Guide for this and other information.

Philosophy

  • One Dependency: There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

  • No Configuration Required: You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

  • No Lock-In: You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

What’s Included?

Your environment will have everything you need to build a modern single-page React app:

  • React, JSX, ES6, TypeScript and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria. (Note: Using the service worker is opt-in as of react-scripts@2.0.0 and higher)
  • Hassle-free updates for the above tools with a single dependency.

Check out this guide for an overview of how these tools fit together.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.

Popular Alternatives

Create React App is a great fit for:

  • Learning React in a comfortable and feature-rich development environment.
  • Starting new single-page React applications.
  • Creating examples with React for your libraries and components.

Here are a few common cases where you might want to try something else:

  • If you want to try React without hundreds of transitive build tool dependencies, consider using a single HTML file or an online sandbox instead.

  • If you need to integrate React code with a server-side template framework like Rails, Django or Symfony, or if you’re not building a single-page app, consider using nwb, or Neutrino which are more flexible. For Rails specifically, you can use Rails Webpacker. For Symfony, try Symfony's webpack Encore.

  • If you need to publish a React component, nwb can also do this, as well as Neutrino's react-components preset.

  • If you want to do server rendering with React and Node.js, check out Next.js or Razzle. Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles.

  • If your website is mostly static (for example, a portfolio or a blog), consider using Gatsby or Next.js. Unlike Create React App, Gatsby pre-renders the website into HTML at build time. Next.js supports both server rendering and pre-rendering.

  • Finally, if you need more customization, check out Neutrino and its React preset.

All of the above tools can work with little to no configuration.

If you prefer configuring the build yourself, follow this guide.

React Native

Looking for something similar, but for React Native?
Check out Expo CLI.

Contributing

We'd love to have your helping hand on create-react-app! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

Supporting Create React App

Create React App is a community maintained project and all contributors are volunteers. If you'd like to support the future development of Create React App then please consider donating to our Open Collective.

Credits

This project exists thanks to all the people who contribute.

Thanks to Netlify for hosting our documentation.

Acknowledgements

We are grateful to the authors of existing related projects for their ideas and collaboration:

License

Create React App is open source software licensed as MIT. The Create React App logo is licensed under a Creative Commons Attribution 4.0 International license.

NPM DownloadsLast 30 Days