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, reducer pattern, Redux, suspense loader, Next.js, Remix, security and much more.

We even use advanced components, like charts and maps.

Day 1

Mastering the platform
1. Context 
  • Property drilling
  • Why use a context?
  • Creating context using createContext()
  • Using providers
  • Consuming context with hooks
  • Updating Context
2. React Architecture Patterns 
  • Separation of concerns in Components
  • Higher-Order Components
  • Render props
  • Custom hooks
  • Reusing components
3. Reducer Pattern New
  • Replacing state with reducers
  • Pillars: Storage, Dispatch, Reducer
  • Action helpers
  • Calling useReducer()
4. Redux Toolkit 
  • Create a redux Store with configureStore()
  • Generate reducers and actions with slices
  • Write mutative code with "immer"
  • Filter data with selectors
5. Fetching Data with Redux RTK Query New
  • Configure middleware for caching, invalidation, and polling
  • Create an API Slice with endpoints
  • Calling the useQuery Hook
  • Adding a baseQuery function

Day 2

Mastering the platform
6. Optimize React performance New
  • Using production build
  • Avoiding re-renders
  • Memoizing components with the memo() Higher Order Component
  • useCallback() to make it work properly with memoized callbacks
  • useMemo() to memoize results instead of callbacks
7. Error Boundaries and Suspense 
  • Managing Errors using ErrorBoundaries
  • Using Suspense for Lazy Loading
  • Using Suspense for Data Fetching
8. Logins and Authentication New
  • Basic authentication in React
  • Implementing a login form and a logout button
  • Storing and managing user credentials
  • Protecting routes and components
  • JSON Web Tokens (JWT)
  • Understanding and preventing common security vulnerabilities
9. Comparing React Frameworks New
  • _Create-React-App_ for basic apps
  • _Vite_ for quick development loops
  • _Gatsby_ for Static Site Generation
  • _Next.js_ for server-side rendering
  • _Astro_ for server-side rendering without client-side JS.
  • _Remix_ for data fetching and layout via routing
  • _Preact_ for lightweight React
10. Advanced UI 
  • Animating transitions using React-Spring
  • Charts using Chart.js
  • Adding maps using Leaflet and ESRI