Boilerplate for better state management, styling, testing and cleaner code
- Webpack: Development and Production ready (https://webpack.github.io/)
- Babel: Configured to work with React, ES7 and React Hot Loader 3! (https://babeljs.io/)
- MobX: The best state management for React 😍 (https://mobxjs.github.io/mobx/)
- Flow: Type Checker for Javascript (http://flowtype.org/)
- ESLint: Configured to work with React (http://eslint.org)
- Aphrodite: Inline Styles that work (https://github.com/Khan/aphrodite)
- Enzyme[1] w/ Jest[2]: Painless Javascript unit testing
- React Hot Loader 3: Hot Loader for stateless components (gaearon/react-hot-boilerplate#61)
- Why did you update: no more unnecessary re-renders (https://github.com/garbles/why-did-you-update)
git clone https://github.com/KadoBOT/reaxor.git
npm install
Development Build: npm start
Production Build: npm run build
Testing: npm test or npm run test:watch for watching file change or npm run test:coverage for showing test coverage
Lint checking: npm run lint
Flow testing: npm run typecheck
..root
|--dist //production bundle.js will be placed here
|--src
|--components
|--__tests__ //Jest detects folders named this way
App.js //with inline css (by Aphrodite)
MyComponent.js
|--stores
Store.js //MobX Store for State Management
index.js
Since this is a boilerplate, I won't go deeper on how to use it's features (ie. how to use MobX , Aphrodite or Jest), but you can find pre-configured files inside this project that uses them, so you can get a taste of it. If you want to learn more about them and how to use it, you can click on the links on the top of this page near each package name and description.
- Send pull requests, I love them!
- Be sure to run the tests provided in this repo before sending the pull requests.