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.