From the course: React: Components, Context, and Accessibility
Unlock the full course today
Join today to access over 24,800 courses taught by industry experts.
Working with render props - React.js Tutorial
From the course: React: Components, Context, and Accessibility
Working with render props
- [Narrator] A popular technique when rendering React components is to use a pattern called render props. Now we got a little sneak preview of this when we were looking at the context API. A render prop is a way to share code between React components using a function property. The property defines what is rendered and the component just injects it into the UI. Now if that sounds a little weird, that's totally OK. Let's take a look at it to understand a bit more detail. You'll notice that we're starting out with this display encouragement component being rendered let's go ahead and create it. So we'll first create that display encouragement component and we're just gonna stub this out for now. This is going to return some sort of something. Alright that's a little vague, right? But here's what it'll actually return. It's going to return this component called encouragement. This is going to be another one of these stateless…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Understanding the context API3m 45s
-
(Locked)
Using context3m 45s
-
(Locked)
Referencing context in stateless functional components2m 34s
-
(Locked)
Working with higher-order components7m 31s
-
(Locked)
Working with render props3m 54s
-
(Locked)
Render props in the wild: React Apollo46s
-
(Locked)
Solution: Building a context-based theme system2m 24s
-
(Locked)
-
-
-