React seed
A boilerplate for building React apps with ES6 and webpack.
What you get
- React 0.13
- Compilation of ES6, ES7 & JSX to ES5 via babel
- webpack with react hot loader (also html, css, sass and other useful loaders)
- Karma, mocha, chai & sinon for testing
- Basic flux architecture with app actions, stores and example web API usage
- React router (feature/react-router)
- Material UI (feature/material-ui)
Getting started
Installing with git
git clone --depth=1 https://github.com/badsyntax/react-seed.git my-project
Installing with yeoman
npm install -g yo
npm install -g generator-react-seed
- Use the generator like so:
yo react-seed
npm scripts
npm start
- Build and start the app in dev mode at http://localhost:8000npm test
- Run the testsnpm run build
- Run a production build
Examples
Writing components:
// Filename: Menu.jsx 'use strict'; ;;; let Component PropTypes = React; static defaultProps = items: ; static propTypes = items: PropTypesarrayisRequired ; { return <ul className='menu'> thispropsitems </ul> ; }
Writing tests:
// Filename: __tests__/Menu-test.jsx 'use strict'; ;; ;; // Here we create a mocked MenuItem component. { return <li className='mocked-menu-item'>thispropsitemlabel</li> ; } // Here we set the mocked MenuItem component.Menu; ;
Sass, CSS & webpack
import
Sass and CSS files from within your JavaScript component files:
// Filename: app.jsx;;
- Important note: If you're importing component Sass files within your JavaScript component files, then each sass file will be compiled as part of a different process, and thus you cannot share global references. See this issue for more information.
- Sass include paths can be adjusted in the
webpack/loaders.js
file. - All CSS (compiled or otherwise) is run through Autoprefixer.
- CSS files are combined in the order in which they are imported in JavaScript, thus you should always import your CSS/Sass before importing any other JavaScript files.
- Use an approach like BEM to avoid specificity issues that might exist due to unpredicatable order of CSS rules.
HTML files
All required .html
files are compiled with lodash.template and synced into the ./build
directory:
// Filename: app.jsx;
- You can adjust the lodash template data in the
webpack/loaders.js
file.
Conventions
- Use fat arrows for anonymous functions
- Don't use
var
. Uselet
andconst
.
Releasing
npm version patch
git push && git push --tags
npm login
(Optional)npm publish
Credits
This project was initially forked from https://github.com/tcoopman/react-es6-browserify
License
Copyright (c) 2015 Richard Willis
MIT (http://opensource.org/licenses/MIT)