Data Loading Exercise

[00:00:00]
>> So node dev 2. To get the second exercise up and running, you're gonna be on port 4002. So make sure you're on the right port, the right page, and that everything is squared away and going for you. Now, actually something just happened to me, and I'm actually still not sure why this happens.

[00:00:20]
I just noticed it yesterday, sometimes this will happen where you'll get this tailwind CSS 404. I don't know why because that really shouldn't be happening, because it should be running the the build of the tailwind file 2. But if that does happen to you, then what you're going to do is run npm run build with a -w for workspace and you want to run the build for the workspace that we're running, which is exercises m.

[00:00:48]
Instead of the slash, it'll be a -m here, I'll show you. It'll be exercise-o2-data-loading. And that will just run the build for that and that should generate the tailwind file. I'm not sure why that tailwind file is not being generated cuz it totally should, but if that happens, that's what you do.

[00:01:11]
Okay, great, so closing all this app, going into our README for this one. So data loading and remix. Loading data, for most applications, you're going to need some data, you can't just like code it all up and React components or HTML or something. You're going to want to load some data.

[00:01:33]
In our case, we're loading blog posts, but you're going to twitter.com they're gonna load the tweets, well, wherever you go. And there is a really nice convention for this in remix using loaders. I'll give you an example of how to use the loader and talk a little bit about responses and stuff, so you can read through that.

[00:01:52]
For our exercise, we're going to be loading these posts, that's the data. You can call these posts, whatever you like if you want to. And because this is not a react workshop, I actually give you the code for the JSX and stuff cuz you do not care, I do not care, who cares?

[00:02:09]
Nobody, so I just give that to you because we are talking about remix. And so I will give you that to copy paste. We are just working in the one file, and then this one does have a couple extra credits. One to make TypeScript happy. When I say make TypeScript happy, what I actually mean is help TypeScript help us.

[00:02:32]
And then the second is to switch to Prisma for data, so we actually have a database rather than hard coding our stuff. So that is the exercise, feel free to read through the background, and then get started.