Next-Level React | Working with React 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

Need different skills or topics?  If your team requires different topics or tools, additional skills or custom approach, this course may be further adjusted to accommodate.  We offer additional React, web development and design courses which may be blended with this course for a track that best suits your development objectives.

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)

Please see the Related Courses tab for specific Pre-Requisite courses, Related Courses that offer similar skills or topics, and next-step Follow-On Courses and Learning Path recommendations.

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.

1. Introducing React and React Hooks

• Technical requirements
• Principles of React
• Motivation for using React Hooks
• Getting started with React Hooks
• Overview of various Hooks

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

3. Writing Your First Application with React Hooks

• Technical requirements
• Implementing static components
• Implementing stateful components with Hooks

Section 2: Understanding Hooks in Depth

4. Using the Reducer and Effect Hooks

• Technical requirements
• Reducer Hooks versus State Hooks
• Using Effect Hooks

5. Implementing React Context

• Technical requirements
• Introducing React context
• Implementing themes
• Using context for global state

6. Implementing Requests and React Suspense

• Technical requirements
• Preventing unnecessary re-rendering with React.memo
• Implementing lazy loading with React Suspense

7. Using Hooks for Routing

• Technical requirements
• Creating multiple pages
• Implementing routing
• Using routing Hooks

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

9. Rules of Hooks

• Technical requirements
• Calling Hooks
• Order of Hooks
• Names of Hooks
• Enforcing the rules of Hooks
• Dealing with useEffect dependencies

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

11. Migrating from React Class Components

• Technical requirements
• Handling state with class components
• Migrating from React class components
• Trade-offs of class components

12. Redux and Hooks

• Technical requirements
• What is Redux?
• Handling state with Redux
• Using Redux with Hooks
• Migrating a Redux application
• Trade-offs of Redux

13. MobX and Hooks

• Technical requirements
• What is MobX?
• Handling state with MobX
• Migrating a MobX application
• The trade-offs of MobX

Course Materials

Student Materials: Each participant will receive a Student Guide with course notes, code samples, software tutorials, step-by-step written lab instructions, diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work. Any courseware of lab materials provided in a cloud (if applicable) will also be made available to you separately.

Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. We can also help you install this course locally if preferred. Please inquire for details and options.

Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Post-Course Resource Site access with Review Labs & Live Instructor Follow-on Support, access to QuickSkills recorded High-Value lessons, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.