React component base

Stack

• React/React-DOM/React-addons-test-utils 15.x
• Babel 6 - Javascript Compiler.
• React Storybook - Isolated environment for your components.
• Eslint - The pluggable linting utility for JavaScript and JSX.
• Husky - Git hooks made easy.
• Mocha - JavaScript test framework.
• Chai - BDD / TDD assertion library.
• Sinon - Standalone test spies, stubs and mocks for JavaScript.
• Nyc - Istanbul command line interface.
• Enzyme - JavaScript Testing utility for React.
• JSDOM - A JavaScript implementation of the WHATWG DOM and HTML standards.

Getting Started

Installation

First of all, install the dependencies to run this boilerplate.

# install dependencies
$ npm install

Folders and Files

├── css
│   └── main.css
├── dist
│   └── Foo.js
├── src
│   └── Foo.js
├── stories
│   └── Foo.js
├── storybook
│   ├── config.js
│   └── webpack.config.js
├── tests
│   ├── helpers
│   │   └── setup.js
│   └── specs
│       └── Foo.spec.js
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── Readme.md
└── package.json

How to Develop with Storybook

Create your storybook stories on stories folder. If you want to create another story file, remember to load on .storybook/config.js. With all stories, just run npm run storybook to open your isolated environment.

If you want to know more about storybook, see this link.

Code Standarts

This project uses eslint and .editorconfig is defined to have indent_size of 4 spaces.

This project also uses Husky to prevent push messy and wrong code. Please, don't be stupid, fix all errors before push =D

Tasks

• npm run build: build component to external use.
• npm run publish: build and publish the component to npm.
• npm run storybook: launch storybook to develop your component.
• npm run build-storybook: build an static storybook to .out folder.
• npm run deploy-storybook: build and deploy a storybook with component to gh-pages.
• npm run test: run all specs.
• npm run test:tdd: run all specs and watch.
• npm run test:coverage: run all specs and coverage.
• npm run lint: lint all files searching for errors.
• npm run lint:fix: fix some lint errors.

License

MIT License @ Willian Justen