-
Notifications
You must be signed in to change notification settings - Fork 1
/
tag-react.html
415 lines (397 loc) · 19.8 KB
/
tag-react.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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="alternate"
type="application/rss+xml"
href="https://chenyo.me/rss.xml"
title="RSS feed for https://chenyo.me">
<title>Chenyo's Blog</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'],['\\(','\\)']]}});
</script>
<meta name="author" content="chenyo">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/style.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<link rel="favicon" type="image/x-icon" href="favicon.ico">
<script src="assets/search.js"></script></head>
<body>
<div id="preamble" class="status">
<header>
<h1><a href="https://chenyo.me">Chenyo's org-static-blog</a></h1>
<nav>
<a href="https://chenyo.me">Home</a>
<a href="archive.html">Archive</a>
<a href="tags.html">Tags</a>
<div id="search-container">
<input type="text" id="search-input" placeholder="Search anywhere...">
<i class="fas fa-search search-icon"></i>
</div>
</nav>
</header></div>
<div id="content">
<h1 class="title">Posts tagged "react":</h1>
<div class="post-date">23 Jun 2024</div><h1 class="post-title"><a href="https://chenyo.me/2024-06-23-weblab-notes:-react-route.html">Weblab notes: React route</a></h1>
<nav id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#orgfeca818">1. Router</a></li>
<li><a href="#org91f1521">2. Link</a></li>
<li><a href="#orgcccc1f0">3. Workshop 3</a>
<ul>
<li><a href="#org1358621">3.1. Structure</a></li>
<li><a href="#orgdea8955">3.2. States</a></li>
<li><a href="#orgef9cdd5">3.3. Props</a></li>
<li><a href="#org2d599e4">3.4. Why passing down the update function in props 1, 4, 6?</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<p>
This is a personal note for the <a href="https://docs.google.com/presentation/d/1hrTjcB8GU4hWPHzS5lI17WALogP4biZ1UAtyxXfafkI/edit#slide=id.p">web.lab lectures</a>.
</p>
<div id="outline-container-orgfeca818" class="outline-2">
<h2 id="orgfeca818"><span class="section-number-2">1.</span> Router</h2>
<div class="outline-text-2" id="text-1">
<ul class="org-ul">
<li>use the Reach <a href="https://reach.tech/router/">Reach Router</a> library</li>
<li><p>
URL -> Router -> render different components
</p>
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><App>
<span class="linenr">2: </span> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">conditional rendering based on curren url</span>
<span class="linenr">3: </span> <Router>
<span class="linenr">4: </span> <Home path=<span style="color: #98be65;">"/"</span> /> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">root path</span>
<span class="linenr">5: </span> <Dashboard path=<span style="color: #98be65;">"dashboard"</span> /> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">relative to the current URL</span>
<span class="linenr">6: </span> <Team path=<span style="color: #98be65;">"/team"</span> /> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">absolute path: root path + "/team"</span>
<span class="linenr">7: </span> <NotFound <span style="color: #51afef;">default</span> />
<span class="linenr">8: </span> </Router>
<span class="linenr">9: </span></App>;
</pre>
</div></li>
</ul>
</div>
</div>
<div id="outline-container-org91f1521" class="outline-2">
<h2 id="org91f1521"><span class="section-number-2">2.</span> Link</h2>
<div class="outline-text-2" id="text-2">
<ul class="org-ul">
<li>relative: <code class="src src-js"><Link to=<span style="color: #98be65;">"newpage"</span>>Click me</Link></code></li>
<li>absolute: <code class="src src-js"><Link to=<span style="color: #98be65;">"/newpage"</span>>Click me</Link></code></li>
</ul>
</div>
</div>
<div id="outline-container-orgcccc1f0" class="outline-2">
<h2 id="orgcccc1f0"><span class="section-number-2">3.</span> Workshop 3</h2>
<div class="outline-text-2" id="text-3">
</div>
<div id="outline-container-org1358621" class="outline-3">
<h3 id="org1358621"><span class="section-number-3">3.1.</span> Structure</h3>
<div class="outline-text-3" id="text-3-1">
<figure id="org1301886">
<img src="./static/workshop-3-structure.png" alt="workshop-3-structure.png" align="center" width="600px">
<figcaption><span class="figure-number">Figure 1: </span>The Catbook structure in workshop 3</figcaption>
</figure>
</div>
</div>
<div id="outline-container-orgdea8955" class="outline-3">
<h3 id="orgdea8955"><span class="section-number-3">3.2.</span> States</h3>
<div class="outline-text-3" id="text-3-2">
<table>
<colgroup>
<col class="org-center">
</colgroup>
<colgroup>
<col class="org-left">
</colgroup>
<thead>
<tr>
<th scope="col" class="org-center">name</th>
<th scope="col" class="org-left">states</th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-center">Feed</td>
<td class="org-left"><code>stories</code>: a list of stories</td>
</tr>
<tr>
<td class="org-center">Card</td>
<td class="org-left"><code>comments</code>: a list of comments for a story id</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="outline-container-orgef9cdd5" class="outline-3">
<h3 id="orgef9cdd5"><span class="section-number-3">3.3.</span> Props</h3>
<div class="outline-text-3" id="text-3-3">
<table>
<colgroup>
<col class="org-center">
</colgroup>
<colgroup>
<col class="org-left">
</colgroup>
<thead>
<tr>
<th scope="col" class="org-center">index</th>
<th scope="col" class="org-left">props</th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-center">1</td>
<td class="org-left">a function to update <code>stories</code></td>
</tr>
<tr>
<td class="org-center">2</td>
<td class="org-left">all attributes in a story</td>
</tr>
<tr>
<td class="org-center">3</td>
<td class="org-left">the attributes used to display a story</td>
</tr>
<tr>
<td class="org-center">4</td>
<td class="org-left">a story id; a list of comments under the story; a function to update <code>comments</code></td>
</tr>
<tr>
<td class="org-center">5</td>
<td class="org-left">all attributes in a comment</td>
</tr>
<tr>
<td class="org-center">6</td>
<td class="org-left">a comment id; the function to update <code>comments</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="outline-container-org2d599e4" class="outline-3">
<h3 id="org2d599e4"><span class="section-number-3">3.4.</span> Why passing down the update function in props 1, 4, 6?</h3>
<div class="outline-text-3" id="text-3-4">
<ul class="org-ul">
<li>To share the parent states, i.e., <code>stories</code> and <code>comments</code> to child component. Since the post action happens in the child component, we need a way to automatically update the states to see new contents immediately.</li>
</ul>
</div>
</div>
</div>
<div class="taglist"><a href="https://chenyo.me/tags.html">Tags</a>: <a href="https://chenyo.me/tag-study.html">study</a> <a href="https://chenyo.me/tag-web.html">web</a> <a href="https://chenyo.me/tag-react.html">react</a> <a href="https://chenyo.me/tag-mit.html">mit</a> </div>
<div class="post-date">23 Jun 2024</div><h1 class="post-title"><a href="https://chenyo.me/2024-06-23-weblab-notes:-react-hooks.html">Weblab notes: React hooks</a></h1>
<nav id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#orgc402bc2">1. What is a React hook</a>
<ul>
<li><a href="#orgb7734bd">1.1. <code>useState</code> is not enough</a></li>
<li><a href="#org105bbc4">1.2. <code>useEffect</code> runs after specific variable change</a></li>
</ul>
</li>
<li><a href="#orgcf0fd04">2. React hook patterns</a>
<ul>
<li><a href="#org5d7091e">2.1. Fetch and send data</a></li>
<li><a href="#org33f284a">2.2. Conditional rendering</a></li>
<li><a href="#org202802a">2.3. Render an array of Data</a></li>
</ul>
</li>
<li><a href="#org3928f43">3. Example: Stopwatch</a></li>
<li><a href="#org84c621c">4. DOM and component mounting</a></li>
</ul>
</div>
</nav>
<p>
This is a personal note for the <a href="https://docs.google.com/presentation/d/1n5RlpgBtXQ1OHvutx9TRLotWizyg2BPKv_780DD4-90/edit#slide=id.gb2bbafee77_1_66">web.lab lectures</a>.
</p>
<div id="outline-container-orgc402bc2" class="outline-2">
<h2 id="orgc402bc2"><span class="section-number-2">1.</span> What is a React hook</h2>
<div class="outline-text-2" id="text-1">
<ul class="org-ul">
<li>Special functions to access parts of the component lifestyle.</li>
<li>e.g., <code>useState</code></li>
</ul>
</div>
<div id="outline-container-orgb7734bd" class="outline-3">
<h3 id="orgb7734bd"><span class="section-number-3">1.1.</span> <code>useState</code> is not enough</h3>
<div class="outline-text-3" id="text-1-1">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #51afef;">const</span> [<span style="color: #dcaeea;">persons</span>, <span style="color: #dcaeea;">setPersons</span>] = useState([]);
<span class="linenr">2: </span>
<span class="linenr">3: </span>testingStuff = () => {
<span class="linenr">4: </span> <span style="color: #5B6268;">/* </span><span style="color: #5B6268;">assume persons is empty before</span><span style="color: #5B6268;"> */</span>
<span class="linenr">5: </span> setPersons([...persons, <span style="color: #98be65;">"me"</span>]);
<span class="linenr">6: </span>}
<span class="linenr">7: </span>console.log(persons);
</pre>
</div>
<ul class="org-ul">
<li>The output of <code class="src src-js">console.log</code> is <code>[]</code> instead of <code>["me"]</code> because setting a state is <b><b>async</b></b>!</li>
<li>To do something immediately after a state is changed, use <code>useEffect</code> hook!</li>
</ul>
</div>
</div>
<div id="outline-container-org105bbc4" class="outline-3">
<h3 id="org105bbc4"><span class="section-number-3">1.2.</span> <code>useEffect</code> runs after specific variable change</h3>
<div class="outline-text-3" id="text-1-2">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span>useEffect(() => {
<span class="linenr">2: </span> console.log(persons);
<span class="linenr">3: </span>}, [persons]);
</pre>
</div>
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span>useEffect(() => {
<span class="linenr">2: </span><span style="color: #5B6268;">/* </span><span style="color: #5B6268;">do something, e.g., interact with an external service</span><span style="color: #5B6268;"> */</span>
<span class="linenr">3: </span>
<span class="linenr">4: </span><span style="color: #51afef;">return</span> () => {
<span class="linenr">5: </span><span style="color: #5B6268;">/* </span><span style="color: #5B6268;">cleanup function on dismount, e.g., disconnect from external service</span><span style="color: #5B6268;"> */</span>
<span class="linenr">6: </span>}
<span class="linenr">7: </span>}, [<span style="color: #5B6268;">/*</span><span style="color: #5B6268;">dependencies</span><span style="color: #5B6268;"> */</span>])
</pre>
</div>
<ul class="org-ul">
<li><code class="src src-js">useEffect(myFunction, [var1, var2])</code> calls <code>myFunction</code> everytime when <code>var1</code> or <code>var2</code> changes</li>
<li><code class="src src-js">useEffect(myFunction, []])</code> calls only once when the component is rendered for the first time (on mount)</li>
<li><code class="src src-js">useEffect(myFunction)</code> calls at every render</li>
</ul>
</div>
</div>
</div>
<div id="outline-container-orgcf0fd04" class="outline-2">
<h2 id="orgcf0fd04"><span class="section-number-2">2.</span> React hook patterns</h2>
<div class="outline-text-2" id="text-2">
</div>
<div id="outline-container-org5d7091e" class="outline-3">
<h3 id="org5d7091e"><span class="section-number-3">2.1.</span> Fetch and send data</h3>
<div class="outline-text-3" id="text-2-1">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #5B6268;">/* </span><span style="color: #5B6268;">fetch data on mount</span><span style="color: #5B6268;"> */</span>
<span class="linenr">2: </span>useEffect(() => {
<span class="linenr">3: </span> get(<span style="color: #98be65;">"/api/packages"</span>).then((packageList) => {
<span class="linenr">4: </span> setPackages(packageList);
<span class="linenr">5: </span> });
<span class="linenr">6: </span>}, []);
</pre>
</div>
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #5B6268;">/* </span><span style="color: #5B6268;">send data then toggle admin state</span><span style="color: #5B6268;"> */</span>
<span class="linenr">2: </span><span style="color: #51afef;">const</span> <span style="color: #dcaeea;">handleToggleAdmin</span> = () => {
<span class="linenr">3: </span> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">.then(), do something once the promise is fulfilled</span>
<span class="linenr">4: </span> post(<span style="color: #98be65;">"/api/user/admin"</span>, { admin: !admin }).then(() => {
<span class="linenr">5: </span> setAdmin(!admin);
<span class="linenr">6: </span> });
<span class="linenr">7: </span>};
<span class="linenr">8: </span><span style="color: #5B6268;">/* </span><span style="color: #5B6268;"><Button onClick={handleToggleAdmin}</span><span style="color: #5B6268;"> */</span>
</pre>
</div>
</div>
</div>
<div id="outline-container-org33f284a" class="outline-3">
<h3 id="org33f284a"><span class="section-number-3">2.2.</span> Conditional rendering</h3>
<div class="outline-text-3" id="text-2-2">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #5B6268;">// </span><span style="color: #5B6268;">JSX is a way of writing HTML in js</span>
<span class="linenr">2: </span><span style="color: #51afef;">let</span> <span style="color: #dcaeea;">content</span> = loading ? <p>Loading...</p> : <p>Loaded</p>;
<span class="linenr">3: </span><span style="color: #51afef;">return</span> (
<span class="linenr">4: </span> <div>
<span class="linenr">5: </span> <h1>Title</h1>
<span class="linenr">6: </span> {content}
<span class="linenr">7: </span> </div>
<span class="linenr">8: </span>);
</pre>
</div>
</div>
</div>
<div id="outline-container-org202802a" class="outline-3">
<h3 id="org202802a"><span class="section-number-3">2.3.</span> Render an array of Data</h3>
<div class="outline-text-3" id="text-2-3">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #51afef;">const</span> <span style="color: #dcaeea;">data</span> = [
<span class="linenr">2: </span> { id: <span style="color: #da8548; font-weight: bold;">0</span>, text: <span style="color: #98be65;">"Text 1"</span> },
<span class="linenr">3: </span> { id: <span style="color: #da8548; font-weight: bold;">1</span>, text: <span style="color: #98be65;">"Text 2"</span> },
<span class="linenr">4: </span>];
<span class="linenr">5: </span><span style="color: #5B6268;">// </span><span style="color: #5B6268;">render a component for each data item</span>
<span class="linenr">6: </span><span style="color: #51afef;">return</span> data.map((item) => (
<span class="linenr">7: </span> <ItemComponent key={item.id}>{item.text}</ItemComponent>
<span class="linenr">8: </span>));
</pre>
</div>
<ul class="org-ul">
<li><code>key</code> is a special prop in React; it is used identify which item has changed efficiently</li>
</ul>
</div>
</div>
</div>
<div id="outline-container-org3928f43" class="outline-2">
<h2 id="org3928f43"><span class="section-number-2">3.</span> Example: Stopwatch</h2>
<div class="outline-text-2" id="text-3">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr"> 1: </span><span style="color: #51afef;">const</span> <span style="color: #dcaeea;">Stopwatch</span> = () => {
<span class="linenr"> 2: </span> <span style="color: #51afef;">const</span> [<span style="color: #dcaeea;">time</span>, <span style="color: #dcaeea;">setTimer</span>] = useState(<span style="color: #da8548; font-weight: bold;">0</span>);
<span class="linenr"> 3: </span>
<span class="linenr"> 4: </span> useEffect(() => {
<span class="linenr"> 5: </span> <span style="color: #51afef;">const</span> <span style="color: #dcaeea;">timer</span> = setInterval(() => {
<span class="linenr"> 6: </span> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">setTimer accepts either a new state value,</span>
<span class="linenr"> 7: </span> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">or a function that takes the previous state (oldTime) as an argument and returns the new state</span>
<span class="linenr"> 8: </span> setTime((oldTime) => oldTime + <span style="color: #da8548; font-weight: bold;">1</span>);}, <span style="color: #da8548; font-weight: bold;">1000</span>);
<span class="linenr"> 9: </span> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">if not properly cleanup after unmounting</span>
<span class="linenr">10: </span> <span style="color: #5B6268;">// </span><span style="color: #5B6268;">the timer will continue to run even the state no longer exists</span>
<span class="linenr">11: </span> <span style="color: #51afef;">return</span> () => clearInterval(timer);
<span class="linenr">12: </span> }, []);
<span class="linenr">13: </span> <span style="color: #51afef;">return</span> <>TIme: {time}</>;
<span class="linenr">14: </span>};
</pre>
</div>
</div>
</div>
<div id="outline-container-org84c621c" class="outline-2">
<h2 id="org84c621c"><span class="section-number-2">4.</span> DOM and component mounting</h2>
<div class="outline-text-2" id="text-4">
<ul class="org-ul">
<li>DOM (Document Object Model): a programming interface for web documents; represents the structure of a document, e.g., HTML, as a tree of objects, where each object corresponds to a part of the document; it dynamically updates the document contents
<ul class="org-ul">
<li>React is a framework that manipulates DOM</li>
</ul></li>
<li>A React component is unmounted when:
<ul class="org-ul">
<li>conditional rendering</li>
<li>routing; navigating from one route to another</li>
<li>its parent component is unmounted</li>
</ul></li>
</ul>
</div>
</div>
<div class="taglist"><a href="https://chenyo.me/tags.html">Tags</a>: <a href="https://chenyo.me/tag-study.html">study</a> <a href="https://chenyo.me/tag-web.html">web</a> <a href="https://chenyo.me/tag-react.html">react</a> <a href="https://chenyo.me/tag-mit.html">mit</a> </div><div id="archive">
<a href="https://chenyo.me/archive.html">Other posts</a>
</div>
</div>
<div id="postamble" class="status"><div id="search-results"></div>
<footer>
<div class="footer-content">
<div class="footer-left">
<p>© 2024 chenyo. Some rights reserved.</p>
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
<img alt="Creative Commons License" style="border-width: 0"
src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png"/>
</a>
</div>
<div class="social-links">
<a href="https://t.me/chenyo17" target="_blank" rel="noopener noreferrer">
<i class="fab fa-telegram"></i>
</a>
<a href="https://github.com/chenyo-17" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i>
</a>
</div>
</footer></div>
</body>
</html>