React Beyond a Todo App
Alex Moldovan
Full Stack Developer @ Fortech
medium.com/@alexnm
@alexnmoldovan
github.com/alexnm/react-workshop
React
Model
View
Controller
UI State
Application State
Business Logic
Event Handling
COMPONENTS
FLUX
Flux
Action
Dispatcher
Store
View
Event
Emitter
State
Presentation
Redux
View
Action
Store
Reducer
Let's look at some code!
Tooling
Tasks
Project Structure
Component Best Practices
Ducks
Redux Middlewares
M1
M2
M3
dispatch( action )
( store ) => ( next ) => ( action ) => ...
prev state
prev state
prev state
next( action )
next( action )
dispatch*
next state
next state
next state
Routing
Server Side Rendering
Browser
Server
API
request
fetch
match route
create store
render dom to string
serialize state
HTML
data
json state
deserialize state
initialize react
(client.js)
(server.js)
check prerequisites
create store
Forms
Authentication
Notifications
Side Effects
Let's code!
Part 1 - Product Details
git checkout initial
- create route with product id as param
- implement duck & product page
- link product page from product list
- set meta tags for details page
- implement server side render with prefetch for the details page
Part 2 - Shopping Cart
git checkout intermediate
- create route for cart (auth users only)
- add to cart button on product detail
- implement cart page (with ability to remove item)
- add a notification when an item is added and/or removed
- move cookie token read logic to server side render
- create a custom middleware for storing the cart in the localStorage