Building Multiple Components in One File in React
Hi, and welcome back to the course. So what we need to do in this video is add in the order summary component.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

Now I just recorded this and my VS code completely corrupted and it was telling me it was corrupt so I had to reinstall vs code and delete that entire video after I created like two components. So yeah let's get started, we need to use this component in two different files, the shipping address and the payment information you'll see it's in here as well, so we need to use it twice. We also see that they both have an underlined and we use that here too, so we need to create an underlined component. Right, there's going to be this component too, so there's a couple components we need to create that are really simple. So we want to create them in one file and export them.

So let's go up here and let's go to our information folder in our components directory. Let's create a new file and let's call it info. Don't call it information helper, let me tell you it will corrupt your entire vs code. Okay and let's see... let's call it infoHelp.js. Okay, let's go ahead and import React from react and let's say export function and let's call it underlined title. This is going to take in a className like we always do and it's going to take in a title.

Let's go ahead and return a div with a className equal to brace's and then let's put in some backticks and then let's put in a dollar sign and some more braces and className. Let's then say underlined-title, and then let's just put title in here. Okay, this is the first component we need.

infoHelp.js

import REact from 'react';

export function UnderlinedTitle({ className, title}) {
    return (
        <div className={`${className} underlined-title`}>
            {title}
        </div>
    )
}

Now we need another component and that component is this right here, you see how it says four stickers $7.96 taxes and shipping and then total?

large

We've already done this in different places, but good thing we didn't create a component. It would have been more efficient and cleaner but now you're going to write it out again which is going to be better for you to practice. The goal of this project isn't to make a perfect project because you're going to learn less that way. It's better to apply different strategies and stuff just to figure it all out.

Okay, so let's go to vs code and let's make that component too. Let's say export function and let's call it InfoLabel, so what we want to do is copy UnderlinedTitle and then let's change the name to InfoLabel was taking a class and then we'll say title and then we'll say value okay, and then what we're going to do is take in the className and we're going to call this info-label okay, we could even call it info title to be more consistent see we have info-title? Let's say InfoTitle okay and then let's call this info-title.

Then what we want to do is put a couple of divs in here, we want a div with a className of info-title__title. Then we want to put in the title there and then we want another div which we'll name info-title__value and then we're going to put in the value.

infoHelp.js

import React from 'react';

export function UnderlinedTitle({ className, title }) {
    return (
        <div className={`${className} underlined-title`}>
            {title}
        </div>
    )
}

export function InfoTitle({ className, title, value }) {
    return (
        <div className={`${className} info-title`}>
            <div className='info-title__title'>
                {title}
            </div>
            <div className='infor-title__value'>
                <value>
            </div>
        </div>
    )
}

Then what we need to do is basically have styles for this, so let's just set these up so we can throw them in when we get to it. So let's go down to information and let's create a new file called InfoHelp.scss. We're going to say .underlined-title and we'll say .info-title and we'll say &__title, and we'll say &__value okay so we have that set up. We already know a few of the values, so let's just set this up. We know that's green and we know that's the normal font color, we've done this so many times we understand this.

So let's say that the value of the color #00CB79 and it has a font weight of 600 and a font size of 18 pixels. The title is going to have a font size of 14 pixels and that's about it. Now get those in there and let's go reference the design real quick.

InfoHelp.scss

.underlined-title {

}

.info-title {
    &__title {
        font-size: 14px;
    }
    &__value {
        color: #00CB79;
        font-weight: 600;
        font-size: 18px;
    }
}

Alright, looks good. Now we want a case where this can be green, we also need this to be a little bit different, this underline title, let's reference it. Yeah just font size, and font weight, that's literally all it is. We got this right, we even got the font size right. Yup we got that all right, it's been very consistent throughout the app, that means it's designed well. Okay, and this is just font weight with that color. So what we'll do is, we will... and I bet this is CCC right here, yep.

So we'll go into our code and we will say that the underlined-title has a font size of 14 pixels and a font weight of 600 and a border bottom of 1 pixel solid CCC right, and then this title is correct, we need a green title though. We'll say right here .info-title-green and what we'll do is say &__title also has a font weight of 600 and it also has a color of #00CB79. Okay, so get this code in here and that will set us up.

InfoHelp.scss

.underlined-title {
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #CCC;
}

.info-title {
    &__title {
        font-size: 14px;
    }
    &__value {
        color: #00CB79;
        font-weight: 600;
        font-size: 18px;
    }
}

.info-title-green {
    &__title {
        font-weight: 600;
        color: # 00CB79
    }
}

Okay, so we should be there. We have all the styles for these now, literally all we have to do is use these components and place them on a grid, so let's go ahead and use them and then place them on a grid. Okay, so we want to be in our shipping address because that's the one we're dealing with, it's in the same exact place. It's going to be right across the name so it's going to start at the name but be at the end of the column axis, so really really easy.

Okay, let's import the CSS file into our main.scss okay and it looks like I named it with a capital H, we can let that one slide, unless you are super OCD then you can change it to a dash with a lower case h. Alright, so we've imported that, now let's go up here and let's go into our infoHelp.js. We have our components here, and I mean in all likelihood we probably made a little mistake somewhere with the css or the classNames because that's pretty hard to get things perfect the first time.

Okay, so let's go ahead and let's use these components InfoTitle and UnderlinedTitle to form a new component called order summary. Let's write a new file, let's say orderSummary.js and we'll import React and component from react and we'll say that it is a class called OrderSummary and it extends component and we want to render with a constant, have a className and pull that from this.prop and then we'll say that it returns a div with a className, it takes in some ticks the className and order-summary. Now we can export it and we should be good. Okay so that should be set up and we just need to throw in our components.

orderSummary.js

import React, { Component } form 'react';

class OrderSummary extends Component {
    render() {
        const { className } = this.props;
        return (
            <div className={`${className} order-summary`}>

            </div>
        )
    }
}

export default OrderSummary;

So let's import them, let's say import UnderlinedTitle and InfoTitle from ./infoHelp. Okay we have both of our components and now we can use them. So let's go down here and let's look at our design and see what we need to use okay, we have UnderlinedTitle and InfoTitle, it's got order summary, so let's put that in as an underlinedTitle with the class theme of order-summary__title. Alright, the next thing we need is four stickers taxes and shipping and total.

So let's say InfoTitle className is order-summary__taxes and shipping right. What was the order in? Four stickers, taxes, and shipping, total. Okay, so we've got quantity or we could even call it subtotal and then we want to give it a value, a title of four stickers and a value of... I don't know 7.96 or something. And we're going to update these to taking custom values in the next video, but let's just get these in.

Okay, so we've got three more input titles. Next one is taxes and shipping and we'll just say tax-shipping, title is going to be taxes and shipping, we'll say that the value is zero, and then the last one is total okay. The total is going to be 8.02 and it's going to have a value of total, okay, we need to rename this class here to total as well.

orderSummary.js

import React, { Component } from 'react';

import { UnderlinedTitle, InfoTitle } from './infoHelp';

class OrderSummary extends Component {
    render() {
        const { className } = this.props;
        return (
            <div className={`${className} order-summary`}>
                <UnderlinedTitle className='order-summary__title'/>
                <InfoTitle className='order-summary__subtotal' title='4 stickers' value='$7.96'/>
                <InfoTitle className='order-summary__tax-shipping' title='Taxes & Shipping' value='$0.00'/>
                <InfoTitle className='order-summary__total' title='Total' value='$8.02'/>
            </div>
        )
    }
}

export default OrderSummary;

So that sets us up. Let's go ahead and import this component into our payment.js, our payment form okay. And then in the next video we will handle the grid and the values. So let's go to shippingForm.js, okay so we're in the shippingForm.js, import OrderSummary from './orderSummary'; and let's go down to the bottom and say OrderSummary has a className of shipping-form__summary, and that's all we need.

shippingForm.js

import OrderSummary from './orderSummary';

<OrderSummary className='shipping-form__summary'/>

Let's go see if this component works. If it doesn't, if it does, either way we're moving on to the next video. Let's go to our application and it looks like we can't see it, let's inspect the element after trying to reload the page. Okay, so let's go to checkout, proceed, it should be in here right, but it's not in here. Let's inspect the element, we have 16 errors okay, import information/info-help.

large

So it looks like we have a little css one. I told you we would move on, but we could fix that really quickly okay. So go in main.scss and we have already changed that, so I'm not sure why it's freaking out. I'm going to reload the page and it's because it's css, that's why, it doesn't reload it.

Okay, so reload the page and you'll see that we have our component in here okay. But it's kind of all over the place, so let's go ahead and fix that in the next video. Most of our site is working, we just need to place it and give it a width.

So it's commit our code and then handle everything else for this component and the next video.

Terminal

git status
git add .
git commit -m "built order summary component, infotitle and underlined title components"

Okay I'll see you the next video.

Resources

Source code