⚛ React base boilerplate

Sensible React boilerplate using Webpack 5, Babel, PostCSS and Sass with a hot dev server and an optimized production build.

Installation

Clone this repo and npm install.

npm i

Usage

Development server

npm start

You can view the development server at localhost:8080.

Production build

npm run build

Note: Install http-server globally to deploy a simple server.

npm i -g http-server

You can view the deploy by creating a server in dist.

cd dist && http-server

Features

• webpack
• Babel
• Sass
• PostCSS

Dependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration
• cross-env - Cross platform configuration

React

• react - JavaScript library for building user interfaces.
• react-dom - Package that provides DOM-specific methods.

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript -@babel/eslint-parser - Allows you to lint ALL valid Babel code with the fantastic ESLint.
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel
• @babel/preset-react - React defaults for Babel

Eslint

• eslint - Reports patterns found in ECMAScript/JavaScript code
• eslint-config-airbnb - Airbnb JavaScript Style Guide
• eslint-import-resolver-webpack - Webpack-literate module resolution plugin for eslint-plugin-import
• eslint-plugin-import - Support linting of ES2015+ (ES6+) import/export syntax
• eslint-plugin-jsx-a11y - Static AST checker for accessibility rules on JSX elements
• eslint-plugin-react - React specific linting rules for ESLint
• eslint-plugin-react-hooks - Enforces the Rules of Hooks.

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
• node-sass - Node Sass
• postcss-loader - Process CSS with PostCSS
• postcss-preset-env - Sensible defaults for PostCSS
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• css-minimizer-webpack-plugin - Optimize and minimize CSS assets

Author

• Bernardo Ayala

License

This project is open source and available under the MIT License.