This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Loading JSON Data" Lesson
[00:00:00]
>> Brian Holt: Let's go start making some cool stuff in search. So search.jsx, while this is a might fine component, we'll be expanding this a little bit.
>> Brian Holt: And we're gonna import our preload data. So we're gonna say import preload from './data', right? If you remember that's beta data.json file.
[00:00:30] If you need a refresher of what it looks like this is what it looks like. It's just a bunch of metadata about TV shows,
>> Brian Holt: Okay, and then we're gonna create a div. Its className= ' search'.
>> Brian Holt: And,
>> Brian Holt: Yeah, if you want to, you can do something that's kind of useful sometimes to do is you can use a pre in code,
[00:01:10]
>> Brian Holt: To view JSON output. This is just a debugging trick that I've used a bunch. And honestly, stole from Ryan Florence the creator of React Router. And he also does a Frontend Masters course.
>> Brian Holt: So all this is gonna do is it's going to preformat and print out whatever is in preload.
[00:01:44] So if we refresh here. Did I? I probably shut that down.
>> Brian Holt: Can't resolve ./data. It's gonna be ../data.
>> Brian Holt: Looks like the ESLint is gonna require that we put .JSON on there, so put .JSON.
>> Brian Holt: And now, hopefully, if you go refresh here, you can see this is what our data looks like.
[00:02:21]
>> Brian Holt: So that trick that I showed you with the JSON.stringify and pre-encode. That's really useful if you are not sure what prompts are coming in or how your state's changing over time. Its just a really useful way to dump a bunch of data to the DOM really quick.
[00:02:36]
>> Brian Holt: Cool, so now that we have that, let's go and do,
>> Brian Holt: Let's actually go and print out all of our shows. So first thing we're gonna do is we're gonna printout the title for every show individually. You wanna make it into H3. What we have is we have an array of show data, right?
[00:02:59] And we wanna transform that into an array of show components of some sort. So for those of you that have any functional programming background, some bells should be going off in your head of what you should do here, right? If we're transforming one array from array of one thing to an array of another thing, that's a map, right?
[00:03:14] That's an all-day map. So that's what we're gonna be using here. This is actually one of my favorite points about React. Cuz most of React is just JavaScript. Now it seems kind of obvious to say that out loud, but I mean that in the regard of I want to pick on Angular just cuz that's the one I know.
[00:03:32] And I'm talking about old Angular, right? Angular 1 and before there was a lot of domain specific language in Angular, right? You had to know how to do an NG4 and those were very specific Angular skills. And then once you've moved on from Angular, those skills no longer apply, right?
[00:03:50] You can't do NG4 with Ember, it doesn't make any sense. What I like about React is for the most part it's just JavaScript, right? There's very little domain specific language for React soft. There's some, I'm not denying that there isn't some, right? Knowing to put class name in there, it's annoying right?
[00:04:10] It's a very React specific thing to do. But I'm getting on to say that, we're gonna be using array map here to do what NG4 does in Angular and what pound each does in Ember, right? So let's take a look at what that actually looks like. We're gonna do preload.shows.map,
[00:04:37]
>> Brian Holt: And I'm gonna say show.
>> Brian Holt: And for now we're just gonna return an h3,
>> Brian Holt: With show.title.
>> Brian Holt: So Prettier took it away but what I had here was this. So this right here in the map.
>> Brian Holt: This is just a normal arrow function, right? We're taking a show, right?
[00:05:18] Well, let's go back and talk about map for just a moment, right? So preload.shows is an array, right? We're gonna take that array and we're gonna call map on it. And what that does is gonna call this function right here, once on every element. Whenever this function returns, it's going to be returned in a new array, right?
[00:05:43] So we're gonna take this array, which is an array of objects, and we're going to transform it into an array of React components, cool? Are we cool so far with that idea?
>> Brian Holt: Now if you remember, what I referenced very briefly earlier, React knows what to do with array of elements, right?
[00:06:05] So if we give it an array of elements, it knows how to render those. So that's precisely what we're doing, is we're giving it an array of elements, okay? So that's what's going on here. Now, particularly with arrow functions, if you have exactly one parameter, no more, no less, the parentheses around the parameters are optional.
[00:06:34] So as soon as I save this, it's gonna take away these parentheses. That's where they're going. It's Prettier that takes them away.
>> Brian Holt: Okay, so now if I come back here, you'll notice that I have a bunch of H3 on the page.
>> Brian Holt: Any questions about that?
>> Speaker 2: Is it best practice to pull out the preload.shows into another JSX variable and then put it inside the div?
[00:07:17] Or is it still, I don't know, would you consider doing the map function inside the div to be best practice?
>> Brian Holt: It definitely depends on what you're doing. Another beautiful point about React is it's not really super specific about what it wants you to break into components and what not.
[00:07:39] I found that when I was first writing React I had a tendency to break things down into just tiny, tiny, tiny components, to the point that it was no longer useful, right? Cuz things were made up of too many components and just didn't make a lot of sense.
[00:07:50] So now I try to break them down into atomic objects. In fact, that's that we're, you're kind of beating me to my punch here, jerk. No, I'm just kidding. That we're gonna build a component in here, and then I'm gonna comment to you that this is to big and that we should break it two components.
[00:08:07] So, let's go make it too big first, and then we'll break it into two components. But for now, this is a tiny component. If this was all this was doing, yeah, this is great, let's just leave it that way, right? There's no hard and fast rules like if there's a map, then you must do this.
[00:08:22] I don't know. Someone might make that rule, I don't. I try to do what's sane, right? I find those dogmatic rules typically don't serve you in the long run.