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:
npm start
This script starts the server at http://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.
nmp test
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?
The script creates a build directory with a production build of your application. Inside the build directory will be your JavaScript and CSS files. Each filename inside of build will contain a unique hash of the file contents. Now your app is ready to be deployed :)
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.
Running 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.
Commands like 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! :)
Top comments (0)