React a CSS
-
Upload
robin-pokorny -
Category
Technology
-
view
561 -
download
0
Transcript of React a CSS
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>; }
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>; }
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>; }
1. Global Namespace
2. Dependencies
3. Dead Code Elimination
4. Minification
5. Sharing Constants
6. Non-deterministic Resolution
7. Isolation
var styles = { line: { marginTop: 20, color: '#999', }, famous: { backgroundColor: 'bisque', } } return <div style={styles.line}> O válce zpívám a reku… </div>;
return <div style={m( styles.line, this.props.isFamous && styles.famous, this.props.style )}> O válce zpívám a reku… </div>;
return <div style={m( styles.line, this.props.style, this.props.isFamous && styles.famous )}> O válce zpívám a reku… </div>;
1. Global Namespace
2. Dependencies
3. Dead Code Elimination
4. Minification
5. Sharing Constants
6. Non-deterministic Resolution
7. Isolation
<div onMouseEnter={() =>
this.setState({hover: true})} onMouseLeave={() =>
this.setState({hover: false})} style={{ color: this.state.hover ? 'blue' : ‘#fafafa' }} />
var ResizeMixin = { componentDidMount: function() { this.resizeListener = window.addEventListener( 'resize', this.forceUpdate.bind(this) ); }, componentWillUnmount: function() { window.removeEventListener('resize', this.resizeListener); } };