This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "ES6 Template Strings" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Brian Holt: That's not, I mean it's cute, right? Like we're showing titles. But that's not necessarily what we're going for. So let's make this a little bit more robust and show more things here.
>> Brian Holt: So let's do this. I'm going to say div className='show'.
>> Brian Holt: Outside of that we're going to put an image.
[00:00:30] Source of the image equals S. We're going to do curly braces. And then I'm going to back ticks, okay. Which back ticks, if you don't know what those are. It's next to the one underneath the tilde. And a back tick in ES 6 means, ES 6 template string, right.
[00:00:52] So let me write it out first. And I will show you how you could rewrite it into ES5. Show.poster and class name equals show-ing close. Okay. So basically what this is saying is like this is a string, right? And so instead of using quotes, I'm using back ticks.
[00:01:22] But now I can use the special terminology of dollar sign curly brace. Which if you've ever written bash scripts before, that looks pretty familiar, right. And then this inside of here is a JavaScript expression. So in this particular case I'm doing show.poster. Which is actually going to be the correct URL to find this particular image.
[00:01:42] Now if I wanted to rewrite this in ES5, what I would do is I'd turn this into single quotes. Single quotes.
>> Brian Holt: And I would say plus show poster. Right. That's the equivalent way of doing it without back ticks. Just doing string concatenation,
>> Brian Holt: But I think this is a lot cleaner and prettier side.
[00:02:14] I like doing it that way. Any questions about ES6 templates? Come on. There we go. Good? Feel good about that? Okay. I got really sick of doing plus signs everywhere. So that's why I was very grateful for the back ticks. Okay. <div classname="show-text"></div>
>> Brian Holt: Here we're going to do H3 class name equals show-title.
[00:02:54] And then we're going to do show.title.
>> Brian Holt: We're going to do an H4 here. class name equals show-year. And then here, I want to do parentheses. The reason why I'm doing parentheses is actually literally want to see parentheses, right? There is no special meaning to these parentheses. I literally want to see the the year in parentheses.
[00:03:26] Then we do show.year instead of the curly braces.
>> Brian Holt: And then here i'm going to do p className=show-description.
>> Brian Holt: And I'm going to do show.description.
>> Brian Holt: Inside of that p tag. Okay.
>> Brian Holt: A bunch of mark up, but hopefully you got it. Let's give you some time to finish typing that out.
[00:04:09] Might finish this section, take a really brief big break for people. Okay there will be a break soon. If anyone's feeling like their mind melting or something like that. Okay. So let's save that, make sure that I'm not getting linting errors. Look like I'm okay right now. So let's go back over to the browser and refresh it.
[00:04:39] And that's whatI did. I did something wrong. You should be saving something kind of this. This is kind of ugly right now. Particularly with these huge posters. And that's because I forgot to encapsulate into shows. Yeah, that's exactly why. Okay, so come back over here. And between container and the data.shows.map.
[00:05:03] We're going to put just an extra div in here. And call it shows. Indent all that a little bit more. And close that. Okay so this one right here, line 6. And this one down here on line 17. That's all you need to put in to make the sales stop being so ugly.
[00:05:26] [LAUGH] Okay. So save that.
>> Brian Holt: And now if we refresh it, it's only slightly better. What did I do wrong here? [LAUGH]
>> Speaker 2: Show-card.
>> Brian Holt: That's what it is. Show-card right here. Yep, my notes are wrong. Okay. So here on line eight, I just changed this from show to show card.
[00:06:11] Okay. Getting better, only slightly worse. Did I change all these to be show card? It eventually does get better. I think I called all these show card dash.
>> Speaker 3: But in the styling it's all wrapped in the 8.
>> Brian Holt: It's all wrapped in the 8.
>> Brian Holt: I think my issue here is.
[00:06:45]
>> Brian Holt: Yeah, everything in the show card image, show card text, show card title. Yeah.
>> Brian Holt: Okay, so show-card-image. Show-card-text. Show-card-title. Show-card-year. And Show-card-description. So you have to update. Basically, all these classes to have show-card-whatever.
>> Brian Holt: Okay let's try that,
>> Brian Holt: And now we actually get decent looking things right.
[00:07:28] That's what we were going for. So I have a bunch of scroll bars, that's neat.
>> Brian Holt: Yeah I'll fix that in a bit. Well whatever, it's CSS. No one cares how CSS is in this workshop. I don't care about it in this workshop. I think I have some sort of like overflow visible or something like that.
[00:07:52] It's hard to see. Or. That's exactly what it is. So, if you want to go get rid of that in the CSS. There is an overflow, scroll Y on the text and you can get rid of that if you want.