- Compilation with webpack
- React and es6
- Stylesheets can be CSS, LESS
- Embedded resources like images or fonts use DataUrls if appropriate
- Development
- Development server
- Use React hot reloader
- Production
- Minimized CSS and JavaScript
- Separated webpack config file for dev and prod
- Flux files structure
- Use
html-webpack-plugin
, https://github.com/ampedandwired/html-webpack-plugin, generate the index.html automatically
.
├── /build/ # The folder for compiled output
├── /dist/ # The folder for distributed files
├── /node_modules/ # 3rd-party libraries and utilities
├── /src/ # The source code of the application
│ ├── /actions/ # Action creators that allow to trigger a dispatch to stores
│ ├── /components/ # React components
│ ├── /constants/ # Constants (action types etc.)
│ ├── /dispatcher/ # Flux dispatcher
│ ├── /stores/ # Stores contain the application state and logic
│ ├── /main.js # Client-side startup script
│ └── /template.html # Template html
│── package.json # The list of 3rd party libraries and utilities
│── webpack.config.js # Webpack configuration for bundling and optimization
└── webpack.prod.config.js # Webpack configuration for production
npm install
npm run dev
npm run deploy
- React-webpack-cookbook, https://christianalfoni.github.io/react-webpack-cookbook/index.html
- html-webpack-plugin, https://github.com/ampedandwired/html-webpack-plugin
- React-hot-loader, http://gaearon.github.io/react-hot-loader/getstarted/