styling your react app
TRANSCRIPT
<ReactApp />Style
With
RIZA, CURRICULUM DIRECTOR, CO-FOUNDER
“Hacktiv8 Ada Untuk Menciptakan Developer Handal Yang Bisa Berjaya Di Negara Sendiri"
facebook.com/rizafahmi
github.com/rizafahmi
medium.com/@rizafahmi22
@rizafahmi22
appscoast.id
slideshare.net/rizafahmi
Hi, I’m Riza
Let’s talk about styling
Good Old CSSBrand New
React Styling
Good Old CSS
Options For CSS
CSS Preprocessors
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') )
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> )
Pros
Familiar
Cons
Bad For Dynamic UI
React-based Styling
// 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; }
Pros
Cons
React-Style
React Style
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>
Pros
import styles from './styles.js'
<button styles={[styles.button, styles.primary]}>Confirm </button>
Cons
Inline Styling
const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: ‘all’, height: 20, }
function App () { return <div style={divStyle}>Hello World! </div> }
Pros
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>
Code Reusability
Style Next To Markupconst divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: 'all' }
function App () { return <div style={divStyle}>Hello World! </div> }
Cons
Let’s have some question