Why react matters

web developer
mobile developer

A javascript
library for
building UI

A javascript
library for
building UI
javascript

A javascript
library for
building UI
javascript
UI

var Greeting = React.createClass({
render() {
return (
<p>{"HELLO " + this.props.name}</p>
);
}
});
<Greeting name="techplanet" />
// HELLO techplanet

against best practices
worst technology ever*
ridicolousback
90s
WTF

Credits: vjeux@
min(Time to Find Root Cause)

do one thing and do it well
UNIX Philosophy

UNIX Philosophy
write programs to work together

UNIX Philosophy
write programs to work together
handle text streams

shouldComponentUpdate
render
true

function hello() {
return 'world';
}
// arrow function
var hello = () => {
return 'world';
}
var hello = () => ‘world';

function hello() {
return 'world';
}
// arrow function
var hello = () => {
return 'world';
}
function hello() {
return 'world';
}
// arrow function
var hello = () => {
return 'world';
}

var state = {
foo: foo,
bar: bar,
}

var state = {
foo: foo,
bar: bar,
}
var state = {
foo: foo,
bar: bar,
}
// enhanced object literals
var state = {
};

var state = {
foo: foo,
bar: bar,
}
var state = {
foo: foo,
bar: bar,
}
var state = {
};
var state = {
foo: foo,
bar: bar,
}
var state = {
foo,
};

var Greet = React.createClass({
render() {
return <div />;
}
});
// class
class Greet extends React.Component {
render() {
return <div />;
}
}

var PropTypes = React.PropTypes;
var Components = React.Components;
// destructuring
var { PropTypes, Component } = React;

// destructuring
// destructuring

// destructuring
// destructuring
// destructuring

var todos = this.props.todos.map(todo =>
<TodoItem
/>
});

<TodoItem
/>
});
<TodoItem
id={todo.id}
/>
});

<TodoItem
/>
});
<TodoItem
id={todo.id}
/>
});
<TodoItem
id={todo.id}
content={todo.content}
/>
});

<TodoItem
/>
});
<TodoItem
id={todo.id}
/>
});
<TodoItem
id={todo.id}
/>
});
<TodoItem
id={todo.id}
isCompleted={todo.isCompleted}
/>
});

<TodoItem
/>
});
<TodoItem
id={todo.id}
/>
});
<TodoItem
id={todo.id}
/>
});
<TodoItem
id={todo.id}
/>
});
<TodoItem
id={todo.id}
/>
});
// spread operator
<TodoItem {...todo} />
});

var data = {
foo: 'bar',
hello: 'world',
answer: 42,
};

var data = {
foo: 'bar',
hello: 'world',
answer: 42,
};
var { foo, ...rest } = data;

var data = {
foo: 'bar',
hello: 'world',
answer: 42,
};
var { foo, ...rest } = data;
// rest
{
hello: 'world',
answer: 42
}

// arrow function
var hello = () => ‘world’;
// enhanced object literal
var state = { foo, bar };
// destructuring
// class
class Greet extends React.Component {}
// spread operator
<TodoItem {...todo} />

Are you still watchingthere?
Continue
Back

pure function
is a function where
the return value is only
determined by its input values

// f(x) = x + 1;
var increment = (x) => {
return x + 1;
}
// f(x) = 2^x * x^3 - x - 1;
var complex = (x) => {
return Math.pow(2, x)
* Math.pow(x, 3)
- x - 1;
}

pure function
is a function where
the return value is only
determined by its input values
at any given time

var counter = 0;
setInterval(() => counter++, 1000);
var timeVariant = (x) => {
return x + counter;
}
> timeVariant(3)
> 4
// after few seconds
> timeVariant(3)
> 7

class TodoApp extends React.Component {
render() {
var { isLoaded, todos } = this.props;
if (!isLoaded) { return <Spinner />; }
if (!todos.length) {
return <EmptyResult />;
}
return (
<TodoList>
{this.props.todos.map(todo => {
return <TodoItem {...todo} />;
})}
</TodoList>
);
}
}

render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}

render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}

render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}

render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}
render() {
}
return (
<TodoList>
})}
</TodoList>
);
}
}

credits: facebook.github.io/ﬂux

re-render
whenever
state changes

re-render
whenever
state changes
re-render
whenever
state changes

get a new value
whenever make a change

XY
Z
structure sharing
linked list

structure sharing
• space efficiency

structure sharing
• computation efficiency
• space efficiency

class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
}
render() {
// ...
}
}

}
render() {
// ...
}
}
var { content, isCompleted } = this.props;
}
render() {
// ...
}
}

}
render() {
// ...
}
}
}
render() {
// ...
}
}
return (
content !== nextProps.content &&
isCompleted !== nextProps.isCompleted
);
}
render() {
// ...
}
}

}
render() {
// ...
}
}
}
render() {
// ...
}
}
return (
);
}
render() {
// ...
}
}
return (
this.props === nextProps
);
}
render() {
// ...
}
}

}
render() {
// ...
}
}
}
render() {
// ...
}
}
return (
);
}
render() {
// ...
}
}
return (
);
}
render() {
// ...
}
}
pros / nextProps are mutable and we
can’t simply
compare it’s reference

var Immutable = require('immutable');

var Immutable = require('immutable');var Immutable = require('immutable');
var todo = Immutable.Map({
content: 'say hello',
isCompleted: false
});

isCompleted: false
});
isCompleted: false
});
var mutatedTodo = todo.set(
“isCompleted”, true
);

isCompleted: false
});
isCompleted: false
});
);
isCompleted: false
});
);
if (todo !== mutatedTodo) {
console.log('changed!');
// > changed!
}

return (
);
}
render() {
// ...
}
}

recap
• Predictable
• UI = f(state)

recap
• Predictable
• UI = f(state)
• Immutable

Why react matters

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (12)

Similar to Why react matters

Similar to Why react matters (20)

Recently uploaded

Recently uploaded (20)

Why react matters