This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Course Repository Tour" Lesson
[00:00:00]
>> Brian Holt: I need you to, if you haven't already, go clone the GitHub repo. So if you've taken the complete intro to React, obviously what I have in the docs in the repo is going to differ very slightly from what I've actually written in the course. Because some of that's written on the fly, and there's questions and so on and so forth.
[00:00:20] So I'm actually just gonna start with a fresh, clean clone of the repo. So I'm gonna say,
>> Brian Holt: Right here, get clone git@gitHub.com.btholt this.
>> Brian Holt: You can get this URL as well just by going to the repo, clone or download, copy that, the screen button here clone or download.
[00:00:50]
>> Brian Holt: And then, I'm gonna go into this and then paste that there, git clone that, okay?
>> Brian Holt: Okay, and then I'm going to go into the repo that I just cloned and I'm going to say npm install.
>> Brian Holt: So probably a good idea every single time that you go from module to module after this.
[00:01:23] To you can just either clone a new repo if you want to or at least run an npm install again, up to you.
>> Brian Holt: Okay,
>> Brian Holt: So I'm gonna open this in code.
>> Brian Holt: So let's just get you acquainted with this project really quickly. I'll just do it here from code.
[00:01:55] If you go look in your package.json,
>> Brian Holt: It's using parcel to build this. It's a React project, it has ESLint and Prettier built into it. If you have questions about any of these things, again, refer to the intro to React. It has a frontendmasters/pet client, which will make API requests for you to see animals to adopt.
[00:02:17] And it uses reach/router, as well. Down here you can see that you have some scripts to use. So one of these here, if you need to clear the build cache for whatever reason, there is a clear build cache function here that will remove that. There is a dev thing which will run this project.
[00:02:36] So if I open my client right on, say npm run dev. It'll start running the developer server that I can reach that. If for whatever reason you're offline, or our API isn't working the way that you're expecting it to, you can do dev:mock. So like this, whoops, npm run dev:mock.
[00:02:57] And this will run the API client in mock mode, which means that you'll be getting fake data and it won't be going out. So if you're on the train watching these videos offline, thanks Front End Masters for doing offline videos. You can actually run this client offline and the entire project works offline, which is cool.
[00:03:14] Okay, you can run npm, run format which will format everything with Prettier. And lint it, and then my favorite are the existing tests that if you send npm run test" it says, log there are no tests, [LAUGH] right. No test specified, right there. That's it, so right now I'm gonna run this in npm run dev mode, like that.
[00:03:41] And this will open a development server on 1234.
>> Brian Holt: Eventually, there we go.
>> Brian Holt: And this is the project that we built together in the complete intro, right? So as of writing results, it's location is in Seattle. So if I submit here, this will open these particular animals.
[00:04:07] The only two locations this works in right now is Seattle, Washington and San Francisco California. We'll work to make this work in every location, but for now it's only working in these two locations. I'll look at Theo, you're adorable.
>> Brian Holt: And so here you can click adopt Theo.
[00:04:28] If you click Yes, it'll actually take you to the adoption page where you can adopt Theo.
>> Brian Holt: So go back.
>> Brian Holt: And then you can select, if you move from dog to horse,
>> Brian Holt: You can see it changes the breeds of the horses like miniature horses,
>> Brian Holt: Like Gidget.
[00:04:58]
>> Brian Holt: And then you can change the theme of your application as well.