This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Components and Q&A" Lesson
[00:00:00]
>> First of all, let's move this everything out of a script tag here. This should feel gross to that you're writing JavaScript in your HTML. I just wanted to give you the hello world of this. But now we're gonna move it into a file called app.js. So create a new file here.
[00:00:16] Inside of your source directory called App.js. Okay, once inside of App.js, we're gonna create, and then we're just gonna copy and paste all of this over there. Okay. And then we're also gonna have this source equals app.js, like that. That will paste all that in here. Okay. The next thing we're do is we're gonna create another component.
[00:00:57] So we're going to say const pet equals another array of function, return, react.create element, div. Empty object. And then here we're gonna give it an array of components to render. Right? So, basically what you're saying is like I have a div and then in that div, I'm gonna have three other elements.
[00:01:36] All right, this is how you do that. You can do that with an array. React.create element h1 and instead of the h1, we're going to put luminor. Actually, let's do it this way we're going to put we actually make that an h2. We're gonna make three of these.
[00:02:03] h3, h3. Luna is a dog, and she is havanese, which is the name of the breed of my dog. So we're gonna be talking about my dog. Feel free to put in the name of your pet if you so desire though. Okay, so now I've created this pet component, this pet stamp that whenever I stamp it somewhere it's gonna create all of this.
[00:02:31] Okay here inside of my react, create element. I'm going to put this in an array as well. Then here I'm gonna say react. Reacts.create element. Pet like that just like we did down here. I'm gonna create three of them. That's something I should mention is here as well.
[00:03:13] This array is actually technically optional. So I could delete this. So you just be giving it multiple parameters and react knows how to handle that as well. I don't, it's almost never useful to know that, but now you know that. I'm gonna leave it like this, cuz this is technically how react does it under the hook.
[00:03:36] So that's what I would do. But now we're gonna have a div here. And then inside of that we're gonna have an h1 with adopt me. And then we're going to have three stamps of this pet component, which you see here. With and that's going to have a div and inside of that it's gonna have an h2 and h3, and an h3.
[00:03:58] So the question that I want you to answer to yourself right now. How many h3s are about to be outputted to the DOM? Six, six h3s will be output to the DOM, right? Because I have this pet component which has two h3s inside of it and I'm doing that three times.
[00:04:23] So let's go see let's go check our math. So I'm going to save this and I'm going to refresh the page. And you can see here that's inspect element. So you have luna the dog and then you have dog and havanese. Those are both h threes, right? And you can see that I have six of those.
[00:04:50] Starting to get more into why react is useful now, right? I made this pet component and I was able to use it multiple times. Again, you probably could have written this HTML faster than the reactor that we wrote. But we're gonna start adding more and more layers to this where this is going to become more and more useful to you.
[00:05:07]
>> In the array, you have a comma and the last element of the array. How does that?. Maybe it's something I'm not used to.
>> Yeah, I have a comma here on the last element of the array and when we get into prettier actually insert these for you as of es 2018, 2017.
[00:05:25] So it's a relatively new feature to Java Script. You can always end arrays with commas. You don't have to as well, if I delete this it still works. But the nice thing about this is. Now I can do that and I don't have to modify anything. It's also not going to mess my get blamed if I delete the last one, right?
[00:05:46] That's the idea. So he's asking, can we use like a 4 loop or other kind of like control structures in JavaScript to generate components and you absolutely can do that. And we'll be doing that actually quite a bit. We'll see how well this works. You can see here I use the map which is basically like the same as a for loop in some capacity, right?
[00:06:06] This is going to generate four different react components. Now if I save this and refresh over here. You can see here made a bunch of adoptees, right because our h1, I guess if I just go and make this an h2 refresh again. Yeah, you can see here, I made a bunch of like 1,2,3 here.
[00:06:32] We did this basically through a for loop, but you couldn't you could absolutely do this through a for loop as well. I would have to take it outside of the component. Not outside the component but outside of the return.
>> Why do we need to create an additional react.create element by using pattern app?
[00:06:46]
>> So let me make sure I understand your question, preview. So react.createelement here, right? So this is creating a div. So basically every time that you create a new tag or you're creating a new instance of a component, you have to use React.createElement. This is basically telling React, I want a new instance of this.
[00:07:05] So I want a new div, I want a new h2 or I want a new pet.
>> You had just written that h2, right? We had three dots in the beginning, right? That was for de-structuring and why was led?
>> This is, you're talking about this. This is actually called the spread operator so this is basically saying I have this array here.
[00:07:27] And I want to the array that this is going to create, to be concatenated to this array that it's in.
>> Okay. Thank you.
>> Yeah, do not worry about that. That's totally like tangential to this course. But it is kind of a cool way of doing that.
[00:07:44] In other words, this is not super useful to know about react, right? This is just a fun JavaScript feature. Something to just call out here. If you look at your console, you are going to get. Each list, each panelist should have a unique key prop. Do not worry about that for the moment, we will solve that momentarily.
[00:08:01] You will probably see that error a lot. It's not a big deal, at the moment. So, you can just ignore that for right now. The basic gist of it though, is that, I have three of these components here in a row. Luna Dog Havanese. And basically what react is saying like, if you like swapped this one and this one, I would like to know that I'd like to be able to keep track of that.
[00:08:27] So that I can just swap the HTML, MO instead of destroying them and recreating them. So you have to give it a key prompt. Is like, alright, here's a string that's unique to each one of these so that you can track what order they're in. And then swap them appropriately and or create, and destroy them as necessary.
[00:08:44] That's the gist. But we'll see how to solve that later.