Challenge 1: Rapid Expansion

[00:00:00]
>> Mike North: Okay, so we've got this grocery app, hopefully everyone's been able to start it up. And what we wanna do is, to the extreme right of every row of like items for particular category. We're gonna add a little tile there that basically says, click here for more. So let's say we're showing the first ten items.

[00:00:19]
And we wanna give people a place to click to show me the full list of everything in this category. And we want something that kind of looks the same as these tiles that are based on data. And so we're gonna have to create some HTML for that and you'll note that each has its own little image here that sort of matches the appropriate category.

[00:00:41]
So, where we'll need to modify things is, it's in this file here. It's a typescript React file, so, it's a .tsx extension. Don't panic, we're gonna just be dropping a HTML in there with a little bit of dynamic variable just for the URL. So if click that link, you'll find yourself in this file here.

[00:01:05]
And what you're gonna look for is this thing that says code for exercise one here. And you're just gonna be putting HTML below that line, or replace that line in HTML. But this is effectively a comment. So whatever goes here, think of this UL here, this is the horizontal row of grocery items.

[00:01:27]
This here, think of that as like, the array of items based on data that we retrieved. And then, after that, you're gonna add one more that's just static. It's always there of our list of what data we got back. And that's gonna look like what we see in the image here.

[00:01:43]
That's gonna look like these things to the right. So the per-category image,if you start up your app, it follows this form here and you are gonna have to change this <lower-case-category-name> based on the category name. All right so you may wanna look in other places in this file.</lower-case-category-name> to see for example, I see that there's like a word, dairy, here.

[00:02:09]
And if I look up here like there might be, looks like that's a category name here. So we may want to like follow that same pattern of putting things between places. If you've never used React that's why I'm explaining that to you. So maybe you can use that and arrive at a conclusion that will get you a dynamic piece of data in this large static chunk of HTML.

[00:02:33]
And the point here is, use Emmet. Even if you wanna take a couple of passes at it so that you can figure out the thing that would explain it all at once. And then experiment with how you could explain it out step by step and save yourself time.

[00:02:47]
Basically use this as a structure to get comfortable with expanding things out. This is the HTML structure that you're gonna look for. This question mark here that is for you to fill in. Remember this image is different depending on what category we're looking at. And you're gonna have to lowercase the categories name in order to get the right URL.

[00:03:09]
For those who are not React indoctrinated yet just be aware of two things. Number one in HTML, that is in JS actually I should say, the stuff that looks like HTML in this file. You cannot say class equals something to add classes to dumb elements, the reason is this word has a very specific meaning sorry, this word class has a very specific meaning in JavaScript.

[00:03:36]
And we cannot use it there, so class name is what you'll wanna change it for. And then finally if you've never used JSX before to mix static values and dynamic values, you will basically have to construct a string like this. Rather than saying my value is as a string.

[00:03:56]
And then shift into the world of like, here's the JavaScript value that I'm omitting. So you basically wanna omit the whole thing. You wanna construct the whole string. I advise using something like a template like this where we've got out backticks and then this will be evaluated as a job descrip expression.

[00:04:16]
So this should give you the little tiny subset of react you need in order to make this work. In the end you're looking for something that looks like this. So why don't we take about let's say 25 minutes just in case people have set up issues. And in the end like you want something that ends up looking kinda like what you have on the right.