{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2017/05/18/whats-new-in-create-react-app.html","result":{"data":{"markdownRemark":{"html":"

Less than a year ago, we introduced Create React App as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors.

\n

Today, we are excited to announce that many features that have been in the pipeline for the last few months are finally released.

\n

As usual with Create React App, you can enjoy these improvements in your existing non-ejected apps by updating a single dependency and following our migration instructions.

\n

Newly created apps will get these improvements automatically.

\n

webpack 2

\n
\n

This change was contributed by @Timer in #1291.

\n
\n

We have upgraded to webpack 2 which has been officially released a few months ago. It is a big upgrade with many bugfixes and general improvements. We have been testing it for a while, and now consider it stable enough to recommend it to everyone.

\n

While the Webpack configuration format has changed, Create React App users who didn’t eject don’t need to worry about it as we have updated the configuration on our side.

\n

If you had to eject your app for one reason or another, Webpack provides a configuration migration guide that you can follow to update your apps. Note that with each release of Create React App, we are working to support more use cases out of the box so that you don’t have to eject in the future.

\n

The biggest notable webpack 2 feature is the ability to write and import ES6 modules directly without compiling them to CommonJS. This shouldn’t affect how you write code since you likely already use import and export statements, but it will help catch more mistakes like missing named exports at compile time:

\n

\"Export

\n

In the future, as the ecosystem around ES6 modules matures, you can expect more improvements to your app’s bundle size thanks to tree shaking.

\n

 Runtime Error Overlay

\n
\n

This change was contributed by @Timer and @nicinabox in #1101, @bvaughn in #2201.

\n
\n

Have you ever made a mistake in code and only realized it after the console is flooded with cryptic errors? Or worse, have you ever shipped an app with crashes in production because you accidentally missed an error in development?

\n

To address these issues, we are introducing an overlay that pops up whenever there is an uncaught error in your application. It only appears in development, and you can dismiss it by pressing Escape.

\n

A GIF is worth a thousand words:

\n

\"Runtime

\n

(Yes, it integrates with your editor!)

\n

In the future, we plan to teach the runtime error overlay to understand more about your React app. For example, after React 16 we plan to show React component stacks in addition to the JavaScript stacks when an error is thrown.

\n

Progressive Web Apps by Default

\n
\n

This change was contributed by @jeffposnick in #1728.

\n
\n

Newly created projects are built as Progressive Web Apps by default. This means that they employ service workers with an offline-first caching strategy to minimize the time it takes to serve the app to the users who visit it again. You can opt out of this behavior, but we recommend it both for new and existing apps, especially if you target mobile devices.

\n

\n \n \n \n