1. +
@robinpokorny

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

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

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

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

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

8. Christopher “vjeux” Chedeau

9. 1. Global Namespace
2. Dependencies
3. Dead Code Elimination
4. Minification
5. Sharing Constants
6. Non-deterministic Resolution
7. Isolation

10. CSS v JS

12. var styles = {
line: {
marginTop: 20,
color: '#999',
},
famous: {
backgroundColor: 'bisque',
}
}

13. var styles = {
line: {
marginTop: 20,
color: '#999',
},
famous: {
backgroundColor: 'bisque',
}
}
return <div style={styles.line}>
O válce zpívám a reku…
</div>;

14. return <div style={m(
styles.line,
this.props.isFamous && styles.famous,
this.props.style
)}>
O válce zpívám a reku…
</div>;

15. return <div style={m(
styles.line,
this.props.style,
this.props.isFamous && styles.famous
)}>
O válce zpívám a reku…
</div>;

16. 1. Global Namespace
2. Dependencies
3. Dead Code Elimination
4. Minification
5. Sharing Constants
6. Non-deterministic Resolution
7. Isolation

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

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

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

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

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

22. Relay

23. @robinpokorny me@robinpokorny.com