ยซ Changelog History


create-react-app v3.3.0 Release Notes

Release Date: 2019-12-04 // over 4 years ago

  • 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 chaininga?.(); // undefined if `a` is null/undefinedb?.c; // undefined if `b` is null/undefined// Nullish coalescingundefined ?? 'some other default'; // result: 'some other default'null ?? 'some other default'; // result: 'some other default''' ?? 'some other default'; // result: ''0 ?? 300; // result: 0false ?? 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 billion101\_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

    ๐Ÿ“š ๐Ÿ“ 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 [email protected]

    or

    yarn add --exact [email protected]