react-redux-workshop
Motivation
This is a simple application to manage our product library allowing users to check out and check in books. Learn React and Redux by coding along as we add functionality. The goal is to fully setup your dev environment with React related tooling and familiarize yourself with how data flows through the application.
Accompanying slides & background - https://docs.google.com/presentation/d/1EqyvDZCd9dfrkhUk5D5mq1bPyx2eWXnxi2hBdpGjXAs/edit?usp=sharing
Installation
Prerequisites: Node 8.x
- Clone the project
git clone git@github.com:boweihan/react-redux-workshop.git
- Install dependencies
npm install
- Run the json api server
npm run server
- Run the Webpack dev server
npm start
Development Tools
React and Redux devtools are useful for development. These particular links are for the Chrome extensions but they are available in any popular browser and as a standalone application.
React Developer Tools - https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Redux Devtools - https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
Project Structure
Components - src/components
Action Creators - src/actions
Reducers - src/reducers
DB file - server/db.json
Workshop Structure
- React/Redux overview
- Project overview
- Checkout functionality code-along exercise
- Checkin functionality pair programming exercise
Bonus Challenges
- Display user names for checked out books
- Add checkout time information and due dates
- Implement validation so that a user can only check out one book at a time
- Implement loading UI for asynchronous requests
- Fully normalize the redux store
- Implement middleware that catches errors in the redux flow and log. Implement middleware that catches errors in the redux flow and logs them to console
Notes
This project was bootstrapped with create-react-app.