Inside create-react-app
Let's engage more with our favorite framework ReactJS. We are going to get one more step deeper in React applications development.
As a front-end developer, this might be the most curious thing that "what happens when we do: npm run eject", so read further and you might find out.
Create-react-app(CRA) is like a pandora's box for beginners. It sets up an assortment of basic web app elements; commands to test, build, and serve your app; a git repo; and plenty of guide rails and documentation for how to get started with React. The benefit of Create React App is that the inner workings are hidden away.
It lets you focus more on coding part without having to bother much about configurations.
The dependencies that create-react-app uses
Create React App (CRA) is a tool to create single-page React applications that is officially supported by the React team. The script generates the required files and folders to start the React application and run it on the browser.
To run your React application, you need to turn your JSX into plain JavaScript, that browser can understand. We need transpilers and bundlers to create, run and understand React builds on browser.
Although you can't see Babel or Webpack listed as dependencies in the generated package.json file, CRA still uses Babel and Webpack under the hood. It's just that the configurations are hidden from you inside the react-scripts package inside node_modules.
When you look into the package.json file of react-scripts, you'll see all the packages needed to make React works in the browser. It has 58 packages. That's a lot of packages! Let's break it down a little to understand what these packages are used for.
Please note that this article was written using Create React App version 4.0.1 as the reference.
Babel
The main purpose of Babel is to make your code readable by older browsers. Since the release of ES 2015, browsers have seen slow but steady progress to implement new JavaScript APIs and features.
The most advanced browsers like Chrome and Safari may support new JavaScript versions, but JSX is a React-only feature that's not a part of ES versions.
Babel transforms your modern JavaScript code into the older version, and then adds polyfills, a piece of code that implements features missing in the browser but needed by your app.
ESLint
ESLint is a JavaScript linter that will scan your code and flag any code errors. The library will warn you from the console if you have any errors. It also plays well with a modern code editor like VSCode.
Jest
Jest is a testing library by Facebook that plays very well with React. The dependencies for Jest allow you to write test scripts for your application without having to install another testing library.
PostCSS
PostCSS is a JavaScript plugin to transform your CSS. PostCSS plugins can lint your CSS, support variables and mixins syntax, transpile future CSS syntax, and many more things depending on its configs.
CSS Loader & Style Loader
css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string. And then style-loader would take the output string generated by the above css-loader and put it inside the <style> tags in the index.
Webpack
Webpack is a module bundler for JavaScript that puts everything needed by your application together. This library can also run tasks like running Babel, Jest, ESLint, and PostCSS on top of your code.
Now that you have an idea what the dependencies are used for, let's continue with understanding what react-scripts really do behind the scene.
Recommended by LinkedIn
What react-scripts do
react-scripts are simply scripts to run the build tools required to transform React JSX syntax into plain JavaScript programmatically.
There are four scripts provided by this package:
"scripts:{
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
CRA generated scripts command
When you run one of the scripts, the /bin/react-scripts.js will be executed to start the process. This script will look into the arguments that you passed into the call. It only accepts start, build, test, and eject arguments.
Any other argument you passed will cause the script to return an unknown script to the log.
How the react-scripts start process works
With the start argument, NPM will begin the process to make a development server available for your React application. Here's a list of tasks for this script:
The development server created by WebpackDevServer will also create a listener for changes in your JavaScript file. When you make changes and save your JavaScript file, the development server will recompile your code and quickly refresh the browser.
How to use the react-scripts eject command
The last command, eject, is used to remove the dependency on react-scripts and expose the build tools and configurations for you to modify.
Okay, So we all know it is not allowed by creators(Facebook, now Meta). Also, they have made create-react-app so flexible that we do not even need to eject with its newer version.
And if you still eject, then developers really want to know the reason as they ask you to submit it while ejecting.
All the configuration files from react-scripts will be copied into your project root's config/ folder, and the scripts to run the build will be copied into the scripts/ folder. The dependencies will also be moved into your root's package.json file.
This command is a one-way operation. Once you have ejected from CRA set up, you can't undo it. If you have committed your code into a source code management system like Git, you can undo the changes with git checkout or git reset.
Conclusion
Create React App sets up a fully functional, offline-first Progressive Web App by default. Progressive Web Apps (PWAs) are web applications that use a collection of modern web technologies to provide native app-like experiences on all types of devices.
After ejecting you continue building your app as you normally would, and all of the commands (like start, test and build) will still work. But at this point you’re on your own. So you shouldn’t need to use eject in your projects unless you know exactly what you’re getting into.
Create React App included the eject feature for customizing a project only when you’re ready for it.
Originally published on https://techtraveltacos.wordpress.com/2022/02/09/inside-create-react-app/