React js
Quick UI
without worries
by Maksim Kozhukh
plain javascript
REACT JS
Typical problems
of web apps
- performance
- complex UI and logic
- developers
MVC will help us !
Backbone
Angular
Ember
...
or won't ...
REACT . JS
Model View Controller
- simple syntax
- components
- really fast
syntax
var HelloWorld = React.createClass({
render: function(){
return React.DOM.p("Hello world");
}
});
React.renderComponent(
HelloWorld(),
document.getElementById('example')
);
We've just learned 30% of react.js
what do we need it for ?
return React.DOM.ul([
React.DOM.li("Option A"),
React.DOM.li("Option B")
])
return "<ul><li>Option A</li><li>Option B</li></ul>";
VS
Virtual DOM
Sounds crazy, but it works faster :)
Virtual DOM
Full control over DOM manipulation
- applies all the changes at once
-
requestAnimationFrame
- no space left for jQuery
During the rendering process
React compares the old vDOM with the new one
and applies only the changes
Typical problems
of web apps
-
performance
-
complex UI and logic
Components
var HelloWorld = React.createClass({
render: function(){
return React.DOM.p( "Hello world " + this.props.index );
}
});
var HelloUniverse = React.createClass({
render: function() {
var worlds = [];
for(var i=0; i<100; i++)
worlds.push( HelloWord({ index: i }));
return React.DOM.div(worlds);
}
});
The level of learning react.js is 50%
Example
Example
Components
var HelloWorld = React.createClass({
render: function(){
return React.DOM.p( "Hello world " + this.props.index );
}
});
var HelloUniverse = React.createClass({
render: function() {
var worlds = [];
for(var i=0; i<100; i++)
worlds.push( HelloWord({ index: i }));
return React.DOM.div(worlds);
}
});
jxl
/** @jsx React.DOM */
var HelloWorld = React.createClass({
render: function(){
return <p>Hello world {this.prop.index}</p>;
}
});
var HelloUniverse = React.createClass({
render: function() {
var worlds = [];
for(var i=0; i<100; i++)
worlds.push( <HelloWorld index={i} /> );
return <div>(worlds)</div>;
}
});
JXL
2000
Javascript code in HTML
2014
HTML tags in Javascript code
The most difficult example
var HelloUniverse = React.createClass({
getInitialState:function(){
return { start: 0; }
},
shiftNext:function(){
this.setState({ start : this.state.start + 1 });
},
render: function() {
var worlds = [];
var start = this.start.state;
for(var i=start; i<start + 10000; i++)
worlds.push( <HelloWorld index={i} onClick={this.onClick} /> );
return <div onClick={this.shiftNext}>(worlds)</div>;
}
});
The level of learning react.js is 80%
The most difficult example - State
var HelloUniverse = React.createClass({
getInitialState:function(){
return { start: 0; }
},
shiftNext:function(){
this.setState({ start : this.state.start + 1 });
},
render: function() {
var worlds = [];
var start = this.start.state;
The most difficult example
render: function() {
var worlds = [];
var start = this.start.state;
for(var i=start; i<start + 10000; i++)
worlds.push( <HelloWorld index={i} onClick={this.onClick} /> );
return <div onClick={this.shiftNext}>(worlds)</div>;
}
});
other wonders
- Automatic event delegation
-
Can be used with SVG, VML, Canvas
-
Can be used with NodeJS
-
Can be run with Web Worker
- Can be tested
Typical problems
of web apps
-
performance
-
complex UI and logic
-
developers ?
who uses it
Khan Academy
good parts
- Easy to learn
- Easy to work with
- Really fast
- Compatibility ( MVC)
- Facebook support
bad parts
- compatibility ( libs )
- ideology
- IE8+ only
REACT vs ANGUlAR
VS
Angular
React
- Simple
- Components
-
"V" only
-
One-way binding
- Fast
- Complex
- Directives
-
All MVC
-
Two-way binding
- Not so fast
REACT VS ANGULAR
Vanilla JS is faster, anyway
see the difference
that's all
http://facebook.github.io/react/index.html
ReactJS
By Mary Lutova
ReactJS
Quick UI without worries
- 3,380