Styling React Applications @jogjajs

File presentasi di acara meetup JogjaJS ke 11.

Menjelaskan tentang teknik styling pada aplikasi React, dan mengenalkan styled-components sebagai salah satu library javascript yang dapat digunakan.

Transcript

1. Styling React Applications Tri Hargianto @ trihargianto Software Engineer, Freelancer
2. Let’s talk about styling
3. Styling in React is just about CSS
4. Common Basic Methods 1. Plain CSS 2. Inline Style
5. Common Basic Methods 1. Plain CSS 2. Inline Style
6. .hello-text { color: yellow; font-size: 16px; font-family: arial; } App.css
7. .hello-text { color: yellow; font-size: 16px; font-family: arial; } App.css import “./App.css” const App = () => ( <div className=”hello-text”> Hello </div> ) export default App; App.js
8. .hello-text { color: yellow; font-size: 16px; font-family: arial; } App.css import “./App.css” const App = () => ( <div className=”hello-text”> Hello </div> ) export default App; App.js
9. .hello-text { color: yellow; font-size: 16px; font-family: arial; } App.css import “./App.css” const App = () => ( <div className=”hello-text”> Hello </div> ) export default App; App.js
10. Styles will not be localized to your component, It will be attached to your DOM elements as Globals. GLOBALS CAN BE A PROBLEM
12. Common Basic Methods 1. Plain CSS 2. Inline Styles
13. const Content = ({ title, text, imageURL }) => { <div> <h1 style={{ fontSize: “20px”, marginBottom: “10px” }}> {title} </h1> <img src={imageURL} alt={title} style={{ display: “block”, width: “100%” }} /> <p style={{ fontSize: “14px”, fontWeight: “normal”, margin: 0 }} dangerouslySetInnerHTML={{ _html: text }} /> </div> }
14. const Content = ({ title, text, imageURL }) => { <div> <h1 style={{ fontSize: “20px”, marginBottom: “10px” }}> {title} </h1> <img src={imageURL} alt={title} style={{ display: “block”, width: “100%” }} /> <p style={{ fontSize: “14px”, fontWeight: “normal”, margin: 0 }} dangerouslySetInnerHTML={{ _html: text }} /> </div> }
15. const content = ({ title, text, imageURL }) => { <div> <h1 style={styles.title}> {title} </h1> <img src={imageURL} alt={title} style={styles.image} /> <p style={styles.text} dangerouslySetInnerHTML={{ _html: text }} /> </div> } const styles = { title: { fontSize: “20px”, marginBottom: “10px” }, image: { display: “block”, width: “100%” }, text: { fontSize: “14px”, fontWeight: “normal”, margin: 0 } }
16. const content = ({ title, text, imageURL }) => { <div> <h1 style={styles.title}> {title} </h1> <img src={imageURL} alt={title} style={styles.image} /> <p style={styles.text} dangerouslySetInnerHTML={{ _html: text }} /> </div> } Camel Case No pseudo-classes No CSS Animations const styles = { title: { fontSize: “20px”, marginBottom: “10px” }, image: { display: “block”, width: “100%” }, text: { fontSize: “14px”, fontWeight: “normal”, margin: 0 } }
17. React = The Component Age
18. In React, everythings is a component
19. Component’s best practices : 1. Small, focussed, & reusable component 2. Split containers and components
20. Component’s best practices : 1. Small, focussed, & reusable component 2. Split containers and component
21. <Button className=”btn”>Button</Button> <Button className=”btn btn-primary”>Primary Button</Button>
22. <Button className=”btn”>Button</Button> <Button className=”btn btn-primary”>Primary Button</Button> Implementation detail Implementation detail
23. <Button>Button</Button> <Button primary>Primary Button</Button>
25. Component’s best practices : 1. Small, focussed, & reusable component 2. Split containers and components
26. class Sidebar extends Component { state = { items: [] } 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> ); } }
27. class Sidebar extends Component { state = { items: [] } componentDidMount() { fetch("/api.com/sidebar") .then(res => { this.setState({ items: res.items }) }) } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ); } }
28. class Sidebar extends Component { state = { items: [] } componentDidMount() { fetch("/api.com/sidebar") .then(res => { this.setState({ items: res.items }) }) } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ); } }
29. Containers Component = How things work Component = How things look
30. How’s about styling ?
31. Best Practices : Styling 1. Single Use Classes 2. Component as a styling construct
32. Enforcing Best Practices?
34. Remove the mapping between styles and components
35. import styled from "styled-components"; const Title = styled.h1` font-size: 1.5em; text-align: center; color: grey; ` const Wrapper = styled.styled` color: papayawhip; padding: 4em; width: 100%; height: 100%; background: papayawhip; `
36. import styled from "styled-components"; const Title = styled. ` font-size: 1.5em; text-align: center; color: grey; ` const Wrapper = styled. ` color: papayawhip; padding: 4em; width: 100%; height: 100%; background: papayawhip; ` h1 section
37. const App = () ( <Wrapper> <Title> Hello World, this is my first styled-components </Title> </Wrapper> ) ReactDOM.render( <App />, document.getElementById("app") )
39. Write actual CSS
40. import styled from "styled-components"; const ColorChanger = styled.section` background: papayawhip; > h2 { color: black; } @media (min-width: 875px) { background: mediumseagreen; > h2 { color: papayawhip; } } `
42. Adapting based on props
43. <Button>Button</Button> <Button primary>Primary Button</Button>
44. const Button = styled.button` /* Adapt the colors based on primary props */ background: ${props => props.primary ? 'papayawhip' : 'white' }; color: ${props => props.primary ? 'white' : ‘papayawhip’ }; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; ` export default Button;
46. Theming built in
47. import { ThemeProvider } from "styled-compoenents"; const redTheme = { primary: 'red' }; const App = () => ( <ThemeProvider theme={redTheme}> <Button>Press Me Please</Button> </ThemeProvider> )
48. import styled from "styled-compoenents"; const Button = styled.button` /* Adjust background on the theme */ background: ${props => props.theme.primary}; color: white; padding: 10px; `
49. const redTheme = { primary: "red" } <ThemeProvider theme={redTheme}> <Button>Press Me Please</Button> </ThemeProvider> const blueTheme = { primary: "blue" } <ThemeProvider theme={blueTheme}> <Button>Press Me Please</Button> </ThemeProvider>
50. React Native Support
51. import styled from "styled-components/native"; const Wrapper = styled.View` flex: 1; justify-content: "center"; background-color: papayawhip; `; const Text = styled.Text` color: #000; font-size: 32; text-align: ${props => props.centered ? "center" : "left" }; `;
52. import styled from "styled-components/native"; const Wrapper = styled. ` flex: 1; justify-content: "center"; background-color: papayawhip; `; const Text = styled. ` color: #000; font-size: 32; text-align: ${props => props.centered ? "center" : "left" }; `; View Text
53. class App extends React.Component { render() { return ( <Wrapper> <Text centered>Hello, JogjaJS!</Text> </Wrapper> ); } }
55. $ npm install --save styled-components github.com/styled-components/styled-components
56. $ npm install --save styled-components $ yarn add styled-components github.com/styled-components/styled-components
57. Credits Max Stoiber @mxstbr styled-components’s creator
58. THANK YOU