Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
@dino_joel
Joel Burget
(@dinojoel was taken)
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
React + Backbone
Slide 7
Slide 7 text
React + Backbone
(more)
Slide 8
Slide 8 text
React + Backbone
(more)
Slide 9
Slide 9 text
jsx
Slide 10
Slide 10 text
/** @jsx React.DOM */
var HelloWorld = React.createClass({
render: function() {
return
Hello World
;
}
});
jsx
Slide 11
Slide 11 text
WHAT. IS THAT?
/** @jsx React.DOM */
var HelloWorld = React.createClass({
render: function() {
return
Hello World
;
}
});
jsx
Slide 12
Slide 12 text
Noise
/** @jsx React.DOM */
jsx
Slide 13
Slide 13 text
transform me
React.DOM.div({}, ‘transform me’)
jsx
Slide 14
Slide 14 text
fst
snd
React.DOM.div({},
[React.DOM.span({}, ‘fst’),
React.DOM.span({}, ‘snd’)]
)
jsx
Slide 15
Slide 15 text
transform me
React.DOM.div(
{id: “transform”},
‘transform me’
)
jsx
Slide 16
Slide 16 text
var name = “HackReactor”;
return
{name}
;
var name = “HackReactor”;
return React.DOM.div(
{},
name
);
jsx
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
;
(html)
;
jsx
Slide 19
Slide 19 text
React
Slide 20
Slide 20 text
React
var CatImg = React.createClass({
render: function() {
var imgsrc =
“catimg.com/” + this.props.name;
return 
;
}
});
React.renderComponent(
,
mountNode);
Slide 21
Slide 21 text
React
Slide 22
Slide 22 text
var ClickMe = React.createClass({
render: function() {
return
{this.state.clicked ?
“clicked!” : “click me!”}
;
},
getInitialState: function() {
return { clicked: false };
},
handleClick: function() {
this.setState({ clicked: true });
}
});
React
Slide 23
Slide 23 text
React
click me!
Slide 24
Slide 24 text
React
clicked!
Slide 25
Slide 25 text
React
+ Backbone
Slide 26
Slide 26 text
React
+ Backbone
var Clicker = Backbone.Model.extend({
defaults: { active: false }
});
Slide 27
Slide 27 text
React
+ Backbone
var ClickMe2 = React.createClass({
mixins: [BackboneMixin],
render: function() {
var clicker = this.props.clicker;
var message = clicker.get(“active”) ?
“clicked!” : “click me!”;
return
{message}
;
},
handleClick: function() {
this.props.clicker.toggle(“active”);
},
getBackboneModels: function() {
return [this.props.clicker];
}
});
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Tod MVC
Slide 30
Slide 30 text
React
+ Backbone
~300 lines
Slide 31
Slide 31 text
var Todo = Backbone.Model.extend({ ... });
var TodoList = Backbone.Collection.extend({
model: Todo
...
});
React
+ Backbone
Slide 32
Slide 32 text
var TodoApp = React.createClass({
mixins: [BackboneMixin],
render: function() {
return
;
}
});
React
+ Backbone
todos
... {todos} {footer} ...Slide 33
Slide 33 text
var TodoItem = React.createClass({
handleSubmit: function(event) { ... },
onEdit: function(event) { ... },
render: function() {
return
check
title
x
;
}
});
React
+ Backbone
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
React
+ Backbone
events: {
" 'keypress #new-todo': 'createOnEnter',
" 'click #clear-completed': 'clearCompleted',
" 'click #toggle-all': 'toggleAllComplete'
},
...
this.listenTo(app.todos, 'add', this.addOne);
this.listenTo(app.todos, 'reset', this.addAll);
this.listenTo(app.todos, 'change:completed',
this.filterOne);
this.listenTo(app.todos, 'filter',
this.filterAll);
this.listenTo(app.todos, 'all', this.render);
onSubmit
onClick
Slide 36
Slide 36 text
React
+ Backbone
$('#todo-list')
.append(view.render().el);
this.$('#todo-list').html('');
this.$input.val('');
this.$el.html(
this.template(
this.model.toJSON()));
this.$el.addClass('editing');
this.$el.removeClass('editing');
etc
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Human
Slide 39
Slide 39 text
Human
24 devs & designers
Slide 40
Slide 40 text
Human
jQuery
Backbone {models, views}
Handlebars (Ugh)
Slide 41
Slide 41 text
Human
23500 LOC
200 Components
Slide 42
Slide 42 text
Human
23500 LOC
200 Components
Since June 3
Slide 43
Slide 43 text
facebook.github.io/react/
joelburget.com/backbone-to-react/
Slide 44
Slide 44 text
Thanks!
Joel Burget - @dino_joel - Khan Academy