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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Basic Tutorial of React for Programmers

Similaire à Basic Tutorial of React for Programmers (20)

Plus de David Rodenas

Plus de David Rodenas (20)

Dernier

Dernier (20)

Basic Tutorial of React for Programmers