ReactJS 101
Views
-
look nice
-
do nothing on their own
-
=> add a controller
Component
-
presentation & functionality
-
receive input
Breaking down into components
Components
props
render()
state
props
render()
state
what does this look like?
Life Cycle
- render()
- constructor()
- shouldComponentUpdate()
- and a couple more...
Virtual DOM
-
in-memory representation
-
before actual page render
-
compute diffs
<div>
<p>Hi!</p>
<p>10:45 AM</p>
<div>Virtual DOM
Real DOM
<div>
<p>Hi!</p>
<p>10:45 AM</p>
<div><div>
<p>Hi!</p>
<p>10:46 AM</p>
<div><div>
<p>Hi!</p>
<p>10:46 AM</p>
<div>Advantages
-
do fast things often
-
do slow things
-
only when needed
-
as much work as possible
-
Coding...
Diff calculation
class Parent {
constructor() {
this.obj = {val: 1};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.obj.val += 1;
}
render() {
return (
<div>
<Child input={this.obj}/>
<button onClick={this.onClick} />
</div>
);
}
}class Child {
shouldComponentUpdate(nextProps, nextState) {
return this.props.obj.val !==
nextProps.obj.val;
}
render() {
return <p> {this.props.obj.val} </p>;
}
}class Parent {
constructor() {
this.obj = {val: 1};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.obj.val += 1;
}
render() {
return (
<div>
<Child input={this.obj}/>
<button onClick={this.onClick} />
</div>
);
}
}class Child {
shouldComponentUpdate(nextProps, nextState) {
return this.props.obj.val !==
nextProps.obj.val;
}
render() {
return <p> {this.props.obj.val} </p>;
}
}u are mutating obj!
There is no silver bullet
X
Immutability
class Parent {
constructor() {
this.obj = Map({val: 1});
this.onClick = this.onClick.bind(this);
}
onClick() {
this.obj = this.obj.update(
'val',
val => val + 1
);
}
render() {
return (
<div>
<Child input={this.obj}/>
<button onClick={this.onClick} />
</div>
);
}
}class Child {
constructor() {
this.shouldComponentUpdate =
PureRenderMixin.shouldComponentUpdate
.bind(this);
}
render() {
return <p> {this.props.obj.val} </p>;
}
}Coding...
Take aways
- single responsibility: rendering
- simple (not easy :P): Components
- use plain JS
- free to architect your code as you see fit
- error messages
- easy & fast to test!
- fast
- easy to reason (using immutability)
Up next:
Q & A
Thanks!
Resources
- https://github.com/horiaradu/react-demo
- https://facebook.github.io/react/index.html
- http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html#react-and-react-hot-loader
- https://facebook.github.io/react/docs/advanced-performance.html
- https://www.codeschool.com/courses/powering-up-with-react
react 101
By Horia Radu
