educative.io

Advanced React Patterns With Hooks (Ohans Emmanuel)


Introduction - What to Expect Here's a quick overview of what you'll learn in this course! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6643362931146752). Props Collection - The Props Collection Pattern in Practice Let's apply the props collection pattern to our expandable component! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5545369620447232). Props Collection - What is the Props Collection Pattern? In this lesson, we'll have a quick overview of the props collection pattern! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6182698978639872). State Initializer - Getting Rid of Extra State Variables Let's clean up the useExpanded.js file by removing extra state variables View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5706427437940736). Compound Components Pattern - Handling State Change Callbacks In this lesson, we'll learn how to use React hooks to handle state change callbacks. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6034278049644544). Introduction - Why Use Advanced Patterns?` Advanced patterns with hooks allow reusable React components to be incredibly flexible. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5271447712825344). Control Props - What are Control Props? Here's a quick overview of control props! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5230623633440768). Prop Getters - Additional User Props In this lesson, we'll learn how users can pass additional props to prop getters! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/4718436045291520). Compound Components Pattern - Custom Use of the Component Not only have we made it beautiful, we’ve made it customizable as well. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5450191232565248). Compound Components Pattern - What are Compound Components? Compound components in React are components that are composed of two or more separate components. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5295437521092608). Compound Components Pattern - Example: Building an Expandable Component In this lesson, we will set up an expandable component that is based on the compound component pattern View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5574023192772608). Compound Components Pattern - Preventing Unnecessary Renders Let's optimize our code! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/4571821498171392). Compound Components Pattern - Keeping Value Constant Have questions about Keeping Value Constant? Go for it! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5269835523031040). Compound Components Pattern - Building the Compound Child Components Now, let’s work on the Expandable component's child components and actually see some output! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/4672583309983744). State Reducer - Updating Internal State Let's see how a user could choose to dictate how internal state is updated. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5584498148245504). State Reducer - Cleanups You finally made it! We're almost done. Let's clean a few things up. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6638413597900800). Prop Getters - What is the Prop Getters Pattern? Here's a quick overview of the prop getters pattern! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6736755195641856). Conclusion - Last Words Thank you for taking this course! Good luck in your future React endeavors! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6290255495823360). Control Props - Using the Controlled Component In this lesson, we'll learn how a user would use a controlled component from an app! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5540025427034112). Compound Components Pattern - Custom Styling Options We'll now learn how to override default styles! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5195905143668736). Control Props - How Control Props Work In this lesson, we'll make the Expandable component work so that the elements expand one at a time View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6385072053682176). State Initializer - Resetting the State Have questions about Resetting the State? Go for it! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6138080677330944). Control Props - Providing Default UI Elements We'll now make our open source library more user-friendly and convenient by allowing export of default UI elements, View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/4902217414868992). Control Props - Building a Custom Hook In this lesson, you'll learn how to create a custom hook! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5994061464862720). State Reducer - What Is the State Reducer Pattern? Let's get started with the reducer pattern! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6506202290716672). Prop Getters - Handling Props with the Same Property Name In this lesson, we'll see how two prop properties with the same name can be invoked at once. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5994657794228224). Conclusion - Where to Go from Here? Want to learn more about web development and React? I have a few other courses already on Educative! Have a look. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5865407598559232). State Initializer - What is the State Initialization Pattern? Here's a quick introduction to patterns in React with state initialization! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6423459947085824). State Reducer - The User’s Application In this lesson, we'll look at how our custom hook can be used in an application View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5467377275764736). State Reducer - Implementing the State Reducer Pattern Let’s integrate the state reducer pattern into the scenario we studied earlier View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5700531844546560). State Reducer - Refactoring to `useReducer` Let’s modify our custom hook to use `useReducer` instead of `useState`. View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/6048068933779456). Compound Components Pattern - Manageable Styling for Reusable Components Let's style our expandable component in this lesson! View the lesson [here](https://www.educative.io/collection/page/10370001/4597752283529216/5662700174573568).
About the Advanced React Patterns With Hooks (Ohans Emmanuel) category [Advanced React Patterns With Hooks (Ohans Emmanuel)] (1)