Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Styling Your React App

293 views

Published on

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

Published in: Technology
  • Be the first to comment

Styling Your React App

  1. 1. <ReactApp />Style With
  2. 2. RIZA,CURRICULUMDIRECTOR,CO-FOUNDER “Hacktiv8 Ada Untuk Menciptakan Developer Handal Yang Bisa Berjaya Di Negara Sendiri"
  3. 3. riza@hacktiv8.com facebook.com/rizafahmi github.com/rizafahmi medium.com/@rizafahmi22 @rizafahmi22 appscoast.id slideshare.net/rizafahmi Hi, I’m Riza
  4. 4. Let’s talk about styling
  5. 5. Good Old CSS Brand New
 React Styling
  6. 6. Good Old CSS
  7. 7. Options For CSS
  8. 8. CSS Preprocessors
  9. 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. 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. 11. Pros Familiar
  12. 12. Cons
  13. 13. Bad For Dynamic UI
  14. 14. React-based Styling
  15. 15. // 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; }
  16. 16. Pros
  17. 17. Cons
  18. 18. React-Style React Style
  19. 19. 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>
  20. 20. Pros
  21. 21. import styles from './styles.js' <button styles={[styles.button, styles.primary]}>Confirm </button>
  22. 22. Cons
  23. 23. Inline Styling
  24. 24. const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: ‘all’, height: 20, } function App () { return <div style={divStyle}>Hello World! </div> }
  25. 25. Pros
  26. 26. 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>
  27. 27. Code Reusability
  28. 28. Style Next To Markup const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: 'all' } function App () { return <div style={divStyle}>Hello World! </div> }
  29. 29. Cons
  30. 30. Let’s have some question

×