Includes:

• Yarn as package manager
• ES2015 and JSX support throught Babel.
• React 15.3
• Redux 3.6
• Routes: React Router 3.0
• Webpack 2 beta (with Tree shaking support)
• Webpack-dev-server 2 supporting React Hot Loader
• JS linter: ESLint, extending the [airbnb Javascript and React style guide] (https://github.com/airbnb/javascript)
• PostCSS supporting CSS Modules and cssnext
• CSS linter: stylelint
• Testing environment:
  • Mocha as test framework and Chai as TDD assertion library
  • Enzyme extended by Chai Enzyme to test React Components
  • Karma as Test Runner, using Chrome by default

Following the convention proposed by the React Boilerplate, where the directory structure is divided as presentational and containers components,. There is a components directory which stores the presentational ones, whereas the containers the containers. If a container includes Redux actions or reducers, they should be stored into the actions.js and reducers.js respectively, constants.js could be added too, usually to export the action names. All components can define a stylesheet in a file called styles.css in order to maximize the isolation between components styles, those styles are CSS Modules.

Tests should be kept in each component directory and are suffixed by .test.js.

app
├── components
│    └── HelloWorld
│       ├── tests
│       │   └── index.test.js
│       ├── index.js
│       └── styles.css
└── containers
    └── App
        ├── tests
        │   └── index.js
        ├── index.js
        ├── actions.js
        ├── reducers.js
        └── constants.js

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';

import HelloWorld from '../index';

describe('<HelloWorld />', () => {
  it('renders a <div> tag', () => {
    const renderedComponent = shallow(<HelloWorld />);
    expect(renderedComponent.type()).to.equal('div');
  });
});

Following the convention introduced by the react-boilerplate, routes should be declared in the app/routes.js file.

Using Webpack code splitting feature is possible to load each route modules asynchronously. Using the getComponent React Route property together with ES6/Webpack System.import will enable the async load of each route as a webpack chunk.

For convenience routes are declared as objects and then passed as arguments to the Router.

// Child routes:
const routes = [
  {
    path: '/',
    getComponent(nextState, cb) {
      System.import('./containers/Home')
        .then(loadModule(cb));
    },
    onChange: scrollTop
  }
];

const rootRoute = {
  component: App,
  childRoutes: routes
};

const Root = () => (
  <Router
    ...
    routes={rootRoute}
  />
);

In order to use Yarn, you should follow the official installation guide, then you can easily install all the dependencies.

yarn install

yarn start

It will start a development server accessible from localhost:9010.

CSS and JS:

yarn validate[:styles|:js]

Webpack, some webpack 2 new rules are marked as invalid, like rules and modules. It should be fixed in future versions.

yarn run validate:webpack:[dev|prod]

yarn test[:watch]

yarn build:production

Output files will be placed in ./dist and old files will be deleted after complete the process.