What’s new in Create React App 3
Tags: javascript, frontenddev, webdev, react
Published: 2019-07-08 19:27:17

---
title: What’s new in Create React App 3
published: true
tags: javascript,front-end-developmen,web-development,react
canonical_url: https://blog.logrocket.com/whats-new-in-create-react-app-3-950049f54f92
---

![](https://cdn-images-1.medium.com/max/792/1*GDOTuSGlq3eg0odb_7guQw.jpeg)

Released at the end of April 2019, Create React App (CRA) 3 adds linting rules to hooks and TypeScript projects, along with other improvements and version upgrades to ease the development of React apps.

In this article, I’m going to cover the following new features of CRA 3:

- Jest 24
- Support of hook rules
- Linting of TypeScript files
- browserslist configuration for production and development environments
- baseUrl in jsconfig.json/tsconfig.json

For a complete list of all the features (and some breaking changes), check out the [changelog](https://github.com/facebook/create-react-app/releases/tag/v3.0.0) for this release.

[![](https://cdn-images-1.medium.com/max/1024/1*2H5cnv_UzdWhAwB6KOAOhg.png)](https://logrocket.com/signup/)

### Jest 24

CRA now bundles the latest major version of [Jest](https://jestjs.io/) (specifically, version 24.7.1, at the time of this writing).

In comparison to the previous version, Jest 24 includes changes like:

- Built-in support for transpiling TypeScript files
- Improved error reporting
- A test.todo function to print todos separately in the test summary
- Renamed setupTestFrameworkScriptFile to setupFilesAfterEnv, turning it into an array

For more information, you can check out this [blog post](https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly) or the [changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md).

If you haven’t use Jest, it is a unit testing framework that runs in a Node.js environment instead of a browser.

When executing npm test, CRA will use Jest to run tests with the following naming conventions:

- Files with a .js suffix in \_\_tests\_\_ folders
- Files with a .test.js suffix
- Files with a .spec.js suffix

By default, Jest will only run the tests related to files changed since the last commit and it will launch in watch mode (every time you save a file, it will re-run the tests).

To avoid running tests in watch mode, CRA 3 removed the --no-watch flag in favor of Jest’s flag --watchAll=false. However, this flag is not necessary if you, or your CI server, set the CI environment variable.

You can know more about running tests on [this page](https://facebook.github.io/create-react-app/docs/running-tests#on-ci-servers).

### Hooks rules

Hooks were [introduced in React 16.8](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html). They are functions that allow you to use React features only available for classes (like [state handling](https://reactjs.org/docs/hooks-state.html)) in [functional components](https://www.robinwieruch.de/react-function-component/).

There are [two rules](https://reactjs.org/docs/hooks-rules.html) for using hooks:

1. Use hooks at the top level of your functional component, never inside loops, conditions, or nested functions
2. Only call hooks from functional components, don’t call hooks from regular JavaScript functions

CRA 3 integrates an ESLint plugin, [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks), that enforces these two rules and other conventions (for example, that hooks must begin with use followed by an uppercase character).

The build will fail if you break one of the rules.

For example, if you modify the file src/App.js in the following way:

```jsx
import React, { useState } from 'react';
// ...
 
function App() {
  if(1 !== 0) {
    const [count, setCount] = useState(0);
  }
 
  return (
    /* ... */
  );
}
 
// ...
```

Since the hook useState is being used inside a conditional block, the build will fail with the following message:

```jsx
Failed to compile.
```
```jsx
./src/App.js

Line 7:  React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
```

In [this README file](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app) (and in particular, the [index.js](https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/index.js) file), you can know more about the ESLint configuration used by CRA.

And on [this page](https://facebook.github.io/create-react-app/docs/setting-up-your-editor#displaying-lint-output-in-the-editor), you can learn how to set up your editor to display the lint output.

### TypeScript linting

CRA 3 also added linting rules for TypeScript projects via [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint).

Remember that you can create a TypeScript project with either:

```jsx
npx create-react-app my-typescript-app --typescript
```

Or:

```jsx
yarn create react-app my-typescript-app --typescript
```

[Here](https://github.com/facebook/create-react-app/blob/4b8b38bf7c55326f8d51ea9deeea76d7feee307d/packages/eslint-config-react-app/index.js#L55:L86) you can see the ESLint configuration for TypeScript in CRA 3.0, and in [this page](https://facebook.github.io/create-react-app/docs/setting-up-your-editor#displaying-lint-output-in-the-editor), you can find instructions to enable TypeScript support in the ESLint extension of Visual Studio Code.

### Browserslist configuration

[Browserslist](https://github.com/browserslist/browserslist) allows you to configure a set of browser versions to change the build output in order to produce compatible code and support the specified browser versions.

You can specify separate lists for production and development. For example, if you add the following configuration to the package.json file:

```jsx
"browserslist": {

  "production": [

    "cover 99.5%"

  ],

  "development": [

    "last 2 chrome versions"

  ]

}
```

The production build will target browsers that cover 99.5% of global usage, while the development build will target only the last two versions of Chrome.

Browserslist uses [Can I Use](https://caniuse.com/) for these queries, but you can use [https://browserl.ist](https://browserl.ist/) to see the results of these queries ([here](https://browserl.ist/?q=cover+99.5%25) and [here](https://browserl.ist/?q=last+2+chrome+versions)) and test your own.

This way, you can install [@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill) as a dependency of your project and import it at the top of the src/index.js or src/index.tsx files and Browserslist will include polyfills when necessary (polyfills are not automatically added). In [this page](https://facebook.github.io/create-react-app/docs/supported-browsers-features), you can find more information about the supported language features.

Also, if you want CRA 3 to handle a reset CSS, it will use [PostCSS Normalize](https://github.com/csstools/postcss-normalize) by default, which in turn, will use the Browserslist configuration to adapt its output. You just need to add @import-normalize; anywhere in your CSS file(s). See [this page](https://facebook.github.io/create-react-app/docs/adding-css-reset) for more information.

Browserslist’s default configuration targets a broad range of browsers in production, but following the instructions in this [README](https://github.com/browserslist/browserslist#queries) file, you’ll be able to define your own custom queries.

### Setting a base URL

Setting the NODE\_PATH environment variable to a colon-delimited (semicolons on Windows) list of absolute paths, allows Node.js to search for modules in those paths to avoid things like:

```jsx
const myModule = require('../../../../../../myModule');
```

CRA 3 removes the need for setting NODE\_PATH in a .env file (this variable is still considered, but is [deprecated and will be removed in a future release](https://github.com/facebook/create-react-app/blob/4b8b38bf7c55326f8d51ea9deeea76d7feee307d/packages/react-scripts/config/modules.js#L28)).

So now you have to use baseUrl in either a jsconfig.json or tsconfig.json file (the latter for TypeScript projects) at the root of your project:

```jsx
{

  "compilerOptions": {

    "baseUrl": "src"

  },

}
```

This way, instead of having something like:

```jsx
import Menu from 'src/components/Menu';
```

You can just have:

```jsx
import Menu from 'components/Menu';
```

Not a big improvement, but in CRA 3.0, the only acceptable values for baseUrl are src and node\_modules (the default value).

In [this page](https://facebook.github.io/create-react-app/docs/importing-a-component#absolute-imports), you can find more information about this feature.

### Conclusion

There’s no doubt CRA keeps improving with every new release. Thanks to the work of almost [50 committers](https://github.com/facebook/create-react-app/releases/tag/v3.0.0), this time, it has brought a set of useful additions, improvements, and updates to internal and underlying tools.

If you have created a React application with CRA 2 and you have not ejected it, upgrading to CRA 3 is as easy as running one the following commands:

```jsx
npm install --save --save-exact react-scripts@3.0.0

# Or

yarn add --exact react-scripts@3.0.0
```

If you have ejected your application, there’s no easy process to upgrade, so consider if it’s worth revert the project up to the point before ejection, upgrade, and optionally, eject again.

Happy coding!
* * *
### Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps

[![](https://cdn-images-1.medium.com/max/1024/1*s_rMyo6NbrAsP-XtvBaXFg.png)](https://logrocket.com/signup/)<figcaption><a href="https://logrocket.com/signup/">https://logrocket.com/signup/</a></figcaption>

[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

[Try it for free](https://logrocket.com/signup/).
* * *
The post [What's new in Create React App 3](https://blog.logrocket.com/whats-new-in-create-react-app-3-950049f54f92/) appeared first on [LogRocket Blog](https://blog.logrocket.com).