Details on the new features and packages in CRA 5
The Creating React App (CRA) method is a fast way to scaffold a React project. The command npx create-react-app project name>
can easily generate it. We can get the most recent packages and the execution environment for a React project with a single command. It is both convenient and efficient.CRA 5 was released on Dec 14, 2021. It has the following new features and new packages:
- Support for Node 10 and 12 has been discontinued.
- Enhancements to the Fast Refresh.
- Package manager detection has been improved.
- To improve compatibility with other tools, all dependencies were unpinned.
- Tailwind support has begun.
- Webpack 5, Jest 27, ESLint 8, and PostCSS 8 have been installed.
Let’s go through these details.
Install create new React App
create-react-app
is a global command-line utility that allows you to create new React projects. The created projects use the most recent version of react-scripts, which is currently 5.0.0. CRA 5 no longer supports Node 10 and 12, and it now requires Node 14 or higher. Create-react-app will fail if the node version does not meet the requirement.
% nvm use 12 Now using node v12.22.7 (npm v6.14.15) % node --version v12.22.7 % npx create-react-app my-app npx: installed 67 in 3.482s You are running Node 12.22.7. Creating React App requires Node 14 or higher. Please update your version of Node.
The installation is complete after changing the node version to 17.
% nvm use 17 Now using node v17.1.0 (npm v8.1.2) % node --version v17.1.0 % npx create-react-app my-app Creating a new React app in /Users/jenniferfu/funStuff/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1375 packages in the 30s 163 packages are looking for funding run `npm fund` for details Initialized a git repository. Installing template dependencies using npm... added 33 packages in 4s 163 packages are looking for funding run `npm fund` for details Removing template package using npm... removed 1 package, and audited 1408 packages in 2s 163 packages are looking for funding run `npm fund` for details 6 moderate severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. Created git commit. Success! Created my-app at /Users/jenniferfu/funStuff/my-app Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd my-app npm start
Improve Existing Create React App with react-scripts, which includes scripts and configuration. The Create React App project can be updated by upgrading react-scripts to a specific version. To upgrade to the latest version, the official documentation suggests running the following command:
npm, install --save react-scripts@latest
By issuing this command, we smoothly upgrade react-scripts from version 4.0.3 to version 5.0.0.
The following are the differences between package.json files:
We have upgraded the react-scripts version. Here are the distinctions between the CRA 4 package. json as well as the CRA 5 package json.
The differences appear to be minor. We can manually update the testing-library and web-vitals versions to match the versions in CRA 5.
TypeScript Version Upgrade
If you're using TypeScript, you can start a new project with the following command:
npx create-react-app --template typescript <project name>
The JavaScript CRA package differs in the following ways. json, as well as the TypeScript CRA package json.
TypeScript has been updated from version 4.1 to version 4.5 from CRA 4 to CRA 5.
Enhancements to the Fast Refresh
Fast refresh has been improved for the Hot Module Replacement (HMR) runtime, with the bailout behaviour described below:
- If fast refresh is not enabled, reload the page manually.
- If fast refresh is enabled and there are updated modules, rely on fast refresh to be error-resistant and skip the forced reload.
- If fast refresh is enabled, no modules have been updated, and the status of the hot update is aborted or failed, perform a forced reload.
Improved Detection of Package Managers
npx create-react-app
in CRA 4 If the yarn is installed, my-app will use it to install dependencies. Alternatively, a flag can be set to use npm:
npx create-react-app my-app --use-npm
In CRA 5, this behaviour has been modified. If the env variable npm config user agent is set to 'yarn,' the package manager will be yarn:
function isUsingYarn() { return (process.env.npm_config_user_agent || '').indexOf('yarn') === 0; }
Otherwise, it is determined by how the command is executed:
yarn create-react-app my-app // use yarn npm init react-app my-app // use npm npx create-react-app my-app // use npm
Dependencies that aren't pinned
In CRA 5, the following react-scripts can be found in the installed package-lock.json:
"react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", "integrity": "sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==", "requires": { "@babel/core": "^7.16.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", "@svgr/webpack": "^5.5.0", "babel-jest": "^27.4.2", "babel-loader": "^8.2.3", "babel-plugin-named-asset-import": "^0.3.8", "babel-preset-react-app": "^10.0.1", "bfj": "^7.0.2", "browserslist": "^4.18.1", "camelcase": "^6.2.1", "case-sensitive-paths-webpack-plugin": "^2.4.0", "css-loader": "^6.5.1", "css-minimizer-webpack-plugin": "^3.2.0", "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0", "eslint": "^8.3.0", "eslint-config-react-app": "^7.0.0", "eslint-webpack-plugin": "^3.1.1", "file-loader": "^6.2.0", "fs-extra": "^10.0.0", "fsevents": "^2.3.2", "html-webpack-plugin": "^5.5.0", "identity-obj-proxy": "^3.0.0", "jest": "^27.4.3", "jest-resolve": "^27.4.2", "jest-watch-typeahead": "^1.0.0", "mini-css-extract-plugin": "^2.4.5", "postcss": "^8.4.4", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^6.2.1", "postcss-normalize": "^10.0.1", "postcss-preset-env": "^7.0.1", "prompts": "^2.4.2", "react-app-polyfill": "^3.0.0", "react-dev-utils": "^12.0.0", "react-refresh": "^0.11.0", "resolve": "^1.20.0", "resolve-url-loader": "^4.0.0", "sass-loader": "^12.3.0", "semver": "^7.3.5", "source-map-loader": "^3.0.0", "style-loader": "^3.3.1", "tailwindcss": "^3.0.2", "terser-webpack-plugin": "^5.2.5", "webpack": "^5.64.4", "webpack-dev-server": "^4.6.0", "webpack-manifest-plugin": "^4.0.2", "workbox-webpack-plugin": "^6.4.1" } }
All versions rely on the caret dependencies, which means that these packages will use the most recent minor version.
Many packages in CRA 4's react-scripts, for example, pin to the exact versions.
CRA 5 removes the babel-loader, which was causing problems when using CRA with Storybook. Furthermore, CRA 5 unpins all dependencies for improved compatibility with other tools.
What else do you discover?
tailwindcss (^3.0.2)
is the latest- Packages that are updated:
webpack: (^5.64.4), jest: (^27.4.3), eslint: (^8.3.0), and postcss: (^8.4.4).
- Packages that are updated:
Tailwind Support
Tailwind is a CSS framework that includes classes such as flex, text-5xl, font-bold, text-green-500, and others. These classes can be combined to create any design, right in the markup.
Tailwind searches for class names in HTML files, JavaScript components, and other templates. It generates the appropriate styles and saves them to a static CSS file. Tailwind is quick, adaptable, and dependable — with no downtime. Tailwind support has been added to CRA 5.
Tailwind is normally set up and used in 5 steps. With the pre-configured CRA 5, only three steps are required:
Step 1: Set up the template paths.
Create the tailwind.config.js configuration file in the root directory:
module.exports = { content: [ './src/**/*.{html,js,jsx}', ], theme: { extend: {}, }, plugins: [], }
Step 2: Include the Tailwind directives in your CSS file.
Here's the src/index.css file:
@tailwind base @tailwind components; @tailwind utilities;
Step 3: Integrate Tailwind into React components.
Here's an example of a src/App.js file:
import './App.css'; function App() { return ( < div className="App"> < h1 className="text-5xl font-bold text-green-500" >Create React App 5 div> ); }
export default App;
text-5xl
sets font-size: 3rem
and line-height: 1.
font-bold
sets font-weight: 700.
text-green-500
sets color: rgb(34 197 94).
When we run the code, npm start, we can see that Tailwind styles have been applied to the text:
5th version of Webpack
Webpack is a module packager. CMJ, AMD, UMD, ESM, and other modules can be bundled.
On October 10, 2020, Webpack 5 was released, with the following major features:
- Persistent Caching improve build performance.
- Long-Term Caching has been improved with new algorithms and defaults.
- Bundle size has been increased due to improved Tree Shaking and Code Generation.
- Module Federation was introduced, allowing multiple Webpack builds to work together.
Webpack 5 is included with CRA 5.
Jest 27
Jest is a JavaScript Testing Framework that focuses on test creation, execution, and structuring. Jest is a popular test runner that works with projects that use Babel, TypeScript, Node, React, Angular, Vue, and other technologies.
- On May 25, 2021, Jest 27 was released, with the following major features:
- To update the failed snapshots during snapshot tests in watching mode, type u. The interactive mode can now be used to step through failed tests one by one. We can skip the failed test by typing, exit the interactive mode by typing q, or return to the watch mode by pressing Enter.
- When compared to Jest 26, the initialization time per test file was reduced by 70%.
- User configurations written in ESM are supported, and all pluggable modules can load ESM.
- Text files that are symlinked into the test directory have been enabled, a feature requested by Bazel.
- Transform is now asynchronous, which is a feature requested by esbuild, Snowpack, and Vite.
- The default test runner has been changed from jest-jasmine2 to jest-circus, and the default test environment has been changed from 'jsdom' to 'node'.
- The new Fake Timers implementation in Jest 26 becomes the default.
- The done test callback cannot be called more than once, and calling done and returning a Promise cannot be combined.
- A described block must not produce any results.
- Jest 27 is packaged with CRA 5.
ESLint 8
ESLint is a tool for detecting and reporting patterns in JavaScript and TypeScript code. It performs traditional linting to detect problematic patterns, as well as style checking to enforce conventions. On October 9, 2021, ESLint 8 was released, with the following major features:
- Support for nodes 10, 13, and 15 has been removed.
- The coding frame and table formatters have been removed.
- The comma-dangle rule schema tightens up.
- Unused disable directives can now be repaired with --fix.
4 rules have been proceeding in the
eslint: recommended
preset:no-loss-of-precision,
no-nonoctal-decimal-escape,
no-unsafe-optional-chaining,
and
no-useless backreference.
- The ESLint class has taken the place of the CLIEngine class.
- The obsolete linter object has been deprecated.
- The /lib entry point is no longer available.
- ESLint 8 is included with CRA 5.
PostCSS 8
PostCSS is a style transformation tool that uses JS plugins. Autoprefixer, for example, is a popular plugin that applies CSS prefixes based on browser popularity and property support.
On September 15, 2020, PostCSS 8 was released, with the following major features:
- It has a new plugin API that allows all plugins to share a single CSS tree scan. It speeds up CSS processing by up to 20%. It reduces the size of node modules, supports a better source map, and improves the CSS parser.
- Support for nodes 6, 8, 11, and 13 has been removed.
- It serves ES6+ sources from the npm package without the need for Babel compilation.
- The rarely used postcss.vendor API has been removed, and CRA 5 is now packaged with PostCSS 8.
Conclusion
CRA 5 has arrived, bringing with it new features and packages. CRA 5 will be used in the newly created project. If you already have a CRA 4 project, upgrade it as described above.
Thank you for your time. I hope you found this information useful. If you have any questions, please do not hesitate to contact us. Your digital partner will be Airo Global Software.
E-mail id: [email protected]
Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/