Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Install glamorous to start styling React components

    Kent C. DoddsKent C. Dodds

    In this lesson we’ll learn about the things you need installed and setup to start writing React components with glamorous.

    reactReact
    glamorousglamorous
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Here we have a react application, and I'm going to install glamorous inside of this application. Run npm install glamorous. Glamorous depends on a CSS and JS library called Glamor. Glamorous also depends on prop types and react, if you don't have those installed in your application already. Go ahead and install those.

    With those packages installed, we can double check our package JSON here, just to make sure we got those installed in our dependencies. With those installed, let's go ahead and we'll import the DIV component from glamorous.

    I'm going to just swap on this DIV with a glamorous DIV. We'll have to go down here, swap that app as well. Then, we'll go ahead and start our server. With our app restarted, everything looks just perfect. Let's go ahead and inspect this.

    If we look here, we have the data reactive class has the glamorous DIV class name in there. We know that glamorous is rendering this. Let's go ahead and just do a quick little change here. With the built-in glamorous components, we can actually swap out this. Add class name with the specific CSS that we want to have applied.

    We'll say, instead of the class name text align center, we save that, and then we'll see that we no longer have that class name, and we have text align center coming from the glamorous class name for this DIV.

    As a quick review, you need to install glamorous and glamour prop types into your project. Naturally, also, you're going to need react and you're good to go.

    Discuss

    Discuss