ES6 React Ant Design boilerplate using Webpack

Just and example of ant-design working in React 16:

Starting the dev server

Make sure you have the latest Stable or LTS version of Node.js installed.

1. git clone https://github.com/espinacs/ant-design-boilerplate
2. Run npm install or yarn install
3. Start the dev server using npm start
4. Open http://localhost:8080

Available Commands

• npm start - start the dev server
• npm clean - delete the dist folder
• npm run production - create a production ready build in dist folder
• npm run lint - execute an eslint check
• npm test - run all tests
• npm run test:watch - run all tests in watch mode
• npm run coverage - generate code coverage report in the coverage folder

Also, precommit and prepush are both enabled to check all the code is linted and tested.

About the architecture

Although this application is really simple (just fetch data, list and filter it) it has a pretty complete architecture, as detailed:

REACT - View Rendering

React is just the way to display the stored info. Mainly, there's a Main container that dispatches both fetch and filtering events, and at the same times renders the SearchBar (self component) and the Ant Desing Table

REDUX-SAGA - Fetching Data

Redux-Saga is the agent dedicated to fetch data from the server, and dispatches the convenient Redux events with fetched data or errors.

This is only a layer that could be changed, for example, by an Apollo GraphQL interface.

REDUX - State Management

Redux stores part of the state of the application (a part from the one that each component/containers handles for itself).

RESELECT - Serving Data

Components are not subscribed directly to the Redux state. Instead, they only get data from the Redux state through Reselect selectors.

This way, components/containers and redux are absolutely decoupled, and any other State Manager (Flux, for example) could be used, like any other components library (Vue.js, for example)

Ant Design - Stlyed Components Library

Ant Design Gives to the project a small style boost!

Code Coverage

The project is using the Jest Code Coverage tool. The reports are generated by running npm run coverage. All configurations are located in package.json, inside the jest object.

The coverage report consists of an HTML reporter, which can be viewed in the browser and some helper coverage files like the coverage json and xml file.

Production code

Run npm run production. The production-ready code will be located under dist folder.

Licence

ant-design-boilerplate is available under MIT.