React favs

Watch User Created Playlist (5)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Make Enhanced React Components with Higher Order Components

P

Write Compound Components

P

Handle prop namespace clashes with Higher Order Components

P

Improve debuggability of Higher Order Components

P

Use Render Props with React

P
react tutorial about Make Enhanced React Components with Higher Order Components

Make Enhanced React Components with Higher Order Components

3:22 react PRO

The state shared between our toggle components is implicit because it lives inside context and is not easily accessible. In this lesson, we'll make a Higher Order Component (HOC) factory function which will allow the user to access that implicit state in their own components. Higher Order Components take a component and render a new component with some enhanced behaviors, in this case, the toggle context is added to the returned component. This factory component can get rid of duplicated code caused by needing to declare contextTypes on each component that needs it. Now we can wrap the component with withToggle and destructure on and toggle from the props.

react tutorial about Write Compound Components

Write Compound Components

4:06 react PRO

Compound component gives more rendering control to the user. The functionality of the component stays intact while how it looks and the order of the children can be changed at will. We get this functionality by using the special React.Children.map function to map over the children given to our <Toggle/> component. We map over the children to pass the on state as a prop to its children. We move the visual pieces of the component out into function components and add them as static properties to <Toggle/>.

react tutorial about Handle prop namespace clashes with Higher Order Components

Handle prop namespace clashes with Higher Order Components

3:47 react PRO

One problem Higher Order Components face is they share the props namespace with the other props the user wants to pass to that component. In this lesson, we’ll take a look at how we can resolve these naming conflicts.

react tutorial about Improve debuggability of Higher Order Components

Improve debuggability of Higher Order Components

4:43 react PRO

React DevTools and React's built-in development warnings rely on the displayName and name property of your react components to give you a good developer experience. Unfortunately, Higher Order Components make it harder for React to give that good experience. In this lesson, we’ll learn about the displayName property and how that impacts React Developer Tools. Then we'll improve the displayName for our Higher Order Component by changing where we call the withToggle Higher Order Component.

react tutorial about Use Render Props with React

Use Render Props with React

3:26 react PRO

In this lesson, we'll take a step back and re-examine the problem of sharing Component logic by iterating our way to arrive at a new pattern called render props. A render prop is a function that renders JSX based on state and helper arguments. This pattern is the most flexible way to share component logic while giving complete UI flexibility. It's a remarkably simple and powerful pattern.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?