Create-React-App scripts explained

2 min readJun 23, 2022

When creating a single-page-app(SPA) with react, it is recommended to use package called create-react-app to start a react project.

This article explains the dependencies and scripts that comes with create-react-app.

Dependencies

Babel(@babel/core)

Babel is a transpiler that makes my code readable to older browsers. Javascript has been continuously upgrading versions, and some of the older browsers cannot support the new features. Babel transforms my modern Javascript code to older versions.

ESLint

ESLint is Javascript linter that scans my code and flags any code errors.

Jest

Jest is a Javascript testing library that allows me to write test scripts for my application.

Webpack

Webpack is a Javascript module bundler that puts everything needed by my application and provides single(or couple of) .js file for the browser to run.

These are not the only packages, but important ones.

Scripts

So, there are four scripts, as you can check out in package.json.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Start script will set the build environment to development and run your project.
Build script will build a production-ready react app.
Test script will run any test scripts that I have written using jest. It will look any file named .test.js or .spec.js extensions under /src folder.
Eject script will remove the packages on react-script and expose the build tools to be available to me to modify. The dependencies will be moved to root’s package.json. I need to be cautious on using this command as it is a one-way operation.