00:00 All right, so let's make a function component called box and here we're going to take all of our props. These props will be react.componentprops div and then we'll return a div with all those props applied. Now just from this we can actually update all these divs to be a box and now we don't

00:19 have to worry about anything else. Everything is still working. We're literally just taking the div, we're accepting all the props and forwarding the props along to the div. So we haven't done anything all that special yet but we do want to do a couple of special things with the

00:36 class name and the style props. So we're going to pluck off the class name here and the rest of these will be props and then I can say class name equals box and that could be our default. Now you

00:51 notice all of the other class names were not applied. If we open this up we see class is box even though we're passing box small and that's because this props object is now missing the class name that's being passed along because we pluck it off here and we're not doing anything

01:06 with it. And so what we need to do is do some string interpolation to add the class name right there. Now we've got our class name now we're merging the class names and you'll notice it has box, box, box, small, box, box, box. So we're going a little bit overboard on the box there.

01:25 And then additionally the sizeless colorless box also has box, box. So we can actually come down here to all these class names here and get rid of the box from those we can get rid of. In fact we

01:40 could get rid of the entire class name. We don't need that specified anymore. So now we get box and box small all of these but on the sizeless colorless box we're getting box and undefined. And the reason is because we are no longer passing a class name. We could say class name equals an

01:56 empty string and now we get rid of that undefined and we just have like this extra space in there and that I mean undefined isn't technically hurting anybody unless you have something styled with undefined which would be kind of odd but I don't like this as an API. So what we're

02:10 going to do instead is we'll just default this to an empty empty string. There we go. And so now we have box and a space. If that bothers you of course you could do trim if you really want to. That works fine. It doesn't technically really bother me but we'll leave it there just to make

02:29 people happy. And the next thing is that's common across all of these is the font style. So let's pluck off the style attribute and yeah we could default that to an empty object. I actually I don't think that's totally necessary because you can what we're going to do is spread this style

02:49 to merge these things together and you can spread undefined. But anyway we'll say style and we'll spread the style that style. Oh and this needs to be interpolated object. There we go. And now we can take this font style pluck that out stick it right there. We can save that and

03:10 let's take a look. We've got font style italic background color light blue. Perfect. And now we've got font style italic color light blue. Even though we have it defined twice it's being merged into a single object and so whatever is in the style here is going to override this font style

03:28 which means that we could actually say font style bold or what is it heavy is it heavy. I can't remember what that what that is. Oh dear. We've got to find this out folks. Let's do this together.

03:41 The font font style we got italic. Oh right. Yeah we're talking about font weight and stuff. Oh what can you do. You really can only do those things. Okay well that's fine. Let's do font weight then font weight. And then our font weight options. What are our font weight

04:03 font weight. Oh right. It's numbers. Okay we'll go to font weight 900. Boom. All right. Medium pink box. Yeah that's a hardcore pink box folks. I'm going to leave that for sure. But then on the

04:18 rest of these we don't need to specify a font style because that is being specified for us. And in fact we don't even need the style object for the sizeless colorless box. So there we go. Now we have the ability to customize the style and customize the class name

04:36 but we have some defaults so we don't have to do all the things that are common across all of the boxes which is pretty cool. And this is a relatively common pattern to just kind of wrap a built-in or like a native html element with some default values and things like this

04:57 for this type of an experience. And we're going to take it even further in the next step but this should give you a pretty good idea of how to compose together class name and style attributes and how to slurp up all the additional props and forward those along. So like children

05:13 is included in this props object for example. If you want to dive a little bit deeper into this and you're kind of scrunching your head on some of this stuff I recommend console logging some of this stuff just so you can see wait what is in that props object and all that stuff. But a lot of

05:29 this is just javascript merging of strings and objects and stuff like that. So which is one of the things I love about react is that it's lots of it's just the better you get doing react stuff the better you get at javascript. So hope that was fun and interesting. See you in the next one.