Enliven UX with React/Redux
summary
Workshop builds a working chat app using React/Redux with sockets and a REST endpoint, implements optimistic UI for immediate message feedback, and wires middleware to emit/listen socket events. Styling uses styled-components with theming; tooling shows webpack stats and bundle analysis. Performance work uses Chrome DevTools and React DevTools: removing a needless loop plus switching to shallow comparisons (shouldComponentUpdate / PureComponent / connect mapState) drops a ~1s render stall to ~50ms. Code branches and demo branches are provided and the app runs.
AI-written summary · about
chapters (12)
- 0:00Workshop introduction
- 3:04Setup and tooling
- 7:12Webpack and boilerplate
- 14:05Styled components basics
- 23:21Styled components workshop
- 37:49Theming and reusability
- 49:50JavaScript quiz
- 55:30Optimistic UX introduction
- 1:09:07Implementing middleware
- 1:36:31Error handling and summary
- 1:52:38Quiz and competition
- 2:00:16React performance tuning
related talks
53mBuilding Web Apps with React.js
43mReact/Redux: a development workflow
35mGoing fullstack React(ive)
28mWriting better multi-process hybrid apps with React and Redux
58mCrafting compelling real-time web experiences with GraphQL and React
05mQ&A with Aurora Scharff
01h 04mWhat makes React different?
20mEnhancing Forms with React Server Components