Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
+
@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 cl...
render: function() {
var classString = 'line';
if (this.state.isSelected) {
classString += ' line--selected';
}
return <di...
render: function() {
var cx = React.addons.classSet;
var classes = cx({
'line': true,
‘message--famous':
this.props.isFamo...
Christopher “vjeux” Chedeau
1. Global Namespace
2. Dependencies
3. Dead Code Elimination
4. Minification
5. Sharing Constants
6. Non-deterministic Res...
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...
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 Res...
function m(...args) {
return Object.assign({}, ...args);
}
<div>
{vissible && <div />}
</div>
<div
onMouseEnter={() =>
this.setState({hover: true})}
onMouseLeave={() =>
this.setState({hover: false})}
style={{
color: ...
<div
style={{
width: window.innerWidth > 1000 ?
500 :
250
}}
/>
var ResizeMixin = {
componentDidMount: function() {
this.resizeListener =
window.addEventListener(
'resize',
this.forceUpd...
Relay
@robinpokorny me@robinpokorny.com
React a CSS
React a CSS
Upcoming SlideShare
Loading in …5
×

React a CSS

1,369 views

Published on

Published in: Technology
  • Be the first to comment

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

×