React Configuration

Configuration for a React app.

Uses Webpack 4, Babel 7.

Quick Overview

• git clone --depth 1 this repository to get started.
• npm install to install needed dependencies.
• npm start to start the application on port 3002
• npm build to build the application.

You can replace these with their yarn counterparts, if you prefer.

Features

• POSTCSS Plugins

  Has PostCSS setup and configuration exposed.

  • Preset ENV CSS

    Write future CSS today. Better than using Preprocessors like SASS or LESS because it's pure CSS that you learn.

    Comes with autoprefixer for your styles.

  • PostCSS Normalize

    Normalize stylesheets based on browser support for browserlist.

• ESLint

  Extends rules followed by CRA. You can turn rules on or off from .eslintrc.json. You can choose to ignore files on whole from .eslintignore

  Note: ESLint has it's style formatting options turned off by default, because it is handled by Prettier later on.

• Babel

  Used to compile your modern javascript to es2015 compatible javascript. You can change the configuration with .babelrc file.

• Prettier

  Formats code in place, so you don't have to learn the styling rules.

• Workbox

  Generates an optimised service worker with support for precaching and offline loading.

• Unit Testing

  Unit testing setup using Jest. Supports component testing with React Testing Library. Hooks can be tested with React Hooks Testing Library

Other enhancements

1. Code split into vendor.js and hashed javascript filenames. This helps in pushing new code without worrying about caching issues.

2. Supports dynamic imports and lazy loading.

3. Supports fast refresh and hot module reloading for React components.

4. Webpack automatically looks for and installs plugins that are not installed by default.
   Just import the required library and let webpack worry about installing it.

   https://github.com/webpack-contrib/npm-install-webpack-plugin
   

5. Removes prop types from production build

Feel free to throw in a pull request.