Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

React a CSS

  1. 1. + @robinpokorny
  2. 2. render: function() { return <div> O válce zpívám a reku… </div>; }
  3. 3. render: function() { return <div className='line'> O válce zpívám a reku… </div>; }
  4. 4. render: function() { var classString = 'line'; if (this.props.isFamous) { classString += ' line--famous'; } return <div className={classString}> O válce zpívám a reku… </div>; }
  5. 5. render: function() { var classString = 'line'; if (this.state.isSelected) { classString += ' line--selected'; } return <div className={classString}> O válce zpívám a reku… </div>; }
  6. 6. render: function() { var cx = React.addons.classSet; var classes = cx({ 'line': true, ‘message--famous': this.props.isFamous }); return <div className={classes}> O válce zpívám a reku… </div>; }
  7. 7. Christopher “vjeux” Chedeau
  8. 8. 1. Global Namespace 2. Dependencies 3. Dead Code Elimination 4. Minification 5. Sharing Constants 6. Non-deterministic Resolution 7. Isolation
  9. 9. CSS v JS
  10. 10. var styles = { line: { marginTop: 20, color: '#999', }, famous: { backgroundColor: 'bisque', } }
  11. 11. var styles = { line: { marginTop: 20, color: '#999', }, famous: { backgroundColor: 'bisque', } } return <div style={styles.line}> O válce zpívám a reku… </div>;
  12. 12. return <div style={m( styles.line, this.props.isFamous && styles.famous, this.props.style )}> O válce zpívám a reku… </div>;
  13. 13. return <div style={m( styles.line, this.props.style, this.props.isFamous && styles.famous )}> O válce zpívám a reku… </div>;
  14. 14. 1. Global Namespace 2. Dependencies 3. Dead Code Elimination 4. Minification 5. Sharing Constants 6. Non-deterministic Resolution 7. Isolation
  15. 15. function m(...args) { return Object.assign({}, ...args); }
  16. 16. <div> {vissible && <div />} </div>
  17. 17. <div onMouseEnter={() => this.setState({hover: true})} onMouseLeave={() => this.setState({hover: false})} style={{ color: this.state.hover ? 'blue' : ‘#fafafa' }} />
  18. 18. <div style={{ width: window.innerWidth > 1000 ? 500 : 250 }} />
  19. 19. var ResizeMixin = { componentDidMount: function() { this.resizeListener = window.addEventListener( 'resize', this.forceUpdate.bind(this) ); }, componentWillUnmount: function() { window.removeEventListener('resize', this.resizeListener); } };
  20. 20. Relay
  21. 21. @robinpokorny me@robinpokorny.com

×