styling your react app

<ReactApp />Style

With

RIZA, CURRICULUM DIRECTOR, CO-FOUNDER

“Hacktiv8 Ada Untuk Menciptakan Developer Handal Yang Bisa Berjaya Di Negara Sendiri"

riza@hacktiv8.com

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