AdoptMe Project Setup

[00:00:00]
>> We are gonna move on to Tailwind. Again, this is my fifth time teaching intermediate React, eighth time teaching complete intro to React. I have taught styled-components, I have taught emotion, I've taught Tailwind, there's a bunch of ways to do CSS with React. If you ask me, Brian, how do you do CSS with React?

[00:00:20]
It's mostly CSS modules which is just plain CSS, but I'll import it into individual components. I quite liked that method of doing it. But I want you to see Tailwind because a lot of the React community has kind of moved towards Tailwind. But styled components is great, emotions is great, vanilla extract, there's a bunch of interesting ways of doing CSS and JS.

[00:00:48]
In fact, Tailwind doesn't really have a ton to do with React itself, it's just very common for the React community to use Tailwind. So we're gonna talk a little bit about it. So, Tailwind follows this idea of Atomic CSS where rather than writing CSS style-sheets, we're just gonna put a lot of tiny classes and then the Tailwind compiler will make this application for us with a very minimalistic style sheet for us.

[00:01:25]
So the Tailwind compiler will actually reads all of your React code, all the different ways that you're using Tailwind and then it'll generate the minimal viable CSS style sheet. So your styles are always gonna be tiny. The trade off here is that your CSS classes are gonna look pretty ugly.

[00:01:46]
They even admit that in their docs, so I'm not throwing any shade where they don't already throw it at themselves. It's fun, I'm always torn on how much I like Tailwind but I'll let you decide. Okay, so what I want you to do, hopefully you've cloned that Repo.

[00:02:10]
I'm gonna grab this one here context and I'm just gonna copy. I'm gonna put this just on my desktop, paste And I'm gonna call this current or something like that. And then I'm gonna open this in my VS code. So first thing you should do on here you should npm install just to get all the dependencies.

[00:02:43]
So npm i will get you all your node modules. Looks like it had 277 packages installed. You might have vulnerabilities, I've actually locked down this package.json pretty hard. So you can see here it's all exact versions here. The reason being is I can only guarantee you that all of these dependencies work together.

[00:03:07]
And as these libraries update over time, things will break. They'll update things, they'll make breaking changes, they'll make vulnerable changes, things of that nature. So, I'm going to invite you to use the exact same versions I'm using because I have tested all of these things to make sure they all work together.

[00:03:25]
Feel free to try and upgrade them later. But for now, please just stick with me on the versions that I'm using. By virtue of that, there are zero vulnerabilities today, but I guarantee you in my 275 packages that are in this particular project, there are vulnerabilities in there somewhere and they're going to find them.

[00:03:44]
And if you take this class next year, this is gonna be 100. It's okay, no one's attacking your computer right now, it's fine. Just stick with me and then later you can go upgrade it if you want to, okay. So if you have not taken the complete intro to React just a bit of a tour, this is an Adopt Me Pet application.

[00:04:06]
It looks just like this, it has two routes, the homepage, the details page. This is all built using Vet. It's using React and React query and React router, it has ESLint, it has prettier that's mostly. If you go to the package dot-json you can see we have a dev.

[00:04:31]
So if I say npm run dev, I can go to localhost 5173. That's gonna open Firefox which I did not wanna do I actually use Firefox most of time, but for this class I'll use Chrome because I imagine most of you are probably using Chrome. Okay, here we are, that's the app and here's our application.

[00:05:03]
It's a little API that is run by the Frontend of Masters team, so that's where all these pets are coming from. And Luna of course is my little jerk of a dog that I love, she's very cute.