This is the support of a course to teach React programming for Java and C# programmers. It covers from its origins in Facebook til separation of presentational and container components. What is JSX, rules, state, props, refactoring, conditionals, repeats, forms, synchronizing values, composition, and so on.
4. 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.”
5. 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.”
6. 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.”
14. Hello World
// This is translated by Babel to...
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
// ...to this
ReactDOM.render(React.createElement(
'h1',
null,
'Hello, world!'
), document.getElementById('root'));
14
https://babeljs.io/repl
15. • 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
17. 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
19. 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!"
);
19
20. JSX
// It can be multiline (be careful using return)
const element =
<h1>
Hello, world!
</h1>;
20
21. JSX
// It can be multiline (better)
const element = <h1>
Hello, world!
</h1>;
21
22. JSX
// It can be multiline (recommended)
const element = (
<h1>
Hello, world!
</h1>
);
22
23. JSX - Interpolation
// Interpolate any JS expression
const name = 'bob hoskings';
const element = (
<h1>
Hello, {name}!
</h1>
);
// It is just one argument more
const element = React.createElement(
'h1',
null,
'Hello, ',
name,
'!'
);
23
24. 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
const element = React.createElement(
'h1',
null,
'Hello, ',
user.name + ' ' + user.lastName,
'!'
);
24
25. JSX - Interpolation
// any expression, including JSX
const element = <h1>Hello, {<span>world</span>}!</h1>
// It is still just one argument more
const element = React.createElement(
"h1",
null,
"Hello, ",
React.createElement(
"span",
null,
"world"
),
"!"
);
25
26. JSX - Properties
// Add attributes
const element = <div tabIndex="0">...</div>;
// Is transformed into a property object (alias props)
const element = React.createElement(
"div",
{ tabIndex: "0" },
"..."
);
26
27. JSX - Properties
// Add computed attributes
const element = <img src={user.imageUrl} />;
// Is transformed into a property object (alias props)
const element = React.createElement(
"img",
{ src: user.imageUrl },
);
27
28. JSX - Properties
// Set variable attributes
const options = {
autoplay: true,
muted: true,
};
const element = <video src="wow.mp4" {...options} />;
// Are merged into attribute
const element = React.createElement(
"video",
{
src: "wow.mp4",
...options
},
);
28
29. JSX - Properties
// Set variable attributes
const options = {
autoplay: true,
muted: true,
};
const element = <video src="wow.mp4" {...options} />;
// Are merged into attribute
const element = React.createElement(
"video",
{
src: "wow.mp4",
autoplay: true, muted: true
},
);
29
32. 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
33. JSX - Cross-site-scripting
// It is just a string
const title = response.veryMaliciousInputString;
// This is save
const element = <h1>{title}</h1>;
33
34. JSX - XML
// Is XML-like
const element = (
<div>
Hello <br/> World
</div>
);
// Elements must be terminated
const element = (
<div>
Hello <br> World
</div>
);
34
36. Rendering Elements
// JSX elements are just memory objects
const element = <h1>Hello, world</h1>;
36
37. 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
);
37
38. 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
40. Components
// Can be defined as functions
const HelloWorld = () => {
return <h1>Hello, world</h1>;
};
export default HelloWorld;
40
41. Components
// Can be defined as functions
const HelloWorld = () => {
return <h1>Hello, world</h1>;
};
export default HelloWorld;
// Can be defined as classes
export default class HelloWorld extends React.Component
{
render() {
return <h1>Hello, world</h1>;
}
}
41
43. Component and properties
const element = <Welcome name="Dave" />;
// Remember: it is like write
const element = React.createElement(
Welcome,
{ name: "Dave" }, // are called props
);
43
44. Component and properties
const element = <Welcome name="Dave" />;
// This is how you define the Component to use props
function Welcome(props) {
return (
<h1>Hello {props.name}!</h1>
);
}
44
45. Component and properties
const element = <Welcome name="Dave" />;
// 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
56. Function to Class Component
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.time}.</h2>
</div>
);
}
56
57. Function to Class Component
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.time}.</h2>
</div>
);
}
}
57
58. Function to Class Component
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.time}.</h2>
</div>
);
}
}
58
69. 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
70. onEvent={fn}
// It can inline functions (are expressions)
function DivLogHello() {
return (
<button onClick={() => console.log('oh')}>
click me
</button>
);
}
70
71. Toggle Example
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };
}
...
71
93. Key - Refactor Component
function ListItem(props) {
return (
// Wrong! should not be here
<li key="props.number.toString()">
{props.number}
</li>
);
}
93
106. 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
129. Java 1.1
129
In 1.1, we aimed at solving some major AWT (Abstract
Window Toolkit) deficiencies, 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(...)
*
130. 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 flyover 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
156. 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
159. Routes
• Routers
• Decides which component to render
• Create components dynamically
• Usually provided by library
159
160. 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
• Configures its props
160
161. 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