React
Academy

Course outline

Advanced React

Once you know the basics of React, you are now ready to master the next level. We cover all the arcane topics, including: architectural patterns of React, custom hooks, render props, higher order components, performance optimization, shared context, lazy loading, data immutability, Redux, suspense loader, concurrent mode and much more.

We even have demos on how to deploy your app on a phone or tablet device.

Day 1

Mastering the platform
1. React Architecture Patterns New
  • Separation of concerns in Components
  • Higher-Order Components
  • Render props
  • Custom hooks
  • Reusing components
2. Context New
  • Property drilling
  • Why use a context?
  • Creating context using createContext()
  • Using providers and consumers
  • Updating Context
3. Working with State: Redux 
  • Intro to Flux and Redux
  • Storage
  • Actions
  • Reducers
  • Using Hooks with Redux
4. Working with Asynchronous calls using Redux 
  • Using Redux middleware
  • Using Redux-Thunk
  • Using the Redux dev tools
  • Using Fetch() with Redux
5. Redux Toolkit New
  • Simplify store creation with configurStore()
  • Genereate reducers and actions with slices
  • Write simpler immutable updates with normal mutative code with immer
  • Filter data with selectors

Day 2

Mastering the platform
6. Optimize React performance New
  • Using production build
  • Avoiding reconciliation
  • ShouldComponentUpdate()
  • Pure Components
  • Memoize components with memo()
7. Suspense New
  • Suspense, a loading component
  • Code splitting with Suspense
  • Data Fetching with Suspense
  • Render as you fetch pattern
8. Transitions New
  • Transitions using Suspense
  • Three steps of fetching
  • Pending → Skeleton → Complete
  • Differing a value
  • SuspenseList
9. Concurrent Mode New
  • Enabling concurrent mode
  • Concurrent Mode
  • Blocking Mode
  • Legacy Mode
10. Some additional technologies 
  • React Native demo: Build phone apps using React
  • React Ionic demo: Build phone apps using the DOM