Generator-react-single-component NPM

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.

supports ES6 syntax and has webpack-dev-server set for development.
supports postcss if you want to style your component in an advanced way.
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

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