How Create‑React‑App Builds a React SPA: A Deep Dive into CRA Scripts

Creating a React SPA with create-react-app

create-react-app is a CLI scaffold and builder for React single‑page applications. It can be invoked in three ways: npm init (npm 6.1+) npx (npm 5.2+) yarn create (yarn 0.25+)

Example creates a project my-app with the typical file tree.

Adding TypeScript support

Use the --typescript flag when creating the app, or install TypeScript and the required @types packages manually and rename .js files to .ts.

What CRA can do

Beyond scaffolding, CRA provides scripts defined in package.json: react-scripts start – launches a development server with Hot Reload. react-scripts build – runs webpack to produce a production bundle. react-scripts test – runs the test suite.

Tracing the start command

The entry point is node_modules/react-scripts/scripts/start.js, which delegates to a switch on the script name. For start it sets environment variables, loads the configuration, creates a webpack compiler, and starts webpack-dev-server.

const config = configFactory('development');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const urls = prepareUrls(protocol, HOST, port);
const compiler = createCompiler({
  appName,
  config,
  devSocket,
  urls,
  useYarn,
  useTypeScript,
  webpack
});
const devServer = new WebpackDevServer(
  compiler,
  createDevServerConfig(proxyConfig, urls.lanUrlForConfig)
);
devServer.listen(port, HOST, err => {
  if (err) {
    console.log(err);
    return;
  }
  if (isInteractive) {
    clearConsole();
  }
  // additional logging omitted for brevity
});

The script also handles unhandled promise rejections, clears the console in interactive terminals, and prints helpful messages about missing files or deprecated NODE_PATH usage.

Why CRA simplifies development

CRA hides complex webpack and Babel configuration, provides sensible defaults, polyfills, and environment checks, allowing developers to start coding without manual setup.