This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Code Setup" Lesson
[00:00:00]
>> We starting here in Intermediate React. This is basically what I just told you. So let's go ahead and go clone our repo here. Specifically, again, we want the 12 portals and refs one, so just get used to copying and pasting this over and over again. So I'm gonna go, I'm gonna clone this.
[00:00:22] So I'm just gonna clone to my desktop. That's fine, okay, I'm just gonna say git clone, blah. But don't do that twice, what are you doing? How dare you? Okay, so now I got my project app here. And I'm just gonna keep this outside of it so. Whatever, that's fine.
[00:00:59] I'm gonna say copy -R, you can do this totally just by saying, open, blah, right? I'm just doing this directly here. I'm just gonna be copying and pasting this, right? So now, I have a complete copy of the repo here and 12-portals-and refs. You can even just rename it to something like intermediate, or something like that.
[00:01:23] And then I'm just gonna copying in, right, working on it and then blowing it away and recopying it every single time. Okay, and so I'm just gonnna code intermediate. And now, I have this open. So, let's go ahead and get a little acquainted with what's going on in this project.
[00:01:46] First thing I'm gonna do is I'm gonna run npm install to get all of my dependencies installed. And let's look at what dependencies we installed here. So, you can see here, this is a eslint project, so we have all of our eslint checking, so that'll help. It's a pretty minimal config, it's mostly just like did you declare variable and not use it?
[00:02:13] Are you using a variable that you didn't declare? Things like that. And then there's some React specific rules like the Hooks rules and accessibility and things like that. It's using parcel 2 for the build process, which is a really nice build tool. If you haven't used it, if you're not familiar with it, just go check out that section on Intros to React.
[00:02:37] It's using prettier as a code formatter. So if you see my code shifting around every time that I save, it's prettier reformatting it. It does have class properties coming in from babel, so that we can do es 2022 class properties. Were using React version 17.0.2. Again, React 18 is about to come out but it has not come out yet.
[00:03:06] And then you can see here we're using react-router-dom. And let's see the app code here is pretty straightforward, React Router app. There's two routes. There's details and there's the homepage. You can see that it's using some context. There's error boundaries, there's a search page. Let's actually just, I guess, get this running.
[00:03:31] If you come down here into your app, you just say npm run dev, and that should start the dev server. On local host 1234, you can see it's a nice little pet adoption app here. So you can search for dogs, and if I click Submit, you'll see here that these are now just dogs.
[00:03:50] If I change that to be cats, Submit, it'll be just cats. And you can see that contextually it will show you breeds from the various different animals. And it's doing this by requesting against an API that Frontend Masters hosts, called the dev API's pet API. Okay, so that's just kind of a whirlwind tour of the app.
[00:04:20] If you click on one of these, it'll take you to their details page. So you can see this is my tiny cute little Drip dog, Luna. There's a carousel here that you can click on the various different pictures. And then you can click Adopt, and that'll pop up a modal.
[00:04:40] And if you click this, it will go back. That's the entire app. It's relatively simple. It's meant so that you can just see all the various different pets. So again, to reiterate the various different sections, do not build on each other, right? They're all kind of self-contained silos.
[00:04:56] So if you do code splitting, you're gonna have to reset your repo and go back for server side rendering, right? We're not gonna do code splitting and server side rendering at the same time. Okay. So the first thing I wanna do, I've now shown you this entire app.
[00:05:16] I've got you to clone it, and we're gonna ignore it for a little bit.