Más contenido relacionado La actualidad más candente (20) Similar a React & The Art of Managing Complexity (20) React & The Art of Managing Complexity13. What if I told you that markup, events, and handlers
should live side by side inside the component?
15. What if I told you that markup, events, and handlers
should live side by side inside the component?
18. class CurrentTime extends React.Component{
constructor( props ){
super( props );
this.state = { clickCount : 0 };
}
handleClick(){
this.setState( {
clickCount : this.state.clickCount + 1
} );
}
render(){
return (
<button onClick={this.handleClick.bind( this )}>
Clicked {this.state.clickCount} times
</button>
);
}
};
19. class CurrentTime extends React.Component{
constructor(){
super();
this.state = { clickCount : 0 };
}
handleClick(){
this.setState( {
clickCount : this.state.clickCount + 1
} );
}
render(){
return (
<button onClick={this.handleClick.bind( this )}>
Clicked {this.state.clickCount} times
</button>
);
}
};
ZOMG!!! Theres MARKUP in JavaScript!!!
20. class CurrentTime extends React.Component{
constructor(){
super();
this.state = { clickCount : 0 };
}
handleClick(){
this.setState( {
clickCount : this.state.clickCount + 1
} );
}
render(){
return (
<button onClick={this.handleClick.bind( this )}>
Clicked {this.state.clickCount} times
</button>
);
}
};
Theres an onClick in your markup!!!
21. class CurrentTime extends React.Component{
constructor(){
super();
this.state = { clickCount : 0 };
}
handleClick(){
this.setState( {
clickCount : this.state.clickCount + 1
} );
}
render(){
return (
<button onClick={this.handleClick.bind( this )}>
Clicked {this.state.clickCount} times
</button>
);
}
};
1994 Called, it want’s it’s JavaScript Back!
23. class CurrentTime extends React.Component{
constructor(){
super();
this.state = { clickCount : 0 };
}
handleClick(){
this.setState( {
clickCount : this.state.clickCount + 1
} );
}
render(){
return (
<button onClick={this.handleClick.bind( this )}>
Clicked {this.state.clickCount} times
</button>
);
}
};
Go home Ryan, you’re drunk.
25. There is a cost to context switching, even switching
from a “model” to a “view”.
39. class CurrentTime extends React.Component{
constructor( props ){
super( props );
this.state = { clickCount : 0 };
}
handleClick(){
this.setState( {
clickCount : this.state.clickCount + 1
} );
}
render(){
return (
<button onClick={this.handleClick.bind( this )}>
Clicked {this.state.clickCount} times
</button>
);
}
};
40. class CurrentTime extends React.Component{
constructor( props ){
super( props );
this.state = { clickCount : 0 };
}
handleClick(){
this.setState( {
clickCount : this.state.clickCount + 1
} );
}
render(){
return (
<button onClick={this.handleClick.bind( this )}>
Clicked {this.state.clickCount} times
</button>
);
}
};
What does this component look like?
42. Complexity is the inability to quickly reason about
where application state is being changed.
57. “The last thing you wanted any programmer to do is
mess with internal state…” Allan Kay - Creator of
Smalltalk
58. Immutability is the path to managing complexity.
https://www.youtube.com/watch?v=I7IdS-PbEgI
60. class Movie extends React.Component{
constructor( props ){
super( props );
}
render(){
return (
<div className="movie">
{this.props.name}
</div>
);
}
};
Movie.defaultProps = { name: 'Batman' };
66. class Movie extends React.Component{
constructor( props ){
super( props );
}
render(){
return (
<div className="movie">
{this.props.name}
</div>
);
}
};
Movie.propTypes = { name: React.PropTypes.string };
Movie.defaultProps = { name: 'Batman' };
69. class CurrentTime extends React.Component{
constructor( props ){
super( props );
this.state = { currentTime : new Date() };
}
componentDidMount(){
this.interval = setInterval(() => {
this.setState( { currentTime : new Date() } );
}, 1000 );
}
render(){
return (
<div>{this.state.currentTime.toString()}</div>
);
}
};
71. How do we make our app interesting, while embracing
props?
72. class CurrentTime extends React.Component{
constructor( props ){
super( props );
}
render(){
return (
<div>{this.props.currentTime}</div>
);
}
};
class CurrentTimeController extends React.Component{
constructor(){
super();
this.state = { currentTime : new Date() };
}
componentDidMount(){
this.interval = setInterval( () => {
this.setState( { currentTime : new Date() } );
}, 1000 );
}
render(){
return (
<CurrentTime currentTime={this.state.currentTime.toString()} />
);
}
}
75. class FormController extends React.Component{
constructor( props ){
super( props );
this.state = { name : '' };
}
nameChangeHandler( value ){
this.setState( { name : value } );
}
render(){
return (
<div>
Hello, {this.state.name}
<NameInput name={this.state.name}
changeHandler={this.nameChangeHandler.bind(this)}/>
</div>
);
}
}
76. “There’s a bug on our account page, US users are
seeing € instead of $ for their plan price.”
77. //controller component for the account section
class AccountController extends React.Component{
constructor( props ){
super( props );
}
render(){
return(
<PlanInfo
streamingInfo={this.props.streamingInfo}
region={this.props.region} />
);
}
}
78. class PlanInfo extends React.Component{
constructor( props ){
super( props )
console.log( props );
}
getStreamingSection(){
if( this.props.streamingInfo ){
let streamingInfo = this.props.streamingInfo;
return ( <StreamingSection
streams={streamingInfo.streams}
price={streamingInfo.price}
region={this.props.region/>
);
}
}
render(){
let streamingPlan = this.getStreamingSection();
return (
<div>
{streamingPlan}
</div>
);
}
}
79. class StreamingSection extends React.Component{
constructor( props ){
super( props );
}
getFormattedPrice(){
let symbol =
( this.props.region === "US" ) ? '€' : '$';
return `${symbol} {this.props.price}`;
}
render(){
return (
<article>
<p>Streams: {`${this.props.streams} streams` }</p>
<p>Price: {this.getFormattedPrice()}</p>
</article>
);
}
}
84. Sprinkles are for those who have code in prod.
http://www.dallasmomsanddads.com/wp-content/uploads/2013/04/photo-1.jpg
86. <div className={pinEntryClass}>
{accountVerify}
<h2 className="account-subheader parent-control-subheader">
{this.i18n['pin.page.subheader']}
</h2>
<p>{this.i18n['pin.page.info']}</p>
<PinPad
handleValidPinEntry={this.handleValidPinEntry}
handleInvalidPinEntry={this.handleInvalidPinEntry}
handleValidNumberEntry={this.handleValidNumberEntry}
ref="pinPad"
pin={this.state.pin}
enabled={this.state.pinEnabled} />
...
89. var pinProps = {
enabled: true,
handleValidNumberEntry: function(pin) {
newPin = pin; },
handleValidPinEntry: function() {
errorMessage.addClass('hidden');
buttonSave[0].disabled = false;
},
handleInvalidPinEntry: function() {
errorMessage.removeClass('hidden');
buttonSave[0].disabled = true;
}
};
React.render(pinPad(pinProps),
document.querySelector('.pin-pad-container'));
92. We are doing some pretty cool stuff with
JavaScript at Netflix. Please stop me in the halls
I’d love to share more of what we are doing!