Advanced React Development
3 days
Overview
Developing a single or a number of components using React is easy. However, as the application grows, it becomes crucial to understand the mechanism beyond React and be able to profile it and hook into it. During this 3 day-intensive course, we deep-dive into React implementation details and cover architecture details and alternatives. At the end of the course, you will be able to describe best practices, profile existing applications and optimize different aspects of the application.
Prerequisites
- At least ½ year experience with React
- Good familiarity with JavaScript
- Good familiarity with the WEB world including HTTP, CSS and HTML
Audience
Front-end developers.
Course Content
Reconciliation
in Depth
- What & When
- The challenge
- React heuristics
- React diffing algorithm explained
- keys
- Dos & Don’ts
- Component Lifecycle
- Lifecycle hooks
- Pure Components
- Memorization
- Intro to React fibre
Advanced Component
Architectures
- Composition vs. Mixin
- Dealing with forms
- Uncontrolled components
- Lifting state up
- Externalizing state
- Refs and DOM Stateless components
- Components vs Containers
- Higher-order components
- Render Props
- Context API
- Portals
- Dealing with deeply nested components
- Using custom hooks
Advanced
Redux
- Async flows
- redux-thunk
- redux-saga
- Selectors
- Reducers are pure functions
- Using Immer
- Custom Middleware
- Connect is pure
- Normalization
- Using hooks
- Redux alternatives
Profiling
& Optimizing
- Impact of bad keys
- Impact of heavy renders
- Impact of unneeded renders
- Using Chrome dev tools
- Analyze memory leaks
- Analyze CPU usage
- Analyze rendering
- Why did it render
- React.Profiler
- Integrate the application with User Timing API
More
Advanced Topics
- Virtualization
- Lazy loading
- Server-side rendering
- CSS modules & Styled components
- Atomic design
- Babel Code macros
- Integrating with web components
