Complete Intro to React, v2 (feat. Router v4 and Redux) Loading JSON Files

Transcript from the "Loading JSON Files" Lesson

[00:00:00]
>> Brian Holt: So we need to add another loader. We wanna be able to load JSON files. Reason being is that I have a bunch of just JSON data for us to consume. But you have to tell Webpack how to consume JSON. So what we're gonna do here is we're gonna put another loader.

[00:00:18] And not particularly important the order, say test: and we're gonna say /\.json. So if it ends in JSON then you're going to use a loader of, you probably could probably guess, json-loader.
>> Brian Holt: And all it does is load JSON files for you so you can import JSON files just like you import js files.

[00:00:51] So, we put in this JSON loader right here so now we can put in, we can load JSON. If you wanna look at the data, that JSON file, it's just a bunch of Netflix shows like I told you. This is just a ploy to get you to subscribe to Netflix.

[00:01:08] And it has an IMDB id, has a poster, has a trailer, all that kind of stuff. So now we can pull this into our app. So go to search.js and what we want to do here is we wanna to say import. Preload from'../public/data.json'. This is gonna just load as a normal JavaScript object as you may expect.

[00:01:36] Okay. What we gonna do here's we gonna say className="search".
>> Brian Holt: And we're going to do, I'm just going to do, like a dirty little trick real quick so we can kind of visualize our data. I'm going to say <pre><code>{JSON.stringify()}
>> Brian Holt: Preload, null, 4. Preformatted that's an HTML tag.

[00:02:14] Code which means I want to put code out into the page. Those are just HTML tags, part of HTML specifications. Then this is a JavaScript expression right, curly braces, and then JSON.stringify. I think Most of us have debugged code with JSON.stringify before.
>> Brian Holt: Okay, worst interview question I ever got asked in the history of being interviewed.

[00:02:37] What are the three parameters to JSON.string? [LAUGH] And I was so mad with the guy. I was like, I know the answer to that question, but I think it's really stupid. I didn't get the job, because I was kind of an ass to him about it. In case you're wondering, the first one is the date that you're trying stringify, right?

[00:02:57] I think Moses got the last one that what the indentation you want, right? But null. Like you always put null, and you never put anything other than besides null. So what is it? It's a replace your function, that'll actually go through and replace things in your JSON structure.

[00:03:11] I don't know why they thought that was a good idea-
>> Speaker 2: Passwords.
>> Brian Holt: Passwords?
>> Speaker 2: Yeah, you want to obfuscate passwords in your data.
>> Brian Holt: Yeah, I mean, I guess I don't know why I would want that to be a part of the stringify function though. But I guess people do it, so.

[00:03:25]
>> Speaker 2: What would you want formatting is part of the string of 500.
>> Brian Holt: [LAUGH] I guess. Fair enough. Could they have not just done four at comma null, right?
>> Speaker 2: [LAUGH]
>> Brian Holt: Okay that's the most valid reason I've heard so far, so. Kudos.
>> Brian Holt: So, come back here to your search page and refresh.

[00:03:48] And you should see, get rid of that, a bunch of just data being output to the screen, right?
>> Brian Holt: Cool, good so far?
>> Brian Holt: This pre code hack works great for React. The stuff that I would kind of follow away in the back of my head, it's really good for debugging code in React.

[00:04:16] I definitely stole that from Ryan Florence. Not invented here, put it that way.
>> Brian Holt: Cool?
>> Speaker 3: I'm getting like an unexpected token in the data.JSON.
>> Brian Holt: Did you modify it?
>> Speaker 3: No I didn't touch it.
>> Brian Holt: You need a JSON loader.
>> Speaker 3: I got to reload it. Thing.

[00:04:39]
>> Brian Holt: Yeah, make sure you start and stop your-
>> Speaker 3: Webpack?
>> Brian Holt: Yeah your Webpack.