React a CSS

render: function() {
return <div>
O válce zpívám a reku…
</div>;
}

return <div className='line'>
</div>;
}

var classString = 'line';
if (this.props.isFamous) {
classString += ' line--famous';
}
return <div className={classString}>
</div>;
}

var classString = 'line';
if (this.state.isSelected) {
classString += ' line--selected';
}
return <div className={classString}>
</div>;
}

var cx = React.addons.classSet;
var classes = cx({
'line': true,
‘message--famous':
this.props.isFamous
});
return <div className={classes}>
</div>;
}

Christopher “vjeux” Chedeau

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',
}
}

var styles = {
line: {
marginTop: 20,
color: '#999',
},
famous: {
backgroundColor: 'bisque',
}
}
return <div style={styles.line}>
</div>;

return <div style={m(
styles.line,
this.props.isFamous && styles.famous,
this.props.style
)}>
</div>;

return <div style={m(
styles.line,
this.props.style,
this.props.isFamous && styles.famous
)}>
</div>;

function m(...args) {
return Object.assign({}, ...args);
}

<div>
{vissible && <div />}
</div>

<div
onMouseEnter={() =>
this.setState({hover: true})}
onMouseLeave={() =>
this.setState({hover: false})}
style={{
color: this.state.hover ?
'blue' :
‘#fafafa'
}}
/>

@robinpokorny me@robinpokorny.com

React a CSS

More Related Content

More from Robin Pokorny (8)

React a CSS