Take a Tour: New Features in Create React App v3

Huzzah! create-react-app v3.0.0 was just announced by the React Team! In this article, we’ll cover the most important features and go over some juicy code snippets.

Instead of attempting to provide a comprehensive list of the changes in v3.0.0, I’ve grouped by tools and libraries (TypeScript, Jest, etc) so that you can cherry-pick what you wanna read.

Table of contents

• Highlights
• Jest 24
• TypeScript
• Visual Studio Code

Highlights

browserslist

Perhaps one of the biggest features is the ability to use browserslist tools to target specific browsers.

As Babel transforms your code, it will look at your browserslist settings in package.json and make use of the appropriate polyfills & transforms. These are the default settings:

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

In production, your app will contain all of the polyfills/transforms for browsers that have at least 0.2% global usage, however, it’ll ignore Opera Mini (1.6% global usage). browserslist uses the global usage data from caniuse.com.

For example, if you wanted to target Edge 16 you could still use array destructing:

// Shiny, new ECMASCript features!
const array = [1, 2, 3];
const [first, second] = array;

// ...Babel transforms for Edge 16
const array = [1, 2, 3];
const first = array[0];
const second = array[1];

PostCSS Normalize

PostCSS Normalize is made by the same folks that are building browserslist. PostCSS Normalize is similar to browserslist, but instead of transforming your JavaScript code, it transforms your CSS stylesheets.

If you already have the browserslist declarations in package.json, it already knows what browsers you want to target! All you need to do is include @import-normalize at the top of one of your CSS files.

For example, if you’re targeting Internet Explorer 9+ it’ll include these styles:

@import-normalize;
/* Add the correct "display" values in IE 9 */
audio,
video {
  display: inline-block;
}

/* Remove border for img inside <a> tags IE 10 */
img {
  border-style: none;
}

However, if you only want to support IE 10+

@import-normalize;
/* Remove border for img inside <a> tags IE 10 */
img {
  border-style: none;
}

With PostCSS Normalize, even though you’re doing all your development with Chrome you can rest assured that it’ll look exactly the same on Firefox/Safari/Opera/etc. I feel like we all have that story when we’re showing off our “sweet website” to a friend who’s using a weird browser and your website looks like chop suey. Say goodbye to those days with PostCSS Normalize!

Linting for Hooks

With React v16.8, the new Hooks API finally landed! Now Create React App v3 comes preinstalled with a linting config to help you write “best practices” Hooks. There are two linter rules for Hooks:

• Call Hooks from React function components
• Call Hooks from custom Hooks

That’s it! They pertain to where you use Hooks to prevent situations where you might use a Hook inside a for-loop and create all sorts of havoc with useState and useEffect. If you’d like a Quick Start-style guide on Hooks, check out Introduction to React Hooks 🤓!

Jest 24

create-react-app now ships with the latest version of Jest (v24) released late-January 2019. If you’ve been using Jest, you will definitely want to checkout their announcement that provides a great overview of all the new features!

TypeScript

Those of you that are using TypeScript, this new version of Create React App will detect and lint .ts files. This seems like a huge gesture of support for TypeScript, especially considering that Flow has less comprehensive linting rules. These are the default linting rules that come with Create React App v3:

'@typescript-eslint/no-angle-bracket-type-assertion': 'warn',
'@typescript-eslint/no-array-constructor': 'warn',
'@typescript-eslint/no-namespace': 'error',
'@typescript-eslint/no-unused-vars': [
  'warn',
  {
    args: 'none',
    ignoreRestSiblings: true,
  },
]

Visual Studio Code

Lastly, if you use Visual Studio there’s finally support for baseUrl in your jsconfig.json and tsconfig.json file. This means you can use absolute imports:

import DashboardContainer from '../../../containers/DashboardContainer'  // 👈 this...
import DashboardContainer from 'containers/DashboardContainer'  // 👈 becomes this!

This allows you to change the “lookup” priority from node_modules to your src folder. Normally, it’d look for a containers package inside your node_modules folder.

📝 Thanks for reading! For the official release notes go here