Scripts you can use in Create-React-App
Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
In this post I want to explore not the create-react-app itself, but the scripts which one can run in the terminal of the project.
To do that, one should create a React project using create-react-app toolchain (see official React documentation about how to get started)
Once it's done, open the terminal and let's explore scripts.
Script is a built-in command which one can use inside
create-react-app in our case. There are several of them:
This script starts the server at localhost:3000 in the browser and runs the app in development mode. Once you make changes in your code editor, the browser page will be automatically reloaded and you can see new changes right away.
Please note, that if there are build errors in the code or lint warnings, the browser page will go blank and you can only see errors in the console in inspect mode.
This script launches the test runner in the interactive watch mode. What that means?
Create React App uses Jest framework to run the tests. So, when we run
npm test, it starts Jest in a watch mode, meaning that every time you save a file, it will re-run the tests, the same like
npm start recompiles the code. A very useful script indeed!
npm run build
This script does exactly what it's called - builds the app for production to the build folder. But what exactly is happening here?
npm run eject
This script removes the the single build dependency from your project. What does that mean?
If you aren’t satisfied with the build tool and configuration choices for your project, you can remove them at any time with this script.
eject copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them.
npm start and
npm run build will still work, but they will point to the copied scripts so you can tweak them. At this point, you’re on your own.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you enjoyed reading this blog, you can buy me coffee! :)