Basic Tutorial of React for Programmers

Basic ReactJS
for Programmers
by Dr. David Rodenas

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

@drpicox
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.”

@drpicox
FB about MVC
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.”

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

@drpicox
Prerequisite
Make an account in codepen.io

@drpicox
Prerequisite
Install React Developer Tools

@drpicox
Hello World

<div id="root"></div>
// hello-world.js
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
12
https://facebook.github.io/react/docs/hello-world.html

@drpicox
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'));
13
https://babeljs.io/repl

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

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

@drpicox
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
16

@drpicox
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'));
17

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

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

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

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

@drpicox
JSX
// Interpolate any JS expression
const user = {name:'bob', lastName:'hoskings'};
const element = (
<h1>
Hello, {user.name + ' ' + user.lastName}!
</h1>
);
// any expression, including JSX
const element = <h1>Hello, {<span>world</span>}!
22

@drpicox
JSX
// Add attributes (alias props)
const element = <div tabIndex="0">...</div>;
// Computed attributes
const element = <img src={user.imageUrl} />;
// class is className
const element = <div className="body">...</div>;
23

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

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

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

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

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

@drpicox
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);
29

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

@drpicox
Component deﬁnition
// Functional component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Class component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
31

@drpicox
Render a Component
const element = <Welcome name="Dave" />;
32

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

@drpicox
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>
);
}
34

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

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

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

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

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

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

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

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

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

@drpicox
render() {
return (
<div>
</div>
);
}
}
44

@drpicox
Setup State
constructor(props) {
super(props);
this.state = {time: Date.now()};
}
render() { ... }
}
45

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

@drpicox
Lifecycle Methods
componentDidMount() { /* TODO */ }
componentWillUnmount() { /* TODO */ }
render() { ... }
}
47

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

@drpicox
Lifecycle Methods
componentDidMount() { ... }
componentWillUnmount() {
clearInterval(this.timerId);
}
render() { ... }
}
49

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

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

@drpicox
State Isolated
function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
}
52

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

@drpicox
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>
);
}
55

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

@drpicox
Toggle Example
class Toggle extends React.Component {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary by `this`
this.handleClick = this.handleClick.bind(this);
}
handleClick() { ... }
...
57
https://facebook.github.io/react/docs/handling-events.html

@drpicox
Toggle Example
class Toggle extends React.Component {
super(props);
this.state = {isToggleOn: true};
}
handleClick = () => { ... }
...
58
https://facebook.github.io/react/docs/handling-events.html

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

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

@drpicox
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} />,
);
61

@drpicox
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>
);
}
62

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

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

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

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

@drpicox
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>,
);
68

@drpicox
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} />,
);
69

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

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

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

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

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

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

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

@drpicox
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>
);
}
}
78

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

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

@drpicox
Textarea
<textarea
onChange={this.handleChange}
/>
81

@drpicox
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>
82

@drpicox
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} />
83

@drpicox
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
});
}
84

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

@drpicox
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>;
}
86

@drpicox
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>
);
}
}
87

@drpicox
Synchronizing - Producer
render() {
return (
<fieldset>
<BoilingVerdict
</fieldset>
);
}
}
88

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

@drpicox
this.setState({temperature: ...?});
render() {
return (
<div>
<TemperatureInput scale="c" ...? ...? />
<TemperatureInput scale="f" ...? ...? />
<BoilingVerdict
</div>
);
}
}
90

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

@drpicox
Synchronizing - Coordinator
this.setState({temperature: ...?});
render() {
return (
<div>
<TemperatureInput scale="c" ...? ...? />
<TemperatureInput scale="f" ...? ...? />
<BoilingVerdict
</div>
);
}
}
92

@drpicox
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>
);
}
}
93

@drpicox
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} />
...
}
}
94

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

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

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

@drpicox
Java 1.0
98
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(...)

@drpicox
Java 1.1
99
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(...)
*

@drpicox
Java 1.2
100
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

@drpicox
Children Composition
101
Card
Contents

@drpicox
<card>
<h1>Welcome</h1>
<p>
Find here a complete list
of all the things that you
love.
</p>
</card>
102

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

@drpicox
Many Children Composition
104
SplitPane
Left Right

@drpicox
<div class="SplitPane">
<div class="SplitPane-left">
<Contacts />
</div>
<div class="SplitPane-left">
<Chat />
</div>
</div>
105

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

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

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

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

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

@drpicox
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();
}
}
111

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

@drpicox
Speciﬁc Component
class TemperatureInputCelsius extends React.Component {
handleChange = (e) => this.props.onTemperatureChange(
safeCelsiusToKelvin(e.target.value);
);
render() {
const celsius = safeKelvinToCelsius(temperature);
return (
<fieldset>
</fieldset>
);
}
} 113

@drpicox
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>
);
}
} 114

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

@drpicox
Generic Component
function makeTemperatureInput(toKelvin, toLocal, scaleName) {
return class extends React.Component {
toKelvin(e.target.value);
);
render() {
const local = toLocal(temperature);
return (
<fieldset>
<input value={local}
</fieldset>
);
}
}
}
116

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

@drpicox
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'
); 118

@drpicox
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>
);
}
}
119

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

@drpicox
...
}
}
const ThermostatCelsius =
makeThermostat(TemperatureInputCelsius);
const ThermostatFahrenheit =
makeThermostat(TemperatureInputFahrenheit);
const ThermostatKelvin =
makeThermostat(TemperatureInputKelvin); 121

@drpicox
Debug: displayName
function makeTemperatureInpu(
toKelvin, toFahrenheit, scaleName
) {
...
}
TemperatureInput.displayName =
`TemperatureInput(${scaleName})`;
return TemperatureInput;
}
122

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

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

@drpicox
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
125

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

@drpicox
Convention
• Types of components
• Routers
• Containers
• Presentational
127

@drpicox
Routes
• Routers
• Decides which component to render
• Create components dynamically
• Usually provided by library
128

@drpicox
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
129

@drpicox
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
130

@drpicox
1000
);
}
}
render() {
return (
<div>
</div>
);
}
}
131
Presentational
Container

@drpicox
1000
);
}
}
render() {
return (
<div>
</div>
);
}
}
132
Presentational
Container

@drpicox
Presentational Refactor
function Clock {
return (
<div>
</div>
);
}
133

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

Basic Tutorial of React for Programmers

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Basic Tutorial of React for Programmers

Similar to Basic Tutorial of React for Programmers (20)

More from David Rodenas

More from David Rodenas (20)

Recently uploaded

Recently uploaded (20)

Basic Tutorial of React for Programmers