+

@robinpokorny

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

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

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>; }

Christopher “vjeux” Chedeau

1. Global Namespace

2. Dependencies

3. Dead Code Elimination

4. Minification

5. Sharing Constants

6. Non-deterministic Resolution

7. Isolation

CSS v JS

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

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

<div style={{ width: window.innerWidth > 1000 ? 500 : 250 }} />

var ResizeMixin = { componentDidMount: function() { this.resizeListener = window.addEventListener( 'resize', this.forceUpdate.bind(this) ); }, componentWillUnmount: function() { window.removeEventListener('resize', this.resizeListener); } };

Relay

@robinpokorny me@robinpokorny.com