xinpuchen / react-template

A simple react application template

react-template

A simple React Application template which routes to different pages on user interaction, made from scratch using Babel, Webpack, React Router.

Features

• webpack 4
• babel 7 transforming JSX and ES6, ES7, ES8
• react 16.13.1
• react-router 5.1.2
• lodash
• eslint with airbnb config.
• prettier Prettier is an opinionated code formatter.
• style & css-Loader & sass-loader
• postcss
• react-css-modules Transforms styleName to className using compile time CSS module resolution.
• stylelint with standard config.
• browserslist Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env.
• react-hot-loader Tweak React components in real time.
• webpack-dev-serve Serves a webpack app. Updates the browser on changes.
• Jest with Enzyme for testing.
• lint-staged Precommit hooks via lint-staged + Husky.
• commitlint Lint commit messages.
• webpack-bundle-analyzer Visualize size of webpack output files with an interactive zoomable treemap.

How to use

1. Clone the template repo.

     git clone https://github.com/xinpuchen/react-template.git

2. npm i to install npm packages.

3. Use npm run build:dll to build dlls.

4. Start dev server using npm run dev.

5. Build and bundling your resources for production npm run build.

6. Lint your code using npm run lint.

7. Use npm run build --report Starts webpack-bundle-analyzer to give you the opportunity to analyze your bundles.

npm scripts

• npm run dev – starts development server with webpack-dev-server.
• npm run build – builds project to production.
• npm run lint – lints both JavaScript (with npm run lint:js) and Sass files (with npm run lint:scss).
• npm test – runs tests with Jest.