Advanced React Development

Course 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.

  • Who should attend

    Frontend developers.

  • Prerequisites

    • At least ½ year experience with React.
    • Good familiarity with JavaScript.
    • Good familiarity with the WEB world including HTTP, CSS and HTML.

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.
    • Memoization.
    • Intro to React fiber.

     

    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.

Want to improve your React skills?