We're live-coding on Twitch! Join us!
What's New in Create React App 2

What's New in Create React App 2

Yes!! It keeps getting better, I am as excited as you are. Create-react app is the most widely used react boiler plate there is today, it helps you focus on writing code, and then handles the build and testing for you.
It literarily does all the work for you! My favorite part of running create-react-app is

Happy Hacking!

So what's new?

Babel 7, Webpack 4 and Jest 23

Now with the new updates that Babel , Webpack and Jest offer, Webpack 4 is fast and efficient. It splits your bundles more intelligently and is of better performance than previous Webpack versions. Babel 7 is equally faster than the older versions. There has been an upgrade tool: JS configs, config "overrides", more options for size/minification, JSX Fragments, TypeScript, new proposals, and more! And yes!, Jest 23 makes testing faster and more reliable. The CRA 2.0 leverages on these new features of these technologies, which means you don’t need to manually update.

SVG as a React Component

SVGs no longer have to be used in the src attribute of the <img/>you can now import svg as a compont as follows: import * as Logo from './logo.svg' then call it like this: <Logo/>

Css modules & Sass

It is now so easy to use sass in Create-react-app, the only process required is running npm install node-sass with any package manager of your choice , then rename your .css files to .scss and you’re ready to write stylesheets in an easier, reusable way. CSS Modules came with less stress in this new version of create-react-app, no configuration needed. Simply import CSS modules using, [Name].module.sass or [Name].module.scss .

Service Workers and Workbox

Create React App 2.0 uses Google’s Workbox , libraries and node modules for easier caching of assets and allows you to take full advantage of progressive web apps features. So this means sw-precache was dropped in the second version . The serviceworker.js file is now generated by Workbox which is arguably a good choice since it has more features than sw-pracache.

Smaller CSS Bundle

We can now take advantage of better CSS bundling by simply targeting modern browsers. This can be done in the package.json in the browserlist specification, by adjusting your styles to only target -webkit _ and -ms_ when necessary.

Handle your own Proxy Configuration

With CRA 2.0 you can now configure your own proxy, by first installing the http-proxy-middleware , creating a src/setupProxy.js file and then configuring.

Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms

In Version 2.0, third party libraries likeApollo and Relay Modern work out of the box with no additional configuration other than what is in their documentation.

Boiler plate update.

_create react app 2.0 _

After running create-react-app demo, I found a couple of exciting new features, for example, the home page for the CRA 2.0 is slightly different from the Version 1, I personally like the new look. If you’re not sure the version you just installed, this should help you out.

Upgrading CRA V.1 to V.2

Upgrading a project to Create-react-app version 2 is actually very easy. Open package.json of the project and find the react-scripts there. Then change it to version 2.0.3, run npm install (or yarn, if you use it).

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.

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.

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.

Breaking changes

  • Node version 6 is not supported so you’d have to have a version 7 or higher
  • Code-splitting with import() now behaves closer to specification, while require.ensure() is disabled.
  • The default Jest environment now includes jsdom.
  • Support for .mjs extension was removed until the ecosystem around it stabilizes.

Should You Update?

In my opinion ,if it is not broken don’t fix it . The version 2.0 would be great if you’re starting a new project because of the new features with less configuration for the features you want to use, but you don’t need to update your application if your application is working for you while running on version 1.

More Information?

Check out the release note , for more information and if you notice any problems in the v.2, let the good people at facebook know.

Like this article? Follow @Obinnaspeaks on Twitter