This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Making a Reusable Component" Lesson
[00:00:00]
>> Brian Holt: Now that we have an app, let's go actually make some sort of reusable component that we're gonna use multiple times here. So the next thing I want you to do now, is I want you to move this into a separate JavaScript file cuz this is gonna get really messy putting everything inside of a script tag.
[00:00:14] So what I'm gonna do here is I'm just going to,
>> Brian Holt: Cut and paste that. So I'm gonna make a new file, always in source, right, here. And I'm just gonna call it App.js.
>> Brian Holt: Stop it, I don't care.
>> Brian Holt: So now I have something called App.js, same code and everything like that.
[00:00:45] Here in index.html, rather than have the script tag here, I'm just gonna say here src = ./App.js.
>> Brian Holt: So just added line 16 there, right? Deleted all the code inside of that, moved them to another file called ./App.js in the same source directory. And then we can just start writing stuff in the JavaScript file rather than kind of having the HTML and CSS evolve in the same page.
[00:01:26]
>> Brian Holt: So if I save that and go check, this should still work, right? Cuz it's still loading that JavaScript file. Now I wanna have a pet sort of component, right? So that it can render out pets inside of my applications. So I'm gonna make another component above this called pet.
[00:01:45] const Pet = arrow (). Okay and it's gonna be the same sort of thing where I'm gonna return the result of React.createelement. And I'm gonna put this inside of a "div".
>> Brian Holt: But instead of just returning one child inside of this, I'm going to return an array of children, right?
[00:02:11] Cuz it's gonna have multiple children.
>> Brian Holt: So first thing I'm gonna do is I'm gonna have what kind of dog, or what's the dog's name? So it's gonna be react.createElement,
>> Brian Holt: h1, empty and the name of the dog, which we're gonna do my dog, so it's gonna be Luna.
[00:02:38]
>> Brian Holt: Okay, underneath that, we're gonna have another createElement called, that's going to be an h2. And Luna is a dog.
>> Brian Holt: And underneath that, we're gonna have another one and she is a Havanese dog. But you could have Poodle or whatever you want there.
>> Brian Holt: Make sure you have the commas here, right?
[00:03:03] Cuz it is an array.
>> Brian Holt: So now we have a new pet class, a new pet component, right? So you wanna use this pet inside of our application.
>> Brian Holt: So we're gonna go down into app.
>> Brian Holt: We're gonna turn this into an array as well.
>> Brian Holt: And now underneath this we're gonna add three instances of the pet class.
[00:03:43] So I'm gonna say react,
>> Brian Holt: .createElement(Pet), and I'm just gonna put three of these.
>> Brian Holt: So again, I've made this pet rubber stamp and I've now stamped pet three times inside of app. So what do you expect to see when we go over to look at the browser?
[00:04:15] You expect to see a div on the outside. You expect to see an h1 with Adopt me inside of it, right? And then you expect to see three of these pet components right in a row. So you're going to see Luna, Dog, Havanese, three separate times.
>> Speaker 2: So we see three Lunas there?
[00:04:35] Or we see-
>> Brian Holt: Three Lunas.
>> Speaker 2: Okay.
>> Brian Holt: Yeah, exactly.
>> Speaker 2: Okay, [LAUGH]
>> Brian Holt: Exactly, so you can see here, Luna shows up three times.
>> Brian Holt: Make sense? Cool, good question.
>> Brian Holt: So now we've kind of stamped this multiple times onto our page. Again, you're probably thinking, this isn't a super useful pet component cuz it describes one pet, right?
[00:05:01] I don't wanna write this component 100 times for 100 different pets, which again, is a fair assertion. So, now we're gonna start getting into how reactions become a little bit more powerful, because we can make these components more flexible. Last thing is, if you're looking at your console, you will be seeing these errors.
[00:05:25] We will fix these. Just for now if you see key prop errors, just ignore them, we will come back to them.