Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

create-react-app

Create React apps with no build configuration.

Subscribe to updates I use create-react-app


Statistics on create-react-app

Number of watchers on Github 48891
Number of open issues 364
Average time to close an issue about 16 hours
Main language JavaScript
Average time to merge a PR 3 days
Open pull requests 30+
Closed pull requests 29+
Last commit over 1 year ago
Repo Created about 3 years ago
Repo Last Updated over 1 year ago
Size 5.57 MB
Organization / Authorfacebook
Latest Releasev1.1.4
Contributors477
Page Updated
Do you use create-react-app? Leave a review!
View open issues (364)
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating create-react-app for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Create React App Build Status

Create React apps with no build configuration.

Create React App works on macOS, Windows, and Linux.
If something doesnt work, please file an issue.

Quick Overview

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

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

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

npm start

Get Started Immediately

You dont need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

Just create a project, and youre good to go.

Creating an App

Youll need to have Node >= 6 on your local development machine (but its not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.

To create a new app, run a single command:

npx create-react-app my-app

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

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
     registerServiceWorker.js

No configuration or complicated folder structures, just 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.
By default, it also includes a service worker so that your app loads from local cache on future visits.

Your app is ready to be deployed.

User Guide

The User Guide includes information on different topics, such as:

A copy of the user guide will be created as README.md in your project folder.

How to Update to New Versions?

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

Philosophy

  • One Dependency: There is just 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. 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.

Whats Included?

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

  • React, JSX, ES6, and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Autoprefixed CSS, so you dont 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.
  • 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.

Heres 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 or Django, or if youre not building a single-page app, consider using nwb, or Neutrino which are more flexible. For Rails specifically, you can use Rails Webpacker.

  • 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 just produces static HTML/JS/CSS bundles.

  • If your website is mostly static (for example, a portfolio or a blog), consider using Gatsby instead. Unlike Create React App, it pre-renders the website into HTML at the build time.

  • If you want to use TypeScript, consider using create-react-app-typescript.

  • If you want to use Parcel instead of Webpack as your bundler, consider using create-react-app-parcel.

  • 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.

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.

React Native

Looking for something similar, but for React Native?
Check out Create React Native App.

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.

create-react-app open issues Ask a question     (View All Issues)
  • over 1 year Support for oidc-client-js via redux-oidc
  • over 1 year Vulnerable Dependency: macaddress
  • over 1 year New way to create
  • over 1 year Support for the experimental syntax 'dynamicImport' isn't currently enabled
  • over 1 year The README somehow has a memory leak
  • over 1 year Reactjs: how to merge front end website and admin panel in reactjs?
  • over 1 year Configuration file after build app
  • over 1 year Watch mode on test exits on toMatchObject failure
  • over 1 year Allow to override host/port for dev server
  • over 1 year Bad SW Caching of HTML
  • over 1 year react-scripts test syntax error for return async function in class field
  • over 1 year Error "You need to enable javascript to run this app".
  • over 1 year eslint-config-react-app@2.1.0 has incorrect peer dependency "babel-eslint@^7.2.3".
  • over 1 year Blank Page on Hyperledger Explorer
  • over 1 year events.js:183 throw er; // Unhandled 'error' event
  • over 1 year [Q] How to speed up Jest?
  • over 1 year Linting results for CI (CircleCi)
  • over 1 year Unable to resolve dependencies in NODE-PATH using DOCKER
  • over 1 year Can't install react app
  • over 1 year Getting error in console “You need to enable JavaScript to run this app.” reactjs
  • over 1 year Fails to create new app.
  • over 1 year Cannot build app - Javascript heap out of memory
  • over 1 year bug of README about babel
create-react-app open pull requests (View All Pulls)
  • Fix the broken link to Medium
  • Webpack 4 cont'd
  • Updated guide for CircleCI to follow 2.0
  • Adjust browser defaults
  • ReadMe.md
  • Add support for setting base directories of assets
  • Update paths.js, rename shadow path variable
  • chore(react-scripts): bump webpack-dev-server version
  • Fix typo.
  • Update README.md bootstrap 4
  • use webpack config 'config.stats'
  • Docs updated for husky
  • Upgrade postcss-flexbug-fixes
  • Write manifest.json theme color to index.html on build
  • Add Node 10 to Travis config and remove Node 6
  • Change CSS preprocessors doc for composability
  • Updates to the modern code style
  • Fixed typo
  • `.mjs` should not resolve before .js files (#4085) (#4317)
  • docs: update bootstrap section to use v4
  • change es5 code to es6
  • Fix typo to word bootstrapped in condition to check for old version o…
  • Add support for react-native-svg via svgs
  • Support async generator functions and for-await statements
  • Chokidar Updates
  • Fix 'add to homescreen' failure
  • Remove --coverage + --watch workaround for the test command
  • Workbox service worker
  • serve app under homepage
  • Use babel-plugin-react-native-web
create-react-app questions on Stackoverflow (View All Questions)
  • Create-React-App failed to compile | Import/First Error
  • create-react-app: how to use https instead of http?
  • npm start error with create-react-app
  • Deploying create-react-app ti Heroku using npm run build
  • create react app Configuration file after build app
  • How to import Firebase Firestore into a create-react-app project using ES6 syntax
  • Deploy production of create-react-app to heroku without buildpacks
  • How does create-react-app actually transpile .jsx?
  • design-system-react - How to import AppLauncher & AppLauncherSection & AppLauncherTile as named imports for create-react-app compatibility
  • How to specify a port to run a create-react-app based project?
  • Making CORS API requests with create-react-app and webpack - no express
  • Create react app, yarn workspaces dependency issue
  • SonarCloud coverage report from create-react-app tests
  • Service worker for create-react-app does not ignore urls
  • Module build failed: Error: Cannot find module './globals.json' Create-React -App
  • Deploying react app using create-react-app + heroku
  • How to fetch correct tokenID/accessToken with google sign in with a web app created with create-react-app and using firebase
  • FirebaseUI with create-react-app
  • Deploying create-react-app express api to heroku
  • create-react-app: Invalid tar header issue on create new app
  • Installation with Create React App
  • Image Loading Error React Create React App
  • create-react-app and Express in production
  • dygraphs minification build error in a create-react-app project
  • Create React App inject environment variable
  • Running the Create-React-App server independently in an app built with .NET Core 2.1 Template using Visual Studio 17 and "dotnet new reactredux"
  • error 404 / Cannot find/load files of create-react-app production build on expressjs/feathersjs
  • How to deploy create-react-app in AWS EC2
  • typescript npm module source-maps not working in create-react-app
  • How to deploy create-react-app to Google Cloud
create-react-app list of languages used
create-react-app latest release notes
v1.1.4 v1.1.4

1.1.4 (April 3, 2018)

:bug: Bug Fix

Committers: 1

Migrating from 1.1.3 to 1.1.4

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@1.1.4

or

yarn add --exact react-scripts@1.1.4
v1.1.3 v1.1.3

1.1.3 (April 3, 2018)

:bug: Bug Fix

  • react-scripts

    • #4247 Fix environment.dispose is not a function error caused by a Jest bug. (@gaearon)

Committers: 1

Migrating from 1.1.2 to 1.1.3

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@1.1.3

or

yarn add --exact react-scripts@1.1.3
v1.1.2 v1.1.2

1.1.2 (April 3, 2018)

:bug: Bug Fix

  • react-scripts

    • #4085 Resolve .js before .mjs files to unbreak dependencies with native ESM support. (@leebyron)

:memo: Documentation

  • react-scripts

    • #4197 Add troubleshooting for Github Pages. (@xnt)

Committers: 2

Migrating from 1.1.1 to 1.1.2

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@1.1.2

or

yarn add --exact react-scripts@1.1.2
Other projects in JavaScript