🌐 React X TypeScript Boilerplate

React boilerplate using TypeScript, Babel, Sass with a hot dev server and a production build.

Prerequisites

• Node.js
• Yarn

Getting Started

Installation

git clone https://github.com/Seogeurim/react-typescript-boilerplate.git
cd react-typescript-boilerplate
yarn install

Development server

Webpack dev server runs at localhost:8000.

yarn start

Production build

Build outputs are created in dist.

yarn run build

Features

• React
• TypeScript
• webpack
• Babel
• Sass

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

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/preset-env - Smart preset for Babel
• @babel/preset-react - Preset for React
• @babel/preset-typescript - Preset for TypeScript

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • sass - A pure JavaScript implementation of Sass
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extracts CSS file per JS file which contains CSS

Linters

• eslint - Enforce styleguide across application
• eslint-config-airbnb - Styleguide of Airbnb, including ECMAScript 6+ and React
• eslint-config-airbnb-typescript - Enhances Airbnb's ESLint config with TypeScript support
• eslint-config-prettier - Implment prettier rules
• eslint-plugin-import - Implment import rules
• eslint-plugin-jsx-a11y - Static AST checker for accessibility rules on JSX elements
• eslint-plugin-prettier - Dependency for prettier usage with ESLint
• eslint-plugin-react - React specific linting rules for ESLint
• eslint-plugin-react-hooks - enforces the Rules of Hooks
• prettier - code formatter

License

This project is licensed under the MIT License.