intro to reactjs
TRANSCRIPT
What I'll be showing
• Current approaches
• React
• Demos
• Summarize
Webdev Landscape in 2015
JQuery! $('article.left section').click(function() {
var was_selected = $(this).hasClass('section-selected');
$('article.left section').removeClass('section-selected');
if (!was_selected) {
$(this).addClass('section-selected');
}
});
! $('article.right section').click(function() {
$(this).toggleClass('right-selected');
if ($('section.right-selected')) {
$(this).children('input.choose').toggle();
}
});
Backbone
Ember
Angular!
• MVC
• Angular Markup: ng-model, ng-show, ng-repeat
• Dirty checking, speed limitations
• Large API.
• Scopes are inherited.
Angular Scope
Angular Scope
Common Problems
Shared Mutable State
Core Problem
• Separation of Concerns
app/partials/button.html
app/css/button.css
app/js/directives/button.js
REACT
Thesis: React is
• Cohesive
!
• Easy to reason about
Quick History
• Apr 2012: Instagram purchase.
• June 2013 Open-sourced
Users
AirBNB, BBC, CodeAcademy, Dropbox, Facebook, Flipboard, Github, Imgur, Instagram, Khan Academy, Netflix, NYT, PayPal, Reddit, Redfin, Uber, Wired, Yahoo…
Give it 5 Minutes
Simple Componentvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
JSXvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
Templating languages have a cost: they make building user interfaces harder. Doing something simple like alternating row colors in a table requires jumping through hoops in many languages. !
What we should do instead is accept that user interfaces are becoming more and more complicated and that we need a real programming language (with all of its expressive power) to build user interfaces at scale. !
(With React) instead of an oversimplified templating language, you get to use JavaScript to build abstractions and reuse code. — Pete Hunt
JSXvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
JSX -> createElementvar HelloMessage = React.createClass({displayName: "HelloMessage",!
render: function() {!
return React.createElement("div", null, "Hello ", this.props.name);!
}!
});!
!
React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);
f(data)=virtual DOMvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
Using a Componentvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
Passing propsvar HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
Questions?var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />, mountNode);
State
Timer: has secondsElapsedvar Timer = React.createClass({!
getInitialState() {!
return {secondsElapsed: 0};!
},!
componentDidMount: function() {!
this.interval = setInterval(this.tick, 1000);!
},!
tick() {!
this.setState({secondsElapsed: this.state.secondsElapsed + 1});!
},!
render() {!
return (!
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>!
);!
}!
});
Initialize Statevar Timer = React.createClass({!
getInitialState() {!
return {secondsElapsed: 0};!
},!
componentDidMount: function() {!
this.interval = setInterval(this.tick, 1000);!
},!
tick() {!
this.setState({secondsElapsed: this.state.secondsElapsed + 1});!
},!
render() {!
return (!
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>!
);!
}!
});
setState()var Timer = React.createClass({!
getInitialState() {!
return {secondsElapsed: 0};!
},!
componentDidMount: function() {!
this.interval = setInterval(this.tick, 1000);!
},!
tick() {!
this.setState({secondsElapsed: this.state.secondsElapsed + 1});!
},!
render() {!
return (!
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>!
);!
}!
});
rendervar Timer = React.createClass({!
getInitialState() {!
return {secondsElapsed: 0};!
},!
componentDidMount: function() {!
this.interval = setInterval(this.tick, 1000);!
},!
tick() {!
this.setState({secondsElapsed: this.state.secondsElapsed + 1});!
},!
render() {!
return (!
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>!
);!
}!
});
Components -> App
Compositionvar PictureOfTheDay = require('./Components/PictureOfTheDay.js');!
var DateBrowser = require('./Components/DateBrowser.js');!
var Title = require('./Components/Title.js');!
!var SpacePics = React.createClass ({!
render() {!
return (!
<div>!
<Title title={this.state.title} />!
<PictureOfTheDay picture={this.state.picture} />!
<DateBrowser date={this.state.date} onChange={this._onDateChange} />!
</div>!
);!
require()var PictureOfTheDay = require('./Components/PictureOfTheDay.js');!
var DateBrowser = require('./Components/DateBrowser.js');!
var Title = require('./Components/Title.js');!
!var SpacePics = React.createClass ({!
render() {!
return (!
<div>!
<Title title={this.state.title} />!
<PictureOfTheDay picture={this.state.picture} />!
<DateBrowser date={this.state.date} onChange={this._onDateChange} />!
</div>!
);!
Passing data to childrenvar PictureOfTheDay = require('./Components/PictureOfTheDay.js');!
var DateBrowser = require('./Components/DateBrowser.js');!
var Title = require('./Components/Title.js');!
!var SpacePics = React.createClass ({!
render() {!
return (!
<div>!
<Title title={this.state.title} />!
<PictureOfTheDay picture={this.state.picture} />!
<DateBrowser date={this.state.date} onChange={this._onDateChange} />!
</div>!
);!
Data from parent to child
Need-to-knowvar PictureOfTheDay = require('./Components/PictureOfTheDay.js');!
var DateBrowser = require('./Components/DateBrowser.js');!
var Title = require('./Components/Title.js');!
!var SpacePics = React.createClass ({!
render() {!
return (!
<div>!
<Title title={this.state.title} />!
<PictureOfTheDay picture={this.state.picture} />!
<DateBrowser date={this.state.date} onChange={this._onDateChange} />!
</div>!
);!
Questions?
Demos
Virtual DOM!
Creating a component
ReactNative
Demo #1: Virtual DOM
Virtual DOM Demo: TODOMVC
DOMListener
Our script
• Create new: Apples, Bread
• Check off Apples
• Switch between tabs
Angular
Angular
React
Demos
Virtual DOM
Creating a component!
ReactNative
Demo #2: Encapsulation
• Internal state
• UI actions
• refactoring
Hello World• import React from 'react'; export default class WhosAsleepScore extends React.Component { render() { return ( <h1>Hello, world!</h1> ); } }
Change->Hot Reload
state: {count:0}
code• import React from 'react'; export default class WhosAsleepScore extends React.Component { constructor(props) { super(props); this.state={count:0}; } render() { let {count}= this.state; return ( <h1>Who's Asleep score: {count}</h1> ); } }
Count the sleepers!
Change Request!
!
!
!
!
Change display
End Resultimport React from 'react'; export default class WhosAsleepScore extends React.Component { constructor(props) { super(props); this.state = {count: 0}; } addSleeper() { this.setState({count:this.state.count+1}); } render() { return ( <div> <img src='ct.png' onClick={this.addSleeper.bind(this)} /> <span style={countStyle}>{this.state.count}</span> </div> ); } }
Demos
Virtual DOM
Creating a component!
ReactNative
Demo #3: ReactNative
react-native-spacepics
Demo- Overview
Components
Demo-Changing Code
// if we have an error if (this.state.error !== null) { innerNode = <ErrorWidget title="NASA API Error" message={this.state.error} />; title = 'Error'; }
If Error
ErrorWidget• var React = require('react-native'); var { StyleSheet, Text, View, } = React; class ErrorWidget extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.title}>{this.props.title}</Text> <Text style={styles.message}>{this.props.message}</Text> </View> ); } }
propTypesclass ErrorWidget extends React.Component {!
propTypes: {!
message: React.PropTypes.string.isRequired,!
title: React.PropTypes.string.isRequired,!
}, render() { return ( <View style={styles.container}> <Text style={styles.title}>{this.props.title}</Text> <Text style={styles.message}>{this.props.message}</Text> </View> ); } }
Loading
// if we don't have a picture else if (this.state.picture === null) { innerNode = <Loading title="Getting Image..." />; title = 'Loading...'; }!
Loading Widget• var React = require('react-native'); var { StyleSheet, ActivityIndicatorIOS, Text, View, } = React; class Loading extends React.Component { render() { return ( <View style={styles.container}> <ActivityIndicatorIOS animating={true} /> <Text style={styles.title}>{this.props.title}</Text> </View> ); } }
else: Picture
// if we have a picture else { innerNode = <PictureOfTheDay picture={this.state.picture} />; title = this.state.picture.title; }!
Components
Demos
Virtual DOM
Creating a component
ReactNative
Zooming Out
Encapsulation
CompositionSpacePics
PictureOfTheDay
Image
Time
Summary
React is easy to reason about
Where to go from here?
• http://facebook.github.io/react/
• search “Thinking in React”
!
Reaction to JSX