Intro to ReactJS
- 3. What I'll be showing
• Current approaches
• React
• Demos
• Summarize
- 5. 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();
}
});
- 8. Angular
!
• MVC
• Angular Markup: ng-model, ng-show, ng-repeat
• Dirty checking, speed limitations
• Large API.
• Scopes are inherited.
- 19. Users
AirBNB, BBC, CodeAcademy, Dropbox, Facebook,
Flipboard, Github, Imgur, Instagram, Khan
Academy, Netflix, NYT, PayPal, Reddit, Redfin,
Uber, Wired, Yahoo…
- 21. Simple Component
var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />,
mountNode);
- 22. JSX
var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />,
mountNode);
- 24. 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
- 25. JSX
var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />,
mountNode);
- 26. JSX -> createElement
var HelloMessage = React.createClass({displayName:
"HelloMessage",!
render: function() {!
return React.createElement("div", null, "Hello ",
this.props.name);!
}!
});!
!
React.render(React.createElement(HelloMessage, {name:
"John"}), mountNode);
- 27. f(data)=virtual DOM
var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />,
mountNode);
- 28. Using a Component
var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />,
mountNode);
- 29. Passing props
var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />,
mountNode);
- 30. Questions?
var HelloMessage = React.createClass({!
render: function() {!
return <div>Hello {this.props.name}</div>;!
}!
});!
!
React.render(<HelloMessage name="John" />,
mountNode);
- 32. Timer: has secondsElapsed
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>!
);!
}!
});
- 33. Initialize State
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>!
);!
}!
});
- 34. 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>!
);!
}!
});
- 35. render
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>!
);!
}!
});
- 37. Composition
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>!
);!
- 38. 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>!
);!
- 39. Passing data to children
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>!
);!
- 42. Need-to-know
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>!
);!
- 60. Hello World
• import React from 'react';
export default class WhosAsleepScore
extends React.Component {
render() {
return (
<h1>Hello, world!</h1>
);
}
}
- 63. 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>
);
}
}
- 67. End Result
import 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>
);
}
}
- 75. // if we have an error
if (this.state.error !== null) {
innerNode = <ErrorWidget title="NASA
API Error" message={this.state.error} />;
title = 'Error';
}
If Error
- 76. 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>
);
}
}
- 78. propTypes
class 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>
);
}
}
- 79. Loading
// if we don't have a picture
else if (this.state.picture === null) {
innerNode = <Loading title="Getting
Image..." />;
title = 'Loading...';
}!
- 80. 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>
);
}
}
- 81. else: Picture
// if we have a picture
else {
innerNode = <PictureOfTheDay
picture={this.state.picture} />;
title = this.state.picture.title;
}!
- 93. Where to go from here?
• http://facebook.github.io/react/
• search “Thinking in React”
!