Generator-react-webpack-scaffold NPM

#React Webpack Scaffold

Yeoman

A Yeoman generator that scaffolds React project with Webpack, Karma and more useful tools for you to write React application and unit tests.

##How to install

Step 1. Install Yeoman

$ npm install -g yo
$ npm install -g generator-react-webpack-scaffold

Step 2. Run yo react-webpack-scaffold in an empty project folder

$ cd your-empty-project-folder
$ yo react-webpack-scaffold

Demo

That's it! Now you have a fully functional React project.

##Features

The scaffolded project has the following features:

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

###1. 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 />;

###2. Localization

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.

###3. Webpack dev server When you run your project by npm start, webpack dev server watches the source files for changes and when changes are made the bundle will be recompiled.

###4. Sass loader You can define styles for individual React components using import. The good thing about importing styles is that you can define some base styles and import them for component-level styles.

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

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

You can setup passing thresholds for statements, branches, functions and lines.

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%
================================================================================

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

##What can you do in the scaffolded project

####1. Run the project Launch webpack dev server