Set up a modern web app by running one command.
MIT License
Bot releases are hidden (Show)
Create React App 5.0.1 is a maintenance release that improves compatibility with React 18. We've also updated our templates to use createRoot
and relaxed our check for older versions of Create React App.
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
react-scripts
create-react-app
react-dev-utils
cra-template-typescript
, cra-template
, react-scripts
createRoot
(@kyletsang)cra-template-typescript
, cra-template
eslint-config-react-app
Published by iansu almost 3 years ago
Create React App 5.0 is a major release with several new features and the latest version of all major dependencies.
Thanks to all the maintainers and contributors who worked so hard on this release! 🙌
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
NOTE: You may need to delete your node_modules
folder and reinstall your dependencies by running npm install
(or yarn
) 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.
Like any major release, [email protected]
contains a number of 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.
Node 10 reached End-of-Life in April 2021 and Node 12 will be End-of-Life in April 2022. Going forward we will only support the latest LTS release of Node.js.
create-react-app
babel-preset-react-app
, cra-template-typescript
, cra-template
, create-react-app
, eslint-config-react-app
, react-app-polyfill
, react-dev-utils
, react-error-overlay
, react-scripts
eslint-config-react-app
, react-error-overlay
, react-scripts
react-scripts
react-scripts
react-scripts
eslint-config-react-app
, react-error-overlay
, react-scripts
create-react-app
react-dev-utils
create-react-app
, react-scripts
serve
has changed (@leo)eslint-config-react-app
react-dev-utils
babel-preset-react-app
, eslint-config-react-app
cra-template
npm ci
(@lukekarrys)create-react-app
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
react-scripts
babel-plugin-named-asset-import
, confusing-browser-globals
, create-react-app
, eslint-config-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
confusing-browser-globals
, cra-template-typescript
, cra-template
, create-react-app
react-error-overlay
, react-scripts
babel-preset-react-app
, cra-template-typescript
, cra-template
, create-react-app
, eslint-config-react-app
, react-app-polyfill
, react-dev-utils
, react-error-overlay
, react-scripts
react-dev-utils
, react-scripts
react-scripts
babel-plugin-named-asset-import
, confusing-browser-globals
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
eslint-config-react-app
, react-error-overlay
, react-scripts
babel-preset-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
react-dev-utils
Published by iansu over 3 years ago
v4.0.3 is a maintenance release that includes minor bug fixes and dependency updates.
react-dev-utils
create-react-app
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu over 3 years ago
v4.0.2 is a maintenance release that includes minor bug fixes and documentation updates.
react-scripts
react-scripts
react-scripts
react-scripts
create-react-app
react-dev-utils
, react-error-overlay
, react-scripts
react-scripts
react-dev-utils
cra-template-typescript
cra-template-typescript
, cra-template
Published by iansu almost 4 years ago
v4.0.1 is a maintenance release that includes minor bug fixes and documentation updates.
react-scripts
React is not defined
compilation error after ejected (@n3tr)react-dev-utils
react-scripts
create-react-app
, react-dev-utils
, react-scripts
cra-template-typescript
, cra-template
, react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu almost 4 years ago
Create React App 4.0 is a major release with several new features, including support for Fast Refresh!
Thanks to all the maintainers and contributors who worked so hard on this release! 🙌
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
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.
Like any major release, [email protected]
contains a number of 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.
We've upgraded to ESLint 7 and added many new rules including some for Jest and React Testing Library as well as the import/no-anonymous-default-export
rule. We've also upgraded eslint-plugin-hooks
to version 4.0.0 and removed the EXTEND_ESLINT
flag as it is no longer required to customize the ESLint config.
We've upgraded to Jest 26 and now set resetMocks
to true
by default in the Jest config.
We've switched to the Workbox InjectManifest plugin and moved the PWA templates into their own repository.
typescript
flag and NODE_PATH
supportWe've removed the deprecated typescript
flag when creating a new app. Use --template typescript
instead. We've also dropped deprecated NODE_PATH
flag as this has been replaced by setting the base path in jsconfig.json
.
We've changed the loading order of env files to match the dotenv
specification. See #9037 for more details.
Node 8 reached End-of-Life at the end of 2019 and is no longer supported.
eslint-config-react-app
, react-error-overlay
, react-scripts
react-scripts
create-react-app
cra-template-typescript
, cra-template
, react-scripts
react-dev-utils
, react-scripts
eslint-config-react-app
, react-error-overlay
, react-scripts
cra-template-typescript
, cra-template
, eslint-config-react-app
, react-error-overlay
, react-scripts
eslint-config-react-app
create-react-app
cra-template-typescript
, cra-template
, react-scripts
babel-plugin-named-asset-import
, confusing-browser-globals
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
create-react-app
, react-scripts
react-scripts
babel-plugin-named-asset-import
, babel-preset-react-app
, create-react-app
, react-app-polyfill
, react-dev-utils
, react-error-overlay
, react-scripts
eslint-config-react-app
, react-scripts
cra-template-typescript
, cra-template
, create-react-app
, react-app-polyfill
, react-dev-utils
, react-scripts
babel-plugin-named-asset-import
, babel-preset-react-app
, confusing-browser-globals
, cra-template-typescript
, react-dev-utils
, react-error-overlay
, react-scripts
react-scripts
babel-preset-react-app
, eslint-config-react-app
, react-scripts
eslint-config-react-app
, react-scripts
create-react-app
babel-preset-react-app
react-dev-utils
react-dev-utils
, react-scripts
cra-template-typescript
, cra-template
, react-scripts
react-scripts
babel-preset-react-app
, eslint-config-react-app
, react-scripts
cra-template
babel-preset-react-app
, react-scripts
react-dev-utils
, react-scripts
react-dev-utils
, react-error-overlay
, react-scripts
cra-template-typescript
, cra-template
create-react-app
react-dev-utils
cra-template-typescript
, cra-template
react-scripts
cra-template-typescript
, cra-template
, react-dev-utils
, react-scripts
babel-preset-react-app
eslint-config-react-app
cra-template-typescript
, cra-template
react-dev-utils
cra-template
babel-preset-react-app
react-scripts
react-scripts
react-error-overlay
, react-scripts
babel-plugin-named-asset-import
, babel-preset-react-app
, confusing-browser-globals
, cra-template-typescript
, cra-template
, create-react-app
, eslint-config-react-app
, react-app-polyfill
, react-error-overlay
, react-scripts
eslint-config-react-app
, react-dev-utils
, react-scripts
babel-plugin-named-asset-import
, babel-preset-react-app
, confusing-browser-globals
, cra-template-typescript
, cra-template
, create-react-app
, eslint-config-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
eslint-config-react-app
, react-error-overlay
, react-scripts
cra-template-typescript
, cra-template
react-app-polyfill
react-dev-utils
babel-plugin-named-asset-import
, babel-preset-react-app
, confusing-browser-globals
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
babel-preset-react-app
, cra-template-typescript
, cra-template
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
babel-plugin-named-asset-import
, confusing-browser-globals
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
babel-preset-react-app
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
babel-plugin-named-asset-import
, babel-preset-react-app
, create-react-app
, react-app-polyfill
, react-dev-utils
, react-error-overlay
, react-scripts
eslint-config-react-app
, react-scripts
babel-plugin-named-asset-import
, babel-preset-react-app
, confusing-browser-globals
, cra-template-typescript
, react-dev-utils
, react-error-overlay
, react-scripts
Published by gaearon almost 4 years ago
v3.4.4 release bumps resolve-url-loader
to a version for which npm audit
does not report a vulnerability. Note that this vulnerability did not affect Create React App projects, so this change is only necessary to satisfy auditing tools.
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by gaearon almost 4 years ago
v3.4.3 release bumps terser-webpack-plugin
to a version for which npm audit
does not report a vulnerability. Note that this vulnerability did not affect Create React App projects, so this change is only necessary to satisfy auditing tools.
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by gaearon almost 4 years ago
v3.4.2 release bumps webpack-dev-server
to a version for which npm audit
does not report a vulnerability. Note that this vulnerability did not affect Create React App projects, so this change is only necessary to satisfy auditing tools.
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu over 4 years ago
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.
react-scripts
babel-preset-react-app
cra-template
, eslint-config-react-app
, react-scripts
cra-template-typescript
, cra-template
react-scripts
react-scripts
babel-preset-react-app
, create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu over 4 years ago
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.
react-scripts
create-react-app
, react-dev-utils
, react-error-overlay
react-dev-utils
cra-template-typescript
, cra-template
cra-template-typescript
react-dev-utils
, react-scripts
cra-template-typescript
cra-template-typescript
, cra-template
react-scripts
cra-template-typescript
, cra-template
, react-dev-utils
, react-error-overlay
, react-scripts
react-dev-utils
react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu over 4 years ago
v3.3.1 is a maintenance release that includes minor bug fixes and documentation updates.
cra-template
react-scripts
babel-preset-react-app
react-dev-utils
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
babel-preset-react-app
create-react-app
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
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu almost 5 years ago
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.
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.
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.
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
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"
}
}
babel-preset-react-app
babel-preset-react-app
, react-dev-utils
cra-template-typescript
, cra-template
, create-react-app
, react-scripts
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.
eslint-config-react-app
create-react-app
react-scripts
react-dev-utils
cra-template-typescript
, cra-template
react-scripts
cra-template
create-react-app
, react-error-overlay
babel-preset-react-app
react-dev-utils
, react-scripts
babel-preset-react-app
react-dev-utils
react-scripts
react-scripts
eslint-config-react-app
create-react-app
cra-template-typescript
create-react-app
, react-dev-utils
, react-scripts
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
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu about 5 years ago
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.
react-scripts
react-dev-utils
, react-scripts
react-scripts
react-app-polyfill
react-scripts
react-dev-utils
react-scripts
react-dev-utils
, react-scripts
react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu about 5 years ago
v3.1.2 is a maintenance release that includes minor bug fixes and documentation updates.
react-scripts
babel-preset-react-app
, react-error-overlay
, react-scripts
react-scripts
react-scripts
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
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu about 5 years ago
v3.1.1 is a maintenance release that includes minor bug fixes and documentation updates.
react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu about 5 years ago
v3.1.0 is a minor release that adds ESLint 6 support as well as experimental support for extending and customizing the ESLint config along with other minor bug fixes and documentation updates.
eslint-config-react-app
, react-error-overlay
, react-scripts
eslint-config-react-app
, react-scripts
react-dev-utils
react-scripts
react-scripts
eslint-config-react-app
, react-error-overlay
, react-scripts
react-dev-utils
react-scripts
eslint-config-react-app
react-error-overlay
, react-scripts
react-scripts
jsx: "react"
in tsconfig (@kingdaro)react-dev-utils
eslint-config-react-app
, react-error-overlay
, react-scripts
eslint-config-react-app
create-react-app
eslint-config-react-app
react-error-overlay
, react-scripts
babel-preset-react-app
react-scripts
react-error-overlay
, react-scripts
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
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu over 5 years ago
v3.0.1 is a maintenance release that adjusts some ESLint rules for TypeScript along with other minor bug fixes and documentation updates.
react-error-overlay
, react-scripts
babel-jest
(@ianschmitz)babel-jest
preflight error (@ianschmitz)eslint-config-react-app
no-dupe-class-members
rule for TypeScript (@ianschmitz)no-useless-constructor
rule in TypeScript (@ianschmitz)eslint-config-react-app
, react-scripts
default-case
lint rule for TypeScript (@ianschmitz)react-dev-utils
react-dev-utils
, react-scripts
babel-preset-react-app
react-scripts
react-app-polyfill
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by iansu over 5 years ago
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! 🎉
browserslist
support in @babel/preset-env: #6608jsconfig.json
/tsconfig.json
: #6656Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
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.
Like any major release, [email protected]
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.
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.
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.
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-envThe 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
We've removed the --no-watch
flag from the start
script in favor of Jest's own --watchAll=false
.
asset-manifest.json
All asset paths have been moved under the files
key in asset-manifest.json
.
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:
```json
{
"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
.
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.
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
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
react-dev-utils
react-scripts
create-react-app
react-scripts
react-scripts
eject warning. (@lffg)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
react-scripts
react-scripts
babel-plugin-named-asset-import
, confusing-browser-globals
, react-dev-utils
, react-error-overlay
, react-scripts
react-dev-utils
eslint-config-react-app
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
eslint-config-react-app
eslint-config-react-app
, react-scripts
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
Published by iansu over 5 years ago
v2.1.8 is a maintenance release that reapplies the TypeScript speed improvements (#6406) in a new major version of react-dev-utils
.
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]