In these lessons you’ll learn how to create a collection of primitive components that will allow you to create complex user interfaces, which are responsive, consistent, and maintainable. All without writing any custom styles. We’ll create components to manage layouts and whitespace, text and headings, basic user interface elements, and learn how to compose complex user interfaces from primitive components. 


Learn styled-components in less than five minutes. Learn how to create styled components, how to write styles, how to use pseudo-classes, like hover or active, how to write dynamic styles, that depend on passed to component props, how to write media queries and extend another component.

Introduction to styled-components

The first thing we need to do when we start a new project is to define all fonts, font sizes, colors, and spacing values, we’re going to use; because we want to make sure that our user interface is consistent across the project. These values are called _design tokens_ or a _theme_, and they are the single source of truth for our “design decisions”.

In this lesson we’ll create a theme file (`theme.js`) with constants for colors, fonts, font sizes, spacing, border radii, etc., so these values are available to our components.

In a real project, we’ll need to talk to our designer, and probably do a design audit first, but for simplicity, we’ll pretend that we’ve done that before, and already know all the values.

There are many ways to define design tokens, like Sass or CSS variables, JSON file or a plain JavaScript object. We’re going to use a JavaScript object following a so-called [Theme Spec](https://theme-ui.com/theme-spec/), which defines the shape of the theme. Theme Spec is used by tools like styled-system, which we’re going to use to create primitive components in the following lessons.

**We’ll use following libraries:**

* [styled-components](https://styled-components.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components
```

**Useful links and documentation:**

* [Theme Specification](https://theme-ui.com/theme-spec/)


Create Design Tokens for Colors, Font Sizes, and Whitespace Using styled-components

In this lesson we’ll create a generic button primitive component the has one style, using [styled-components](https://styled-components.com/).

Let’s discuss the API first.

Our button will have a default state.

```jsx
<Button onClick={() => console.log('henlo')}>Push me</Button>
```

Disabled state. Let’s use the `disabled` prop like on a plain HTML `button` element, because our button is an extension of the native HTML button and there’s no need to create a new API when a familiar to developers API already exists:

```jsx
<Button disabled>Can’t touch this</Button>
```

We also want to make sure our button works as a link too:

```jsx
<Button as="a" href="/">Push me</Button>
```

We don’t have to implement `as` prop because it’s added to every component by styled-components automatically, but we need to make sure styles don’t break with another HTML element.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components
```

**Useful links and documentation:**
* [styled-components docs](https://styled-components.com/docs)


Creating a button React component using styled-components

In this lesson we’ll improve a generic button primitive component by using global theme for colors, spacing, fonts, etc. instead of hardcoding this values in the component.

We’ve [a basic button component](https://egghead.io/lessons/react-creating-a-button-react-component-using-styled-components?pl=component-driven-development-in-react-e0bf) that works okay, and we can tweak styles to match the design perfectly, but it has a problem. If we keep adding components with hardcoded colors, spacing, and so on, and then decide to change some of them, we’d have to update all components that are using these values.

Another thing that might be useful is contextual styling. Imagine a footer with a subscription form, and this footer has dark background, so we need to invert colors of all components inside the footer.

A naïve approach would be to hardcode both themes inside each component, and add a prop to switch between them. But this is very hard to maintain: just for this button component we’d have to keep four variations — light primary, light secondary, dark primary, and dark secondary. Also we’d have to pass a props to each component when we want a dark variation. Much better solution would be to use [React Context](https://reactjs.org/docs/context.html) and [theme provider](https://styled-components.com/docs/advanced#theming) from styled-components to do all the work for us. But to do so, we need to read colors, spacing and all other design tokens from styled-components theme.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components
```

**Useful links and documentation:**
* [styled-component theming](https://styled-components.com/docs/advanced#theming) 
* [React Context](https://reactjs.org/docs/context.html)


Creating a button React component with dynamic styles using styled-components

In this lesson we’ll improve a generic button primitive component by adding another variant — secondary style.

We have two variants of a button: primary and secondary. The naïve way would be to define a prop for each:

```jsx
<Button primary>Push me</Button>
<Button secondary>Push me</Button>
```

But such API can be confusing, and can lead to unexpected behavior. For example, how this button should look like?

```jsx
<Button primary secondary>Push me</Button>
```

A button can’t be a primary and a secondary at the same time but the API makes the opposite impression. For exclusive options it’s better to define a single prop with multiple values. I prefer to call this prop `variant`.

```jsx
<Button variant="primary">Push me</Button>
<Button variant="secondary">Push me</Button>
```

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components
```


Creating a generic button React component with multiple variants using styled-components

In this lesson we’ll improve a generic button primitive component by refactoring it with [Styled System](https://styled-system.com/) to simplify the implementation.

The naïve styled-component implementation has styles like this:

```scss
padding: ${props => props.theme.space[3]} ${props => props.theme.space[4]};
color: ${props =>
  props.variant === 'primary'
    ? props.theme.colors.background
    : props.theme.colors.primary
};
background-color: ${props =>
  props.variant === 'primary'
    ? props.theme.colors.primary
    : props.theme.colors.background};
```

This kind of code isn’t very readable and isn’t easy to change. We can improve it a bit by extracting styles of each variant into its own object but there’s a better solution: [Styled System](https://styled-system.com/).

Styled System is a tool that allows us to create primitive components where we can control styles using component props, and all these props are constrained by our design system and responsive.

For this component we’ll use two features of Styled System: CSS and Variants:

* [CSS](https://styled-system.com/css/) helps us define common styles for both, primary and secondary, variants.
* [Variants](https://styled-system.com/variants) allows us to switch multiple style properties with a single component prop, exactly what we need to implement primary and secondary styles.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)
* [@styled-system/css](https://github.com/styled-system/styled-system/tree/master/packages/css)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system @styled-system/css
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Styled System CSS docs](https://styled-system.com/css)
* [Styled System variants docs](https://styled-system.com/variants)


Simplifying styled-components styles by using Styled System CSS and variants

In this lesson we’ll create the base layout primitive component — Box, that will allow us (together with other layout primitives) to create almost any complex layout without writing custom CSS. We’ll use [Styled System](https://styled-system.com/) to create this component.

Styled System allows us to create React components, where we can control styles using component props.

Fox example, a simplified Box component:

```jsx
import styled from 'styled-components';
import { space, color, layout } from 'styled-system';

export const Box = styled.div(space, color, layout);
```

By default, it renders a `<div>` element without any styles, and we can control typography, spacing and color using props.

Here we’re defining width, padding, bottom margin, and background color:

```jsx
<Box width={[1, 1 / 2]} p={4} mb={3} bg="primary">
  I’m a primary box, with responsive width, some padding, and bottom margin
</Box>
```

Each of these props can accept an array to make it responsive: we can pass up to three value for mobile, tablet and desktop breakpoints. For example, above we have a smaller width on wide screens. Also, all these values will be taken from the site theme, which makes our UI consistent. In the example above, it will take the value of the primary color from the theme for the background color, and the fifth item in the spacing scale for padding.

Prop names are camel cased CSS property names, with a few shortcuts like `p`, `px`, `py` for padding, `m`, `mx`, `my` for margins, and `bg` for background color. 

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)
* [@styled-system/prop-types](https://github.com/styled-system/styled-system/tree/master/packages/prop-types)


You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system @styled-system/prop-types
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Build a Box](https://styled-system.com/guides/build-a-box)


Create the Box Layout Primitive Component Using Styled System

In this lesson we’ll create the Flex layout primitive component, that will allow us (together with other layout primitives) to create almost any complex layout without writing custom CSS. We’ll use [Styled System](https://styled-system.com/) to create this component.

Flex is a shortcut to create Flexbox layouts: it’s based on the [Box](https://egghead.io/lessons/react-creating-the-box-layout-primitive-component-using-styled-system) component but defines `display: flex`.  We can use it like this:

```jsx
<Flex justifyContent="space-between">
  <Box mr={3}>Foo</Box>
  <Box>Bar</Box>
</Flex>
```

This will create two `<div>`s aligned at the left and right sides of the Flexbox container with a minimum gap of 8 pixels (third step in our spacing scale).

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Build a Box](https://styled-system.com/guides/build-a-box)
* [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

Creating the Flex Layout Primitive Component Using Styled System

In this lesson we’ll create the Grid layout primitive component, that will allow us (together with other layout primitives) to create almost any complex layout without writing custom CSS. We’ll use [Styled System](https://styled-system.com/) to create this component.

Grid is a shortcut to create CSS Grid layouts: it’s based on the [Box](https://egghead.io/lessons/react-creating-the-box-layout-primitive-component-using-styled-system) component but defines `display: grid`.  We can use it like this:

```jsx
<Grid
  as="footer"
  gridGap={3}
  justifyContent={[null, 'space-between']}
  justifyItems={['center', null]}
  gridAutoFlow={[null, 'column']}
>
  <Box>© Chuck Norris, 1940</Box>
  <Box>Have a nice day!</Box>
</Grid>
```

This will create two `<div>`s stacked one on top of the other with a 8 pixels (third step in our spacing scale) gap on narrow screens and aligned at the left and right sides of the CSS Grid container on wide screens.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Build a Box](https://styled-system.com/guides/build-a-box)
* [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)


Creating the Grid Layout Primitive Component Using Styled System

In this lesson we’ll create the fourth layout primitive component — Stack, that will allow us (together with the Box, Flex and Grid components from the previous lesson) to create almost any complex layout without writing any custom CSS. We’ll use [Styled System](https://styled-system.com/) to create this component.

Stack component is a layout primitive to create stacking — adding equal spacing between each child of a container, and it’s one of the most useful layout primitives. Stack is based on the [Box](https://egghead.io/lessons/react-creating-the-box-layout-primitive-component-using-styled-system) component, and adds spacing between the container children.

We can use it like this:

```jsx
<Stack gap={3}>
  <Box>eins</Box>
  <Box>zwei</Box>
  <Box>polizei</Box>
</Stack>
```

This will create three `<div>`s stacked one on top of the other with a 8 pixels (third step in our spacing scale) gap.

The implementation is based on the [lobotomized owl CSS selector](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/):

```css
.stack * + * {
  margin-top: 8px;
}
```

Here we’re adding a top margin to each container child except the first one, so we’re creating whitespace *between* the children but not around the container.

To define the `gap` prop — the spacing between the container children — we'll use [the system function](https://styled-system.com/api#system) from styled-system, that allows us to create custom props.

The Stack implementation in this lesson is slightly simplified one, [have a look at a more flexible Stack component](https://github.com/tamiadev/tamia/blob/master/src/components/Stack.tsx) that supports vertical and horizontal stacking, and switching direction based on the viewport width.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Styled System system()](https://styled-system.com/api#system)
* [Build a Box](https://styled-system.com/guides/build-a-box)
* [Axiomatic CSS and Lobotomized Owls](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/)
* [The Stack on Every Layout](https://every-layout.dev/layouts/stack/)
* [More flexible Stack component implementation](https://github.com/tamiadev/tamia/blob/master/src/components/Stack.tsx)

Creating the Stack layout primitive component using Styled System

In this lesson we’ll create a generic heading primitive component, that we could use to render headings of different levels in our app. We’ll use [Styled System](https://styled-system.com/) to create this component.

We’re going to use [Styled System variants](https://styled-system.com/variants) to define styles for each heading level. The number of levels depends on your app’s complexity, and it’s something you’ll need to discuss with your designer. In this lesson we’ll create three levels of headings. We'll make it possible to change the HTML element (`h1`, `h2`, `h3`) independently from the visual heading level.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Styled System variants docs](https://styled-system.com/variants)


Creating a Generic Heading Component Using Styled System Variants

In this lesson we’ll create a generic heading primitive component, that we could use to render headings of different levels in our app. We’ll use [Styled System](https://styled-system.com/) to create this component.

There are two common ways to implement a link primitive component. The first method is to use the Text component as a base, this way we’ll be able to use the link anywhere in the app without wrapping it in the Text component to have the correct text styles. However, if we put a link into, for example, a heading, it’ll still be rendered using the base text styles, like font size and color, because they are hardcoded in the component, which make this approach inflexible. The second method is to make the link inherit parent styles. This way we’ll be able to nest link into any other text component, and it will look good in any context.

We’ll implement our component using the second method.

We’re going to use [Styled System’s CSS](https://styled-system.com/css) package to define styles using our design tokens — values we’ve defined in the theme file.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)
* [@styled-system/css](https://github.com/styled-system/styled-system/tree/master/packages/css)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system @styled-system/css
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Styled System CSS docs](https://styled-system.com/css)


Creating a Generic Link Component Using Styled System CSS

In this lesson we’ll create a generic text input primitive component, that we could use to render headings of different levels in our app. We’ll use [Styled System](https://styled-system.com/) to create this component.

We’re going to use [Styled System’s CSS](https://styled-system.com/css) package to define styles using our design tokens — values from our theme file.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)
* [@styled-system/css](https://github.com/styled-system/styled-system/tree/master/packages/css)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system @styled-system/css
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Styled System CSS docs](https://styled-system.com/css)


Creating a Generic Text Input Component Using Styled System CSS

In this lesson we’ll compose a basic login form using all primitive components, we’ve created in the previous lessons. We’ll create a complete layout without writing any custom styles, just by composing primitive components: Box, Flex, Grid, Stack, Text, Heading, Link, Button, and Input.

We’ll create a login page as an example. It has a heading, a form with two text fields — login and password, a password reset link, a submit button, and a disclaimer text with a link.

Checkout this lesson’s [Git repository](https://github.com/sapegin/cddcourse) for all the components we’re going to use.


Building User Interfaces by Composing Primitive React Components

In this lesson we’ll improve [our login page](https://egghead.io/lessons/egghead-building-user-interfaces-by-composing-primitive-react-components) by making it responsive. We’ll continue using the primitive components, we’ve created in the previous lessons. We’ll create a complete layout without writing any custom styles, just by composing primitive components: Box, Flex, Grid, Stack, Text, Heading, Link, Button, and Input.

We’ll split the screen into two sections horizontally: one with the form, and another with some useful information about the app. We’ll change the layout to single-column on mobile devices, and hide one of the columns.

Checkout this lesson’s [Git repository](https://github.com/sapegin/cddcourse) for all the components we’re going to use.


Component-driven development in React

Instructor

Course Content