An opinionated but fairly minimal project to get started with React, Redux, and Webpack 2.
git clone https://github.com/techniq/react-starter-project.git
cd react-starter-project
npm install
npm start
open http://localhost:3000
- ES2015+ via babel 6, including object spread
- React with
react-router
- Redux with
react-redux
,redux-thunk
,redux-logger
,redux-devtools
(includingremotedev-server
) - Development server with hot reloading using
express
,webpack-dev-middleware
,webpack-hot-middleware
, andreact-hot-loader
) - Webpack 2 with tree shaking
- Minified production builds (
npm run build:prod
)NODE_ENV == 'production'
- UglifyJs
- Vendor bundle splitting
- Selective imports
- Inject index.html with cache breaking assets (js, css)
- Import from project root (ex.
import { Foo } from 'components/Foo'
)
- Minified production builds (
- Styles
- CSS Modules including SASS support
- Bootstrap and Font-Awesome (via
.scss
) and thus can be configured- Bootstrap colors overridden using
material-colors
react-bootstrap
- Bootstrap colors overridden using
postcss
withautoprefixer
- Polyfills for
window.fetch
andbabel-polyfill
for ES2015 environment (Promise
,Object.assign
,Array.from
,Array.includes
, etc) - Linting using eslint with airbnb's javascript rules (
npm run lint
) - Performance
react-addons-perf
andwhat-did-you-update
ReactPerf.start()
// interact with app...
ReactPerf.stop()
ReactPerf.printWasted()
ReactPerf.getWasted().reduce((result, item) => result += item.inclusiveRenderDuration, 0)
- Setup testing (
npm test
) usingava
,enzyme
,jest
, etc - Document how to change various things (
_variables.scss
for colors,eslint
rules, etc) - Document how to remove unwanted features (redux, sass, etc)
- Document how Webpack configuration is setup (explain use for each plugin, loader, etc)
- Provide better react-router and redux examples that can be iterated upon
- Consider
Immutable.js
/seamless-immutable