What's new in Create React App 2.0 ?

Last Updated : 06 Jan, 2021

Those who don't know create-react-app is the CLI or the command-line-interface tool that's used to generate React applications and just makes things much easier than opposed to setting your own web pack configuration.

Package Update :

Babel 7
Webpack 4
Jest 23

Babel: Browser support for modern features of JavaScript has gotten better recently but it's never going to be perfect. We can patch in polyfills or use a little shell script to rewrite our code but those are prone to breaking leading to dead code. Babel is a solution to this problem by taking modern JavaScript and compiling it down to a form that could be understood in different environments. Babel is built on a plugin system that parses our modern JavaScript into an abstract syntax tree or AST and rewrites it into a version that can be interpreted by our browser. To set this up install the babel CLI package and save it as a dev dependency.

npm install --save-dev babel-cli

In other words, it is used to compile newer es6 plus features of JavaScript to be used in all browsers. Version 7 of Babel is faster than previous versions as it has some new features that are that have been added.

Webpack: It is a module builder i.e., webpack is a tool we use during the development of our code and is used during runtime of our assets. Web pack not only just builds your code but also manages your code. It allows us to create awesome web applications managing all our style and JavaScript files mainly but not limited to that.

Webpack is used for bundling.

Jest: Jest is used for testing, it includes new features like interactive snapshot mode and custom matches. Jest works with projects using: Babel, TypeScript, Node, React, Angular, Vue, and more!

Version 1 of create-react-app had sass integration but there was some additional configuration that needed to be done. With version 2 we can simply install "node-sass" and we can rename our .CSS files to.SCSS. So it makes working with sass easier.
CSS's modules allow us to use the same CSS classes across different files without having to worry about conflicts or issues. CSS modules work right out of the box with create react app so you can just import the module using the syntax as shown, [Name].module.scss or [Name].module.css.
So in addition to sass integration and CSS modules we also have smaller CSS bundles, we can target modern browsers with our package.json file in the browser list specification. So we can adjust our styles to only target either the WebKit prefix or the MS prefix whenever necessary.

package.json:

{ "name": "my-project", "version": "0.1.0", "private": true, "dependencies": {   "@testing-library/jest-dom": "^4.2.4",   "@testing-library/react": "^9.5.0",   "@testing-library/user-event": "^7.2.1",   "react": "^16.13.1",   "react-dom": "^16.13.1",   "react-scripts": "3.4.3" }, "scripts": {   "start": "react-scripts start",   "build": "react-scripts build",   "test": "react-scripts test",   "eject": "react-scripts eject" }, "eslintConfig": {   "extends": "react-app" }, "browserslist": {   "production": [     ">0.2%",     "not dead",     "not op_mini all"   ],   "development": [     "last 1 chrome version",     "last 1 firefox version",     "last 1 safari version"   ] } }