SlideShare a Scribd company logo
+
@robinpokorny
React a CSS
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
React a CSS
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

More Related Content

More from Robin Pokorny

Pokročilé responzivní obrázky
Pokročilé responzivní obrázkyPokročilé responzivní obrázky
Pokročilé responzivní obrázky
Robin Pokorny
 
O elementu picture v Ostravě
O elementu picture v OstravěO elementu picture v Ostravě
O elementu picture v Ostravě
Robin Pokorny
 
Jak nám responzivní web rozbil obrázky
Jak nám responzivní web rozbil obrázkyJak nám responzivní web rozbil obrázky
Jak nám responzivní web rozbil obrázky
Robin Pokorny
 
Organizace kódu v týmu
Organizace kódu v týmuOrganizace kódu v týmu
Organizace kódu v týmu
Robin Pokorny
 
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyHow to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Robin Pokorny
 
Thesis defendence presentation
Thesis defendence presentationThesis defendence presentation
Thesis defendence presentation
Robin Pokorny
 
Tancuj, tancuj, konverguj
Tancuj, tancuj, konvergujTancuj, tancuj, konverguj
Tancuj, tancuj, konverguj
Robin Pokorny
 

More from Robin Pokorny (8)

Pokročilé responzivní obrázky
Pokročilé responzivní obrázkyPokročilé responzivní obrázky
Pokročilé responzivní obrázky
 
O elementu picture v Ostravě
O elementu picture v OstravěO elementu picture v Ostravě
O elementu picture v Ostravě
 
Jak nám responzivní web rozbil obrázky
Jak nám responzivní web rozbil obrázkyJak nám responzivní web rozbil obrázky
Jak nám responzivní web rozbil obrázky
 
Organizace kódu v týmu
Organizace kódu v týmuOrganizace kódu v týmu
Organizace kódu v týmu
 
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyHow to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
 
Thesis defendence presentation
Thesis defendence presentationThesis defendence presentation
Thesis defendence presentation
 
Tancuj, tancuj, konverguj
Tancuj, tancuj, konvergujTancuj, tancuj, konverguj
Tancuj, tancuj, konverguj
 
Představení eMAMS
Představení eMAMSPředstavení eMAMS
Představení eMAMS
 

React a CSS