Frontend React Developer - Learn React Hooks for Frontend Development

0% completed

All LessonsFree 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

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

Frontend React Developer