educative.io

Advanced React Patterns With Hooks (Ohans Emmanuel)


Compound Components Pattern - Manageable Styling for Reusable Components Let’s style our expandable component in this lesson! Props Collection - The Props Collection Pattern in Practice Let’s apply the props collection pattern to our expandable component! Props Collection - What is the Props Collection Pattern? In this lesson, we’ll have a quick overview of the props collection pattern! Introduction - What to Expect Here’s a quick overview of what you’ll learn in this course! Compound Components Pattern - Handling State Change Callbacks In this lesson, we’ll learn how to use React hooks to handle state change callbacks. State Initializer - Getting Rid of Extra State Variables Let’s clean up the useExpanded.js file by removing extra state variables Introduction - Why Use Advanced Patterns?` Advanced patterns with hooks allow reusable React components to be incredibly flexible. Compound Components Pattern - Custom Use of the Component Not only have we made it beautiful, we’ve made it customizable as well. Control Props - What are Control Props? Here’s a quick overview of control props! Prop Getters - Additional User Props In this lesson, we’ll learn how users can pass additional props to prop getters! Compound Components Pattern - What are Compound Components? Compound components in React are components that are composed of two or more separate components. 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 Compound Components Pattern - Preventing Unnecessary Renders Let’s optimize our code! Compound Components Pattern - Keeping Value Constant Have questions about Keeping Value Constant? Go for it! Compound Components Pattern - Building the Compound Child Components Now, let’s work on the Expandable component’s child components and actually see some output! State Reducer - Cleanups You finally made it! We’re almost done. Let’s clean a few things up. Conclusion - Last Words Thank you for taking this course! Good luck in your future React endeavors! Prop Getters - What is the Prop Getters Pattern? Here’s a quick overview of the prop getters pattern! Compound Components Pattern - Custom Styling Options We’ll now learn how to override default styles! State Reducer - Updating Internal State Let’s see how a user could choose to dictate how internal state is updated. 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 Control Props - Using the Controlled Component In this lesson, we’ll learn how a user would use a controlled component from an app! State Reducer - What Is the State Reducer Pattern? Let’s get started with the reducer pattern! Control Props - Building a Custom Hook In this lesson, you’ll learn how to create a custom hook! 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, State Initializer - Resetting the State Have questions about Resetting the State? Go for it! State Initializer - What is the State Initialization Pattern? Here’s a quick introduction to patterns in React with state initialization! 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. 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. State Reducer - Implementing the State Reducer Pattern Let’s integrate the state reducer pattern into the scenario we studied earlier State Reducer - Refactoring to `useReducer` Let’s modify our custom hook to use <code>useReducer</code> instead of <code>useState</code>. State Reducer - The User’s Application In this lesson, we’ll look at how our custom hook can be used in an application
About the Advanced React Patterns With Hooks (Ohans Emmanuel) category [Advanced React Patterns With Hooks (Ohans Emmanuel)] (1)