ReactJS for Programmers

ReactJS
for Programmers
by Dr. David Rodenas

2014
FB about Web
3
https://youtu.be/nYkdrAPrdcw?t=10m20s

FB about MVC
4
“MVC works pretty well
for small applications…
but it doesn’t make room
for new features.”
“Flux is a single direction data flow,
that avoids all the arrows
going on all directions
what makes really
hard to understand the system.”

FB about Chat
5
“Let’s see a real good example: FB chat”
“How we get to the point, so we were annoying our
users so much the just they wanted us to fix chat?”
“The problems here were:
• The code has no structure
• It was very imperative, that makes it fragile
• It loose a lot of the original intend behind it, its hard to tell what it tries [to do]
• Add more features only gets this code larger
• We had our most annoying chat bug happen over and over
• We were always fixing some pretty good edge case, the whole system was fragile
• …
• This code becomes more fragile with the time.
• No member of the team wanted to touch it, they wanted to jump to any other bug.”

FB about Rendering
6
“Imperative Rendering”
“If renders all each time
the screen flickers”
“We wanted always render all, no matter what”
“Here is where React comes in.”

Prerequisite
9
Install React Developer Tools

Hello World

<div id="root"></div>
// hello-world.js
const virtualDom = React.createElement(
'h1', null, 'Hello, world!'
);
ReactDOM.render(
virtualDom,
document.getElementById('root')
);
11

Hello World
// hello-world.jsx
const virtualDom = <h1>Hello, world!</h1>;
ReactDOM.render(
virtualDom,
);
12

Hello World
// hello-world.jsx
ReactDOM.render(
<h1>Hello, world!</h1>,
);
13
https://facebook.github.io/react/docs/hello-world.html

Hello World
// This is translated by Babel to...
ReactDOM.render(
<h1>Hello, world!</h1>,
);
// ...to this
ReactDOM.render(React.createElement(
'h1',
null,
'Hello, world!'
), document.getElementById('root'));
14
https://babeljs.io/repl

• ReactJS only updates what changes
• Although everything is regenerated every time
• Open countdown example at codepen with chrome 
http://codepen.io/drpicox/pen/yMKWGN
• Inspect page
• You can see that only the span is updated 
(although this crude code changes everything)
Do not fear change
15

JSX
https://facebook.github.io/react/docs/introducing-jsx.html

JSX
// Just sugar syntax
const element = <h1>Hello, world!</h1>;
// It is just one object
const element = React.createElement(
"h1",
null,
"Hello, world!"
);
// one object that you can manipulate as object
17

JSX
// May I?
console.log(<h1>Hello!</h1>);
console.log(<h1>Hello!</h1>.toString());
console.log([<h1>Hello!</h1>]);
console.log({hello: <h1>Hello!</h1>});
console.log((() => <h1>Hello!</h1>)());
const salute = (what) => <h1>{what}!</h1>;
console.log(salute('Hello'));
18

JSX
// Have multiple elements (but one wrapper)
const element = <h1><span>Hello</span>, world!</h1>;
// Generates
"h1",
null,
React.createElement(
"span",
null,
"Hello"
),
", world!"
);
19

JSX
// It can be multiline (be careful using return)
const element =
<h1>
Hello, world!
</h1>;
20

JSX
// It can be multiline (better)
const element = <h1>
Hello, world!
</h1>;
21

JSX
// It can be multiline (recommended)
const element = (
<h1>
Hello, world!
</h1>
);
22

JSX - Interpolation
// Interpolate any JS expression
const name = 'bob hoskings';
const element = (
<h1>
Hello, {name}!
</h1>
);
// It is just one argument more
'h1',
null,
'Hello, ',
name,
'!'
);
23

JSX - Interpolation
// Interpolate any JS expression
const user = {name:'bob', lastName:'hoskings'};
const element = (
<h1>
Hello, {user.name + ' ' + user.lastName}!
</h1>
);
// It is still just one argument more
'h1',
null,
'Hello, ',
user.name + ' ' + user.lastName,
'!'
);
24

JSX - Interpolation
// any expression, including JSX
const element = <h1>Hello, {<span>world</span>}!</h1>
// It is still just one argument more
"h1",
null,
"Hello, ",
React.createElement(
"span",
null,
"world"
),
"!"
);
25

JSX - Properties
// Add attributes
const element = <div tabIndex="0">...</div>;
// Is transformed into a property object (alias props)
"div",
{ tabIndex: "0" },
"..."
);
26

JSX - Properties
// Add computed attributes
const element = <img src={user.imageUrl} />;
// Is transformed into a property object (alias props)
"img",
{ src: user.imageUrl },
);
27

JSX - Properties
// Set variable attributes
const options = {
autoplay: true,
muted: true,
};
const element = <video src="wow.mp4" {...options} />;
// Are merged into attribute
"video",
{
src: "wow.mp4",
...options
},
);
28

JSX - Properties
// Set variable attributes
const options = {
autoplay: true,
muted: true,
};
const element = <video src="wow.mp4" {...options} />;
// Are merged into attribute
"video",
{
src: "wow.mp4",
autoplay: true, muted: true
},
);
29

Properties vs Attributes

<img id="hello" src="hello.jpg">

const helloImg = document.getElementById('hello');
console.log(helloImg.src);
30

Properties vs Attributes

<h1 id="hello" class="big">Hello</h1>

const helloH1 = document.getElementById('hello');
console.log(helloH1.className);
31

JSX - Properties
// Because bad IE8 habits: className instead of class
const element = <h1 className="big">Hello</h1>;
// Is rendered as real html attribute:
<h1 class="big">Hello</h1>
32

JSX - Cross-site-scripting
// It is just a string
const title = response.veryMaliciousInputString;
// This is save
const element = <h1>{title}</h1>;
33

JSX - XML
// Is XML-like
const element = (
<div>
Hello <br/> World
</div>
);
// Elements must be terminated
const element = (
<div>
Hello <br> World
</div>
);
34

Rendering Elements
https://facebook.github.io/react/docs/rendering-elements.html

Rendering Elements
// JSX elements are just memory objects
const element = <h1>Hello, world</h1>;
36

Rendering Elements
// Given an html DOM element
// they can be rendered inside DOM
const domElement = document.getElementById('root');
const reactElement = <h1>Hello, world</h1>;
ReactDOM.render(
reactElement,
/* into */ domElement
);
37

Rendering Elements
// As many times as you want
// react only updates changes
const domElement = document.getElementById('root');
let n = 0;
setInterval(() => {
ReactDOM.render(<h1>{n += 1}</h1>, domElement);
}, 1000);
38

Components and Props
https://facebook.github.io/react/docs/components-and-
props.html

Components
// Can be defined as functions
const HelloWorld = () => {
return <h1>Hello, world</h1>;
};
export default HelloWorld;
40

Components
// Can be defined as functions
const HelloWorld = () => {
};
export default HelloWorld;
// Can be defined as classes
export default class HelloWorld extends React.Component
{
render() {
}
}
41

Component and properties
const element = <Welcome name="Dave" />;
42

// Remember: it is like write
Welcome,
{ name: "Dave" }, // are called props
);
43

// This is how you define the Component to use props
function Welcome(props) {
return (
<h1>Hello {props.name}!</h1>
);
}
44

// This is how you define the Component to use props
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<h1>Hello {this.rops.name}!</h1>
);
}
}
45

Composing Components
function App() {
return (
<div>
<Welcome name="Alice" />
</div>
);
}
46

Composing Components
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
<Welcome name="Dave" />
</div>
);
}
47

Refactoring Components
function Component(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
48

function Avatar(props) {
return (
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
49
src={props.author.avatarUrl}
alt={props.author.name}
/>

return (
<Avatar user={props.author} />
{props.author.name}
</div>
</div>
{props.text}
</div>
</div>
</div>
);
}
50

return (
<Avatar user={props.author} />
{props.author.name}
</div>
</div>
{props.text}
</div>
</div>
</div>
);
}
51

function UserInfo(props) {
return (
<Avatar user={props.user} />
{props.user.name}
</div>
</div>
);
}
52

return (
<UserInfo user={props.author} />
{props.text}
</div>
</div>
</div>
);
}
53

Props are Read-Only
// Render must be read-only
function MissbehavingComponent(props) {
return <h1>{props.n += 1}</h1>;
}
54

State and Lifecycle
https://facebook.github.io/react/docs/state-and-lifecycle.html

Function to Class Component
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.time}.</h2>
</div>
);
}
56

class Clock extends React.Component {
render() {
return (
<div>
<h2>It is {this.props.time}.</h2>
</div>
);
}
}
57

render() {
return (
<div>
<h2>It is {this.props.time}.</h2>
</div>
);
}
}
58

Setup State
super(props);
this.state = {time: Date.now()};
}
render() { ... }
}
59

Setup State
constructor(props) { ... }
render() {
return (
<div>
<h2>It is {this.state.time}.</h2>
</div>
);
}
}
60

Lifecycle Methods
componentDidMount() { /* TODO */ }
componentWillUnmount() { /* TODO */ }
render() { ... }
}
61

Lifecycle Methods
componentDidMount() {
this.timerId = setInterval(
() => this.setState({time: Date.now()}),
1000
);
}
componentWillUnmount() { /* TODO */ }
render() { ... }
}
62

Lifecycle Methods
componentDidMount() { ... }
componentWillUnmount() {
clearInterval(this.timerId);
}
render() { ... }
}
63

setState Asynchronous
// Wrong!
setState({counter: this.state.counter + 1});
// Correct
setState((prevState, props) => ({
counter: prevState.counter + 1
});
64

States are Merged
constructor() {
this.state = {posts: [], users: []};
}
getPosts((posts) => this.setState({posts}));
getUsers((users) => this.setState({users}));
}
65

State Isolated
function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
}
66

Handling Events
https://facebook.github.io/react/docs/handling-events.html

onEvent={fn}
function ButtonLogHello() {
function handleClick() {
console.log('The button is clicked');
}
return (
<button onClick={handleClick}>
click me
</button>
);
}
68

onEvent={fn}
// It received the event as parameter
function ALogHello() {
function handleClick(ev) {
ev.preventDefault();
console.log('The link is clicked');
}
return (
<a href="#" onClick={handleClick}>
click me
</a>
);
}
69

onEvent={fn}
// It can inline functions (are expressions)
function DivLogHello() {
return (
<button onClick={() => console.log('oh')}>
click me
</button>
);
}
70

Toggle Example
class Toggle extends React.Component {
super(props);
this.state = { isToggleOn: true };
}
...
71

Toggle Example
super(props);
}
handleClick() { ... }
...
72

Toggle Example
super(props);
// This binding is necessary by `this`
this.handleClick = this.handleClick.bind(this);
}
handleClick() { ... }
...
73

Toggle Example
super(props);
// Fat arrow function preserves `this`
this.handleClick = () => { ... };
}
...
74

Toggle Example
super(props);
}
// Stage 2 alternative (recommended official)
handleClick = () => { ... }
...
75

Toggle Example
super(props);
}
handleClick = () => { … }
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'on' : 'off'}
</button>
);
}
}
76

Toggle Example
super(props);
}
handleClick = () => {
// Warning, wrong implementation
this.setState({ isToggleOn: !this.state.isToggleOn });
}
render() {
return (
</button>
);
}
}
77

Toggle Example
super(props);
}
handleClick = () => {
this.setState((prevState) => ({
isToggleOn: !prevState.isToggleOn,
});
}
render() {
return (
</button>
);
}
}
78

Conditional Rendering
https://facebook.github.io/react/docs/conditional-
rendering.html

Conditional Rendering
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
80

By return
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
);
81

By variable
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} /
>;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
82

By && expression
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread
messages.
</h2>
}
</div>
);
}
83

By ?: expression
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton
onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
84

Prevent Render
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
85

Lists and Keys
https://facebook.github.io/react/docs/lists-and-keys.html

Remember...
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2);
console.log(doubled);
// [2, 4, 6, 8, 10]
87

Render Multiple
// Render a reactElements array
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
);
88

Render Multiple
// Refactor into component
function NumberList(props) {
const numbers = props.numbers;
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
);
89

Key
<li key={number.toString()}>
{number}
</li>
);
return (
);
}
90

Key - index
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
91

Key - Refactor Component
<li key={number.toString()}>
{number}
</li>
);
return (
);
}
92

function ListItem(props) {
return (
// Wrong! should not be here
<li key="props.number.toString()">
{props.number}
</li>
);
}
93

// Correct: key must remain with map
<ListItem key={number.toString()}
number={number} />
{number}
);
return (
);
}
94

Key - Uniqueness
// Cannot repeat keys in the same list, but...
function DoubleList(props) {
return (
<div>
<NumberList numbers={props.numbers} />
</div>
);
}
95

.map inside JSX
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
96

Forms
https://facebook.github.io/react/docs/forms.html

Controlled Components
class NameForm extends React.Component {
constructor() { ... }
handleChange = (event) => {
this.setState({value: event.target.value});
}
handleSubmit = (event) => { ... }
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text"
value={this.state.value}
onChange={this.handleChange} />
</form>
);
}
}
98

super(props);
this.state = {value: ''};
}
handleChange = (event) => { ... }
render() { ... }
}
99

constructor() { ... }
handleChange = (event) => {
this.setState({
value: event.target.value.toLowerCase()
});
}
render() { ... }
}
100

Textarea
<textarea
onChange={this.handleChange}
/>
101

Select
<select
onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
102

Multiple Inputs
<input
name="isGoing" type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
<input
name="numberOfGuests" type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
103

Multiple Inputs
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ?
target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
104

Synchronized States
https://facebook.github.io/react/docs/lifting-state-up.html

Synchronizing - Consumer
// We want an <input> to generate new values for
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}
106

Synchronizing - Coordinator
class Calculator extends React.Component {
handleChange = (e) =>
this.setState({temperature: e.target.value});
render() {
const temperature = this.state.temperature;
return (
<fieldset>
<legend>Enter temperature in Celsius:</legend>
<input value={temperature}
<BoilingVerdict
celsius={parseFloat(temperature)} />
</fieldset>
);
}
}
107

Synchronizing - Producer
render() {
return (
<fieldset>
<BoilingVerdict
</fieldset>
);
}
}
108

class TemperatureInputCelsius extends React.Component {
render() {
return (
<fieldset>
</fieldset>
);
}
}
109

handleChange
render() {
return (
<fieldset>
</fieldset>
);
}
}
110

render() {
return (
<fieldset>
</fieldset>
);
}
}
111

render() {
return (
<fieldset>
</fieldset>
);
}
}
112

handleChange = (...?) =>
this.setState({temperature: ...?});
render() {
return (
<TemperatureInputCelsius ...? ...? />
<BoilingVerdict
</fieldset>
);
}
}
113

handleChange = (temperature) =>
this.setState({temperature: temperature});
render() {
return (
<TemperatureInputCelsius
temperature={temperature}
onTemperatureChange={this.handleChange} />
<BoilingVerdict
</fieldset>
);
}
}
114

render() {
return (
<fieldset>
</fieldset>
);
}
}
115

this.props.onTemperatureChange(e.target.value);
render() {
const temperature = this.props.temperature;
return (
<fieldset>
</fieldset>
);
}
}
116

117
Calculator
this: { handleChange }
state: { temperature }
props: { temperature }
BoilingVeredict
props: { temperature,
onTemperatureChange }
TemperatureInputCelsius

Synchronizing - Multiple Producer
Calculator
TemperatureInput => Celsius and Fahrenheit
118

class TemperatureInput extends React.Component {
render() {
const scaleName = scaleNames[this.props.scale];
return (
<fieldset>
<legend>Enter temperature in {scaleName}:</
legend>
</fieldset>
);
}
}
119

render() {
return (
<div>
<TemperatureInput scale="c" ...? ...? />
<TemperatureInput scale="f" ...? ...? />
<BoilingVerdict
</div>
);
}
}
120

this.props.onTemperatureChange(e.target.value);
render() {
const scaleName = scaleNames[this.props.scale];
return (
<fieldset>
legend>
</fieldset>
);
}
}
121

render() {
return (
<div>
<TemperatureInput scale="c" ...? ...? />
<TemperatureInput scale="f" ...? ...? />
<BoilingVerdict
</div>
);
}
}
122

Coordinator - Inputs
...
render() {
const scale = this.state.scale;
const celsius = convertIf(scale === 'f', temperature,
toCelsius);
const fahrenheit = convertIf(scale === 'c', temperature,
toFahrenheit);
return (
<div>
<TemperatureInput scale="c" temperature={celsius} ...? />
<TemperatureInput scale="f" temperature={fahrenheit} ...? />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
}
123

Coordinator Outputs
...
handleCelsiusChange = (temperature) =>
this.setState({scale: 'c', temperature});
handleFahrenheitChange = (temperature) =>
this.setState({scale: 'f', temperature});
render() {
const scale = this.state.scale;
const celsius = convertIf(scale === 'f', temperature,
toCelsius);
...
<TemperatureInput scale="c" temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput scale="f" temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
...
}
}
124

Coordinator Outputs
function convertIf(test, temperature, convert) {
if (test) {
return tryConvert(temperature, convert);
}
return temperature;
}
125

Exercise
126
https://codepen.io/drpicox/pen/ryrypJ
Exercise React Temperature

Component Composition
https://facebook.github.io/react/docs/composition-vs-
inheritance.html

Java 1.0
128
http://web.mit.edu/java_v1.0.2/www/apibook/javag2.htm
An application should override the action method (II-
§1.10.1) of the button or of one of its containing windows
in order to cause some action to occur.
Button
+ action(...)
MyButton
+ action(...)

Java 1.1
129
In 1.1, we aimed at solving some major AWT (Abstract
Window Toolkit) deﬁciencies, with a strong focus on quality
and performance. The AWT enhancements include [...], a
delegation-based event model, [...].
Button
+ actionActionListener(...)
https://www.cs.princeton.edu/courses/archive/fall97/cs461/
jdkdocs/guide/awt/index.html
<i> ActionListener
+ actionPerformed(...) = 0
MyActionListener
+ actionPerformed(...)
*

Java 1.2
130
When an Action object is added to such a container, the container:
Creates a component that is appropriate for that container (a toolbar
creates a button component, for example), Gets the appropriate
property(s) from the Action object to customize the component (for
example, the icon image and ﬂyover text)....
<i> Action
+ actionPerformed(...) = 0
+ isEnabled(): bool
+ setEnabled(b)
+ getValue(key): Object
+ putValue(key, value)
+ addPropertyChangeListener(...)
+ removePropertyChangeListener(...)
http://www.kbs.twi.tudelft.nl/Documentation/Programming/
Java/jdk1.2/api/javax/swing/Action.html

Children Composition
131
Card
Contents

<Card>
<h1>Welcome</h1>
<p>
Find here a complete list
of all the things that you
love.
</p>
</Card>
132

function Card(props) {
return (
<div className="card">
{props.children}
</div>
);
}
133

Many Children Composition
134
SplitPane
Left Right

<div class="SplitPane">
<div class="SplitPane-left">
<Contacts />
</div>
<div class="SplitPane-right">
<Chat />
</div>
</div>
135

function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
}
136

function App() {
return (
<SplitPane
left={ <Contacts /> }
right={ <Chat /> }
/>
);
}
137

Specialization
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
138

Specialization
function WelcomeDialog(props) {
return (
<Dialog
title="Welcome"
message="Thanks for visiting!" />
);
}
139

Specialization
function WelcomeDialog(props) {
return (
<Dialog
title="Welcome"
message={
<div>
<h1>Thanks!</h1>
for visiting!
</div>
} />
);
}
140

High Order Components
https://facebook.github.io/react/docs/higher-order-
components.html

Like high order functions
const safeConvert = (convert) => {
return (temperature) => {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 100) / 100;
return rounded.toString();
}
}
142

Like high order functions
const safeConvert = (convert) => {
return (temperature) => {
...
}
}
const safeKelvinToCelsius =
safeConvert(kelvinToCelsius);
const celsius = safeKelvinToCelsius(kelvin);
143

Speciﬁc Component
handleChange = (e) => this.props.onTemperatureChange(
safeCelsiusToKelvin(e.target.value);
);
render() {
const celsius = safeKelvinToCelsius(temperature);
return (
<fieldset>
</fieldset>
);
}
}
144

Speciﬁc Component
class TemperatureInputFahrenheit extends React.Component {
safeFahrenheitToKelvin(e.target.value);
);
render() {
const celsius = safeKelvinToFahrenheit(temperature);
return (
<fieldset>
<legend>Enter temperature in Fahrenheit:</legend>
</fieldset>
);
}
}
145

Generic Component
class TemperatureInput? extends React.Component {
toKelvin(e.target.value);
);
render() {
const local = toLocal(temperature);
return (
<fieldset>
legend>
<input value={local}
</fieldset>
);
}
}
146

Generic Component
function makeTemperatureInput(toKelvin, toLocal, scaleName) {
return class extends React.Component {
toKelvin(e.target.value);
);
render() {
const local = toLocal(temperature);
return (
<fieldset>
<legend>Enter temperature in {scaleName}:</legend>
<input value={local}
</fieldset>
);
}
}
}
147

Using Generic Component
const TemperatureInputCelsius = makeTemperatureInput(
safeCelsiusToKelvin,
safeKelvinToCelsius,
'Celsius'
);
const TemperatureInputFahrenheit = makeTemperatureInput(
safeFahrenheitToKelvin,
safeKelvinToFahrenheit,
'Fahrenheit'
);
const TemperatureInputKelvin = makeTemperatureInput(
identity,
identity,
'Kelvin'
);
148

Using Generic Component
const TemperatureInputCelsius = makeTemperatureInput(
safeConvert(celsiusToKelvin),
safeConvert(kelvinToCelsius),
'Celsius'
);
const TemperatureInputFahrenheit = makeTemperatureInput(
safeConvert(fahrenheitToKelvin),
safeConvert(kelvinToFahrenheit),
'Fahrenheit'
);
const TemperatureInputKelvin = makeTemperatureInput(
(x) => x,
(x) => x,
'Kelvin'
);
149

High Order Component
class Thermostat extends React.Component {
handleChangeMax = (e) => ...
handleChangeMin = (e) => ...
render() {
return (
<div>
Max <TemperatureInput
temperature={this.state.max}
onTemperatureChange={this.handleChangeMax} />
Min <TemperatureInput
temperature={this.state.min}
onTemperatureChange={this.handleChangeMin} />
</div>
);
}
}
150

function makeThermostat(TemperatureInput) {
handleChangeMax = (e) => ...
handleChangeMin = (e) => ...
render() {
return (
<div>
Max <TemperatureInput temperature={this.state.max}
Min <TemperatureInput temperature={this.state.max}
</div>
);
}
}
}
151

...
}
}
const ThermostatCelsius =
makeThermostat(TemperatureInputCelsius);
const ThermostatFahrenheit =
makeThermostat(TemperatureInputFahrenheit);
const ThermostatKelvin =
makeThermostat(TemperatureInputKelvin);
152

Debug: displayName
function makeTemperatureInput(
toKelvin, toFahrenheit, scaleName
) {
...
}
TemperatureInput.displayName =
`TemperatureInput(${scaleName})`;
return TemperatureInput;
}
153

Debug: displayName
class Thermostat extends React.Component {
...
}
Thermostat.displayName =
`Thermostat(${getDisplayName(TemperatureInput)})`;
return Thermostat;
}
154

Warning!
// DON'T use HOCs in render functions!
const App = () => {
const TemperatureInputAbc =
makeTemperatureInput(a, b, c);
return <TemperatureInputAbc />;
}
class App extends React.Component {
render() {
const TemperatureInputAbc =
makeTemperatureInput(a, b, c);
return <TemperatureInputAbc />;
}
}
155

More in docs
• Use HOCs For Cross-Cutting Concerns
• Don't Mutate the Original Component.  
Use Composition.
• Convention: Pass Unrelated Props Through to the Wrapped
Component
• Convention: Maximizing Composability
• Convention: Wrap the Display Name for Easy Debugging
• Caveats
156

Containers
https://medium.com/@dan_abramov/smart-and-dumb-
components-7ca2f9a7c7d0

Convention
• Types of components
• Routers
• Containers
• Presentational
158

Routes
• Routers
• Decides which component to render
• Create components dynamically
• Usually provided by library
159

Containers
• Knows how to load or mutate data
• Observe Stores
• Dispatch Actions
• Other system interactions
• Always stateful (class notation)
• Renders nothing
• Delegates render to a Presentational Component
• Conﬁgures its props
160

Presentational
• Knows how to render things
• Data and callbacks only via props
• does not interact with the application
• Usually functional (not need state)
• Also called Components
161

1000
);
}
}
render() {
return (
<div>
</div>
);
}
}
162
Presentational
Container

1000
);
}
}
render() {
return (
<div>
</div>
);
}
}
163
Presentational
Container

Presentational Refactor
function Clock(props) {
return (
<div>
<h2>It is {props.time}.</h2>
</div>
);
}
164

Container Refactor
class IntervalClock extends React.Component {
1000
);
}
}
render() {
return <Clock time={this.state.time} />;
}
}
165

Container Refactor
function makeIntervalClock(Clock) {
1000
);
}
}
render() {
return <Clock time={this.state.time} />;
}
};
}
166

PropTypes
https://facebook.github.io/react/docs/typechecking-with-
proptypes.html

PropTypes
import PropTypes from 'prop-types';
export default function Welcome(props) {
return (
<h1>Hello, {props.name}</h1>
);
}
Welcome.propTypes = {
name: PropTypes.string
};
168
https://facebook.github.io/react/docs/typechecking-with-proptypes.html

PropTypes
import PropTypes from 'prop-types';
export default class Welcome extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Welcome.propTypes = {
name: PropTypes.string.isRequired
};
169
https://facebook.github.io/react/docs/typechecking-with-proptypes.html

ReactJS for Programmers

More Related Content

What's hot (20)

Similar to ReactJS for Programmers (20)

More from David Rodenas (17)

Recently uploaded (20)

ReactJS for Programmers