This course teaches you to build a reusable and declarative React component library. It’s perfect for developers who are looking to build a scalable design system for their team and product.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
React Rendering and Props
Understand "Controlled" Components
Character Counter Implementation
State Management Variations
useState Hook Usage
useRef Hook Application
Refs Forwarding Technique
Understanding React Reducers
useReducer Hook Introduction
Custom Hooks Development
Context API for State Sharing
Compound Component Design
01. Introduction - Reusable React Fundamentals
- Course Introduction
- Rendering and Props
- Frontend Career Path
- Custom Events and Props
- Fundamentals Exercise: Badge Component
02. Controlled Components and Refs
- Building an Interactive Form
- What Does “Controlled” Mean?
- Character Counter Input
- State in Class vs Function Components
- Implementing useState
- The useRef Hook
- Updating Refs with Side Effects
- Forwarding Refs
- Toggleable Form
03. Reducers
- Why Are Reducers a Part of React?
- How Reducers Work
- Reducers Exercise 1: Expanding Our Reducer Function
- The useReducer Hook
- useReducer vs useState
- Custom Hooks
- Reducers Exercise 2: Character Sheet Application
- A Promise-Based State Machine
04. Compound Components
- A Single Data-Entry Point Component
- Reordering Elements
- Adding a Disabled Property
- Too Many Props!
- What Is a Compound Component?
- Replacing Props with Compound Components
- Sharing State with the Context API
- Adding More Context
- A Date Picker Compound Component
- Course Conclusion
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
React Rendering and Props
Understand "Controlled" Components
Character Counter Implementation
State Management Variations
useState Hook Usage
useRef Hook Application
Refs Forwarding Technique
Understanding React Reducers
useReducer Hook Introduction
Custom Hooks Development
Context API for State Sharing
Compound Component Design
COURSE OUTLINE
01. Introduction - Reusable React Fundamentals
- Course Introduction
- Rendering and Props
- Frontend Career Path
- Custom Events and Props
- Fundamentals Exercise: Badge Component
02. Controlled Components and Refs
- Building an Interactive Form
- What Does “Controlled” Mean?
- Character Counter Input
- State in Class vs Function Components
- Implementing useState
- The useRef Hook
- Updating Refs with Side Effects
- Forwarding Refs
- Toggleable Form
03. Reducers
- Why Are Reducers a Part of React?
- How Reducers Work
- Reducers Exercise 1: Expanding Our Reducer Function
- The useReducer Hook
- useReducer vs useState
- Custom Hooks
- Reducers Exercise 2: Character Sheet Application
- A Promise-Based State Machine
04. Compound Components
- A Single Data-Entry Point Component
- Reordering Elements
- Adding a Disabled Property
- Too Many Props!
- What Is a Compound Component?
- Replacing Props with Compound Components
- Sharing State with the Context API
- Adding More Context
- A Date Picker Compound Component
- Course Conclusion
