This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Filtering" Lesson
[00:00:00]
>> Brian Holt: So let's actually use search term right. Right now we're not really doing anything with it. I just wanted to show you that if we replace this .state.search term here inside of the h1 and then we come back over here to our nice little thing right here.
>> Brian Holt: Notice that we have nothing right there and then as soon as I start typing it's echoed over here, right?
[00:00:33]
>> Brian Holt: So this data is bound to this one, so whatever's in the input is also gonna be input over there, right? So this kind of bends back to what I was talking about earlier. You have to think of react components in terms of given a certain set of state and a certain set of props, this is what it's going to look like, right?
[00:00:56] So you think about react in terms of snapshots, right? Given this snapshot of props and this snapshot of state my reaction point is always going to look like this, it's deterministically going to look like this, right? Every single time given the state and given this props its always going to look this way.
[00:01:14] Now what's advantageous about thinking about your component in this particular light is you get to eliminate the axis of time, right? So I'm sure many of you have debugged a prob with JQUERY or Angular or something like that. Where you have, I have to click this button and this button and then this button and then this broke over here, right?
[00:01:34] So you have to go through these series of just weirdness to get to eventually this state. You have to think about events over time leading to this particular problem, right? With react components it's just really, given this state, this breaks, right? And I feel like that's a much more simple thing to think about because you no longer have to think about going through periods of times to arrive at this point, right?
[00:02:00] If I put this state into this component, it just breaks. Or doesn't break, right?
>> Brian Holt: So yes, that's what I wanted to demonstrate to you here, that given this state, right? Where this state, it's going to look like this, right? So when the state looks like this, that component is always gonna look like that.
[00:02:24] Does that make sense? Cool, okay, so-
>> Speaker 2: There's a few minor questions in chat.
>> Speaker 2: Amir's asking could you recap why the names, file names are jsx instead of js? In version two they're all js.
>> Brian Holt: The answer to that question is in version two they were all js because that's where it seemed like things were going with Create React App.
[00:02:55] Create React App enforces .js. And then we switch to the Airbnb style rules which enforces JSX. And version one was JSX as well. [LAUGH] So another words no ones really decided yet where it's going to be. I just went with what Airbnb decided. So yeah, that's why it is, because the Airbnb rules enforce that.
[00:03:19]
>> Speaker 2: And could you recap the tradeoff between using the constructor vs not?
>> Brian Holt: I just think this is more succinct, right? If you use the constructor method that's Valid ES6 today and this is using a Stage Two proposal so I like this better because I find it easier to read.
[00:03:39] The other reason why it's going to be beneficial is because when we get into flow types, flow can understand this better. Which we will talk about that when we get to flow.
>> Speaker 3: Would we have to use a constructor if this component was accessing props.
>> Brian Holt: Nope, so I see what you're saying, cuz you have to call super props inside of the constructor.
[00:04:04] So you're overwriting the react constructor, if you write your own constructor. So the default react constructor will take care of the props for you.
>> Brian Holt: Good question.
>> Brian Holt: Anymore?
>> Brian Holt: Cool, so it's probably the last thing we'll do today. Let's actually use searchTerm, rather than just being something cute that displays at the top.
[00:04:38] What I want to do is, given some search term, so if I type black, right, I only want Black Mirror to show up, right? So I want to be able to search in real time my various shows I have up here. So what we're going to do, cuz we're gonna do something a little clever.
[00:05:00] So we have preload.shows, right? And we're using that to map out to a set of components. So if I want to show less components, I can do a little bit more functional foo and I can just filter before I map, right? So I can just filter out the ones I don't want based on that search term and then only display the ones that I want.
[00:05:25] So what I'm gonna do here is I'm gonna, before I call .map, I'm gonna call .filter.
>> Brian Holt: And what I'm gonna do here is I'm gonna pass in a show. So with filter if I return true for any given item it's going to keep it in the array.
[00:05:45] If I return false it's going to take it out of the array. So if I did false right here,right, I would get nothing, right? If I put true here, I would get everything, right? So what I'm gonna do here is I'm gonna check to see if the search term exists in either the title or the description, right?
[00:06:05] So I wanna know, are you in the title, so show.title or the description, so show.description.
>> Brian Holt: And then I'm gonna say.
>> Brian Holt: Yeah, I think this is the best way to do it. Whatever!
>> Brian Holt: I want to be case insensitive, right? So I'm gonna say toUppercase,
>> Brian Holt: .indexOf, so I'm gonna check if it exists anywhere in the string.
[00:06:45]
>> Brian Holt: That's gonna be this.state .search term, right? So I'm gonna check if this.search term exists inside of the show. Which I'm also gonna put to uppercase, right? Because I want to make this totally case insensitive and then I'm just gonna check to see if it's greater than or equal to zero.
[00:07:07]
>> Brian Holt: Whoops, that should be a dot.
>> Brian Holt: This is a little dense, you could pull this out if this made you feel better.
>> Brian Holt: But let's just kind of recap here, all right? So filter, right, we're doing a filter on this.
>> Brian Holt: This I'm putting show title and show description in one string together, right, so I can check both the description and the title.
[00:07:33] I can put it in either order it doesn't really matter, okay? I'm putting them to upper case because I want to take case sensitivity out of the question. And then asking in this uppercase string right here can you find search term, also in uppercase, right? Cuz index of is gonna give you somewhere, if it's greater than or equal to zero, it exists in the string, and if it doesn't exist in the string, it's gonna return negative one, right?
[00:08:02] So true if it's in the string, or false if it's not in the string, right? And that's what we're gonna be filtering on. How do we feel about that?
>> Brian Holt: It's a little dense but this is a good way of hacking at search, right? This isn't exactly elastic search.
[00:08:19] I think their algorithm's a little bit more sophisticated, but this'll do the job for what we're doing. So now, if I type black, it's only gonna show Black Mirror and Orange is the New Black, right? If I type house, it's gonna type House of Cards, or game, I get Game of Thrones.
[00:08:47]
>> Brian Holt: Come on, that's pretty cool, right, pretty cool? Pretty cool. Now, yes! So this is what I'm getting at, and what I keep harping on, is givien this state, and given these props, this is what this component looks like, right. So with the snapshot that, I could even, here's a good way of doing it, right.
[00:09:08] So we can set the default state. So if I put game right here, and I save it, what's going to be rendered on first render?
>> Brian Holt: Just Game of Thrones, right? So given that snapshot, where the search term is game, then it's gonna be only showing Game of Thrones, then as soon as I delete it, I get everything back.
[00:09:31]
>> Brian Holt: Does that make sense? So this is like, it only took me six goddamn hours, but we eventually got to the point of why React is amazing, right? I think this is a really powerful, intuitive and performant way of writing Java Script. I think it's a way to write scalable apps.
[00:09:52] And the interesting thing is you can come back later, and I mean barring this, I'd probably abstract this out into some sort of module or something actually a little bit more robust. But barring this little mess right here, this is actually pretty easy to read through, right? It's pretty intuitive that given this state, you get this sort of output.
[00:10:10] I find it easy to use the term Azura. We use it about, right?
>> Brian Holt: Any questions?
>> Brian Holt: Yeah, this is one of the things that really made me realize this is great, I want to keep writing this.
>> Brian Holt: Someone pointed out to me the other day that the posters are of uneven size.
[00:10:47] Now I can't unsee it.
>> Speaker 2: You push.
>> Brian Holt: Yeah, definately.
>> Speaker 2: There's a few people who are missing something along the way.
>> Brian Holt: Easy to do, I mean we are writing a pretty big app together.
>> Speaker 2: Yeah, I love how many people have written into us how this course gave them a job right?
[00:11:11] Because it's like so real world that people got, you now know how to build a reacts production app and I got this job because of it.
>> Brian Holt: It's super rewarding. So I was at a user group, the modern web meetup group in San Jose. Last week some guy was on the phone.
[00:11:32] It was a little rude, but it was pretty cool too. He walks up to me and says, hey, I got a job at Facebook because of your course, and then just ran off. [LAUGH] So I was like, thank you, or you're welcome, or I don't know. I was both offended and bewildered and honored all at the same time.
[00:11:51] More honored, it was super cool. No, it's awesome to hear that kinda stuff.
>> Speaker 2: Yeah, the whole point of that is software development is hard, right? Building a real-world application is difficult, there's a lot of moving peices.
>> Brian Holt: For sure.
>> Speaker 2: You're sorta de-mistifying each piece, especially with the videos, people can kind of come back to it and all that.
[00:12:11]
>> Brian Holt: For sure.
>> Speaker 2: But it is daunting, cuz it is hard. That's why people get paid a lot of money to write this kind of stuff.
>> Brian Holt: For sure, for sure, that's why this class is structured the way it is, I like I like exercises that I leave for you to do on your own and connect the dots yourself.
[00:12:29] But that's more useful for, I feel like, algorithms and like little bite sized pieces, right? We're talking about modern application development, and that's not an exercises, like okay, build a Netflix app, go, and I'm just gonna sit over here, right? That doesn't work, right? We need to sit down together and build things and it's useful for you to type things even if you don't understand them.
[00:12:50] At least for me, the act of typing something helps me to connect dots in my brain, right? Especially, I put all the pieces together and then I step back and it's like, okay, now I see that it was a puzzle, it's a picture of something.