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"
]
}
}- Post CSS has also been added to create a react app too.
- So if you have used version 2, the first thing you probably noticed was the landing page change which is now more simplistic and cleaner look or cleaner page as shown below :
Version 1
Version 2
- There are also been changes with how service workers are implemented version 2 now uses Google’s workbox which is a set of libraries for caching offline assets and working with service workers in a more elegant way than sw-precache and it will make it easier for us to create progressive web applications using the React library.
- There’s now added support for configuring our own proxy with express and a full-stack app, so we can use like the HTTP proxy middleware module and then create a file on your client in your React application right inside the source folder called setupProxy.js rather than defining a proxy object as we would before.
- We can now use packages written for the latest Node versions.
- We can now import an SVG as a React Component unlike before where we import an SVG and add it to the source attribute for an image but now we can just import it and use it as an actual component.
- There is also something called yarn plug-n-play, usually, when we run yarn install, all our packages are installed and then cached inside the node modules folder with plug-n-play instead of doing that, a new file that contains static resolution tables is created and this file contains what packages are available on the dependency tree, also includes how they are linked and where they are located.
- Node 6 no longer supported.
- Support for older browsers (IE 9 to 11) needs to separate packages.
- Support for.mjs extension was removed.
- Support for the proxy object has been replaced with custom proxy support.
- PropTypes definitions are automatically stripped out of production builds.