Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

create-react-app-enved

weisk1210.1.0TypeScript support: included

Create React apps with no build configuration.

readme

Create React App Build Status PRs Welcome

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 our Spectrum community.

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 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 8.16.0 or Node 10.16.0 or later version on your local development machine (but it’s not required on the server). 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

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.

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 instead. Unlike Create React App, it pre-renders the website into HTML at the build time.

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

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.

changelog

3.4.1 (2020-03-20)

v3.4.1 is a maintenance release that includes minor bug fixes and documentation updates including upgrading Babel to fix a bug in the 7.8 release line. This release also brings support for TypeScript 3.8.

:bug: Bug Fix

  • react-scripts
  • babel-preset-react-app
  • cra-template, eslint-config-react-app, react-scripts
    • #7790 Widen eslint-config-react-app peer dependency versions (@lukyth)

:nail_care: Enhancement

  • cra-template-typescript, cra-template
  • react-scripts

:memo: Documentation

  • Other
    • #8515 Fix proxying API request docs (@hjr3)
    • #8561 Indicate that the file structure is the template's (@Vinnl)
  • react-scripts

:hammer: Underlying Tools

  • babel-preset-react-app, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • react-scripts

Committers: 9

Migrating from 3.4.0 to 3.4.1

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

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

or

yarn add --exact react-scripts@3.4.1

3.4.0 (2020-02-14)

v3.4.0 is a minor release that adds new features, including support for SSL and setting PUBLIC_URL in development. It also includes a fix for Hot Module Reloading with CSS Modules as well as other bug fixes.

:bug: Bug Fix

  • react-scripts
    • #8378 Downgrade style-loader to v0.23.1 due to CSS modules hot reload not working with v1.0.0 and above (@chybisov)
  • create-react-app, react-dev-utils, react-error-overlay
  • react-dev-utils
  • cra-template-typescript, cra-template
  • cra-template-typescript

:nail_care: Enhancement

  • react-dev-utils, react-scripts
  • cra-template-typescript
  • cra-template-typescript, cra-template
  • react-scripts
    • #5845 Add option to provide custom ssl certificates during development (@alexbrazier)

:memo: Documentation

  • cra-template-typescript, cra-template, react-dev-utils, react-error-overlay, react-scripts
  • Other

:hammer: Underlying Tools

Committers: 18

Migrating from 3.3.1 to 3.4.0

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

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

or

yarn add --exact react-scripts@3.4.0

3.3.1 (2020-01-31)

v3.3.1 is a maintenance release that includes minor bug fixes and documentation updates.

:bug: Bug Fix

:nail_care: Enhancement

  • react-error-overlay
  • cra-template-typescript
  • cra-template-typescript, cra-template, react-scripts
  • create-react-app
  • cra-template-typescript, cra-template
  • eslint-config-react-app
    • #7803 Remove error for @typescript-eslint/no-namespace (@szhu)

:memo: Documentation

:house: Internal

:hammer: Underlying Tools

  • babel-preset-react-app, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • react-dev-utils
  • babel-plugin-named-asset-import
  • create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • create-react-app, react-dev-utils, react-error-overlay
  • react-error-overlay, react-scripts
    • #8102 [Security] Update terser webpack plugin (@RDIL)

Committers: 29

Migrating from 3.3.0 to 3.3.1

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

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

or

yarn add --exact react-scripts@3.3.1

3.3.0 (2019-12-04)

v3.3.0 is a minor release that adds new features, including custom templates and support for the new optional chaining and nullish coalescing operators.

Custom Templates

You can now create a new app using custom templates.

We've published our existing templates as cra-template and cra-template-typescript, but we expect to see many great templates from the community over the coming weeks.

The below command shows how you can create a new app with cra-template-typescript.

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

Note that you can omit the prefix cra-template- when specifying which template you would like. For TypeScript users, we're deprecating --typescript in favour of --template typescript.

If you don't set a template, we'll create your new app with cra-template - which is just a new name for our base template.

Optional Chaining and Nullish Coalescing Operators

We now support the optional chaining and nullish coalescing operators!

// Optional chaining
a?.(); // undefined if `a` is null/undefined
b?.c; // undefined if `b` is null/undefined

// Nullish coalescing
undefined ?? 'some other default'; // result: 'some other default'
null ?? 'some other default'; // result: 'some other default'
'' ?? 'some other default'; // result: ''
0 ?? 300; // result: 0
false ?? true; // result: false

If you're using TypeScript, you will need to upgrade your typescript dependency to 3.7.0 or later if you wish to use the new operators.

If you're using Visual Studio Code 1.40 (the latest as of this release) or earlier, you will need to configure your editor if you want it to understand the new operators.

If you're using TypeScript in your project and have already upgrade its version as described above, then you can configure VS Code to Use Workspace Version of TypeScript. If your project isn't using TypeScript, you can use the JavaScript and TypeScript Nightly extension until VS Code releases a newer version including TypeScript 3.7.0 or newer.

Numeric Separators

We've added support for numeric separators to improve readability of numeric literals.

1000000000; // Is this a billion? a hundred millions? Ten millions?
101475938.38; // what scale is this? what power of 10?

1_000_000_000; // Ah, so a billion
101_475_938.38; // And this is hundreds of millions

no-unexpected-multiline

We've removed this rule as it is not compatible with Prettier. If you rely on this rule you can re-enable it by extending our ESLint config and adding the following:

{
  "extends": "react-app",
  "rules": {
    "no-unexpected-multiline": "warn"
  }
}

:rocket: New Feature

  • babel-preset-react-app
    • #7438 Add optional chaining and nullish coalescing operators support (@renatoagds)
  • babel-preset-react-app, react-dev-utils
  • cra-template-typescript, cra-template, create-react-app, react-scripts

:boom: Breaking Change

  • create-react-app, react-dev-utils, react-scripts

    • #7988 Bump webpack-dev-server (@ianschmitz)

      NOTE: This is only a breaking change if you're using react-dev-utils outside of Create React App.

:bug: Bug Fix

  • eslint-config-react-app
  • create-react-app
    • #7991 Support templates in scoped packages (@klasbj)
    • #7839 added check for typescript template and unsupported node version (@awaseem)
  • react-scripts
  • react-dev-utils

:nail_care: Enhancement

  • cra-template-typescript, cra-template
  • react-scripts
  • cra-template
    • #7931 No spinning React logo if prefers-reduced-motion (@donavon)
  • create-react-app, react-error-overlay
  • babel-preset-react-app
    • #7726 Add babel runtime version to transform-runtime plugin to reduce bundle size (@topaxi)

:memo: Documentation

:house: Internal

  • react-scripts
  • Other
  • eslint-config-react-app
    • #8003 Use @typescript-eslint/no-unused-expressions to support optional chaining (@maxdavidson)
  • create-react-app
    • #7844 added e2e test for checking typescript template with unsupported node (@awaseem)
    • #7882 refactor: remove double coerce (@mrmckeb)
    • #7880 Pass through fully specified template name (@iansu)
  • cra-template-typescript
    • #7944 Make base and TypeScript templates consistent (@suprj)
  • create-react-app, react-dev-utils, react-scripts

:hammer: Underlying Tools

  • babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • create-react-app, react-dev-utils, react-scripts
  • react-app-polyfill
  • babel-preset-react-app, react-app-polyfill, react-dev-utils, react-scripts
  • react-scripts
  • babel-preset-react-app, cra-template-typescript, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • react-dev-utils
  • babel-plugin-named-asset-import, babel-preset-react-app, react-error-overlay, react-scripts
  • react-error-overlay, react-scripts

Committers: 42

Migrating from 3.2.0 to 3.3.0

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

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

or

yarn add --exact react-scripts@3.3.0

3.2.0 (2019-10-03)

v3.2.0 is a minor release that adds support for production profiling and ignoring TypeScript type errors to make migrating JavaScript projects to TypeScript easier. It also includes other minor bug fixes and documentation updates.

:rocket: New Feature

  • react-scripts
  • react-dev-utils, react-scripts

:bug: Bug Fix

  • react-scripts
  • react-app-polyfill
    • #7205 Guard polyfills against window possibly being undefined (@jxom)

:nail_care: Enhancement

  • react-scripts
  • react-dev-utils

:memo: Documentation

  • #7302 docs: note that 2 to 3 migration may require deletion of node_modules (@kimpers)
  • #7757 Documentation typo fix: accessbile→accessible (@tomer)
  • #7601 [Documentation] Updated list of supported Jest config overrides (@neilbryson)
  • #7705 Update runtime chunk name separator in docs (@samuelmeuli)

:house: Internal

  • react-scripts
  • react-dev-utils, react-scripts

:hammer: Underlying Tools

Committers: 19

Migrating from 3.1.2 to 3.2.0

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

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

or

yarn add --exact react-scripts@3.2.0

3.1.2 (2019-09-19)

v3.1.2 is a maintenance release that includes minor bug fixes and documentation updates.

:bug: Bug Fix

  • react-scripts
  • babel-preset-react-app, react-error-overlay, react-scripts

:nail_care: Enhancement

:memo: Documentation

:house: Internal

:hammer: Underlying Tools

  • babel-plugin-named-asset-import, confusing-browser-globals, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • react-scripts
  • eslint-config-react-app, react-scripts

Committers: 20

Migrating from 3.1.1 to 3.1.2

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

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

or

yarn add --exact react-scripts@3.1.2

3.1.1 (2019-08-13)

v3.1.1 is a maintenance release that includes minor bug fixes and documentation updates.

:bug: Bug Fix

:nail_care: Enhancement

  • eslint-config-react-app

:memo: Documentation

Committers: 3

Migrating from 3.1.0 to 3.1.1

Optionally remove Disallow: /static/ from public/robots.txt if you want to allow your images and other static files to be indexed by search engines #7508

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

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

or

yarn add --exact react-scripts@3.1.1

3.1.0 (2019-08-09)

v3.1.0 is a minor release that adds ESLint 6 support as well as experimental support for extended and customizing the ESLint config along with other minor bug fixes and documentation updates. The upgrade to ESLint 6 is a breaking change only if you're using eslint-config-react-app or react-error-overlay outside of Create React App.

Highlights

  • ESLint 6: #7415
  • Experimental ESLint config customization: #7036
  • More Jest config options: #6055
  • Option to configure or disable image inlining: #6060

:rocket: New Feature

  • eslint-config-react-app, react-error-overlay, react-scripts
  • eslint-config-react-app, react-scripts
  • react-dev-utils
  • react-scripts

:boom: Breaking Change

  • eslint-config-react-app, react-error-overlay, react-scripts

:bug: Bug Fix

  • react-dev-utils
    • #7444 Fix for #6720: HMR not working in Firefox if proxy option present (@dmile)
  • react-scripts
  • eslint-config-react-app
  • react-error-overlay, react-scripts
    • #7257 Upgrade webpack to 4.35.0 to fix dynamic import issue (@iansu)

:nail_care: Enhancement

:memo: Documentation

:house: Internal

:hammer: Underlying Tools

  • babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • eslint-config-react-app, react-error-overlay, react-scripts
  • eslint-config-react-app, react-scripts
  • react-scripts
  • react-dev-utils

Committers: 46

Migrating from 3.0.1 to 3.1.0

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

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

or

yarn add --exact react-scripts@3.1.0

3.0.1 (2019-05-08)

v3.0.1 is a maintenance release that adjusts some ESLint rules for TypeScript along with other minor bug fixes and documentation updates.

:boom: Breaking Change

  • babel-preset-react-app
    • #6887 Update dependencies of Babel preset with recent changes (@skoging)

:bug: Bug Fix

  • react-error-overlay, react-scripts
  • eslint-config-react-app
  • eslint-config-react-app, react-scripts
  • react-dev-utils
    • #6876 Change cssmodule classname hash to use relative paths (@vg-stan)

:nail_care: Enhancement

  • react-dev-utils, react-scripts
  • babel-preset-react-app
    • #6887 Update dependencies of Babel preset with recent changes (@skoging)
  • react-scripts
    • #6706 Generate SVG component name in Jest fileTransform (@dallonf)
    • #6300 Remove body padding reset from templates (@Hurtak)

:memo: Documentation

:house: Internal

  • react-scripts
    • #6854 Remove Object.assign from MiniCssExtractPlugin options (@swashcap)

Committers: 12

Migrating from 3.0.0 to 3.0.1

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

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

or

yarn add --exact react-scripts@3.0.1

3.0.0 (April 22, 2019)

Create React App 3.0 brings some exciting new features including support for Hooks!

Thanks to all the maintainers and contributors who worked so hard on this release! :tada:

Highlights

  • Jest 24: #6278
  • Hooks support: #5997
  • TypeScript linting: #6513
  • browserslist support in @babel/preset-env: #6608
  • Absolute imports using jsconfig.json/tsconfig.json: #6656

Migrating from 2.1.x to 3.0.0

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

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

or

yarn add --exact react-scripts@3.0.0

NOTE: You may need to delete your node_modules folder and reinstall your dependencies by running yarn (or npm install) if you encounter errors after upgrading.

If you previously ejected but now want to upgrade, one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It’s also possible that the feature you ejected for is now supported out of the box.

Breaking Changes

Like any major release, `react-scripts@3.0.0` contains a few breaking changes. We expect that they won't affect every user, but we recommend you look over this section to see if something is relevant to you. If we missed something, please file a new issue.

Jest 24

We've updated from Jest 23 to get the latest improvements in Jest 24. We've noticed some differences in snapshot serialization in Jest 24, so you may need to adjust your tests slightly once you update. You can read more about what's changed in the Jest 24 blog post.

Hooks support

We now enforce Rules of Hooks with eslint-plugin-react-hooks. If you are breaking any of the rules of Hooks this will cause your build to fail.

TypeScript linting

We now lint TypeScript files. You can see the list of rules we enforce to check if your project is compatible. If you're using Visual Studio Code you can follow our guide to setup up your editor to display lint warnings.

browserslist support in @babel/preset-env

The browserslist config in your package.json is now used to control the output of your JavaScript files. You can use separate configuration for development and production. See here for a good starting point which gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production

Remove --no-watch flag

We've removed the --no-watch flag from the start script in favor of Jest's own --watchAll=false.

New structure in asset-manifest.json

All asset paths have been moved under the files key in asset-manifest.json.

New Features

using jsconfig.json/tsconfig.json

We now support setting baseUrl in jsconfig.json and tsconfig.json. To configure baseUrl to point to the src directory in your JavaScript project, create a jsconfig.json file in your project root:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

If you have a TypeScript project you can configure baseUrl the same way in your tsconfig.json.

Currently the only supported options for baseUrl are node_modules (the default) and src.

PostCSS Normalize

You can now include a version of Normalize.css in your project that will use your browserslist setting to generate the appropriate styles for your target browsers. To include it simply add @import-normalize at the top of one of your CSS files.

Detailed Changelog

:rocket: New Feature

  • react-scripts
  • babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
  • eslint-config-react-app, react-scripts
  • babel-preset-react-app, eslint-config-react-app, react-scripts
  • babel-preset-react-app, react-dev-utils, react-scripts

:boom: Breaking Change

  • react-scripts
  • babel-preset-react-app, react-app-polyfill
  • babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
  • eslint-config-react-app, react-scripts
  • babel-preset-react-app, eslint-config-react-app, react-scripts
  • babel-preset-react-app, react-dev-utils, react-scripts

:bug: Bug Fix

:nail_care: Enhancement

  • react-scripts
  • babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • babel-preset-react-app, react-app-polyfill
  • create-react-app
  • react-dev-utils

:memo: Documentation

:house: Internal

  • Other
  • react-scripts
    • #6313 Update testMatch to also be compatible with Jest 24 (@ngbrown)
    • #4176 Remove --coverage + --watch workaround for the test command (@stipsan)
    • #6655 Change app component declaration from arrow function to regular function (@iansu)
    • #6625 change named import into default import (@xiaoxiangmoe)
    • #6621 make compiler a const not a let (@Primajin)
  • babel-plugin-named-asset-import, confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
  • react-dev-utils
  • eslint-config-react-app
    • #6662 Sync version of babel-eslint in eslint-config-react-app for react-scripts V3 (@dalcib)

:hammer: Underlying Tools

  • react-scripts
  • babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • babel-preset-react-app
  • babel-preset-react-app, react-dev-utils, react-error-overlay, react-scripts
  • react-dev-utils
    • #6739 Update fork-ts-checker-webpack-plugin out of alpha (@pelotom)
  • eslint-config-react-app
    • #6701 Remove project property from @typescript-eslint/parser options (@jackwilsdon)
  • eslint-config-react-app, react-scripts
    • #6653 Unpin eslint-config-react-hooks dependency (@iansu)
  • babel-preset-react-app, eslint-config-react-app, react-scripts
  • babel-preset-react-app, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts

Committers: 49

Releases Before 3.x

Please refer to CHANGELOG-2.x.md for earlier versions.