diff --git a/README.md b/README.md index 9cb5fe0..efafa91 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,46 @@ -# starter-react-flux - -[![Build Status](https://travis-ci.org/SokichiFujita/starter-react-flux.svg?branch=master)](https://travis-ci.org/SokichiFujita/starter-react-flux) -[![total](https://img.shields.io/npm/dt/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) -[![per year](https://img.shields.io/npm/dy/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) -[![per month](https://img.shields.io/npm/dm/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) -[![per week](https://img.shields.io/npm/dw/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) -[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/SokichiFujita/starter-react-flux/blob/master/LICENSE) -[![npm](https://img.shields.io/npm/v/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/SokichiFujita/starter-react-flux/blob/master/README.md) - -A starter kit for a React and Flux. You can easily create a standard React and Flux project using awesome libraries. - -- [React](http://facebook.github.io/react/), [Flux](https://facebook.github.io/flux/) -- [Jest](https://facebook.github.io/jest/) -- [Babel 7](https://babeljs.io) - - [@babel/preset-react](http://babeljs.io/docs/plugins/preset-react/) - - [@babel/preset-env](https://babeljs.io/docs/plugins/preset-env/) - - All plugins for stage3, stage2, stage1 and stage0! -- [Webpack v4](https://webpack.js.org) - - [Webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html) - - [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) -- [Prettier](https://prettier.io) -- [ESLint v5](http://eslint.org), - - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) -- [React-Router v4](https://reacttraining.com/react-router/) -- [Material-UI v3](http://www.material-ui.com) -- [Immutable.js](https://facebook.github.io/immutable-js/) -- [Axios](https://github.com/mzabriskie/axios) - -starter-react-flux will install the latest versions. +# starter-react-flux + +[![Build Status](https://travis-ci.org/SokichiFujita/starter-react-flux.svg?branch=master)](https://travis-ci.org/SokichiFujita/starter-react-flux) +[![total](https://img.shields.io/npm/dt/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) +[![per year](https://img.shields.io/npm/dy/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) +[![per month](https://img.shields.io/npm/dm/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) +[![per week](https://img.shields.io/npm/dw/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) +[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/SokichiFujita/starter-react-flux/blob/master/LICENSE) +[![npm](https://img.shields.io/npm/v/starter-react-flux.svg)](https://www.npmjs.com/package/starter-react-flux) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/SokichiFujita/starter-react-flux/blob/master/README.md) + +A vanilla starter kit to develop a [React](https://reactjs.org/) app that supports [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) (PWA) features. + +![](./images/app1.png) + +Get a simple and clean start point to develop a React project. + +This tool just only executes a bunch of installation commands and generates standard code and configurations. There are no black-box features like `eject` or `react-scripts` of `create-react-app`. You will be able to learn fundamental mechanisms of a React and Flux project. + +## Using libraries + +* [React](http://facebook.github.io/react/) +* [Flux](https://facebook.github.io/flux/) +* [React-Router v4](https://reacttraining.com/react-router/) +* [Material-UI v3](http://www.material-ui.com) +* [Workbox](https://developers.google.com/web/tools/workbox/) +* [Babel 7](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) +* [Webpack v4](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) +* [Prettier](https://prettier.io) +* [ESLint v5](http://eslint.org) + * [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) +* [Jest](https://facebook.github.io/jest/) +* [Axios](https://github.com/mzabriskie/axios) +* [Immutable.js](https://facebook.github.io/immutable-js/) ## Usage @@ -51,56 +63,41 @@ starter-react-flux init npm start                     // Launch the app with webpack-dev-server. ``` -#### Top page with React and Flux +#### Top page ![](./images/app1.png) -#### Client side routing with React Router - ![](./images/app2.png) -#### Bundle analyzing with Webpack Bundle Analyzer +### Production build with Webpack ``` -npm run bundle-analyze +npm run build                 // Build the app into the ./public directory. ``` -![](./images/webpack-bundle-analyzer.png) +This command also analyzes the bundle file using Webpack Bundle Analyzer and generates reports. +![](./images/webpack-bundle-analyzer.png) +### Testing with Jest -#### Testing with Jest ``` npm test                     // Testing with Jest. +npm run update_test // Update snapshot testing. ``` -![](./images/test.png) - - -#### Static analyze with ESLint +### Static analysis with ESLint ``` npm run lint                 // Check the code by ESLint with AirBnb's style guideline. ``` -![](./images/lint.png) - -#### Automatic code format with Prettier and ESLint +### Automatic code format with Prettier ``` npm run fix // Fix the code by Prettier with AirBnb's guidline. ``` -![](./images/fix.png) - - - -#### Production build with Webpack - -``` -npm run build                 // Build the app into the ./public directory. -``` - ## Directory structure of the generated app ``` @@ -109,84 +106,102 @@ npm run build                 // Build the app into the ./public directo ├── .eslintrc //Configuration for ESLint ├── __tests__ //Test files for JEST ├── app -│   ├── App.js //Entry point -│   ├── actions //Action Creators +│   ├── App.js //Entry point to build +│   ├── actions //Action Creators of Flux │   ├── components //React Components -│   ├── constants //Constatns for Action Creators and Stores -│   ├── dispatcher //Dispatcher -│   ├── stores //Reduced Store +│   ├── 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 //Build assets and other assets -│   ├── css -│   ├── img -│   ├── index.html -│   └── js -└── webpack.config.js //Configuration for Webpack +├── 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 ``` ## Current Packages -### Nov.24, 2018: React Hooks APIs are available! +### 3.19, 2019 ``` "devDependencies": { - "@babel/cli": "^7.1.5", - "@babel/core": "^7.1.6", - "@babel/plugin-proposal-class-properties": "^7.1.0", - "@babel/plugin-proposal-decorators": "^7.1.6", - "@babel/plugin-proposal-do-expressions": "^7.0.0", - "@babel/plugin-proposal-export-default-from": "^7.0.0", - "@babel/plugin-proposal-export-namespace-from": "^7.0.0", - "@babel/plugin-proposal-function-bind": "^7.0.0", - "@babel/plugin-proposal-function-sent": "^7.1.0", - "@babel/plugin-proposal-json-strings": "^7.0.0", - "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0", - "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0", - "@babel/plugin-proposal-numeric-separator": "^7.0.0", - "@babel/plugin-proposal-optional-chaining": "^7.0.0", - "@babel/plugin-proposal-pipeline-operator": "^7.0.0", - "@babel/plugin-proposal-throw-expressions": "^7.0.0", - "@babel/plugin-syntax-dynamic-import": "^7.0.0", - "@babel/plugin-syntax-import-meta": "^7.0.0", - "@babel/plugin-transform-runtime": "^7.1.0", - "@babel/preset-env": "^7.1.6", + "@babel/cli": "^7.2.3", + "@babel/core": "^7.3.4", + "@babel/plugin-proposal-class-properties": "^7.3.4", + "@babel/plugin-proposal-decorators": "^7.3.0", + "@babel/plugin-proposal-do-expressions": "^7.2.0", + "@babel/plugin-proposal-export-default-from": "^7.2.0", + "@babel/plugin-proposal-export-namespace-from": "^7.2.0", + "@babel/plugin-proposal-function-bind": "^7.2.0", + "@babel/plugin-proposal-function-sent": "^7.2.0", + "@babel/plugin-proposal-json-strings": "^7.2.0", + "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0", + "@babel/plugin-proposal-numeric-separator": "^7.2.0", + "@babel/plugin-proposal-optional-chaining": "^7.2.0", + "@babel/plugin-proposal-pipeline-operator": "^7.3.2", + "@babel/plugin-proposal-private-methods": "^7.3.4", + "@babel/plugin-proposal-throw-expressions": "^7.2.0", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", + "@babel/plugin-syntax-import-meta": "^7.2.0", + "@babel/plugin-transform-runtime": "^7.3.4", + "@babel/preset-env": "^7.3.4", "@babel/preset-react": "^7.0.0", - "babel-core": "^7.0.0-0", "babel-eslint": "^10.0.1", - "babel-jest": "^23.6.0", - "babel-loader": "^8.0.4", - "eslint": "^5.9.0", + "babel-jest": "^24.5.0", + "babel-loader": "^8.0.5", + "eslint": "^5.15.2", "eslint-config-airbnb": "^17.1.0", - "eslint-config-prettier": "^3.3.0", - "eslint-plugin-import": "^2.14.0", - "eslint-plugin-jsx-a11y": "^6.1.2", - "eslint-plugin-prettier": "^3.0.0", - "eslint-plugin-react": "^7.11.1", - "jest-cli": "^23.6.0", - "prettier": "^1.15.2", - "regenerator-runtime": "^0.13.1", - "webpack": "^4.26.0", - "webpack-bundle-analyzer": "^3.0.3", - "webpack-cli": "^3.1.2", - "webpack-dev-server": "^3.1.10" + "eslint-config-prettier": "^4.1.0", + "eslint-plugin-import": "^2.16.0", + "eslint-plugin-jsx-a11y": "^6.2.1", + "eslint-plugin-prettier": "^3.0.1", + "eslint-plugin-react": "^7.12.4", + "html-webpack-plugin": "^3.2.0", + "jest-cli": "^24.5.0", + "prettier": "^1.16.4", + "react-test-renderer": "^16.8.4", + "webpack": "^4.29.6", + "webpack-bundle-analyzer": "^3.1.0", + "webpack-bundle-size-analyzer": "^3.0.0", + "webpack-cli": "^3.3.0", + "webpack-dev-server": "^3.2.1", + "webpack-merge": "^4.2.1", + "webpack-pwa-manifest": "^4.0.0", + "workbox-webpack-plugin": "^4.1.1" }, "dependencies": { - "@material-ui/core": "^3.5.1", - "@material-ui/icons": "^3.0.1", + "@babel/runtime": "^7.3.4", + "@material-ui/core": "^3.9.2", + "@material-ui/icons": "^3.0.2", "axios": "^0.18.0", "flux": "^3.1.3", "immutable": "^4.0.0-rc.12", "prop-types": "^15.5.7-alpha.1", - "react": "^16.7.0-alpha.2", - "react-dom": "^16.7.0-alpha.2", - "react-router-dom": "^4.3.1" + "react": "^16.8.3", + "react-dom": "^16.8.3", + "react-router-dom": "^4.4.0" } ``` ## License -- MIT License - - +* MIT License diff --git a/images/app1.png b/images/app1.png index c705717..ce43a95 100644 Binary files a/images/app1.png and b/images/app1.png differ diff --git a/images/app2.png b/images/app2.png index f370d95..1823f26 100644 Binary files a/images/app2.png and b/images/app2.png differ diff --git a/images/fix.png b/images/fix.png deleted file mode 100644 index 6c9dc7d..0000000 Binary files a/images/fix.png and /dev/null differ diff --git a/images/lint.png b/images/lint.png deleted file mode 100644 index a276b8e..0000000 Binary files a/images/lint.png and /dev/null differ diff --git a/images/test.png b/images/test.png deleted file mode 100644 index ab8b11c..0000000 Binary files a/images/test.png and /dev/null differ