What’s New in Create React App 3
Create React App (CRA) has just released its latest version, CRA 3, packed with exciting new features and improvements. In this article, we’ll take a closer look at what’s new and how it can benefit your React development experience.
Jest 24: Improved Testing Capabilities
CRA 3 now comes bundled with Jest 24, the latest major version of the popular testing framework. This update brings several improvements, including built-in support for transpiling TypeScript files, better error reporting, and a new test.todo function to print todos separately in the test summary.
Hooks Rules: Enforcing Best Practices
React Hooks were introduced in React 16.8, allowing developers to use state and other React features in functional components. CRA 3 integrates an ESLint plugin, eslint-plugin-react-hooks, to enforce best practices for using hooks. This includes rules such as using hooks at the top level of your functional component and only calling hooks from functional components.
TypeScript Linting: Improved Code Quality
CRA 3 also adds linting rules for TypeScript projects via typescript-eslint. This helps ensure that your TypeScript code is error-free and follows best practices. You can create a TypeScript project with CRA 3 using the --template typescript flag.
Browserslist Configuration: Targeting Specific Browsers
Browserslist allows you to configure a set of browser versions to target with your build output. CRA 3 supports separate lists for production and development environments. You can specify browser versions using queries like > 1% or last 2 versions.
Setting a Base URL: Simplified Module Resolution
CRA 3 removes the need to set the NODE_PATH environment variable to resolve modules. Instead, you can use the baseUrl field in your jsconfig.json or tsconfig.json file to specify the base URL for module resolution.
Upgrading to CRA 3
If you have a React application created with CRA 2 and haven’t ejected it, upgrading to CRA 3 is as easy as running one of the following commands:
bash
npm install react-scripts@3
or
bash
yarn add react-scripts@3
If you have ejected your application, there’s no easy process to upgrade, so consider reverting the project to the point before ejection, upgrading, and optionally ejecting again.