Styling React Applications

48619fc17b3ab68472aebd56c0106278?s=47 Max Stoiber
October 28, 2016

Styling React Applications

48619fc17b3ab68472aebd56c0106278?s=128

Max Stoiber

October 28, 2016
Tweet

Transcript

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

  2. None
  3. None
  4. The Component Age

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

    Components
  6. Small, focussed components

  7. <Button className="btn"></Button> <Button className="btn btn--primary"></Button>

  8. <Button className="btn"></Button> <Button className="btn btn--primary"></Button> Implementation detail! Implementation detail!

  9. <Button></Button> <Button primary></Button>

  10. Split containers and components

  11. class Sidebar extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res =>

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

    { this.setState({ items: res.items }) }); } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ) } }
  13. Containers = How things work Components = How things look

  14. What about styling?

  15. 1. Single-use classes 2. Components as a styling construct Best

    Practices: Styling
  16. If you’re writing React, you have access to a more

    powerful styling construct than CSS class names. You have components.” – Michael Chan, @chantastic “
  17. Enforcing best practices?

  18. styled-components

  19. Glen Maddern frontend.center

  20. Remove the mapping between styles and components

  21. 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; `;
  22. 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; `;
  23. 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; `; styled.h1
  24. 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; `;
  25. 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; `;
  26. const App = () => ( <Wrapper> <Title> Hello World,

    this is my first styled component! </Title> </Wrapper> ); ReactDOM.render( <App />, document.getElementById(‘#app') );
  27. styled-components

  28. Write actual CSS

  29. import styled from 'styled-components'; const ColorChanger = styled.section` background: papayawhip;

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

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

    > h2 { color: palevioletred; } @media (min-width: 875px) { background: mediumseagreen; > h2 { color: papayawhip; } } `;
  32. color-changer

  33. Adapting based on props

  34. <Button>Normal</Button> <Button primary>Primary</Button>

  35. 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;
  36. <Button>Normal</Button> <Button primary>Primary</Button>

  37. styled-components

  38. Theming Built In

  39. import { ThemeProvider } from 'styled-components'; const theme = {

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

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

    primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
  42. import styled from 'styled-components'; const Button = styled.button` /* Adjust

    background based on the theme */ background: ${props => props.theme.primary}; color: white; `;
  43. styled-components

  44. const redTheme = { primary: 'palevioletred', }; const blueTheme =

    { primary: 'mediumseagreen', }; // … <ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider> <ThemeProvider theme={blueTheme}> <Button>I'm green!</Button> </ThemeProvider>
  45. styled-components

  46. <ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider>

  47. <ThemeProvider theme={redTheme}> <div> <Button>I'm still red!</Button> </div> </ThemeProvider>

  48. <ThemeProvider theme={redTheme}> <div> <Container> <Button>I'm still red!</Button> </Container> </div> </ThemeProvider>

  49. <ThemeProvider theme={redTheme}> <div> <Container> <div> <Button>I'm still red!</Button> </div> </Container>

    </div> </ThemeProvider>
  50. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Button>I'm still red!</Button> </SidebarContainer>

    </div> </Container> </div> </ThemeProvider>
  51. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <Button>I'm still red!</Button>

    </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  52. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <Button>I'm still

    red!</Button> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  53. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <Button>I'm

    still red!</Button> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  54. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <span>

    <Button>I'm still red!</Button> </span> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  55. Full ReactNative Support

  56. 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; `;
  57. 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; `;
  58. 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; `;
  59. 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; `;
  60. 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; `;
  61. class StyledComponentsNative extends Component { render() { return ( <Wrapper>

    <Title> Hello World, this is my first native styled component! </Title> </Wrapper> ); } }
  62. None
  63. $ yarn add styled-components github.com/styled-components/styled-components $ npm install styled-components

  64. Thank you! Max Stoiber @mxstbr Come talk to me!

  65. None