2.2.6: Eject CRA
- 1.Create React App (CRA) simplifies our development environment to help us learn React
- 2.Ejecting CRA allows us to customise tools in our development environment such as Webpack, Babel and ESLint
- 3.Rocket recommends sticking with CRA's default setup for as long as possible until we have no choice but to eject
Create React App (CRA) bundles relatively complex frontend tools into a simple package to make it easier for us to learn React. When our apps get complex enough and require more custom configuration, we can "eject" our CRA apps to generate a collection of config files for CRA's dependencies, including Webpack, Babel and ESLint. We can then edit those config files to customise our development environment.
Read Create React App's official docs on ejecting CRA.
Rocket discourages us from ejecting our CRA apps because the CRA configuration should work for our use cases at Rocket, and the ejected CRA configuration is relatively complex.
However, it is helpful to know what CRA does under the hood to compile our React apps into static files that our browsers can render, and we will explore the key technologies below.
Webpack is a module bundler that converts 1 or more files in an app into a minimal "bundle" of files with minimal size that can be efficiently distributed to and read by browsers. In addition to compressing our files, Webpack is also configurable to translate (aka compile, transpile) our potentially more modern but less-supported code syntax (e.g. JSX and SASS) into languages that are more widely-supported by browsers, i.e. vanilla HTML, CSS and JS.
We will not eject CRA for any projects at Rocket (except your capstone if you like pain), but it could be helpful for us to see what configurations are like in an ejected CRA app that contains all of CRA's under-hood configurations.
- 2.Notice this is the same base CRA repo Rocket uses for our exercises and projects, except with an
package.jsonthat is built-in to CRA that Rocket removed in our CRA template but have added back to this repo for this exercise.
npm run ejectin the root of the cloned Eject CRA repo, and enter
- 4.Notice the configuration files in
configfolder and scripts in
scriptsfolder. CRA has been using those configurations and scripts to run our apps.
config/webpack.config.js. This is the config file that specifies everything Webpack does to compile and bundle our files for browsers.
- 1.Notice where it mentions
babel. This is where Babel compiles our JS and JSX into browser-readable code.
- 2.Notice where it mentions
sass. This is where SASS Loader compiles SASS to CSS.
scripts/start.js. This script runs every time we run
npm start. It launches a "Webpack dev server" that runs Webpack every time we change a file that our app depends on and restarts our app.
scripts/build.jsdoes something similar except without the file watching and dev server functionality to run our app locally, watch and restart on file changes.
This is a large amount of configuration and scripting that we avoided by using CRA. If we were to build a React app from scratch, we would likely build something simpler than CRA did, but it likely would not have all the conveniences that CRA provides us out of the box. Thank you CRA team for making our lives easier!