Advantages

• Easy to set up
• Will work perfectly for small scale applications
• Would normally be a good fit for most applications
• Fairly easy to work with while keeping to conventions

Advantages

• Comes already set up with many useful tools
  • Jest
  • Eslint
  • A full webpack config

Advantages

• Is easily integrated with Redux
• Is easily integrated with simple css frameworks
  • Styled Components
• Comes with CSS Modules and SASS out of the box
• Comes with a few postcss plugins of its own

Disadvantages

• Difficult to customize
• Difficult to extend
• Difficult to port to Monorepos
• Difficult to integrate with other build systems

In Short

Any custom work will be normally impossible to deal with

Taking control over CRA

Aka. Ejecting

Pros

• Gives you full control over the entire build
• Will produce an environment that would be easier to integrate with other tools, such as Storybook, with less hassle. 

Cons

• Removes support from CRA
• Exports a ton of configuration options, which are both hard to read and difficult to optimize and maintain
• Updates and maintenance will need to be done manually

Hacking the CRA

Aka. Rewiring

How?

• Acts as a middleware between react-scripts and the configuration itself that CRA generates.
• It intercepts the config itself, and overwrites it, before passing it to the main CRA scripts.

Pros

• Keeps CRA intact
• Will keep receiving updates
• Does not break or affect any of the CRA-s functionality
• Can alter any aspect of the webpack build config
• Requires less work to get set up and modify your build, compared to ejecting

Cons

• Requires more tinkering than ejecting, and may require more hit-and-miss attempts at first
• Will only work for CRA, integrating other tools such as Storybook would prove problematic

Show me the code!

We're developers, after all...

Demo Time

• Overrides:
  • External BabelRC
  • External ESLintRC
  • Integrating Linaria

Plot Twist

Webpack Configuration

Code!