Log In
0% completed
All Lessons
Free Lessons (3)
Prologue
Welcome to the Course
Course Overview
History of User Interface (UI)
Introducing the Function Component
Building an App with Components
Introducing the Function Component
Writing a Function Component
Quiz: Introducing the Function Components
Challenge: Multi-Stage Navbar
Solution: Multi-Stage Navbar
Summary
Crafting States in Functions
Crafting a State in a Function Component
Making a Value Persistent
Supporting Multiple States
Listening to a Value Change
Performing a Task at the Mount
Applying States to Single-Page Application (SPA)
Quiz: Crafting States in Functions
Challenge: Handling Multiple States Dynamically
Solution: Handling Multiple States Dynamically
Summary
Hooking into React
Creating a Good State Solution
Updating a Hook at the Mount
What Is a Hook?
Conditional Hook Issue
Avoiding Conditional Hooks
Quiz: Hooking into React
Challenge: Dynamic Navigation Menu Search Bar
Solution: Dynamic Navigation Menu Search Bar
Summary
Use State to Jumpstart Components
The useState Hook Design
A Guide to the useState Hook
Dispatching States
The useState Hook Flow in React
The useState Hook Examples
Quiz: Use Start to Jumpstart Component
Challenge: Quiz App
Solution: Quiz App
Summary
Use Effect to Handle Side Effects
What Is a Side Effect?
Understanding useEffect Hook Design
Creating Effects
Test Driving the useEffect Hook
The useEffect Hook Examples
Quiz: Use Effects to Handle Side Effects
Challenge: Todo App
Solution: Todo App
Summary
Use Memo to Boost Performance
Performance Degradation
Understanding the useMemo Design
Reusing a Last Assignment
Testing and Examples of the useMemo Hook
Debouncing the Search
Quiz: Use Memo to Boost Performance
Challenge: Task Management App
Solution: Task Management App
Summary
Use Context to Cover an Area
What Is an Area Update?
Introducing the React Context
Understanding the useContext Design
Testing the useContext Hook
Theme Mode Selection Example
Table Context Example
Quiz: Use Context to Cover an Area
Challenge: Shopping Cart
Solution: Shopping Cart
Summary
Use Ref to Hide Stuff
Accessing DOM Elements
Understanding the useRef Hook Design
Testing the useRef Hook
Global Event Handling and Interactive UI
Avoiding Memory Leaks
Balancing Global Information and Synchronization
Locating the Current Value Example
Quiz: Use Ref to Hide Stuff
Challenge: Feedback Form
Solution: Feedback Form
Summary
Use Custom Hooks to Reuse Logic
Reviewing React hooks
State Toggling in React Using the useToggle Hook
Harnessing Window Properties and Events Using the useWindow Hook
Managing Async States Using the useAsync Hook
Debouncing for Improved Performance Using the useDebounced Hook
Improving User Interactivity Using the useClickOutside Hooks
Efficiently Managing Current Values Using the useCurrent Hook
Handling State Proxies Using the useProxy Hook
Quiz: Use Custom Hooks to Reuse Logic
Challenge: Color Palette Generator
Solution: Color Palette Generator
Summary
Conclusion
Wrap Up
Appendix: Exploring JavaScript and React
Exploring Functions of React
Utilizing JavaScript ES6
Features of ES6 JavaScript
Adopting CSS-in-JS Approach
Going from HTML to JSX
Dynamic Element Types
Summary
Learn React Hooks for Frontend Development
/
...
/
Quiz: Use Memo to Boost Performance
Quiz: Use Memo to Boost Performance
Test your understanding of the useMemo hook in React.
We'll cover the following...
...