starter-react-flux
Version:
A React/Flux project and code generator.
158 lines (124 loc) • 7.04 kB
Markdown
# Starter React Flux
[](https://travis-ci.org/SokichiFujita/starter-react-flux)
[](https://www.npmjs.com/package/starter-react-flux)
[](https://www.npmjs.com/package/starter-react-flux)
[](https://www.npmjs.com/package/starter-react-flux)
[](https://www.npmjs.com/package/starter-react-flux)
[](https://github.com/SokichiFujita/starter-react-flux/blob/master/LICENSE)
[](https://www.npmjs.com/package/starter-react-flux)
[](https://github.com/SokichiFujita/starter-react-flux/blob/master/README.md)
Starter-React-Flux generates a well-configured project of [React](https://reactjs.org/) and [Flux](https://facebook.github.io/flux/) [PWA](https://developers.google.com/web/progressive-web-apps/).
- **[TypeScript](https://www.typescriptlang.org)** and **[JavaScript](https://developer.mozilla.org/docs/Web/JavaScript)** are supported.
- **[npm](https://www.npmjs.com)** and **[yarn](https://yarnpkg.com)** 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](http://facebook.github.io/react/)
* [TypeScript](https://www.typescriptlang.org) (Optional)
* [Flux](https://facebook.github.io/flux/)
* [Jest](https://facebook.github.io/jest/)
* [Babel v7](https://babeljs.io)
* [@babel/preset-react](http://babeljs.io/docs/plugins/preset-react/)
* [@babel/preset-env](https://babeljs.io/docs/plugins/preset-env/)
* [Experimental Plugins](https://babeljs.io/docs/en/plugins#experimental)
* [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript/) (Optional)
* [babel-eslint](https://github.com/babel/babel-eslint)
* [babel-jest](https://jestjs.io)
* [babel-loader](https://github.com/babel/babel-loader)
* [Webpack v5](https://webpack.js.org)
* [Webpack-Dev-Server](https://webpack.github.io/docs/webpack-dev-server.html)
* [HTML-Webpack-Plugin](https://github.com/jantimon/html-webpack-plugin)
* [Workbox-Webpack-Plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
* [Webpack-PWA-Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest)
* [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
* [Webpack Bundle Size Analyzer](https://github.com/robertknight/webpack-bundle-size-analyzer)
* [ESLint v7](http://eslint.org)
* [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)
* [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)
* [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)
* [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)
* [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import)
* [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest)
* [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y)
* [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) (Optional)
* [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint) (Optional)
* [Prettier](https://prettier.io)
* [Workbox](https://developers.google.com/web/tools/workbox/)
* [React-Router v5](https://reacttraining.com/react-router/)
* [Material-UI v4](http://www.material-ui.com)
* [axios](https://github.com/mzabriskie/axios)
* [Immutable.js](https://facebook.github.io/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