ReactT2_1200x303

This post takes you through the top features in the newly released Create React App 3.3. See how the latest updates help speed your development of React apps.

Create React App is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project . — Guil Hernandez

Create-React-App, which is arguably one of the most popular boilerplates of all times with over 1.5 million projects currently using it, released a new version (3.3) recently with a whole lot of improvements. Even though we all know React does not require build dependencies, it does depend on several important tools to make the magic we see when we run npm start. Some of these tools have been updated and CRA has been maintained to retain constant support.

Custom Templates

The team at Create React App has shipped this new version with custom templates. You can now create new applications with either the base template (which you already use), now called cra-template, or the TypeScript boilerplate, called cra-template-typescipt. This can be done by running the command below:

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

This spins up a new React app in TypeScript configuration. For TypeScript users, this is great news. This has already been possible for a while now; however, the initial --typescript has been removed and now replaced with --template typescript, as you see above. Starting a new app the way you know, it works perfectly:

npx create-react-app my-app

React community members can now create their own templates too and get it added in the list of templates.

Optional Chaining and Nullish Coalescing Operators

Optional chaining operators are useful for checking if nodes in a tree structure exists or not. If you want to find a property value, you might want to check for intermediate nodes like this:

var street = user.address && user.address.street;

Also, many APIs return either an object or null/undefined, and one may want to extract a property from the result only when it is not null:

var fooInput = myForm.querySelector('input[name=foo]')  
var fooValue = fooInput ? fooInput.value : undefined

According to the TC39 proposal, the Optional Chaining Operator allows a developer to handle many of those cases without repeating themselves or assigning intermediate results in temporary variables:

var street = user.address?.street  
var fooValue = myForm.querySelector('input[name=foo]')?.value

When some other value than undefined is desired for the missing case, this can usually be handled with the Nullish coalescing operator:

// falls back to a default value when response.settings is missing or nullish  
// (response.settings == null) or when response.settings.animationDuration is missing  
// or nullish (response.settings.animationDuration == null)  
const animationDuration = response.settings?.animationDuration ?? 300;

The call variant of Optional Chaining is useful for dealing with interfaces that have optional methods:

iterator.return?.() // manually close an iterator

or with methods not universally implemented:

if (myForm.checkValidity?.() === false) { // skip the test in older web browsers  
    // form validation fails  
    return;  
}

CRA 3.3 now supports these operators and if your TypeScript version is not up to date, you will have to update it for these new operator changes to be accessible to you.

// 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

Also, for IDEs like VS Code you have to also update it to understand these new operators when you code.

Numeric Separators

When an integer is large, like 1000000000, you might find it hard to immediately scan through and say what it actually represents, a billion, 10 billion or 100 million. This is where commas come in when you write, to improve readability.

1000000000; // Is this a billion? a hundred million? Ten million?  
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

Separators like underscores between digits can be used to ensure that numeric literals are always readable and not be so difficult to parse with the eye.

const FEE = 12300;  
// is this 12,300? Or 123, because it's in cents?

const AMOUNT = 1234500;  
// is this 1,234,500? Or cents, hence 12,345? Or financial, 4-fixed 123.45?

Using underscores (_, U+005F) as separators helps improve readability for numeric literals, both integers and floating-point (and in JS, it's all floating-point anyway):

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

let fee = 123_00;       // $123 (12300 cents, apparently)  
let fee = 12_300;       // $12,300 (woah, that fee!)  
let amount = 12345_00;  // 12,345 (1234500 cents, apparently)  
let amount = 123_4500;  // 123.45 (4-fixed financial)  
let amount = 1_234_500; // 1,234,500

Also, this works on the fractional and exponent parts, too:

0.000_001 // 1 millionth  
1e10_000  // 10^10000 -- granted, far less useful / in-range...

No-unexpected-multiline

There is an ESLint config error that was found to not be compatible with Prettier, the unexpected multiline warnings. It has been removed from the CRA project. However, you can re-enable it if you want by extending the ESLint config and adding this line of code to it:

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

Documentation Updates

A few updates took place on the official documentation page that included template docs, React code splitting and tightening TypeScript docs too.

No Breaking Change

There is really no breaking change with this new version. However, for developers who use react-dev-utils outside of Create React App, you will have to update the webpack dev server dependency to 3.9.0

Upgrading from 3.2 to 3.3

To upgrade, use any of the package managers you are familiar with. For npm:

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

or for Yarn:

yarn add --exact react-scripts@3.3.0

Conclusion

Here is the link to the official change log. You have been shown all the new features that shipped with this version of Create React App. You can see how much thought is put into constant improvement of this boilerplate. My favorite new feature is the support for numeric separators. What is yours?


5E9A474B-EBDB-439E-8A4A-3B041B0BEDA6
About the Author

Nwose Lotanna Victor

Nwose Lotanna Victor is a web technology enthusiast who documents his learning process with technical articles and tutorials. He is a freelance frontend web developer based in Lagos, Nigeria. Passionate about inclusion, community-building and movies in Africa, he enjoys learning new things and traveling.

Related Posts

Comments

Comments are disabled in preview mode.