What's New - New Features in Create React App 3.3

Create React App is a command-line program that lets us create a new React project easily and build the project into artifacts that we can deploy.

It’s created by the React team and creates a scaffold to the app.

In this article, we’ll look at the cool new features that are available in Create React App 3.3, including some ES2020 features.

Custom Templates

We can use custom templates to create our React project with Create React App 3.3.

For example, if we want to create a TypeScript React app, we can run:

npx create-react-app foo-app --template typescript

Where foo-app is our app project’s name.

It ships with two templates by default:

• cra-template
• cra-template-typescript

We don’t need to specify a --template option to use the first template since it’s the default. To search for more templates, we can go to NPM’s website and search for templates by typing the following into our browser:

https://www.npmjs.com/search?q=cra-template-*

Then we can remove the cra-template- prefix when we set the template option.

We can also build a new template by creating files with the following structure:

my-app/
  README.md (for npm)
  template.json
  package.json
  template/
    README.md (for projects created from this template)
    gitignore
    public/
      index.html
    src/
      index.js (or index.tsx)

Optional Chaining and Nullish Coalescing Operators

This is a feature that’ll be released soon with ES2020. We can use it now to write our React apps with Create React App 3.3 or later.

The optional chaining operator is denoted by ?., and we can use it to reference nested properties that may be null or undefined.

This saves us lots of null and undefined checks if we’re trying to access deeply nested objects. For example, we can use it as follows:

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { msg: {} };
  }
  onClick() {
    if (this.state.msg?.bar?.baz) {
      this.setState({ msg: {} });
    } else {
      this.setState({ msg: { bar: { baz: "foo" } } });
    }
  }
  render() {
    return (
      <>
        <button onClick={this.onClick.bind(this)}>Click Me</button>
        <p>{this.state.msg?.bar?.baz}</p>
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In the code above, we used the optional chaining operator in the following code:

<p>{this.state.msg?.bar?.baz}</p>

Since this.state.msg may not have the bar property.

Then when we click the Click Me button, we see the word “foo” toggled on and off.

The nullish coalescing operator is for setting a default value for an expression. It’s indicated by the ?? symbol. For example, we can add a default value to our example above by writing:

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { msg: {} };
  }
  onClick() {
    if (this.state.msg?.bar?.baz) {
      this.setState({ msg: {} });
    } else {
      this.setState({ msg: { bar: { baz: "foo" } } });
    }
  }
  render() {
    return (
      <>
        <button onClick={this.onClick.bind(this)}>Click Me</button>
        <p>{this.state.msg?.bar?.baz ?? "bar"}</p>
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In the code above, we have:

<p>{this.state.msg?.bar?.baz ?? "bar"}</p>

Which lets us display 'bar' if this.state.msg?.bar?.baz is null or undefined.

This is different from || in that ?? only returns the default value if the expression before is null or undefined rather than all falsy values like || does.

If we’re using TypeScript, then the TypeScript version will also have to be updated to use these features.

Numeric Separators

Numeric separators are also a new feature to be released with ES2020, although some browsers like Chrome already support it with their latest versions.

We can use numeric separators to divide digits into chunks so that they can be read easily by humans.

For example, we can use it as follows:

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  render() {
    return (
      <>
        <p>{1_000_000_000}</p>
        <p>{1000_000_000.333_333}</p>
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In the code above, we use the underscore to separate digits into groups so that we can read them easily. We don’t have to separate them into groups of three.

It also works with decimal numbers.

No-unexpected-multiline

The no-unexpected-multiline ESLint rule is not disabled because it’s found to be incompatible with Prettier.

However, we can still add the following to our .eslintrc to re-enable it:

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

Upgrading to 3.3

To upgrade to Create React App 3.3 and take advantage of all these new features, run:

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

With NPM in our existing React project or if we use Yarn, run:

yarn add --exact react-scripts@3.3.0

Conclusion

Create React App 3.3 is a minor release, but it comes with useful new features that make developing React apps easier.

ES2020 features like optional chaining and nullish coalescing operators and numeric separators are all available now before the official ES2020 standard is released.

Thank you for reading!

#javascript #react #reactjs #web development