It is technically possible to develop a React application from scratch, but doing so requires you to produce all the necessary files and modify the configuration, which takes time. As an alternative, you can utilize create-react-app, which offers a welcoming environment for creating React applications. It also contains options and scripts you may use to launch the development server, enable hot reloading, and activate other critical features.
You can put up a fully functional React application with only one command by installing the create-react-app package. To create a live application on your localhost server as a developer, simply put npm run start on the command line. There are numerous scripts included in the basic create-react-app configuration that is required to start an application. This configuration was made to spare newcomers the hassle of setting up projects themselves. However, the package.json file allows for customization of error sh: react-scripts: command not found.
react-scripts start
Use the command line to type npm run start to launch this script. The shortcut command npm start is also available. It instructs create-react-app to set up a local server, a hot module reloading, and a development environment. A script object containing key-value pairs that correspond to the script name and an execution reference should be present in your package.json file.
This is simply an easier method to instruct React to run the command npm-run-all -p watch-CSS start-js, which executes several operations. Here, npm run start causes the execution of the watch-CSS and start-js scripts. The former makes sure that.scss files are converted to standard.css files and your application is updated with any changes to your style automatically. The latter instructs React to launch the application in development mode and host it on localhost:3000.
What are react-scripts?
Making a React app used to be a difficult process. Before you could get your hands dirty and create something significant, you had to wade through a tonne of settings, especially with webpack and Babel. Fortunately, we now have the Create React App handy module, which has excellent settings, and the react-scripts: command not found, which makes it much simpler to create React applications.
Customization:
npm start is simply a command. You can customize its actions if needed. For instance, you can configure the localhost port for hosting the application. Here’s an example
“scripts”: {
“start”: “set PORT=8000 && react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
}
Here, we specifically instruct the script to utilize localhost:8000 as opposed to the default port. By typing the npm run-script name into the command line, additional scripts can also be executed. When using a create-react-app application and unsure of what a script does, check the package.json file.
How to use the build command with react-scripts:
A production-ready React app will be created for you when you issue the build command. Except for setting the built environment to production, it performs the identical process as a start command. The build function will be used by the script to combine all of your distinct files into a single bundle.js file rather than searching for open ports and starting a development server. Read more about Complete Guide about Data Science in 2021 (Advantages & Functioning).
The production build will also guarantee that your code has been optimized and compressed for maximum performance. The script will take your current file size and compare it with the upcoming build if you have previously run the build command. It will display the extent of the file size change:
How to use the react-scripts test command:
Any Jest test scripts you’ve developed will be executed by the test command. You can expect a Node environment to perform your tests. Jest will operate in interactive watch mode, which means that each time you save a file, the tests will be rerun, similar to how the start command recompiles the code.
The script will locate and run any file with the.test.js or.spec.js extensions, so you may save your test files wherever inside the src/ folder. Furthermore, it will execute any.js file found in the __tests/subdirectory. Keep in mind that CRA’s test command only covers testing your component and business logic under a stable environment. To run an end-to-end test in the browser, you need to use another testing library.
