Complete Introduction to React (feat. Redux and React Router) Importing JSON Data

Transcript from the "Importing JSON Data" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian: So now that we have React Router actually loading our second page, our first page will make a second page. One thing is, we're going to start referring to this dated JSON right here, and as you can see it's just a bunch of Netflix Original shows. The other thing I should have mentioned is that this is actually just an elaborate advertisement for Netflix.

[00:00:26] [LAUGH] I should have mentioned that upfront. I'm kidding, it's things that I have the legal right to use, or that maybe the legal permission to use is better. But, that's all that's in here, just a bunch of data for that. One thing is React Router doesn't speak JSON natively, but, however, we can bring in a JSON loader which does speak JSON for us.

[00:00:55] So, go back to your Webpack config real quick.
>> Brian: And, inside of your loaders, either before or after, doesn't matter. We're going to do another object here, and it's going to be test : /\.json$/. So, again, to dissect this, this is going to match anything that ends in JSON.

[00:01:28] That said, there's no question mark because we don't want to match .jso, right, that doesn't make any sense. We want it to only match .JSON period, end of sentence. Okay, and now we need to give it the loader that we want to use, which is the 'json-loader'.
>> Brian: Hopefully that looks okay to you.

[00:01:58] So, let's go and create a new file.
>> Speaker 2: Could you maybe do a checkpoint to get what they're asking?
>> Brian: Yeah sure, I'm going to do this in a new tab. Hold on.
>> Brian: That way I don't have to keep ending my talks/bundler.
>> Brian: It should be good to git commit step 8.

[00:02:49] Yeah, okay. That should be up under FEM-8 now, and let's go ahead and do this search.jsx. So, a new file search.jsx and we're going to put that instead of oui JS folder, okay? First thing we're going to do is pull in React, right? That's something you probably get used to pretty quickly because of an employer and every JSX file

[00:03:30]
>> Brian: Const shows. So this is us gonna be pulling in our shows that were that json file that I was showing you. ../public/data right? That's the name of the file. Okay and we're going to create a new component called Search.
>> Brian: And let's do this because this is kind of fun.

[00:04:07] We're gonna do pre Code JSON.stringify showsnull 4 and close that What we're doing here is this shows is just can be a large object full of all this data that we're getting from react from our data.JSON. What I'm gonna do here is pre and code are if you've never seen them before is pre means pre-formatted in code means I'm actually going to display code to you.

[00:04:44] So it Kind of formats it nicely for you. Okay, then here, JSON.stringify, I imagine most of you have used that before. It just turns a object into a string, right. And then if you do this 4 here means, I think it means four indentations. This is basically just formatting it prettily.

[00:05:08] I think one of the worst questions I ever got asked in an interview is, can you name the three parameters that you can provide to JSON .string of five.
>> [LAUGH]
>> Brian: I actually do know but I think that's such a terrible question, right?. So the first one is the data you want to display But know which no one knows what it is because no one ever uses it is actually a replacer function that you can actually replace like basically test for a certain condition and can replace data in there like who cares.

[00:05:35] And then 4 I believe is indentations. I think that's correct. I forgot what 4 is but will stick with that.
>> Speaker 3: It's number of spaces.
>> Brian: Yes. Nailed it. Okay, so now that we have made our search.jsx. Now we have to pull it into clientapp.jsx. So now I'm going to say const Search equals require Do you have to export the module?

[00:06:05] Did I not do that because that's a big problem if you don't do that. You do. modula.exports = search or else it's gonna try and pull in this file and it's going to null or an undefined. I think it's undefined. And you know about time. So yes say that pull that into Klein a sex.

[00:06:38] OK And now we're going to create a second route route
>> Brian: Path equals slash search.
>> Brian: And component, as you might have guessed. It's going to be A search.
>> Brian: Make sure you save that.
>> Brian: Yeah. [SOUND] Bless you. So now if we go over to our browser.

[00:07:22] Well, first of all, I broke crap.
>> Brian: So if you changed your webpack.config, you actually have to stop it and restart it.
>> Brian: Cuz it doesn't know how to speak JSON yet. It loads all those loaders at the beginning of it's startup.
>> Brian: Okay, so now I have some lint errors.

[00:07:50]
>> Brian: Yeah, well if you go back to here in my search.jsx and want spaces after these. Not a big deal because this is just temporary. We're gonna delete it here in a second. But if you wanna feel good about it, that's how you would fix that. Okay, so now refresh your App and we have no link there yet.

[00:08:16] So let's just go ahead and hack the URL to get to where we wanna go. So you actually can just delete that. So just make sure that it's pound/search that's where you wanna go and there you go. Now we'd have like a nice JSON display of what are all of our data is working for some people you have any errors in your console.

[00:08:47] OK.
>> Speaker 4: I've got some sort of link here are the my Browsers coming up okay but, it's in red, the person error the keyword const is reserved, it's.
>> Brian: So, probably your babble is not trim piling correctly.
>> Speaker 4: I think it's the lint because the code is transpiring and showing up okay in the browser but, after that it's comment is giving in your life.

[00:09:16] No one goes off the top of this it's actually so you have it.
>> Brian: Yes and Jason are like Is this what you're yes then folks like you Yeah.
>> Brian: That's the only configuration we did for it.
>> Brian: Is it standard and then standard-react?
>> Brian: That might be it.

[00:09:48] That's not how it is? Yes.
>> Brian: So someone is suggesting, John D. is suggesting that you put this in your ES Lint [INAUDIBLE] to say M.
>> Speaker 4: I found it. The name of the file has a typo.
>> Brian: Okay cool.
>> Speaker 4: Thank you.
>> Brian: All for the case that seems so that work.

[00:10:32] So who is seeing it just as a heads and here. Okay then let's have any errors that they might be saying.
>> Speaker 2: One can't seem to find the landing page
>> Brian: I can't find the lemon page.
>> Speaker 2: I can't find it.
>> Brian: So like if you just change the URL to be that, just like that, it doesn't work.

[00:11:08]
>> Brian: Mostly, what I'm caring about is the pound slash.
>> Speaker 2: Right. No, it's still not saying it's defined.
>> Speaker 2: Can we define it anywhere other than, do we define landing anywhere other than landing.jsx and clientapp.jsx?
>> Brian: Did you do model that exports because lending at the bottom did oka and then incline after JSX you poured in here.

[00:11:47]
>> Speaker 2: Yes exactly like that.
>> Brian: Okay and then route you pass it into component?
>> Speaker 2: Yes.
>> Brian: That's that's the end of it and that's that's the extent of everything that lending does.