Simple React/Redux/Router/Flow based Invoice SPA proof-of-concept. Loosely based on Seed Frontend Homework.

Demo: https://jfroom.github.io/poc-react-invoice

Blog post with a bit of commentary on the technologies.

• React
• Redux & React Router
• Styled Components
• Flow static type checking
• Testing with Jest and Enzyme
• Nuclide & Redux DevTools
• Docker with Compose
• Scaffolded with Create React App which leverages Babel and webpack
• ESLint with watch
• Yarn
• React-Bootstrap
• TravisCI integration with auto-deploy to GitHub Pages

1. Install Docker 17.03.0-ce+. This should also install Docker Compose 1.11.2+.
2. Verify versions: docker -v; docker-compose -v;

docker-compose build Builds images.

docker-compose up Starts web server.

open http://localhost:3000/ Loads default page into local browser.

docker-compose exec web yarn lint Run linter, stays open with watch.

docker-compose exec web yarn flow Run Flow type checker, stays open with watch. Flow much easier to work with inside of an IDE like Atom with Nuclide, or WebStorm.

docker-compose exec web yarn test Run test suite, stays open with watch.

docker-compose exec web yarn build Create production build of static files.

docker-compose exec web yarn serve-build Serve the build locally.

• Flow type cheat sheet
• Redux DevTools
• Three Rules For Structuring (Redux) Applications
• TodoMVC example using Redux, React, and Typescript
• Testing Redux Applications
• Host single page apps with GitHub Pages
• Testing React components with Jest and Enzyme

• Styled-Components v2 flow types WIP: styled-components/styled-components#843 - ignoring in .flowconfig