"Styling Your React App" is slide for React Indonesia March Meetup 2017

1. <ReactApp />Style
With

2. RIZA,CURRICULUMDIRECTOR,CO-FOUNDER
“Hacktiv8 Ada Untuk Menciptakan Developer
Handal Yang Bisa Berjaya Di Negara Sendiri"

3. riza@hacktiv8.com
facebook.com/rizafahmi
github.com/rizafahmi
medium.com/@rizafahmi22
@rizafahmi22
appscoast.id
slideshare.net/rizafahmi
Hi, I’m Riza

4. Let’s talk about styling

5. Good Old CSS
Brand New
React Styling

6. Good Old CSS

7. Options For CSS

8. CSS Preprocessors

9. Good Old CSS
// index.css
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
// App.jsx
import './index.css'
ReactDOM.render(
<App
/>, document.getElementById('root')
)

10. Styling Your CSS Using
// index.styl
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
.cool_button
border-radius(5px)
// react.js
import './index.styl'
const CoolButton = ()
=> (
<button className=‘cool_button’>Confirm
</button>
)

11. Pros
Familiar

12. Cons

16. Bad For Dynamic UI

17. React-based Styling

19. // cool.js
import styles from './styles.css'
export const CoolButton = (props)
=> {
return (
<button className={styles.red}>{this.props.text}
</button>
)
}
/* styles.css
*/
.red {
font-size: 25px;
background-color: red;
color: white;
}

20. Pros

22. Cons

24. React-Style
React Style

25. import StyleSheet from 'react-style'
const styles = StyleSheet.create({
primary: {
backgroundColor: 'green'
},
button: {
padding: '1em'
},
// media queries
'@media (max-width: 200px)': {
button: {
width: '100%'
}
}
})
//
...
<button styles={[styles.button, styles.primary]}>Confirm
</button>

26. Pros

28. import styles from './styles.js'
<button styles={[styles.button, styles.primary]}>Confirm
</button>

29. Cons

33. Inline Styling

34. const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all',
msTransition: ‘all’,
height: 20,
}
function App () {
return <div style={divStyle}>Hello World!
</div>
}

35. Pros

36. Implement Logic
<div>
<input onChange={this.handleColorChange}
/>
<input type='number' onChange={this.handleSizeChange}
/>
<p
style={{
color: this.state.color,
fontSize: this.state.fontSize
}}
>
This paragraph is {this.state.color} and {this.state.fontSize} px
</p>
</div>

38. Code Reusability

39. Style Next To Markup
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all',
msTransition: 'all'
}
function App () {
return <div style={divStyle}>Hello World!
</div>
}

40. Cons

48. Let’s have some question