Complete Intro to React, v2 (feat. Router v4 and Redux) Iterating Through Data

Transcript from the "Iterating Through Data" Lesson

[00:00:00]
>> Speaker 2: If you deploy this with browser to router production, then do you get your server logs filled with 404s? Doesn't that add noise to server logs for those whose job it is to analyze them?
>> Brian: Don't use webpack-dev-server in production, that's the answer to that question for sure.

[00:00:16]
>> Speaker 2: Okay, let's see, Christopher's asking, the answer was what to skip passwords. That was just my thought.
>> Brian: Okay.
>> Speaker 2: All right, okay, and then Gus is asking, where is data.json?
>> Brian: It's in the public directory, so public/data.json.
>> Brian: Yeah, that's it.
>> Speaker 2: Okay.
>> Speaker 2: Thanks.
>> Brian: Yep.

[00:00:50]
>> Brian: So let's go back to search.js, rather. Obviously, this is not a super useful thing right now, it's just outputting JSON data, which our end users do not care about JSON data as much as you think they do.
>> Brian: So what we wanna do is we wanna take each one of these titles, and we wanna make some markup for each one of them.

[00:01:15]
>> Brian: So what we need is some sort of like ng repeat / #each, depending if you're coming from Ember or Angular version for React, right? We wanna take this data structure and transform that data structure into nice looking markup, right? Now if you're kinda following me, you should be hearing some functional key words here.

[00:01:37] I have an array of something, and I wanna transform it into an array of something else, right? That is just like the basis of functional programming, right? You take one data structure and you map it into another, right? That's just like functional 101. So that's exactly what you do with React, right?

[00:01:56] If you remember back to what we were doing before, if you give React an array of components, it knows what to do with that, right? So if we take a data structure and we map that into another data structure that is full of components, React knows what to do with that.

[00:02:15] So we have preload.shows, I- I'm sorry, the following question to that one about the 404s. Uh-huh.
>> Speaker 2: I think, in production, do you have to add these routes now to the server?
>> Brian: So the answer is yes, you do. Your server definitely has to be aware of where to route those requests.

[00:02:36] If you're doing Node, I will show you at the end of tomorrow how to make Node work with that. If you're in another language, you're on your own. I really couldn't say. Either use hash router or duplicate your code, or there's a couple ways of doing it, but,

[00:02:55]
>> Brian: Yeah, good question. But one thing's that in the webpack dev server docs, it says do not use this in production. That's the first thing it says in there.
>> Brian: Okay, so,
>> Brian: Going back to, just to give you,
>> Brian: A brief 101 on functional programming, I'm just gonna do it here inside of my browser.

[00:03:25] So I have var numbers = (1, 5, 8, okay? So now I have x, or no numbers.
>> Brian: And that's an array, right? And if I say,
>> Brian: Let's say I wanted to double each one of these, so I had 2, 10, and 16, right? I could write a for loop that goes over each one of those, doubles them, makes a new array, returns that, right?

[00:03:54] But there's another function called map that takes a function and applies that to each individual's element inside of the array. That's called map. So if I do numbers.map, then I provide to map a function that's going to apply to each one of those. And whatever that function returns is going to be the new element in that array.

[00:04:19] So if I say function[number] (return number x 2,
>> Brian: I get 2, 10, and 16. So to kind of just dissect that a little bit further for those of you that are not familiar with map. It takes this function right here, right, or I can even say, var double equals that same function, right?

[00:04:56]
>> Brian: So now, if I say double5, it's gonna return to me 10, right? And now I can say numbers.map(double), and it's gonna apply that same function to every single individual element in the array, right? This is like functional programming 101.
>> Brian: So hopefully, that makes sense. Notice that we're not modifying the original array.

[00:05:21] We're just taking that, and we're creating a new number and creating a new array full of the new numbers, okay? The only reason I stress that like that, a lot of people probably already know that coming to this course. But if you don't get it, this gets really confusing, really quickly.

[00:05:34] So, now that we have this idea of map into our head, I have an array full of data, right? And I wanna map that data into components. So what I'm gonna do is preload.shows, right, cuz that's the name of the array, .map.
>> Brian: And I'm gonna say function (show).

[00:06:04]
>> Brian: So I know this gets a little weird looking pretty quickly,
>> Brian: But I'm gonna say return.
>> Brian: And just for now, I'm gonna return h3,
>> Brian: With show.title.
>> Brian: So I have preload.shows.map, so it's gonna take shows. It's going to run this function right here on each individual element inside of that array.

[00:06:32] And it's going to return a React component based on each one of those elements in the array. And I'll end up with an array of React components, which React knows what to do with, right? If I give it an array of components, it knows to display each one of those in order.

[00:06:48] Cool, does that make sense?
>> Brian: So just to show you what that looks like and then I can probably push up a branch after this, I refresh. I'm probably not running my, I have to save first. Gratuitous parentheses around expression, whatever.
>> Speaker 2: In your map.
>> Brian: That's what it is.

[00:07:20]
>> Brian: Okay, cool.
>> Brian: So now, I end up with each one of the titles in an h3, right?
>> Brian: Any questions about map? Map is really important to React. So that's why I stress making sure that everyone understands what's going on with map.
>> Brian: So.
>> Speaker 2: Why the extra parenthesis?

[00:07:55] After map, you have two parentheses.
>> Brian: Yeah, I know, I-
>> Speaker 2: There was a mistake.
>> Brian: That was a mistake.
>> Speaker 2: Okay.
>> Brian: Which Linda told me to stop.
>> [LAUGH]
>> Brian: Yeah, you're probably gonna see this big grossness here in the console. I'll talk about that in a sec.

[00:08:24] The warning on the console is expected.
>> Brian: So, this is actually one of the reasons I really like React. This preload.shows.map, this is not a React thing, right? This is just JavaScript, right? This is normal functional programming. This is a skill that once you learn, the idea of mapping something from one data structure to another is universal, not even just in JavaScript, but across programming languages.

[00:08:58] I would assert that one of the most fundamental changes in the way I have programmed is when I learned how to do map, right? And I love that because that's not a React specific skill, it's something I learned once and I got to use forever, right? When you learn how to write an ng repeat, you just know how to write an ng repeat, right?

[00:09:15] And that's kind of a bummer to me. And that kinda lends itself in React that best practices in React for the most part, excuse me. [COUGH] Best practices in React are, for the most part, just JavaScript best practices. And I think that's a pretty powerful statement to make.

[00:09:32] It comes with being a pretty small library that does one thing super well, maybe a few things super well.
>> Speaker 2: Can you use arrow function instead of function to map?
>> Brian: Yep, I'm about to do that.
>> Speaker 2: Mm-hm, okay, next question. Do you recommend to create another component to create the child components with map or just create them inside the parent map?

[00:09:52]
>> Brian: I'm also about to do that.
>> [LAUGH]
>> Brian: Yeah.
>> [LAUGH]
>> Brian: So, to address the first one, I like arrow functions, they're new to ES6. One of the stated goals of ES6 is to never write the word function ever again. So we're gonna delete function and put an arrow there.

[00:10:14] It's just another way to write function.
>> Brian: You don't have to do it this way, but you can.