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.
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
Getting Started
Required
- Install Docker 17.03.0-ce+. This should also install Docker Compose 1.11.2+.
- Verify versions:
docker -v; docker-compose -v;
First run
docker-compose build
Builds images.
Usage
Development
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.
Test
docker-compose exec web yarn test
Run test suite, stays open with watch.
Build
docker-compose exec web yarn build
Create production build of static files.
docker-compose exec web yarn serve-build
Serve the build locally.
Additional References
- 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
TODO
- Styled-Components v2 flow types WIP: styled-components/styled-components#843 - ignoring in
.flowconfig