generator-react-single-component

This is a light-weight generator for developing single reusable react component. Hope you could enjoy coding with react with this package.

1. supports ES6 syntax and has webpack-dev-server set for development.
2. supports postcss if you want to style your component in an advanced way.
3. provide a convenient way to publish your component to npm.

Install

If you don't have Yeoman installed yet, you should installed that first.

npm install -g yo

then install this generator

npm install -g generator-react-single-component

next, make a directory wherever you think it should be, better with the lower-case name (npm unique) of the component you are going to develop. In that directory, run the following cli

yo react-single-component

The rest steps are self-explained.

Usage

After the codes generated, you may...

• reinstall ghooks due to some unknown reason, see Note#3

npm uninstall ghooks && npm install ghooks

• start our webpack-dev-server

npm run dev

• open your browser and visit http://localhost:3000. The port number is configurable in webpack.config.js

• start coding ES6 in src/YourComponent.jsx and src/YourComponent.css, and you will see result on the spot.

• if you want to do test-driven develpment, feel free to write test code in test/YourComponent.spec.js.

• after finish the component, run the following script to compile your ES6 code to ES5.

npm run compile

• after commit all changes, you can tag a release by git tag -a your-version. for example:

git tag -a v0.0.1

• then you can publish your package both in npm npm publish and github git push --tags.

Note

1. don't name your component as 'App'
2. make a new directory before run yo react-single-component
3. for unknown reason, you have to uninstall and reinstall ghooks before the ghooks can work.
4. new Issues are welcomed!!

Example Projects

• MDModal
• MDFlashMessage
• AgGridWrapper

feel free to read the source code.

license

MIT