What's New in Create React App 2.0

A Quick Look at 2.0

Facebook’s create-react-app is definitely one of the most popular React boilerplates that currently exists. Today, the Create React App team has just released 2.0 of this package and it’s packed with great new features.

Let’s briefly dive into these new features and what they mean for development with Create React App.

Sass & CSS Modules

While the first iteration of Create React App supported Sass, it required a little bit of configuration and some extra packages to ensure that everything was running smoothly. Now, with 2.0, it just works. All you need to do is install node-sass with the package manager of your choice and rename your .cssfiles to .scss and that’s it!

CSS Modules allow you to use the same CSS class across multiple files without having to worry about clashes. In Create React App 2.0, they work out of the box: no configuration needed! Just import your CSS Modules using the [name].module.scss or [name].module.sassnaming convention and voila!

Babel 7 & React Fragment Syntax

ReactJS announced a new syntax for Fragments recently that I love. It’s short, sweet, and to the point. Instead of <React.Fragment></React.Fragment> you can simply use <></>. Beautiful. However, transpilers like Babel were having some issues with this code. Now, Create React App 2.0 uses Babel 7 to handle these new fragments right out of the box.

Webpack 4

Webpack 4 is fast and efficient. It splits your bundles more intelligently and is better performant than previous Webpack versions. I could write a whole article on Webpack 4 and all it has to offer, but that’s not what this article is for. Scotch.io has a good article about Webpack 4 updatesthat I would recommend you read.

Jest 23

Jest is a great testing framework. Jest 23 is fast and packed with great features including the interactive snapshot mode (which is a huge time saver), jest.each which allows you to define a table of test cases and iterate through them in one line, and new matchers for a better testing experience.

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

In Create React App 1.x, Babel Macros were near impossible to use without ejecting. Now, third party libraries like Apollo and Relay Modern work out of the box with no additional configuration other than what is in their documentation. Currently, there’s only an example for setting up Relay, but I imagine an Apollo (and others) demo will be out shortly.

Importing an SVG as a React Component

This feature is awesome. Instead of importing the SVG and then using it as the src attribute for an <img /> , you can now use the SVG as a component! For example, if you have import * as Logo from './logo.svg'; you can just have <Logo /> in your code, and that’s it!

Yarn Plug ‘n Play

Yarn Plug ‘n Play is an experimental mode in Yarn. Normally, when you run yarn install , your packages are installed and then cached inside the node_modules folder. With this new experimental mode, instead of caching to node_modules, a new file that contains static resolutions tables is created. This file contains what packages are available on the dependency tree, how they’re linked, and where on the disk they’re located. It’s a pretty neat concept and you can play with it in Create React App 2.0.

Manual Proxy Configuration

With Create React App 2.0, if the proxy feature is not flexible enough for what you need, you can nowconfigure your own proxy with the Express app instance. All you need to do is install the http-proxy-middleware , create a src/setupProxy.js file and configure it however you need.

Packages of any Node Version

With the inclusion of Babel 7 and Webpack 4, you’re now able to use packages from any Node version without breaking the build. Babel and Webpack will handle any transpilation and bundling out of the box without any additional configuration.

Smaller CSS Bundle

With Create React App 2.0, if you’re targeting modern browsers you can target those browers specifically in the package.json in the browserlist specification. This makes your CSS bundles smaller by not adjusting your styles to target -webkit and -ms unless necessary.

Service Workers and Google’s Workbox

In Create React App 2.0, the offline/cache-first behavior of service workers are now opt-in. Offline/cache-first progressive web apps are faster and more reliable on mobile devices, however, they can make debugging deployments difficult. In addition, service workers in Create React App 2.0 utilize Google’s Workbox, a set of libraries and node modules for easier caching of assets and allow you to take full advantage of progressive web apps features.

Breaking is Bad

While Create React App 2.0 is definitely awesome, there were also some breaking changesthat you should be aware of. They’re fairly minor changes, so hopefully if you’re upgrading from Create React App 1.0, you shouldn’t run into them.

Should You Update?

While Create React App 2.0 has some great features, you don’t need to update if your application is in a sound state and is working for you and your development team. There are no major risks in staying with Create React App 1.x. However, if you’re starting a brand new project, definitely choose Create React App 2.0. The features that come out of the box will get you started much quicker with less configuration for the features you might want to use.

This story is published inNoteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.

Follow our publicationto see more product & design stories featured by theJournalteam.