-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path5.html
159 lines (144 loc) · 5.14 KB
/
5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Advanced Web Dev</title>
<meta name="author" content="Eric Moynihan" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reveal/css/reset.css" />
<link rel="stylesheet" href="reveal/css/reveal.css" />
<link rel="stylesheet" href="reveal/css/theme/black.css" id="theme" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="reveal/lib/css/monokai.css" />
<!-- Printing and PDF exports -->
<script>
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = window.location.search.match(/print-pdf/gi)
? "reveal/css/print/pdf.css"
: "reveal/css/print/paper.css";
document.getElementsByTagName("head")[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<img
src="https://cdn-assets-cloud.frontify.com/local/frontify/h_lNxVXLqrDqb2kyrixW3lMmUl7n-aBRzJUzyvzD7_9FpVMt61zcnJ81BDOqdkOndY8i0eAwn6Wh0ML1aAgbhjOhufnBG8Tz7OVGBhGqrknPlL9fOTjbQj2eRqycd0zF?width=2400"
style="border: 0; background: transparent; width: 35%;"
/>
<h1>Advanced Web Development</h1>
<p><b>Week 5</b>: React Events</p>
<p>By <a href="https://github.com/ericm">Eric Moynihan</a></p>
</section>
<section style="text-align: left;">
<h1>What are events?</h1>
<p>
Events are triggered from user interaction. Some common types of
events are:
</p>
<ul>
<li>Mouse Events</li>
<li>Drag Events</li>
<li>Clipboard Events</li>
<li>Windows Focus Events</li>
</ul>
</section>
<section style="text-align: left;">
<p>
React handles events similar to how it's done using native
JavaScript, however it's has some differences.
</p>
</section>
<section style="text-align: left;">
<p>
In <b>React</b>, a HTMLElement is any HTML element that's present in
JSX. (Example: Div, p, etc)
</p>
<p>These elements have props that allow us to handle events.</p>
<p>
These props require a function to be passed to them with
<b>one parameter</b>. This parameter is the event object and is
commonly simply called e.
</p>
</section>
<section>
<h1>Code Example</h1>
<p>Here's a modified version of our code from last week:</p>
<pre><code class="hljs" data-trim data-noescap>
import * as React from "react";
import { render } from "react-dom"
class ShoppingList extends React.Component {
handler(e) {
// Note it has access to the item clicked
console.log(e.currentTarget);
e.currentTarget.innerText = "Changed";
// Here it modifies the element clicked.
// But it can be used to change state.
}
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<button onClick={this.handler}>Text</button>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
let baseDiv = document.querySelector("#root");
render(<ShoppingList name="Whatever"></ShoppingList>, baseDiv)
</code></pre>
</section>
<section style="text-align: left;">
<h1>See the code example on github for a full implementation</h1>
</section>
</div>
</div>
<script src="reveal/js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: "slide", // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{
src: "reveal/plugin/markdown/marked.js",
condition: function() {
return !!document.querySelector("[data-markdown]");
}
},
{
src: "reveal/plugin/markdown/markdown.js",
condition: function() {
return !!document.querySelector("[data-markdown]");
}
},
{ src: "reveal/plugin/highlight/highlight.js", async: true },
{ src: "reveal/plugin/search/search.js", async: true },
{ src: "reveal/plugin/zoom-js/zoom.js", async: true },
{ src: "reveal/plugin/notes/notes.js", async: true }
]
});
</script>
</body>
</html>