generator-react-multipage
v0.1.13
Published
Yeoman generator for React multipage with Webpack via Babel
Downloads
37
Maintainers
Readme
generator-react-webpack
Yeoman generator for ReactJS - lets you quickly set up a project including karma test runner and Webpack module system.
About
Generator-React-Webpack will help you build new React projects using modern technologies.
Out of the box it comes with support for:
- Multipage generate
- Webpack
- ES2015 via Babel-Loader
- Different supported style languages (sass, scss, less, stylus)
- Style transformations via PostCSS
- Automatic code linting via esLint
- Ability to unit test components via Karma and Mocha/Chai
Installation
# Make sure both is installed globally
npm install -g yo
npm install -g generator-react-multipage
Setting up projects
# Create a new directory, and `cd` into it:
mkdir my-new-project && cd my-new-project
# Run the generator
yo react-multipage
Please make sure to edit your newly generated package.json
file to set description, author information and the like.
Generating new components
# After setup of course :)
# cd my-new-project
yo react-multipage:component componentName
Generating new pages
# After setup of course :)
# cd my-new-project
yo react-multipage:page pageName
The above command will create a new component, as well as its stylesheet and a basic testcase.
Generating new stateless functional components
yo react-multipage:component componentName --stateless
Stateless functional components where introduced in React v0.14. They have a much shorter syntax than regular ones and no state or lifecycle methods at all. Please read the React 0.14 release notes to get more information about those components.
Note: You will still be able to set properties for stateless components!
Adding PostCSS plugins
If you have enabled PostCSS at generation time, install your PostCSS plugins via npm and require it in postcss function in cfg/base.js.
Example for autoprefixer:
cd my-new-project
npm install autoprefixer
Require in cfg/base.js
...
postcss: function () {
return [
require('autoprefixer')({
browsers: ['last 2 versions', 'ie >= 8']
})
];
}
...
Usage
The following commands are available in your project:
# Init project first
npm run init
# Start for development
npm start # or
npm run serve
# Start the dev-server with the dist version
npm run serve:dist
# Just build the dist version and copy static files
npm run dist
# Run unit tests
npm test
# Auto-run unit tests on file changes
npm run test:watch
# Lint all files in src (also automatically done AFTER tests are run)
npm run lint
# Clean up the dist directory
npm run clean
# Just copy the static assets
npm run copy
Naming Components
We have opted to follow @floydophone convention of uppercase for component file naming e.g. Component.js. I am open to suggestions if there is a general objection to this decision.
Modules
Each component is a module and can be required using the Webpack module system. Webpack uses Loaders which means you can also require CSS and a host of other file types. Read the Webpack documentation to find out more.
Props
Thanks to Edd Hannay for his Webpack optimisations, my local merge and testing meant his additions lost his signature (my fault, sorry). So, big thanks Edd.
Contribute
Contributions are welcomed. When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
Running Tests
npm test
or node node_modules/.bin/mocha