Current section: Custom Components 22 exercises
lesson

Intro to Custom Components

Loading lesson

Transcript

00:00 It's time to talk about custom components. Here's the deal. React components are functions which accept an object and return something that is renderable. That's it. That's the entire definition of a custom component. There's nothing special about them at all. It's just a function, accepts an object to props,

00:17 returns something that you can render. And typically those things that are renderable are other React elements, but you could even return a string, and that is technically a React component. You can create an element out of that. The idea behind a custom component is it's a thing that you can pass to the create element API.

00:36 And there's a special syntax in JSX that allows you to represent that custom component in the JSX that we're going to be exploring in this exercise. So here's a very simple example of a custom component. It's a function called greeting. It takes the props objects,

00:55 and those props can then be passed by whoever is trying to render that particular component. So that's what you're going to be doing in this exercise. We're going to be exploring custom components through an iterative process to get us closer and closer to the actual API.

01:12 So you understand exactly how JSX is compiling into the calling of these functions, and how React ends up calling those functions. It's kind of interesting how all of that works together. And then finally, we'll see how this can be practically useful in the last exercise. So have a good time, we'll see you when you're done.