Skip to content
GitLab
v3.3.0
9a817dd0 · Publish ·
Release v3.3.0

3.3.0 (2019-12-04)

v3.3.0 is a minor release that adds new features, including custom templates and support for the new optional chaining and nullish coalescing operators.

Custom Templates

You can now create a new app using custom templates.

We've published our existing templates as cra-template and cra-template-typescript, but we expect to see many great templates from the community over the coming weeks.

The below command shows how you can create a new app with cra-template-typescript.

npx create-react-app my-app --template typescript

Note that you can omit the prefix cra-template- when specifying which template you would like. For TypeScript users, we're deprecating --typescript in favour of --template typescript.

If you don't set a template, we'll create your new app with cra-template - which is just a new name for our base template.

Optional Chaining and Nullish Coalescing Operators

We now support the optional chaining and nullish coalescing operators!

// Optional chaining
a?.(); // undefined if `a` is null/undefined
b?.c; // undefined if `b` is null/undefined

// Nullish coalescing
undefined ?? 'some other default'; // result: 'some other default'
null ?? 'some other default'; // result: 'some other default'
'' ?? 'some other default'; // result: ''
0 ?? 300; // result: 0
false ?? true; // result: false

If you're using TypeScript, you will need to upgrade your typescript dependency to 3.7.0 or later if you wish to use the new operators.

If you're using Visual Studio Code 1.40 (the latest as of this release) or earlier, you will need to configure your editor if you want it to understand the new operators.

If you're using TypeScript in your project and have already upgrade its version as described above, then you can configure VS Code to Use Workspace Version of TypeScript. If your project isn't using TypeScript, you can use the JavaScript and TypeScript Nightly extension until VS Code releases a newer version including TypeScript 3.7.0 or newer.

Numeric Separators

We've added support for numeric separators to improve readability of numeric literals.

1000000000; // Is this a billion? a hundred millions? Ten millions?
101475938.38; // what scale is this? what power of 10?

1_000_000_000; // Ah, so a billion
101_475_938.38; // And this is hundreds of millions

no-unexpected-multiline

We've removed this rule as it is not compatible with Prettier. If you rely on this rule you can re-enable it by extending our ESLint config and adding the following:

{
  "extends": "react-app",
  "rules": {
    "no-unexpected-multiline": "warn"
  }
}

🚀 New Feature

  • babel-preset-react-app
    • #7438 Add optional chaining and nullish coalescing operators support (@renatoagds)
  • babel-preset-react-app, react-dev-utils
  • cra-template-typescript, cra-template, create-react-app, react-scripts

💥 Breaking Change

  • create-react-app, react-dev-utils, react-scripts

    • #7988 Bump webpack-dev-server (@ianschmitz)

      NOTE: This is only a breaking change if you're using react-dev-utils outside of Create React App.

🐛 Bug Fix

  • eslint-config-react-app
  • create-react-app
    • #7991 Support templates in scoped packages (@klasbj)
    • #7839 added check for typescript template and unsupported node version (@awaseem)
  • react-scripts
  • react-dev-utils

💅 Enhancement

  • cra-template-typescript, cra-template
  • react-scripts
  • cra-template
    • #7931 No spinning React logo if prefers-reduced-motion (@donavon)
  • create-react-app, react-error-overlay
  • babel-preset-react-app
    • #7726 Add babel runtime version to transform-runtime plugin to reduce bundle size (@topaxi)

📝 Documentation

🏠 Internal

  • react-scripts
  • Other
  • eslint-config-react-app
    • #8003 Use @typescript-eslint/no-unused-expressions to support optional chaining (@maxdavidson)
  • create-react-app
    • #7844 added e2e test for checking typescript template with unsupported node (@awaseem)
    • #7882 refactor: remove double coerce (@mrmckeb)
    • #7880 Pass through fully specified template name (@iansu)
  • cra-template-typescript
    • #7944 Make base and TypeScript templates consistent (@suprj)
  • create-react-app, react-dev-utils, react-scripts

🔨 Underlying Tools

  • babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • create-react-app, react-dev-utils, react-scripts
  • react-app-polyfill
  • babel-preset-react-app, react-app-polyfill, react-dev-utils, react-scripts
  • react-scripts
  • babel-preset-react-app, cra-template-typescript, create-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • react-dev-utils
  • babel-plugin-named-asset-import, babel-preset-react-app, react-error-overlay, react-scripts
  • react-error-overlay, react-scripts

Committers: 42

Migrating from 3.2.0 to 3.3.0

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@3.3.0

or

yarn add --exact react-scripts@3.3.0