This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Q&A" Lesson
[00:00:00]
>> Brian Holt: There was a question before the break about this particular option thing right here like it's being condensed into one self-closing tag. Why are we doing that? Can we do something else? So what I wanted here is I wanted to have basically an option if I was gonna write it in just normal HTML it would look like this, value= Blank with no string here, empty string inside of there so that if you go over here you can see that it's empty with animal.
[00:00:28] This represents searching for all animals, right? So you could totally put in here All Animals, I guess.
>> Brian Holt: And this would work just as well.
>> Brian Holt: Then come back, my, nope this is not working. Npm run dev.
>> Brian Holt: So now, if I refresh this again, you'll see here it says all animals, or I could, so I can search for all animals, and that would be fine as well, but I wasn't doing that, I was just making it an empty string, which then Prettier collapses into one option.
[00:01:11] So that hopefully addresses that. Any other questions before I move on?
>> off screen male: I have a question.
>> Brian Holt: Yeah?
>> off screen male: I was looking at this, on line 41 Capital animals that came from the import statement of both map is an array function?
>> Brian Holt: Mm-hm
>> off screen male: How do you make that show?
[00:01:32]
>> Brian Holt: This is an array.
>> off screen male: That's already an array?
>> Brian Holt: Yeah. So I mean this is, in fact I can look at it here, it's an array of strings. That comes from this module. This module, I just know, exports an array of strings.
>> off screen male: Okay.
>> Brian Holt: Yeah, so that dot map works on any array.
[00:01:54]
>> Brian Holt: Good question, other questions?
>> Brian Holt: Yeah.
>> off screen male: Did you have to do a lot of doc block or in line documentation in the module finder client in order for this to pre know so many things like it's an array of strings.
>> Brian Holt: It's type script.
>> off screen male: Like did you, [CROSSTALK] that, Okay, great.
[00:02:15]
>> Brian Holt: It's type script. Yeah, if you export typescript definitions, VS code just inherently knows how to read that.
>> Brian Holt: Makes it really easy. So yeah, I think I mentioned this yesterday. VS code is, despite the fact that we're not using typescript anywhere, it's actually running typescript behind the scenes on your code so that it's understanding you code and giving you suggestions and things like that.
[00:02:40]
>> Brian Holt: So the same thing here if I was trying to say React.whatever. So you can see here that it has all of these things coming in from React. The way that it's doing that is React is not written in typescript, but it has typescript definitions written for it.
[00:02:58] And it's just understanding those and giving you access to that.
>> Brian Holt: By the way, VS Code not's the only editor that does this I just think it does this really well. Particularly because both vs code and typescript are written at Microsoft and those two teams sit next to each other.
[00:03:16] There's a lot of synergy there. But we'll get to that later, we'll write typescript later. Okay, so I'll leave this up for a second, but let's go ahead. This concludes the section. If you're fallen behind here, there's a commit here, so feel free to come up and speak with that.
[00:03:34]
>> off screen male: For bigger projects, do you ever use libraries like redux forum or how do you manage large forums with lots of complex state.
>> Brian Holt: Personally, again I feel like I'm a professional form developer at this point, I don't because I think this is pretty easy to do. I really think the mechanics of storing state with forms, with React, is pretty elegant.
[00:04:06] And I don't really see typically the need for a library on top of that. People can disagree with me, and they might be able to go faster than me, but when I have to go maintain it later and I have to make minor changes, it's really easy cuz the code's already all written.
[00:04:21] So I personally don't but that isn't to say,
>> Brian Holt: I personally don't but that isn't to say that there isn't a good reason that you could do that.
>> off screen male: With inputs and events or just events in general, can you ever, how do you pass some extra data along with it.
[00:04:47] For instance you have two of the same handlers but you want them pass a key.
>> Brian Holt: Yep.
>> off screen male: Or an ID or something like that.
>> Brian Holt: That's a good question. Let's talk about that. We actually already did it. We did it with the carousel.
>> Brian Holt: If you look down here I put the data index on here.
[00:05:07] So this is actually gonna be passed in through the data set here in the handle index click. This is again in the carousel component that we built when we were choosing which photo, right. So here each one of these images is getting an event listener attached to it.
[00:05:23] And then, we're just pulling out the dataset.index, right?
>> Brian Holt: So that's how you would do that, you use data, right which is really fast and simple to do. On a separate note, something worth mentioning is typically you'd be worried about the performance implication of attaching a bunch of event listeners here, right?
[00:05:49] If you're, if I'm thinking back to my jQuery days and this is something I'd be worried about. But keep in mind that, you're actually not attaching real event listeners here. React has one form listed at the top level of the components. So you're not actually attaching real event listeners, and so there's no performance overhead to having a bunch of them here, or at least very, very little.
[00:06:09] So you also don't need to worry about that.
>> Brian Holt: Other questions?
>> Brian Holt: Yeah, go ahead.
>> off screen male: I noticed that a couple different modules now, we have the same sort of import PF from pet finder, give it the credentials again and so on. Is that something that react wants you to sort of redo in each of the modules or on a larger project would you abstract out this moment when we're getting pet finders initialized into sort of another module that we would then just instead of that sheet and keep pulling it all over the place.
[00:06:53]
>> Brian Holt: Yeah, this has nothing to do with React whatsoever, this would be the same in any library that you're dealing with, this is cuz I hurried and wrote this module myself. This is actually,
>> Brian Holt: So this is technically actually a singleton. I don't actually have to do this.
[00:07:08] I just have to do it once. It actually stores those keys and secrets internally and then this would just give you the petinder client right here. But rather than explain it, I just show people every single time so you can see what it looks like.
>> Brian Holt: Yes, so it's not, there's perhaps better ways of structuring the module but it really has nothing to do with react, it's just the way this job has been moduled to.
[00:07:35]
>> off screen male: [CROSSTALK] Say a lot of people have a object and they pull the API off the config object that's already configured with API keys or whatever. [CROSSTALK] There's a lot of different code organization ways to handle things.
>> Brian Holt: Probably if it was my own project what I would do is have an API like, ./api and make a new file called, api.js and then import from that and just substantiate that API file that would probably be a little bit more elegant solution.
[00:08:04] But that's just preference on how you write JavaScript.
>> off screen male: Is there any reason why you don't have a form element, actual form tag?
>> off screen male: Typically like,
>> Brian Holt: I think the answer to that question,
>> off screen male: [CROSSTALK] For semantics or whatever, you would have it.
>> Brian Holt: Yeah, so it doesn't make, I don't think it makes it any more necessarily accessible by having a formula.
[00:08:29] In this case, we're not operating at the form level, so I'm just, I don't need it, so I don't put it in there. But some people feel the need to wrap everything in a form,
>> Brian Holt: Now what you could say that I'm not doing, which people do expect.
[00:08:45] If you hit enter on a form, people expect that to submit the form. And the easiest way to do that is to wrap everything in a form and say, you know, on submit and then handle the submit event and that will handle the people hitting enter on your form.
[00:09:03] Right now it won't do that so that would be a compelling reason to do it. I just haven't, I think that answered the question.
>> Brian Holt: So in other words, it's no different for React than it is for, say, Angular, right, it's just, I haven't done it, that's all.
[00:09:31]
>> off screen male: And in that ES6 import on the top, pf is just the default import and then you have named exports.
>> Brian Holt: Right, so for example, if I have React dom has it as well. You can import React dom and you can also import render individually from react-dom.
>> Brian Holt: So, this is an ES6 module thing.
[00:10:01] You can import individual pieces of it, or you can import the entire thing as one giant pack or, in general that's the semantics of it but in reality, this is whatever the export default is, right? If you look down here at the bottom, I say, export default SearchParams.
[00:10:15] I could also say, Export const search params equals search params, like this. And now I have this name export,
>> Brian Holt: Or some other name, [SOUND] right. Now I have this name export, now that I wanted to import this in carousel, I would come here and say, import SomeOtherName from ./SearchParams.
[00:10:50]
>> Brian Holt: So it's just how the module system with ES6 works, again, not specific to React, this is just in general JavaScript modules that's how they work.
>> Brian Holt: Okay, so what further is asking here if we go to, maybe, let's do it on SearchParams. Instead of doing what I have here, correct me if I'm wrong but I think what he's asking, let's just handle, do this one.
[00:11:20]
>> Brian Holt: So this is normal, just like without, hang on you have to put event in there as well.
>> Brian Holt: HandleBreedChange and then event here right, so this is not bound so that this would break right now if I tried to run this code as is.
>> Brian Holt: So what he's asking here, he or she, is asking, is what happens if I change, handle breed change instead of having up there.
[00:11:47] This technically works if I say .find this and .bind this right here and I do it in line here. Or the other way you can do it is, something like this.
>> Brian Holt: Event.
>> Brian Holt: This would also work. There's a couple kind of ways of finagling this but far more I see this one, the second one.
[00:12:17] So let me tell you why this is a bad idea. I would strongly recommend against doing this. In general I have to say this, mostly performance optimizations, you don't have to worry about. But this one you actually do because this right here dot bind this, this gets called on every render function.
[00:12:35] And dot bind is actually a pretty heavy function. If you run this 10,000 times, you're gonna see slow down. And if you start doing this everyone in your codebase, you're gonna start seeing junk because you are creating and destroying a function every single time you call render and that's just turn through memory like no one's business.
[00:12:53] So you're gonna see a lot more garbage collection and the slowest like whenever you're scrolling and garbage collection happens, it just causes junk like a 100% of the time. And you're going to triple or quadruple or even more than that, 10X, how much you do garbage collection if you do stuff like this.
[00:13:12] So don't, don't do that.
>> Brian Holt: Like I still see people do this, and cuz it's easy, right? It's easy to read, it's very readable. But because before this was impossible to do it this way, this only was allowed to happen maybe within the past year. So before that, you had to do the constructor.
[00:13:45] Before that, we didn't have to it because they used to bind everything for you and they don't do that anymore.
>> Brian Holt: So we just did forms and now we're moving onto context.
>> Brian Holt: Yeah, in fact I know, I think it was his or her name was Diego. We're actually going to address the question of how we share data amongst multiple components.