Styling React Applications

Slide 1

Slide 1 text

<> styled-components Max Stoiber @mxstbr Open Source Developer, Thinkmill

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

The Component Age

Slide 5

Slide 5 text

1. Small, focussed components 2. Use container components Best Practices: Components

Slide 6

Slide 6 text

Small, focussed components

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Implementation detail! Implementation detail!

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Split containers and components

Slide 11

Slide 11 text

class Sidebar extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return (

{this.state.items.map(item => (

{item}

))}

) } }

Slide 12

Slide 12 text

class SidebarContainer extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( {this.state.items.map(item => ( ))} ) } }

Slide 13

Slide 13 text

Containers = How things work Components = How things look

Slide 14

Slide 14 text

What about styling?

Slide 15

Slide 15 text

1. Single-use classes 2. Components as a styling construct Best Practices: Styling

Slide 16

Slide 16 text

If you’re writing React, you have access to a more powerful styling construct than CSS class names. You have components.” – Michael Chan, @chantastic “

Slide 17

Slide 17 text

Enforcing best practices?

Slide 18

Slide 18 text

styled-components

Slide 19

Slide 19 text

Glen Maddern frontend.center

Slide 20

Slide 20 text

Remove the mapping between styles and components

Slide 21

Slide 21 text

import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

const App = () => ( Hello World, this is my first styled component! ); ReactDOM.render( , document.getElementById(‘#app') );

Slide 27

Slide 27 text

styled-components

Slide 28

Slide 28 text

Write actual CSS

Slide 29

Slide 29 text

import styled from 'styled-components'; const ColorChanger = styled.section` background: papayawhip; > h2 { color: palevioletred; } @media (min-width: 875px) { background: mediumseagreen; > h2 { color: papayawhip; } } `;

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

color-changer

Slide 33

Slide 33 text

Adapting based on props

Slide 34

Slide 34 text

Normal Primary

Slide 35

Slide 35 text

const Button = styled.button` /* Adapt the colors based on primary prop */ background: ${(props) => props.primary ? 'palevioletred' : 'white' }; color: ${(props) => props.primary ? 'white' : 'palevioletred' }; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; export default Button;

Slide 36

Slide 36 text

Normal Primary

Slide 37

Slide 37 text

styled-components

Slide 38

Slide 38 text

Theming Built In

Slide 39

Slide 39 text

import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( );

Slide 40

Slide 40 text

import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( );

Slide 41

Slide 41 text

import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( );

Slide 42

Slide 42 text

import styled from 'styled-components'; const Button = styled.button` /* Adjust background based on the theme */ background: ${props => props.theme.primary}; color: white; `;

Slide 43

Slide 43 text

styled-components

Slide 44

Slide 44 text

const redTheme = { primary: 'palevioletred', }; const blueTheme = { primary: 'mediumseagreen', }; // … I'm red! I'm green!

Slide 45

Slide 45 text

styled-components

Slide 46

Slide 46 text

I'm red!

Slide 47

Slide 47 text

I'm still red!

Slide 48

Slide 48 text

I'm still red!

Slide 49

Slide 49 text

I'm still red!

Slide 50

Slide 50 text

I'm still red!

Slide 51

Slide 51 text

I'm still red!

Slide 52

Slide 52 text

I'm still red!

Slide 53

Slide 53 text

I'm still red!

Slide 54

Slide 54 text

I'm still red!

Slide 55

Slide 55 text

Full ReactNative Support

Slide 56

Slide 56 text

import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

class StyledComponentsNative extends Component { render() { return ( Hello World, this is my first native styled component! ); } }

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

$ yarn add styled-components github.com/styled-components/styled-components $ npm install styled-components