Starter React Flux

Starter-React-Flux generates a well-configured project of React and Flux PWA.

• TypeScript and JavaScript are supported.
• npm and yarn are supported.

Quick start

mkdir my-app && cd my-app

npx starter-react-flux init // JavaScript and npm
npx starter-react-flux init --ts // TypeScript
npx starter-react-flux init --yarn // yarn

npm start

Installed packages

• React
• TypeScript (Optional)
• Flux
• Jest
• Babel v7
  • @babel/preset-react
  • @babel/preset-env
  • Experimental Plugins
  • @babel/preset-typescript (Optional)
  • babel-eslint
  • babel-jest
  • babel-loader
• Webpack v5
  • Webpack-Dev-Server
  • HTML-Webpack-Plugin
  • Workbox-Webpack-Plugin
  • Webpack-PWA-Manifest
  • Webpack Bundle Analyzer
  • Webpack Bundle Size Analyzer
• ESLint v7
  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-config-airbnb
  • eslint-config-prettier
  • eslint-plugin-import
  • eslint-plugin-jest
  • eslint-plugin-jsx-a11y
  • eslint-plugin-prettier
  • @typescript-eslint/eslint-plugin (Optional)
  • @typescript-eslint/parser (Optional)
• Prettier
• Workbox
• React-Router v5
• Material-UI v4
• axios
• Immutable.js

Usage of generated project

Launch the application

npm start                     // Launch the app with webpack-dev-server.

Top page

Production build with Webpack

npm run build                 // Build the app into the ./public directory.

This command also analyzes the bundle file using Webpack Bundle Analyzer and generates reports.

Testing with Jest

npm test                      // Testing with Jest.
npm run update_test           // Update snapshots for snapshot testing.

Static analysis with ESLint

npm run lint                  // Run static analysis by ESLint.

Automatic code format with Prettier

npm run fix                   // Run Prettier to fix code by lint rules.

Directory structure of the generated app

.
├── .babelrc          //Configuration for Babel
├── .eslintrc         //Configuration for ESLint
├── __tests__         //Test files for JEST
├── app
│   ├── App.(js|tsx)  //Entry point to build
│   ├── actions       //Action Creators of Flux
│   ├── components    //React Components
│   ├── constants     //Constatns for Action Creators and Stores of Flux
│   ├── dispatcher    //Dispatcher of Flux
│   ├── stores        //ReduceStore of Flux
│   ├── utils         //Utils
│   ├── html          //HTML template for PWA
│   ├── icon          //Icon source for PWA
│   ├── sw.js         //ServiceWorker template for PWA
│   └── utils         //Utils
├── node_modules
├── package.json
├── public            //`npm run build` command generates the assets
│   ├── css           //CSS files
│   ├── img           //Image files
│   ├── favicon.ico   //Favicon
│   ├── bundle.js     //Built js by Webpack
│   ├── manifest.*.json  //Generated Web App Manifest
│   ├── precache-manifest.*.js //Generated Precache Manifest for Workbox
│   ├── icon_*.png    //Generated icons from the source icon
│   ├── sw.js         //Generated ServiceWorker from the template
│   └── index.html    //Generated index.html from the template
├── analysis          //Reports of bundle analysis
│   ├── bundle-analyzer.html
│   └── bundle-size analyzer.log
│── webpack.common.js //Configuration for Webpack
│── webpack.prod.js   //Production configuration for Webpack
│── webpack.dev.js    //Development configuration for Webpack
└── tsconfig.json     //TypeScript configuration (only for TypeScript project)

License

• MIT License