Skip to content

Simple boilerplate with React, Redux and webpack with React Hot Loader

Notifications You must be signed in to change notification settings

emartini/redux-react-webpack-boilerplate

Repository files navigation

redux-react-webpack-boilerplate

Includes:

Code conventions

Components

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.

Testing

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

Example

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');
  });
});

Routes

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

Async routes load

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}
  />
);

Commands

Install dependencies

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

yarn install

Start Webpack development server

yarn start

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

Check for syntax problems

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]

Run Tests

yarn test[:watch]

Production build

yarn build:production

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

About

Simple boilerplate with React, Redux and webpack with React Hot Loader

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published