React.js

1. React.js
or why DOM finally makes sense

2. JSX ⊙_⊙
/**
@jsx
React.DOM
*/
var
name
=
"Foo",
commentText
=
"Bar",
avatarUrl="Baz";
var
avatar
=
<img
src
=
{avatarUrl}/>;
var
comment
=
<div
className="comment">
{avatar}
@{name}:
{commentText}
</div>

3. JSX is nice!
⊙⌣⊙
!
var
name
=
"Foo",
commentText
=
"Bar",
avatarUrl="Baz";
var
avatar
=
React.DOM.img(
{src:
avatarUrl});
var
comment
=
React.DOM.div(
{className:"comment"},
avatar,
"
@",name,":
",
commentText
)
/**
@jsx
React.DOM
*/
var
name
=
"Foo",
commentText
=
"Bar",
avatarUrl="Baz";
var
avatar
=
<img
src
=
{avatarUrl}/>;
var
comment
=
<div
className="comment">
{avatar}
@{name}:
{commentText}
</div>

4. JSX rocks!
⊙⌣⊙
• tags are functions
• you can use closures
• scope is straightforward
• normalized DOM

5. the rules!
• do not mix logic and presentation
• do not write inline javascript

6. FUCK!
the rules!
• do not mix logic and presentation
• do not write inline javascript

7. components
components
components
/**
@jsx
React.DOM
*/
var
User
=
React.createClass({
render:
function()
{
return
(<div>
<img
src={this.props.avatar}/>:
@{this.props.username}
</div>);
}
});
!
React.renderComponent(
<User
username="Eldar"
avatar="http://img.src/edjafarov"/>,
document.getElementById('example')
);

8. components
components
components
/**
@jsx
React.DOM
*/
var
Avatar
=
React.createClass({
render:
function()
{
return
<img
src={this.props.uri}/>;
}
});
var
User
=
React.createClass({
render:
function()
{
return
(<div>
<Avatar
uri={this.props.avatar}/>:
@{this.props.username}
</div>);
}
});

9. components
components
components

10. Props & State
var
User
=
React.createClass({
getInitialState:
function(){
return
{
name:this.props.user.name,
uri:
this.props.user.uri
}
},
render:
function()
{
return
(<div>
<Avatar
uri={this.props.avatar}/>:
@{this.state.name}
</div>);
}
});

11. Props & State

12. routing
doesn’t matter
http://visionmedia.github.io/page.js/
var
User
=
require('./User');
page('/user/:user',
user.load,
function(ctx){
React.renderComponent(
<User
user={ctx.user}/>,
document.getElementById('root')
);
})

13. 2 way binding/**
@jsx
React.DOM
*/
var
WithLink
=
React.createClass({
mixins:
[React.addons.LinkedStateMixin],
getInitialState:
function()
{
return
{value:
'Hello!'};
},
render:
function()
{
return
<input
type="text"
valueLink={this.linkState('value')}
/>;
}
});
var
Hello
=
React.createClass({
mixins:[ModelMixin,
BindMixin],
getBackboneModels:
function(){
return
[this.props.instance]
},
render:
function()
{
var
model
=
this.props.instance;
return
<div>
<div>Hello
{model.get(‘initial')}</div>
<input
type="text"
valueLink={this.bindTo(model,
'initial')}/>
</div>
}
});

14. models
or
emitters?
What if models and collections are not enough?
https://github.com/component/emitter
var
Emitter
=
require('emitter');
var
UserModel
=
new
Emitter({}
data:
{},
update:
function(){
//some
async
update
this.data
=
newData;
this.emit('change');
//-­‐-­‐-­‐
}
);
UserModel.on('change',
/*update
component*/);
//You
can
use
mixin
to
do
that
automatically

15. be Lazy with
factory
• get bunch of id’s
• get empty model’s from factory by these id’s
• pass them to component
• PROFIT!

16. Q&A
@edjafarov
eldar.djafarov.com
just visit
reactjs.com
✌