Tutorial

Take a Tour: New Features in Create React App v3

Published on April 23, 2019
Default avatar

By William Le

Take a Tour: New Features in Create React App v3

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
William Le

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel