Challenge 1: Solution, Part 1

[00:00:00]
>> Mike: We're going to go through the solution for this exercise. So what we want to do is go to this file. And basically, we want to create a down structure that looks like this. So we've got an li and then an h4 that is a descendant of that.

[00:00:19]
And then as a sibling to that, we've got a span and image tag, so let's open up the file in question
>> Mike: All right, so, I'm just gonna move this off to the side so that we can see the structure that we're going for. By the way, if you didn't catch that, you can just drag tabs off to the right side.

[00:00:48]
>> Mike: So we want an li on the outside. It's gonna be li.GroceryItem.mui-panel.
>> Mike: And then inside of that, we're gonna have, expanding this out a little bit. So h4 and then a span, so we'll just say there's our h4 and then we'll have parentheses, and actually we don't need it, because we're gonna go as a descendant into it.

[00:01:19]
So, the span has a click for more class on it. And the image has an item image class. Span.click-for-more>img.item-image. So if I tab now, we've basically created the appropriate structure. Now that was like, so let me prove that it is the appropriate structure. We're gonna hit Save, and let's look at the app.

[00:01:52]
>> Mike: Looks like I'm not running.
>> Mike: Scroll all the way to the right, we get something here, right? We're not seeing anything yet, let me make sure that everything looks proper. We don't have anything in this h4.
>> Mike: Something like that. And if we look back and refresh, there we've got our click for more.

[00:02:24]
So now we just have to create our image attribute there. And so the general form, we're looking for is something like this, right? So this will actually work, so that's like frozen food, right? So I'll copy that, go over here, paste that in, oop. I had something else on my clipboard, apparently.

[00:02:52]
>> Mike: We don't need to look at these side by side anymore. We'll get back into this mode here. Copy and paste. We're serving these images on same origin. So we can use an absolute path, and same origin is implied. The point I was trying to make about interpolating dynamic and static content, in react, we cannot simply do something like this and start putting our JavaScript in there.

[00:03:23]
Basically, value of this attribute it is either static or it's dynamic. So, as soon as we find ourselves wanting to mix, wanting to put something in there that's dynamic, we have to shift into a world where we're basically building a JavaScript expression inside these braces. And if we convert this quotes to back text, we're basically using these template literals as a JavaScript language feature.

[00:03:52]
And inside here, we can put whatever it is of interest. So I'm just gonna copy this because this is apparently how the name of the category is rendered as little title above the row of groceries. We'll put that down here and we need to do one last thing, two lower case.

[00:04:15]
>> Mike: And if we refresh, it should work. Now depending on how your file system is set up, you may or may not actually need to make it lower case or not. So it is based on how you've formatted your disk, like sometimes capitalization just doesn't matter for file names at all.

[00:04:33]
So maybe that you're able to get it like no matter what, this will work for everyone, now that we've said two lowercase, the file name is lower case, so even if you have a case sensitive disk, should be good. And now we have these little tiles, right? I'm gonna say that was sort of unrealistically complex, I will show you how I would have done this more realistically.

[00:04:59]
So you can see that what you're trying to learn is not how to create this huge, long expansion. It is multiple little rapid expansions. So I probably would've done something like this. li.GroceryItem.mui-panel, tab, Enter, and then h4, tab. And then, Click for more and here I would say span.click-for-more, and then an image inside of it.

[00:05:31]
And then here, I would have started building my image. But you see, because of the cursor placement is so nice, right. Because we can say, if we go all the way back to this here. When I hit tab like my cursor is in just the right place to hit enter and to start working on my next expansion.

[00:05:49]
This is easier for me to think about, cuz almost no thought is required to kind of transform this into what it expands to. This, to me, is obvious, because it is like a CSS selector for this particular element. So I would do it in a couple of steps, more realistically.

[00:06:12]
But as you go through, just took like, start with just things that completely align with CSS. And then after that, start adding in this multiplication thing. You can even, as you start to get more complicated, do things like this.
>> Mike: We didn't cover it but,
>> Mike: You can add attributes the same way you would add them in CSS selectors and expand them out.

[00:06:38]
So to me, this is as easy to read and as easy to remember as CSS. So this is what sticks for me. The rest of it, I kinda just write by hand. So even at a basic level, you get a lot of mileage out of this.