0.4.1 • Published 10 years ago
generator-react-boilerplate-vtech v0.4.1
React boilerplate generator
This generators helps you setup a React project. It includes as much basic features as possible (routing, i18n, flux, tests, compilation), and a small amount of code to demonstrate how to use them together.
This repo is open-sourced mainly as an inspiration on how to set up a React project, as well as for internal use at V-Technologies. Feel free to suggest any improvement, but we do not assure you that they will be integrated, as this boilerplate should continue to fit our own requirements.
Usage
npm install -g yo
npm install -g generator-react-boilerplate-vtech
cd /path/to/your/project
yo react-boilerplate-vtechModules
JS
- react, of course
- react-intl for i18n
- react-router for routing
- react-helmet to handle HTML
<head> - react-redux to bind redux state to components
- redux for a functional flux implementation
- redux-saga to handle asynchronous flux actions
- render-if to handle conditional rendering
- lodash for great functional helpers
- classnames to generate dynamic class names for components
- history to handle browser histories
- fetch to emulate the upcoming fetch function
- karma to test everything in various browsers
- mocha to power test suites
- chai as the assertion library (favoring the expect interface)
- enzyme to test components
- webpack to build everything
- babel to transpile ES6 code
- eslint to ensure code quality and consistency
- eslint-config-vtech to enforce our own standards
CSS
- susy to build grids
- typi to handle responsive typography and vertical rythm
- node-sass to compile Sass
- sass-lint to lint Sass
Architecture
├── /css (styles)
├── /dist (compilation output)
├── /src (scripts)
│ ├── /actions (redux actions)
│ ├── /api (api calls)
│ ├── /components (components and redux containers)
│ ├── /messages (i18n messages)
│ ├── /reducers (redux reducers)
│ ├── /sagas (redux sagas)
│ ├── /types (prop types)
│ ├── index.js (entry point)
│ ├── routes.js (routes)
│ └── store.js (redux store)
└── /test (files following the same structure as src)