Hidden Features of create-react-app

Initialize with TypeScript

create-react-app officially supports TypeScript since version 2.1 (as a consequence the fork create-react-app-typescript has been deprecated).

The documentation of create-react-app nicely describes how to transition from a JavaScript based project to TypeScript.

However if you want to start a new project with TypeScript there is the undocumented --typescript command-line argument:

npx create-react-app —typescript my-awesome-project

This is even easier than to create a plain React project and then adding TypeScript later on.

Using webpack-bundle-analyzer

Update 2019–03–30: Using webpack-bundle-analyzer has been deprecated an the flag —-stats has been removed in CRA v3. You should be using source-map-explorer instead by running: npm i -g source-map-explorer and source-map-explorer 'build/static/js/*.js'.
The following paragraph is deprecated:

webpack-bundle-analyzer is a nice tool to visualize the content of JavaScript bundles/chunks.

In order to use webpack-bundle-analyzer webpack has to be run with the flag --stats. But create-react-app hides the call and configuration of webpack.

Fortunately you can pass the flag --stats to react-scripts (the build abstraction of cra) like this:

npm run build -- --stats

This generates the file bundle-stats.json in the public directory, which you then can use with webpack-bundle-analyzer:

npx webpack-bundle-analyzer ./build/bundle-stats-json

This feature is currently undocumented (documentation was removed), because the CRA team thinks the labelling of webpack-bundle-analyzer misleading, see this GitHub issue.