Styling Your React App
-
Upload
riza-fahmi -
Category
Technology
-
view
85 -
download
1
Transcript of Styling Your React App
![Page 1: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/1.jpg)
<ReactApp />Style
With
![Page 2: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/2.jpg)
RIZA, CURRICULUM DIRECTOR, CO-FOUNDER
“Hacktiv8 Ada Untuk Menciptakan Developer Handal Yang Bisa Berjaya Di Negara Sendiri"
![Page 3: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/3.jpg)
facebook.com/rizafahmi
github.com/rizafahmi
medium.com/@rizafahmi22
@rizafahmi22
appscoast.id
slideshare.net/rizafahmi
Hi, I’m Riza
![Page 4: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/4.jpg)
Let’s talk about styling
![Page 5: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/5.jpg)
Good Old CSSBrand New
React Styling
![Page 6: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/6.jpg)
Good Old CSS
![Page 7: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/7.jpg)
Options For CSS
![Page 8: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/8.jpg)
CSS Preprocessors
![Page 9: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/9.jpg)
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') )
![Page 10: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/10.jpg)
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> )
![Page 11: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/11.jpg)
Pros
Familiar
![Page 12: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/12.jpg)
Cons
![Page 13: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/13.jpg)
![Page 14: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/14.jpg)
![Page 15: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/15.jpg)
![Page 16: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/16.jpg)
Bad For Dynamic UI
![Page 17: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/17.jpg)
React-based Styling
![Page 18: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/18.jpg)
![Page 19: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/19.jpg)
// 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; }
![Page 20: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/20.jpg)
Pros
![Page 21: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/21.jpg)
![Page 22: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/22.jpg)
Cons
![Page 23: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/23.jpg)
![Page 24: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/24.jpg)
React-Style
React Style
![Page 25: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/25.jpg)
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>
![Page 26: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/26.jpg)
Pros
![Page 27: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/27.jpg)
![Page 28: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/28.jpg)
import styles from './styles.js'
<button styles={[styles.button, styles.primary]}>Confirm </button>
![Page 29: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/29.jpg)
Cons
![Page 30: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/30.jpg)
![Page 31: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/31.jpg)
![Page 32: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/32.jpg)
![Page 33: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/33.jpg)
Inline Styling
![Page 34: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/34.jpg)
const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: ‘all’, height: 20, }
function App () { return <div style={divStyle}>Hello World! </div> }
![Page 35: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/35.jpg)
Pros
![Page 36: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/36.jpg)
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>
![Page 37: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/37.jpg)
![Page 38: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/38.jpg)
Code Reusability
![Page 39: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/39.jpg)
Style Next To Markupconst divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: 'all' }
function App () { return <div style={divStyle}>Hello World! </div> }
![Page 40: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/40.jpg)
Cons
![Page 41: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/41.jpg)
![Page 42: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/42.jpg)
![Page 43: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/43.jpg)
![Page 44: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/44.jpg)
![Page 45: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/45.jpg)
![Page 46: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/46.jpg)
![Page 47: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/47.jpg)
![Page 48: Styling Your React App](https://reader034.fdocuments.in/reader034/viewer/2022052514/58ed0e111a28ab90658b45cf/html5/thumbnails/48.jpg)
Let’s have some question