{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2018/10/01/create-react-app-v2.html","result":{"data":{"markdownRemark":{"html":"

Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.

\n

While React itself doesn’t require any build dependencies, it can be challenging to write a complex app without a fast test runner, a production minifier, and a modular codebase. Since the very first release, the goal of Create React App has been to help you focus on what matters the most — your application code — and to handle build and testing setup for you.

\n

Many of the tools it relies on have since released new versions containing new features and performance improvements: Babel 7, webpack 4, and Jest 23. However, updating them manually and making them work well together takes a lot of effort. And this is exactly what Create React App 2.0 contributors have been busy with for the past few months: migrating the configuration and dependencies so that you don’t need to do it yourself.

\n

Now that Create React App 2.0 is out of beta, let’s see what’s new and how you can try it!

\n
\n

Note

\n

Don’t feel pressured to upgrade anything. If you’re satisfied with the current feature set, its performance, and reliability, you can keep using the version you’re currently at! It might also be a good idea to let the 2.0 release stabilize a little bit before switching to it in production.

\n
\n

What’s New

\n

Here’s a short summary of what’s new in this release:

\n\n

All of these features work out of the box — to enable them, follow the below instructions.

\n

Starting a Project with Create React App 2.0

\n

You don’t need to update anything special. Starting from today, when you run create-react-app it will use the 2.0 version of the template by default. Have fun!

\n

If you want to use the old 1.x template for some reason, you can do that by passing --scripts-version=react-scripts@1.x as an argument to create-react-app.

\n

Updating a Project to Create React App 2.0

\n

Upgrading a non-ejected project to Create React App 2.0 should usually be straightforward. Open package.json in the root of your project and find react-scripts there.

\n

Then change its version to 2.0.3:

\n
  // ... other dependencies ...\n  \"react-scripts\": \"2.0.3\"
\n

Run npm install (or yarn, if you use it). For many projects, this one-line change is sufficient to upgrade!

\n

working here... thanks for all the new functionality 👍

— Stephen Haney (@sdothaney) October 1, 2018
\n

Here are a few more tips to get you started.

\n

When you run npm start for the first time after the upgrade, you’ll get a prompt asking about which browsers you’d like to support. Press y to accept the default ones. They’ll be written to your package.json and you can edit them any time. Create React App will use this information to produce smaller or polyfilled CSS bundles depending on whether you target modern browsers or older browsers.

\n

If npm start still doesn’t quite work for you after the upgrade, check out the more detailed migration instructions in the release notes. There are a few breaking changes in this release but the scope of them is limited, so they shouldn’t take more than a few hours to sort out. Note that support for older browsers is now opt-in to reduce the polyfill size.

\n

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 (maybe Sass or CSS Modules?) is now supported out of the box.

\n
\n

Note

\n

Due to a possible bug in npm, you might see warnings about unsatisfied peer dependencies. You should be able to ignore them. As far as we’re aware, this issue isn’t present with Yarn.

\n
\n

Breaking Changes

\n

Here’s a short list of breaking changes in this release:

\n\n

If either of these points affects you, 2.0.3 release notes contain more detailed instructions.

\n

Learn More

\n

You can find the full changelog in the release notes. This was a large release, and we may have missed something. Please report any problems to our issue tracker and we’ll try to help.

\n
\n

Note

\n

If you’ve been using 2.x alpha versions, we provide separate migration instructions for them.

\n
\n

Thanks

\n

This release wouldn’t be possible without our wonderful community of contributors. We’d like to thank Andreas Cederström, Clement Hoang, Brian Ng, Kent C. Dodds, Ade Viankakrisna Fadlil, Andrey Sitnik, Ro Savage, Fabiano Brito, Ian Sutherland, Pete Nykänen, Jeffrey Posnick, Jack Zhao, Tobias Koppers, Henry Zhu, Maël Nison, XiaoYan Li, Marko Trebizan, Marek Suscak, Mikhail Osher, and many others who provided feedback and testing for this release.

","excerpt":"Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update. While React itself doesn’t require any build dependencies, it can be challenging to write a complex app without a fast test runner, a production minifier, and a modular codebase. Since the very first release, the goal of Create React App has been to help you focus on what matters the most — your application code — and to handle build and testing setup for you. Many of the…","frontmatter":{"title":"Create React App 2.0: Babel 7, Sass, and More","next":null,"prev":null,"author":[{"frontmatter":{"name":"Joe Haddad","url":"https://twitter.com/timer150"}},{"frontmatter":{"name":"Dan Abramov","url":"https://twitter.com/dan_abramov"}}]},"fields":{"date":"October 01, 2018","path":"content/blog/2018-10-01-create-react-app-v2.md","slug":"/blog/2018/10/01/create-react-app-v2.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2018/10/01/create-react-app-v2.html"}},"staticQueryHashes":[]}