sdtm1016 / react-webpack-boilerplate

React Webpack Boilerplate

React Webpack Boilerplate

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

• React
• Webpack and Webpack dev server
• ES6 with Babel
• Sass loader
• Karma + Mocha
• Coverage report isparta
• 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 />;

##Test##

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();
        ...
    });
});

##Coverage Report

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.

How to use this package

Download or clone the package, then

npm install
npm start

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

Linting

ESLint with React linting options have been enabled.

npm run lint

Testing

Start Karma test runner.

npm run test

Building

Build files for production

npm run build

Clean

Remove dist and coverage folders

npm run clean