Next-Level React | Working with React Hooks
This React course starts by introducing you to React Hooks. You will then get to grips with building a complex UI in React while keeping the code simple and extensible. Next, you will quickly move on to building your first applications with React Hooks. In the next few modules, the course delves into various Hooks, including the State and Effect Hooks. After covering State Hooks and understanding how to use them, you will focus on the capabilities of Effect Hooks for adding advanced functionality to React apps. You will later explore the Suspense and Context APIs and how they can be used with Hooks. Toward the concluding modules, you will learn how to integrate Redux and MobX with React Hooks. Finally, the course will help you develop the skill of migrating your existing React class components, and Redux and MobX web applications to Hooks.
Course Objectives
Working in a hands-on learning environment, guided by our expert team, attendees will learn about and explore:
- Understand the fundamentals of React Hooks and how they modernize state management in React apps
- Build your own custom Hooks and learn how to test them
- Use community Hooks for implementing responsive design and more
- Learn the limitations of Hooks and what you should and shouldn’t use them for
- Get to grips with implementing React context using Hooks
- Refactor your React-based web application, replacing existing React class components with Hooks
- Use state management solutions such as Redux and MobX with React Hooks
Course Prerequisites
In order to be successful in this class, incoming attendees are required to have current, hands-on experience with React. This is not a beginner-level course.
Take Before: Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:
- Mastering React (5 days) or React JumpStart (3 days)
Course Agenda
Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We will work with you to tune this course and level of coverage to target the skills you need most.
- Introducing React and React Hooks
- Technical requirements
- Principles of React
- Motivation for using React Hooks
- Getting started with React Hooks
- Overview of various Hooks
- Using the State Hook
- Technical requirements
- Reimplementing the useState function
- Problems with our simple Hook implementation
- Comparing our reimplementation with real Hooks
- Solving common problems with Hooks
- Solving problems with conditional Hooks
- Writing Your First Application with React Hooks
- Technical requirements
- Implementing static components
- Implementing stateful components with Hooks
Section 2: Understanding Hooks in Depth
- Using the Reducer and Effect Hooks
- Technical requirements
- Reducer Hooks versus State Hooks
- Using Effect Hooks
- Implementing React Context
- Technical requirements
- Introducing React context
- Implementing themes
- Using context for global state
- Implementing Requests and React Suspense
- Technical requirements
- Preventing unnecessary re-rendering with React.memo
- Implementing lazy loading with React Suspense
- Using Hooks for Routing
- Technical requirements
- Creating multiple pages
- Implementing routing
- Using routing Hooks
- Using Community Hooks
- Technical requirements
- Exploring the input handling Hook
- React life cycles with Hooks
- Various useful Hooks
- Responsive design with Hooks
- Undo/Redo with Hooks
- Finding other Hooks
- Rules of Hooks
- Technical requirements
- Calling Hooks
- Order of Hooks
- Names of Hooks
- Enforcing the rules of Hooks
- Dealing with useEffect dependencies
- Building Your Own Hooks
- Technical requirements
- Extracting custom Hooks
- Using our custom Hooks
- Interactions between Hooks
- Testing Hooks
- Exploring the React Hooks API
Section 3: Integration and Migration
- Migrating from React Class Components
- Technical requirements
- Handling state with class components
- Migrating from React class components
- Trade-offs of class components
- Redux and Hooks
- Technical requirements
- What is Redux?
- Handling state with Redux
- Using Redux with Hooks
- Migrating a Redux application
- Trade-offs of Redux
- MobX and Hooks
- Technical requirements
- What is MobX?
- Handling state with MobX
- Migrating a MobX application
- The trade-offs of MobX
Sorry! It looks like we haven’t updated our dates for the class you selected yet. There’s a quick way to find out. Contact us at 502.265.3057 or email info@training4it.com
Request a Date