This simple template contains all the necessary settings to start a React project.
- Clone this repo;
- Install all dependencies using command
npm ioryarn.
- Start the development server using command
npm run startoryarn start; - You can view the development server at
localhost:3000.
- You can build production version using command
npm run buildoryarn build
Note: Optional
- Install http-server globally to deploy a simple server using command
npm i -g http-serveroryarn global add http-server; - View the deploy by creating a server in
distusing commandcd dist && http-server
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.
react- React is a JavaScript library for creating user interfaces;react-dom- This package serves as the entry point to the DOM and server renderers for React.
typescript- TypeScript is a language for application-scale JavaScript;@types/react- This package contains type definitions for React (http://facebook.github.io/react/);@types/react-dom- This package contains type definitions for React (react-dom) (https://reactjs.org);@typescript-eslint/eslint-plugin- An ESLint plugin which provides lint rules for TypeScript codebases;@typescript-eslint/parser- An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
@babel/core- Transpile ES6+ to backwards compatible JavaScript;@babel/preset-env- Smart defaults for Babel;babel-loader- This package allows transpiling JavaScript files using Babel and webpack.
ts-loader- This is the TypeScript loader for webpack;babel-loader- Transpile files with Babel and webpack;sass-loader- Load SCSS and compile to CSS;sass- Node Sass;postcss-loader- Process CSS with PostCSS;postcss-preset-env- Sensible defaults for PostCSS;css-loader- Resolve CSS imports;file-loader- The file-loader resolves import/require() on a file into a url and emits the file into the output directory.
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;
eslint- Enforce styleguide across application;prettier- Prettier is an opinionated code formatter;eslint-config-prettier- Implement prettier rules;eslint-config-airbnb-base- This package provides Airbnb's base JS .eslintrc (without React plugins) as an extensible shared config;eslint-plugin-import- This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names;eslint-plugin-react- React specific linting rules for eslint;eslint-plugin-react-hooks- This ESLint plugin enforces the Rules of Hooks.
This project is open source and available under the MIT License.