starter-react-flux
A starter kit for a React and Flux. You can easily create a standard React and Flux project using awesome libraries.
starter-react-flux will install the latest versions.
Usage
Create a new project
mkdir my-app && cd my-app
//npm >= 5.2.0
npx starter-react-flux init
//npm < 5.2.0
npm install -g starter-react-flux
starter-react-flux init
Launch the application
npm start // Launch the app with webpack-dev-server.
Top page with React and Flux
Client side routing with React Router
Bundle analyzing with Webpack Bundle Analyzer
npm run bundle-analyze
Testing with Jest
npm test // Testing with Jest.
Static analyze with ESLint
npm run lint // Check the code by ESLint with AirBnb's style guideline.
Automatic code format with Prettier and ESLint
npm run fix // Fix the code by Prettier with AirBnb's guidline.
Production build with Webpack
npm run build // Build the app into the ./public directory.
Directory structure of the generated app
.
├── .babelrc //Configuration for Babel
├── .eslintrc //Configuration for ESLint
├── __tests__ //Test files for JEST
├── app
│ ├── App.js //Entry point
│ ├── actions //Action Creators
│ ├── components //React Components
│ ├── constants //Constatns for Action Creators and Stores
│ ├── dispatcher //Dispatcher
│ ├── stores //Reduced Store
│ └── utils //Utils
├── node_modules
├── package.json
├── public //Build assets and other assets
│ ├── css
│ ├── img
│ ├── index.html
│ └── js
└── webpack.config.js //Configuration for Webpack
Current Packages
Nov.24, 2018: React Hooks APIs are available!
"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/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",
"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"
},
"dependencies": {
"@material-ui/core": "^3.5.1",
"@material-ui/icons": "^3.0.1",
"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"
}
