Styling React Applications

Transcript

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

   View Slide

2. View Slide

3. View Slide

4. The Component Age
   

   View Slide

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

   View Slide

6. Small, focussed components
   

   View Slide

7. 
   
   

   View Slide

8. 
   
   Implementation detail!
   Implementation detail!
   

   View Slide

9. 
   
   

   View Slide

10. Split containers and components
    

    View Slide

11. 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}
    ))}
    
    )
    }
    }
    

    View Slide

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

    View Slide

13. Containers = How things work
    Components = How things look
    

    View Slide

14. What about styling?
    

    View Slide

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

    View Slide

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
    “
    

    View Slide

17. Enforcing best practices?
    

    View Slide

18. styled-components
    

    View Slide

19. Glen Maddern
    frontend.center
    

    View Slide

20. Remove the mapping between
    styles and components
    

    View Slide

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;
    `;
    

    View Slide

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;
    `;
    

    View Slide

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
    

    View Slide

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;
    `;
    

    View Slide

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;
    `;
    

    View Slide

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

    View Slide

27. styled-components
    

    View Slide

28. Write actual CSS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. color-changer
    

    View Slide

33. Adapting based on props
    

    View Slide

34. Normal
    Primary
    

    View Slide

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;
    

    View Slide

36. Normal
    Primary
    

    View Slide

37. styled-components
    

    View Slide

38. Theming Built In
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. styled-components
    

    View Slide

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

    View Slide

45. styled-components
    

    View Slide

46. 
    I'm red!
    
    

    View Slide

47. 
    
    I'm still red!
    
    
    

    View Slide

48. 
    
    
    I'm still red!
    
    
    
    

    View Slide

49. 
    
    
    
    I'm still red!
    
    
    
    
    

    View Slide

50. 
    
    
    
    
    I'm still red!
    
    
    
    
    
    

    View Slide

51. 
    
    
    
    
    
    I'm still red!
    
    
    
    
    
    
    

    View Slide

52. 
    
    
    
    
    
    
    I'm still red!
    
    
    
    
    
    
    
    

    View Slide

53. 
    
    
    
    
    
    
    
    I'm still red!
    
    
    
    
    
    
    
    
    

    View Slide

54. 
    
    
    
    
    
    
    
    
    I'm still red!
    
    
    
    
    
    
    
    
    
    

    View Slide

55. Full ReactNative Support
    

    View Slide

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;
    `;
    

    View Slide

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;
    `;
    

    View Slide

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;
    `;
    

    View Slide

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;
    `;
    

    View Slide

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;
    `;
    

    View Slide

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

    View Slide

62. View Slide

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

    View Slide

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

    View Slide

65. View Slide