Intermediate React Course Overview & Setup

[00:00:00]
>> Brian Holt: In this particular course, we're gonna need to go over various different modules of how to integrate different things with React, how to test React.
>> Brian Holt: Other things that are kind of building around the ecosystem with React. There's a previous course on this, so we go over the introduction to React.

[00:00:18] And we're going to use the application that we built in the introduction to React in this course to do things like integrate Redux, how to build Preact. But the nice thing about this particular course, you don't really have to understand the previous application to understand how this is gonna work.

[00:00:36] And if you wanna skip around, all these modules are gonna be self-contained. So we're gonna start with If you go to bit.ly/react-v4 it's gonna take you to this page. The first 12 are done in the previous course, right, and then we're gonna do 13 through 20 today.
>> Brian Holt: As a reminder these are my teacher's notes here, so if you fall behind, or you wanna see exactly what I'm talking about, or you just wanna share this with other people these notes are open source.

[00:01:10] They're meant to be shared with everyone, right? So I'm super grateful for Frontend Masters for allowing me to open source all of these materials. So if you wanna look at testing, these are literally the notes that I'm going over here. It's actually, but I have this in little surface for right here, it's that's what I'm referring to, so you can see these codes, snippets, you can see all those kind of stuff here.

[00:01:31] Cool? Cool. So, let's go ahead and go clone our repo here, so I'm gonna go over here, I'm gonna clone a repo right here in the Complete Internal React v 4, copy that.
>> Brian Holt: And I'm gonna go here and clear. And I'm going to get clone, blah. Nope.

[00:02:00]
>> Brian Holt: Well I have it, but I"m gonna remove it and clone it again.
>> Brian Holt: So on a separate note, if you want to see my complete results after I finish these things, there's a bunch of branches here that already exist, right? So for example, we're about to do testing, and if you click on this testing branch right here, this will be the complete testing solution, right?

[00:02:27] And again, I will point that out at the end of each module, as well. You can come in here and you can see that the tests already exist.
>> Brian Holt: So each one of the various sections has it's own branch.
>> Brian Holt: And to show you how to do that with get very quickly, I'm going to go into the recently cloned, complete intro to react v4.

[00:02:48] If I wanted to clone the existing testing branch, I'm going to say, get fetch testing, sorry, get fetch origin testing. Okay, I fetched it and I'm gonna say, get check out testing. And now, if you look, I have this commit right here at the end of the test.

[00:03:16] Okay, so that's how you do that. But I'm gonna start back on master, git checkout master, you can see here I have the last commit here was number 9, which is exactly where we want to be. And I'm going to open this in vs code. So I've opened vs code.

[00:03:36] Some of the things here that I want to point out that you probably want to install right away. E S lint. This will run E S lint right in your browser or right in your co-editor. Very, very helpful. In general, I tend to use the Night Owl theme which is written by another friend in master browser.

[00:03:54] It doesn't look good on the projector, so I'm not going to use that today. But I would suggest that one. MPM IntelliSense, definitely install that one. Pretty cool which will help you. As you can see here it will start doing autocomplete from your package.JSON, super helpful. Prettier, you'll notice throughout this entire course that my code will be rearranging itself and autoformatting itself.

[00:04:17] That's due to Prettier if you want to understand how that works as well as the ES Lint, some of the other stuff, please go in and watch that previous section and enter the React. We'll talk about TS Lint later, but this is going to come into play with the type script module And this one, we'll talk about when we get to the emotion part of the webs, but this is actually, it's forced styled components.

[00:04:45] But it's essential for emotion as well, so I suggest you install this VSCode styled components as well.
>> Brian Holt: Lastly, let's talk just about some of my settings.
>> Brian Holt: I'm using the monokai theme. Again, that looks good on the projector, but typically I use Night Owl when I'm at home.

[00:05:06] In order to Prettier to run on its own, we do editor.formatOnSave, which is true, as well as prettier requireConfig here. So have that work as well. I'm using Dank Mono as my font. I highly suggest it. It is $50, which it's totally worth it. This guy Phil spent a bunch of time designing this font, so it's worth it.

[00:05:29] But otherwise, you can use sphere code. That one works really good as well, and that one's free, and you wanna enable font ligatures for that. So the first thing we're gonna do into our projects that we've recently cloned here, we have to do npm install, which will go out and install all the dependencies which are coming from the package.Json.

[00:05:49] If you don't have Note installed already, you will also have to do that. If you do not already, you will have to go and sign up for a pet finder API count.
>> Brian Holt: Which, let's see I have a link to that inside the course Note. That is going to be inside of here and so the State Lifecycle Methods so Number 6, click on this link right here.

[00:06:21] It takes you to this pet adoption thing. You will have to sign up for it. If you're not in the United States, you do have to sign up with a United States zip code. You can use mine, which is 98103, which is in Seattle. And you see an API key here and an API secret.

[00:06:41] Don't use mine because after this course, I'm going to get new ones. [LAUGH] I worked at Reddit long enough that if you show secrets that people are going to eventually use them. So go sign up for your own and we'll build a pet adoption app. So what I want you to do is copy this, come into your application, make a new file.

[00:07:07]
>> Brian Holt: And save that under the root directory of your project, and call it .env
>> Brian Holt: Okay, use the dot that's fine and we're gonna have two entries in this API key, all caps equals blah. And the secret, we'll copy that as well and we'll have API secret equals blah.

[00:07:33] If you took the previous version of this course, you don't have to do any of the stuff, you can just continue on with the build application that you have.
>> Brian Holt: So now, you might have to restart your server now, npm run dev
>> Brian Holt: Should start a lot faster this time.

[00:07:53] So because I run this and I had a cache and a dist, it's actually reading that out the cache and it's assuming that it's not changing. So I think if you remove that and then say npm run dev again.
>> Brian Holt: It should be working, that's the hope.
>> Brian Holt: Cool.

[00:08:19] That solved DIV. If I put like dog and Alaskan Malamute and I submit that, you'll see that I have, I searched for Alaskan Malamutes in Seattle. Which there are a lot of them because a lot of people in Seattle have Huskies and Malamutes and all that kind of stuff.

[00:08:42]
>> Brian Holt: Cool, so that gets us what this application can do. You can click up here and it will take you here to the search page. You can click here, it will take you back to the homepage. So if you click on one of these, it will take you to the Details page.

[00:08:55]
>> Brian Holt: You can click Adopt here, and it will say, Yes or No, but it doesn't work [LAUGH] we just did that to demonstrate how to do a modal.