React matters because it allows developers to build user interfaces (UIs) using JavaScript by treating the UI as a function of application state. React introduces several key concepts and features that make it useful for building UIs, including treating the UI as a pure function of state, one-way data flow that promotes predictability, and tools for optimizing re-renders through shouldComponentUpdate and immutable data structures. Overall, React provides an effective way to build UIs that can update efficiently as state changes.

1. Why React matters

2. Credits: lifehack.org

4. ShihChi
Huang

7. learn once
write anywhere

9. web developer

10. web developer
mobile developer

13. What’s React

14. A javascript
library for
building UI

15. A javascript
library for
building UI
javascript

16. A javascript
library for
building UI
javascript
UI

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

19. against best practices
worst technology ever*
ridicolousback
90s
WTF

20. against best practices
worst technology ever*
ridicolousback
90s
WTF

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

22. M C
V

23. UNIX Philosophy

24. do one thing and do it well
UNIX Philosophy

25. do one thing and do it well
UNIX Philosophy
write programs to work together

26. do one thing and do it well
UNIX Philosophy
write programs to work together
handle text streams

28. Separation
of
Concerns

32. shouldComponentUpdate

33. shouldComponentUpdate
render
true

34. ES2015
warm-up

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

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

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

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

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

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

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

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

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

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

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

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

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

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

49. var todos = this.props.todos.map(todo =>
<TodoItem
/>
});
var todos = this.props.todos.map(todo =>
<TodoItem
id={todo.id}
/>
});
var todos = this.props.todos.map(todo =>
<TodoItem
id={todo.id}
content={todo.content}
/>
});
var todos = this.props.todos.map(todo =>
<TodoItem
id={todo.id}
content={todo.content}
isCompleted={todo.isCompleted}
/>
});

50. var todos = this.props.todos.map(todo =>
<TodoItem
/>
});
var todos = this.props.todos.map(todo =>
<TodoItem
id={todo.id}
/>
});
var todos = this.props.todos.map(todo =>
<TodoItem
id={todo.id}
content={todo.content}
/>
});
var todos = this.props.todos.map(todo =>
<TodoItem
id={todo.id}
content={todo.content}
isCompleted={todo.isCompleted}
/>
});
var todos = this.props.todos.map(todo =>
<TodoItem
id={todo.id}
content={todo.content}
isCompleted={todo.isCompleted}
/>
});
// spread operator
var todos = this.props.todos.map(todo =>
<TodoItem {...todo} />
});

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

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

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

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

56. Are you still watchingthere?
Continue
Back

57. UI = f(state)

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

59. // 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;
}

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

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

62. Predictable

63. 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>
);
}
}

64. 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>
);
}
}
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>
);
}
}

65. 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>
);
}
}
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>
);
}
}
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>
);
}
}

66. 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>
);
}
}
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>
);
}
}
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>
);
}
}
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>
);
}
}

67. 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>
);
}
}
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>
);
}
}
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>
);
}
}
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>
);
}
}
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>
);
}
}

69. UX

71. simple ≠ familiar

72. credits: facebook.github.io/flux

73. scalable?

74. View
Store Dispatcher
Action

75. View
Store Dispatcher
Action

76. Unidirectional

78. re-render
whenever
state changes

79. re-render
whenever
state changes
re-render
whenever
state changes

80. computation
intensive?

81. Immutable!

82. get a new value
whenever make a change

83. credits: David Nolen

84. linked list

85. X
linked list

86. XY
linked list

87. XY
Z
linked list

88. XY
Z
structure sharing
linked list

89. structure sharing

90. structure sharing
• space efficiency

91. structure sharing
• computation efficiency
• space efficiency

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

93. class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
}
render() {
// ...
}
}

94. class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
return (
content !== nextProps.content &&
isCompleted !== nextProps.isCompleted
);
}
render() {
// ...
}
}

95. class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
return (
content !== nextProps.content &&
isCompleted !== nextProps.isCompleted
);
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
return (
this.props === nextProps
);
}
render() {
// ...
}
}

96. class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
return (
content !== nextProps.content &&
isCompleted !== nextProps.isCompleted
);
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
return (
this.props === nextProps
);
}
render() {
// ...
}
}

97. class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
return (
content !== nextProps.content &&
isCompleted !== nextProps.isCompleted
);
}
render() {
// ...
}
}
class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
var { content, isCompleted } = this.props;
return (
this.props === nextProps
);
}
render() {
// ...
}
}
pros / nextProps are mutable and we
can’t simply
compare it’s reference

98. var Immutable = require('immutable');

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

100. var Immutable = require('immutable');var Immutable = require('immutable');
var todo = Immutable.Map({
content: 'say hello',
isCompleted: false
});
var Immutable = require('immutable');
var todo = Immutable.Map({
content: 'say hello',
isCompleted: false
});
var mutatedTodo = todo.set(
“isCompleted”, true
);

101. var Immutable = require('immutable');var Immutable = require('immutable');
var todo = Immutable.Map({
content: 'say hello',
isCompleted: false
});
var Immutable = require('immutable');
var todo = Immutable.Map({
content: 'say hello',
isCompleted: false
});
var mutatedTodo = todo.set(
“isCompleted”, true
);
var Immutable = require('immutable');
var todo = Immutable.Map({
content: 'say hello',
isCompleted: false
});
var mutatedTodo = todo.set(
“isCompleted”, true
);
if (todo !== mutatedTodo) {
console.log('changed!');
// > changed!
}

102. class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return (
this.props === nextProps
);
}
render() {
// ...
}
}

103. class TodoItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return (
this.props === nextProps
);
}
render() {
// ...
}
}

104. recap

105. recap
• UI = f(state)

106. recap
• Predictable
• UI = f(state)

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

108. <Questions />