react-init

REACT INIT

Easy way to start your new react component. React-init is a cli for generating small and reusable react components.

Install it globally: npm install react-init -g

And then type: react-init Carousel

It will create a new component called Carousel. :)

This template provides everything you need to start developing and testing your new component. Including:

• es6/7 support through babel;
• code linting through eslint;
• automatic code style for your editor through editorConfig
• test frameworks using mocha, chai;
• test coverage using isparta;
• continuous integration using travis;
• coverall report
• badges
• fast dev cycle using gulp
• automated releases using npm

Getting started

From your terminal, type:

• npm install react-init -g
• react-init YourComponentName / capital case for component names
• cd yourcomponentname // lowercase for folders
• npm install
• gulp dev

Ps.: npm install will take ~3 minutes. Mostly because of the many dependencies nedeed for es6/7 capabilities. I'm still investigating if I can make it faster.

For releasing on npm

• npm run release

Settings

You will find some .dotfiles in the root of this project. Those are the settings for all the tools we are using and they are shared between npm, gulp and the services we are using. Be mindful changing it.

File	Description
.babelrc	babel settings
.editorconfig	code style configs
.eslintrc	linting settings
.travis.yml	ci settings for travis

Setting up Continuous integration using Travis

After pushing your repo to bitbucket or github, go to travis-ci, link and enable your new repo to be built. Your next git push will trigger the build.

Setting up Test Coverage using Coveralls

Go to coveralls, get a token and enable your repo for coverage. Then go back to travis and add your token as an environment variable. Your next build will trigger coverage.

List of gulp tasks (used for development workflow)

Task	Description
default
clean	remove generated folders
dev	runs everything you need and keep watching for changes
lint	lint js files
build	clean and build the project
re-build	build changed files
tests	run the tests
watch	watch for file changes to perform needed actions

List of npm tasks (mostly used from the services)

Task	Description
postinstall
start
lint	lint js files
build	build the project
test	run the tests
tdd	run the tests and keep watching
coverage	collect coverage from the tests
coveralls	sends coverage reports to coveralls
prerelease	run tests, linting and build prior to release
release	bump npm version, push to git and publish to npm

Contributing

Pull Requests welcome!

TODOs

• tests
• coverage
• build
• task for tests
• task for tests and coverage
• task for publishing to npm
• task for publishing to gh-pages
• editorConfig
• coveralls
• travis
• eslint
• add gulp tasks for performing everything
• create a template and generator