REACT
The Value Proposition
Facebook, Instagram, WhatsApp, Yahoo, Netflix, Imgur, Reddit, Wired, BBC, New York Times, Flipboard, Atlassian, Asana, Khan Academy, Instructure, AirBnB, Redfin
What is React?
React is a JavaScript library for creating user interfaces. Many people choose to think of React as the V in MVC.
Cool, so it's a templating library like handlebars or mustache?
No, no it is not.
-
Components
-
Virtual Dom
-
Data Flow
Everything in React is a component
-
Simple
-
Declarative
-
Composable
-
Testable
Every component has the same lifecycle
- componentWillMount
- componentDidMount
- componentWillRecieveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
- componentWillUnmount
- render
- getInitialState
- getDefaultProps
- propTypes
- mixins
- statics
- displayName
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox url="comments.json" pollInterval={2000} />,
document.getElementById('content')
);
The Virtual DOM is not the Shadow DOM.
A lightweight, JavaScript representation of the DOM.
On change, React diffs the previous virtual representation of the DOM with the new virtual representation of the DOM and updates the real DOM with only the necessary changes.
One-way data flow
Cool story bro, but you can't build an application with just the V in MVC.
FLUX
An application architecture - not a framework
ACTION
DISPATCHER
STORE
VIEW
So why React?
Is it because it is fast?
O(1) v. O(n)
If you're going to keep making the performance argument, you'll eventually loose.
Erik Bryn
Is it because it is great for SEO and progressive enhancement?
No. Isomorphic JavaScript is not the only way to solve these problems.
Is it because we can build native applications with React?
Any application that can be written in JavaScript,will
eventually be written in JavaScript.
Jeff Atwood
Simplicity
The art of programming is the art of organizing complexity, of mastering multitude and avoiding its bastard chaos as effectively as possible.
Edsger Dijkstra
What matters for simplicity is that there's no interleaving.
Rich Hickey
Simplicity is prerequisite for reliability.
Edsger Dijkstra
React
By shows
React
- 662