2.6 Challenge: Build a Component

It's time for challenge number three. In this challenge you need to build a component. So notice here's a react component for displaying a Twitter avatar, as you can see it just takes props.handle and it prints out this little URL in an image tag. Very simple. And what we need to do is write a profile component that uses a Twitter avatar component to show the image and the name, and you can see the ReactDOM.render call for some hints. All right. Now remember, you can find a link to this pen under the video. I'm gonna go ahead and fork this, so that we can build our own component here. And once again, I'll rename it with my solution. Okay, now we're actually getting into using react, within these challenges. So this gets a little more exciting, go ahead and pause this video right now if you want to do this challenge yourself because now I'm going to show you the answer. In our React dom call here we have a profile component that we're calling, and we give it a name and we give it a handle. So this should be pretty straightforward. Let's go ahead and create a profile. And I'm gonna do this as a stateless component. Just using a JavaScript function. If you want, you can actually use react.create class, or the class syntax itself. Do whatever you like. But I like using stateless functions as much as possible. As we can see this is gonna take one parameter of course which is our prox subject but it's gonna have name and handle properties. So let's go ahead and destructure that. And then let's return a div here. And, let's see, inside this div, let's return an h1 with the name for this specific account, or person I guess. And underneath this, we will have a TwitterAvatar. And, let's see, it requires a handle property. So we will pass it a handle, which will be equal to the handle we have. There we go. It should be that simple. So I'm gonna go ahead and save this and it looks like we are doing something wrong because nothing is appearing over here in our output. So let me pop open the console, hane is not find. I've misspelt something similar. Yes, this is not name. Let's go ahead and say name. And now if we close the console you can see that we get reactJS and we get the Twitter avatar. Let's go ahead and change this so i can change the name here to be Andrew Burgess and you can see that it updates there. And of course that's nothing to do with react that's just code, and re-running the code. But anyway, we can change the handle here to Andrew 8088 and, what? That's not me. Okay, that's strange. I guess Twitter's having a problem. Let's change this to, I don't know, Facebook. Now let's see, what do we get? There, we get the Facebook avatar. And if we change this to Tuts+, there we go we get the Envato Tuts. Okay so let's go with that one. So as you can see we can change this to different names and Twitter avatars and we can see this in action. So good job, you have built a very basic component. But it's a good place to start in seeing how you can create components and use their properties, and also how you can pass those properties on to other components, to do some of the work for you. Good job.