This boilerplate helps you quickly setup React project, it includes the following features:

• React (ES6 with Babel)
• React Intl (v2.0.x)
• Webpack and Webpack dev server
• Sass loader
• Karma + Mocha + Chai
• Coverage report isparta
• Unit test with Enzyme and Sinon

This project is based on react-es6-webpack-karma-boilerplate.

##React

The following features are supported:

Functional Component

const App = () => (
    <div className='main-app'>
        <h1>Hello, World!</h1>
    </div>
);

Class Component

class App extends Component {
    render() {
        return (
            <div className='main-app'>
                <h1>Hello, World!</h1>
            </div>
        );
    }
}

Class Properties

class Menu extends Component {
    static propTypes = {
        className: PropTypes.string,
    };
    ...
}

Export Default

export default App;

Import .scss in Component

import './styles.scss';
const App = () => <div />;

We use Yahoo's React Intl (v2.0) library to support localization.

1. To support a new locale, e.g. ja-JP, copy i18n/en-US.properties to i18n/ja-JP.properties, translate the locale messages.

2. Specify a LOCALE env var in npm start to debug for a specific locale:

$ LOCALE=en-US npm start

You can also build the bundle.js for a specific locale:

$ LOCALE=en-US npm run build

This will output the English bundle.js in dist/en-US folder. Note, if you don't specify LOCALE, default is en-US.

3. To build bundle.js for all languages:

$ npm run release

This will output each supported language bundle.js along with the style sheets in dist/{locale} folder.

Assert & Expect

import { assert, expect } from 'chai';
...

Enzyme

import { shallow } from 'enzyme';
describe('Testing', () => {
    it('should render the App', () => {
        const wrapper = shallow(<App />);
        ...
    });
});

Sinon

const sandbox = sinon.sandbox.create();
describe('Testing', () => {
    afterEach(() => sandbox.verifyAndRestore());
    it('should call the callback', () => {
        const callback = sandbox.stub();
        ...
    });
});

Code coverage report is geneated by istanbul. npm run coveralls will submit the coverage report to coveralls.io.

Example:

==================== Coverage / Threshold summary =============================
Statements   : 100% ( 46/46 ) Threshold : 90%, 4 ignored
Branches     : 100% ( 31/31 ) Threshold : 90%, 13 ignored
Functions    : 100% ( 10/10 ) Threshold : 90%
Lines        : 100% (  6/6  ) Threshold : 90%
================================================================================

HTML and lcov reports can be found in the coverage folder.

Download or clone the package, then

$ npm install
$ npm start

navigate to http://localhost:5000 in your browser.

$ LOCALE=en-US npm start

ESLint with React linting options have been enabled.

$ npm run lint

Start Karma test runner.

$ npm run test

Build files for production

$ npm run build

$ LOCALE=en-US npm run build

$ npm run release

Remove dist and coverage folders

$ npm run clean