Builds the project from source with a series of loaders and places into "bundles"
Takes JSX and ES6 code and adds the appropriate polyfills to deliver backwards compatible JavaScript.
The project uses jest for testing, and makes use of the "Snapshot" method outlined at https://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing
Tests for Redux actionCreators are along side the reducers and tested together under src/reducers/__tests__/
Sagas: Because the API based nature of the functions would rely on heavy mocking, without extensive work you'd just be testing the mocks, not the API.
| folder | contents |
|---|---|
./src |
JavaScript Source Files |
./src/components |
React Components |
./src/**/__tests__ |
Jest tests relative to their components |
./src/reducers |
The Redux Reducers |
./src/actions |
The Redux Actions |
./src/sagas |
The Redux Sagas (For Async functions) |
| npm run ... | |
|---|---|
| start | Run webpack-dev-server on http://localhost:8080 |
| start --devServerPort=4444 | Run dev server on custom port, eg 4444 |
| test | Run jest tests |
| test -- --watch | Run jest in watch mode |
| lint | Run local eslint against the code in src |
| lint-fix | Run local eslint with --fix to resolve any issues it can |
In src/index.html the minified version of spin.js is placed inline, and attached to the #app div.
This gives a loading state to the user, and when React attaches to the div is simply removed.
There is no styling added to any of the layouts by design, so that it's easiser to add your UI Library of choice. For a selection of libraries I've been looking at, see https://trello.com/b/o04kQcxE/?menu=filter&filter=label:🛠%20Tool,label:Web%20Design
This repo uses Green Keeper from https://greenkeeper.io to monitor the npm packages and automatically issue Pull Requests when there are updates available.
This repo is configured to be tested on Shippable CI from https://shippable.com to automatically test each commit.
ES6 alows for a lot of noise free code, and for me semi-colons just feel out of place.
If you don't agree, or Crockford's brainwashed you too deeply, then just update .eslintrc.js to change the "semi" rule from never to always and run npm run lint-fix to have eslint add them back automagically.
That applies to all the eslint rules, I try to be very strict in the rules I apply so you should add your own. If you add your own eslintrc file, don't forget to include the existing "env", "parserOptions" and "plugins" so the React and ES6 syntax works as expected.