Builds a React Component project with useful gulp tasks for development, build and publishing.
See react-component-gulp-tasks for documentation on how to use the gulp tasks.
Install the generator:
npm install -g generator-react-component
Then run the generator:
... and follow the prompts.
How to develop your component
Your component source code is in
src. You can use JSX and ES6 syntax freely in your component source; it will be transpiled to
lib with Babel before being published to npm so that your users will simply be able to include it.
It's a great idea to add a description, documentation and other information to your
README.md file, to help people who are interested in using your component.
Example & Preview
Preview your component with LiveReload:
A webserver will be started on localhost:8000 running the examples in
You can use this playpen to test your component, and then publish it as live examples to GitHub Pages, which is a great way to let potential users try out your component and see what it can do.
Lint your code!
npm run lint
Your code will be linted with ESLint, using the Babel parser and the React plugin. You can customise the settings by editing the
Build and Publish
npm run build
This will build your
example/dist folders ready for release.
You can then publish your component to npm and GitHub Pages by running:
npm run release
Other npm scripts
Just run the examples server; no code will be built or watched, everything in
example/dist will be served on localhost:8000.
Usually run as part of the
release script, this will copy the contents of
example/dist to your
gh-pages branch and push it.
This task watches the
src folder for changes, and builds automatically into
lib. This is useful if you are developing your component in another project using
I'd love to hear it. Open an issue or submit a PR.
MIT. Copyright (c) Jed Watson 2015.