Talk
Patterns For React Application Design
Exploring component architecture, state management, and advanced patterns for building React applications.
A deep dive into patterns and practices for building React applications, presented at the LeedsJS meetup.
React Fundamentals
- Declarative UI as state representation
- Component composition approach
- JSX syntax and underlying function structures
- ES6 class components vs. functional stateless components
Component Architecture
- Separation of concerns: state-aware vs. DOM-focused components
- Higher-order components pattern
- Eliminating hidden state
- Low cyclomatic complexity in render functions
State Management
- Starting simple with stateful components
- Observable streams
- Redux patterns
- Async setState considerations
- Redux-Saga for side effects
Advanced Patterns
- Functional composition
- CSS-in-JS solutions (Aphrodite, Glamour, Styled-Components, Styled-JSX)
- Component extraction and design language
Testing & Quality
- Pure function testing benefits
- Snapshot testing
- Fixture-based testing
Future Technologies
At the time, we discussed React Fiber architecture, Preact and Inferno alternatives, tree shaking, and the emerging Next.js framework.