A Practical Introduction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/vitaliperchonok/images/771229/react.png)
React.js
whomai
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/1791460/10005910_10202959551337011_933565341_o.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2174606/this-cool-guy-uses-arch-linux-did-you-know-that.jpeg)
Proud Linux User!!1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2174606/this-cool-guy-uses-arch-linux-did-you-know-that.jpeg)
Proud Linux User!!1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2200176/Telescope-looking-at-poster-LOL.png)
Astronomy Fan!
Sometimes I also write useful software
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/1796145/s.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/1795687/small2.png)
What's React?
What's React?
A library
What's React?
A library
For Building UI Components
What's React?
A library
For Building UI Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/vitaliperchonok/images/771229/react.png)
with a cool logo!
Only 2 Concepts!
Components
Only 2 Concepts!
Components
State Managment
Only 2 Concepts!
&
Components
State Managment
Only 2 Concepts!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/vitaliperchonok/images/771229/react.png)
here's the cool logo again!
&
Components
Let's Talk About
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2199986/Screenshot_from_2016-02-03_15_27_37.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2199986/Screenshot_from_2016-02-03_15_27_37.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2199986/Screenshot_from_2016-02-03_15_27_37.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2199986/Screenshot_from_2016-02-03_15_27_37.png)
Logic +
Logic + Structure
Logic + Structure + Style
Logic + Structure + Style
=
Logic + Structure + Style
Component
=
React Component In a Nutshell
React Component In a Nutshell
(with ugly diagrams :P)
React Component In a Nutshell
-> "public" data" , called .props
(with ugly diagrams :P)
React Component In a Nutshell
-> "public" data" , called .props
-> "private" data, called .state
(with ugly diagrams :P)
React Component In a Nutshell
-> "public" data" , called .props
-> "private" data, called .state
-> a render() function
(with ugly diagrams :P)
React Component In a Nutshell
-> "public" data" , called .props
-> "private" data, called .state
-> a render() function
-> life cycle methods (more on that later...)
(with ugly diagrams :P)
React Component In a Nutshell
-> "public" data" , called .props
-> "private" data, called .state
-> a render() function
-> life cycle methods (more on that later...)
(with ugly diagrams :P)
Weird diagram I Know..
React Component In a Nutshell
-> "public" data" , called .props
-> "private" data, called .state
-> a render() function
-> life cycle methods (more on that later...)
(with ugly diagrams :P)
That's better!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/vitaliperchonok/images/771229/react.png)
Code
We will see code later...
Code
Now, That other thing....
State!
State!
Data Changing Over Time Is Hard!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2198925/m.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2198926/n.png)
Simple Data Changes
UnitMenuView = Backbone.View.extend({
initialize : function(model) {
model.on("change:visibility", this.onVisibilityChanged);
this.render();
},
onVisibilityChanged : function(visibile) {...},
render : function() { this.$el.html(this.template(this.model))}
})
"Traditional" Backbone View
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2198925/m.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2198926/n.png)
Simple Data Changes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2199011/Screenshot_from_2016-02-03_11_37_32.png)
UnitMenuView = Backbone.View.extend({
initialize : function(model) {
model.on("change:visibility", this.onVisibilityChanged);
model.on("change:temperature", this.onTemperatureChanged);
this.render();
},
onVisibilityChanged : function(visibile) {...},
onTemperatureChanged : function(temp) {...},
render : function() { this.$el.html(this.template(this.model))}
})
"Traditional" Backbone View
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/1797065/sel4-call-graph.png)
hmmm....
Can we just re-render on any change?
UnitMenuView = Backbone.View.extend({
initialize : function(model) {
model.on("change", this.render);
this.render();
},
render : function() { this.$el.html(this.template(this.model))}
})
Like this?
nope :(
DOM haz our state!!!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2199968/Screenshot_from_2016-02-03_15_22_12.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/52782/images/2174645/a3e74e84b75879442f73df18e67c1e0c8cb93e5919a4b3f1baba511bfa3e6cb8.jpg)
But...
This is how React Works!
render()
render()
is a "pure" function
render()
is a "pure" function
that returns an instance of a react component
render()
is a "pure" function
that returns an instance of a react component
render()
render()
is a "pure" function
that returns an instance of a react component
render()
.state
render()
is a "pure" function
that returns an instance of a react component
render()
.state
.props
But How?!
Virtual DOM
![](https://s3.amazonaws.com/media-p.slid.es/uploads/vitaliperchonok/images/771982/text3365.png)
(Nominated for Best Diagram Award!)
Virtual DOM
Basically
Virtual DOM
It's an implementation detail... don't worry about it too much
Basically
Let's See Code
var Hello = React.createClass({
render: function render() {
return React.createElement("div", null,
"Hello ", this.props.message);
}
});
var Hello = React.createClass({
render: function render() {
return React.createElement("div", null,
"Hello ", this.props.message);
}
});
React.createElement(type, props, children);
var Hello = React.createClass({
render: function render() {
return React.createElement("div", null,
"Hello ", this.props.message);
}
});
React.createElement(type, props, children);
var HelloApp = React.createClass({
render: function render() {
return React.createElement(Hello, {message : "blah"});
}
});
Before we look at some examples...
JSX
JSX
Optional DSL with XML like syntax
JSX
<ComponentName prop1={2 + 4} prop2="primitive"> Children here </ComponentName>
Optional DSL with XML like syntax
JSX
<ComponentName prop1={2 + 4} prop2="primitive"> Children here </ComponentName>
Optional DSL with XML like syntax
compiles to:
JSX
<ComponentName prop1={2 + 4} prop2="primitive"> Children here </ComponentName>
Optional DSL with XML like syntax
React.createElement(ComponentName,
{prop1 : 2+4, prop2 : "primitive"},
"children here");
compiles to:
Questions?
react-intro
By Vitali Perchonok
react-intro
- 1,286