-
Notifications
You must be signed in to change notification settings - Fork 1
/
tag-web.html
552 lines (527 loc) · 29.5 KB
/
tag-web.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
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
<!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 "web":</h1>
<div class="post-date">15 Aug 2024</div><h1 class="post-title"><a href="https://chenyo.me/2024-08-15-web-learning-in-practice.html">Web learning in practice</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="#orgf558189">1. Basic html structure</a></li>
<li><a href="#orgff93d8f">2. Tags</a></li>
<li><a href="#org1ff13b7">3. Attributes</a></li>
<li><a href="#org46f484f">4. Javascript</a>
<ul>
<li><a href="#org0413058">4.1. Fetch from an HTML URL</a></li>
<li><a href="#org0a89abe">4.2. Modify a DOM</a></li>
<li><a href="#org83b7583">4.3. Syntax</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<p>
This post records the basic web development knowledge I have learned in practice.
</p>
<div id="outline-container-orgf558189" class="outline-2">
<h2 id="orgf558189"><span class="section-number-2">1.</span> Basic html structure</h2>
<div class="outline-text-2" id="text-1">
<div class="org-src-container">
<pre class="src src-html"><<span style="color: #51afef;">!DOCTYPE</span> html>
<<span style="color: #c678dd;">html</span> <span style="color: #dcaeea;">lang</span>=<span style="color: #98be65;">"en"</span>>
<span style="color: #5B6268;"><!-- </span><span style="color: #5B6268;">A head</span><span style="color: #5B6268;"> --></span>
<<span style="color: #c678dd;">head</span>>
<<span style="color: #c678dd;">meta</span> <span style="color: #dcaeea;">charset</span>=<span style="color: #98be65;">"UTF-8"</span>>
<span style="color: #5B6268;"><!-- </span><span style="color: #5B6268;">to accommodate different screen size</span><span style="color: #5B6268;"> --></span>
<<span style="color: #c678dd;">meta</span> <span style="color: #dcaeea;">name</span>=<span style="color: #98be65;">"viewport"</span> <span style="color: #dcaeea;">content</span>=<span style="color: #98be65;">"width=device-width, initial-scale=1.0"</span>>
<span style="color: #5B6268;"><!-- </span><span style="color: #5B6268;">A tab name</span><span style="color: #5B6268;"> --></span>
<<span style="color: #c678dd;">title</span>><span style="font-weight: bold; text-decoration: underline;">A website</span></<span style="color: #c678dd;">title</span>>
<<span style="color: #c678dd;">link</span> <span style="color: #dcaeea;">rel</span>=<span style="color: #98be65;">"stylesheet"</span> <span style="color: #dcaeea;">href</span>=<span style="color: #98be65;">"styles.css"</span>>
</<span style="color: #c678dd;">head</span>>
<span style="color: #5B6268;"><!-- </span><span style="color: #5B6268;">A body</span><span style="color: #5B6268;"> --></span>
<<<span style="color: #c678dd;">body</span>>
<span style="color: #5B6268;"><!-- </span><span style="color: #5B6268;">A page header</span><span style="color: #5B6268;"> --></span>
<<span style="color: #c678dd;">header</span>>
<<span style="color: #c678dd;">h1</span>><span style="font-weight: bold; text-decoration: underline;">Welcome</span></<span style="color: #c678dd;">h1</span>>
</<span style="color: #c678dd;">header</span>>
<span style="color: #5B6268;"><!-- </span><span style="color: #5B6268;">A navigation panel</span><span style="color: #5B6268;"> --></span>
<<span style="color: #c678dd;">nav</span>>
<<span style="color: #c678dd;">ul</span>>
<<<span style="color: #c678dd;">li</span>><<span style="color: #c678dd;">a</span> <span style="color: #dcaeea;">href</span>=<span style="color: #98be65;">"index.html"</span>>Home</<span style="color: #c678dd;">a</span>></<span style="color: #c678dd;">li</span>>
</<span style="color: #c678dd;">ul</span>>
</<span style="color: #c678dd;">nav</span>>
<span style="color: #5B6268;"><!-- </span><span style="color: #5B6268;">The main content</span><span style="color: #5B6268;"> --></span>
<<span style="color: #c678dd;">main</span>>
<<span style="color: #c678dd;">section</span> <span style="color: #dcaeea;">id</span>=<span style="color: #98be65;">"home"</span>>
<<span style="color: #c678dd;">h2</span>><span style="font-weight: bold; font-style: italic; text-decoration: underline;">Home</span></<span style="color: #c678dd;">h2</span>>
<<span style="color: #c678dd;">p</span>>Welcome!</<span style="color: #c678dd;">p</span>>
</<span style="color: #c678dd;">section</span>>
</<span style="color: #c678dd;">main</span>>
<span style="color: #5B6268;"><!-- </span><span style="color: #5B6268;">A footer</span><span style="color: #5B6268;"> --></span>
<<span style="color: #c678dd;">footer</span>>
<<span style="color: #c678dd;">p</span>><span style="color: #dcaeea;">&copy;</span> All rights reserved.</<span style="color: #c678dd;">p</span>>
</<span style="color: #c678dd;">footer</span>>
</<span style="color: #c678dd;">body</span>>
</<span style="color: #c678dd;">html</span>>
</pre>
</div>
</div>
</div>
<div id="outline-container-orgff93d8f" class="outline-2">
<h2 id="orgff93d8f"><span class="section-number-2">2.</span> Tags</h2>
<div class="outline-text-2" id="text-2">
<ul class="org-ul">
<li><code class="src src-html"><<span style="color: #c678dd;">a</span>></code>: contain links; have following attributes:
<ul class="org-ul">
<li><code class="src src-html"><span style="color: #dcaeea;">target</span>="_blank"</code>: open the link in a new tab.</li>
<li><code class="src src-html"><span style="color: #dcaeea;">title</span>="Go to the link"</code>: the tooltip message, i.e., the floating message when a user hovers over.</li>
</ul></li>
<li><code class="src src-html"><<span style="color: #c678dd;">span</span>></code>: don’t add line breaks before or after it.</li>
<li><code class="src src-html"><<span style="color: #c678dd;">hr</span>></code>: horizontal rule.</li>
</ul>
</div>
</div>
<div id="outline-container-org1ff13b7" class="outline-2">
<h2 id="org1ff13b7"><span class="section-number-2">3.</span> Attributes</h2>
<div class="outline-text-2" id="text-3">
<ul class="org-ul">
<li><code class="src src-html"><span style="color: #dcaeea;">id</span>="home"</code>:
<ul class="org-ul">
<li>allow specific styling of the element, e.g., <code class="src src-html">#home ul {...}</code> only styles the <code class="src src-html">ul</code> in the block with the same id.</li>
</ul></li>
</ul>
</div>
</div>
<div id="outline-container-org46f484f" class="outline-2">
<h2 id="org46f484f"><span class="section-number-2">4.</span> Javascript</h2>
<div class="outline-text-2" id="text-4">
</div>
<div id="outline-container-org0413058" class="outline-3">
<h3 id="org0413058"><span class="section-number-3">4.1.</span> Fetch from an HTML URL</h3>
<div class="outline-text-3" id="text-4-1">
<ol class="org-ol">
<li><code class="src src-js"><span style="color: #51afef;">await</span> fetch(url)</code>: returns a <code class="src src-js">Response</code> object.
<ul class="org-ul">
<li><code class="src src-js"><span style="color: #51afef;">await</span></code> waits for the method to complete.</li>
</ul></li>
<li><code class="src src-js"><span style="color: #51afef;">await</span> response.text()</code>: returns the <code class="src src-js">html</code> string.</li>
<li><code class="src src-js">DOMParser().parseFromString(postHtml, <span style="color: #98be65;">"text/html"</span>)</code>: returns a <code class="src src-js">Document</code> object, which is a complete DOM tree from the HTML string; <code class="src src-js">DOMParser</code> is a built-in browser API.</li>
<li><code class="src src-js">postDoc.getElementById(<span style="color: #98be65;">"content"</span>)</code>: returns an <code class="src src-js">Element</code> with the <code class="src src-js">content</code> id name.</li>
<li><code class="src src-js">content.querySelector(<span style="color: #98be65;">".post-title a"</span>)</code>: fetches the first <code class="src src-js">Element</code> with the <code class="src src-js">post-title</code> class name, and returns the first <code class="src src-js">Element</code> the first <code class="src src-js"><a></code> (anchor) tag.
<ul class="org-ul">
<li><code class="src src-js">.</code> for classes, <code class="src src-js">#</code> for IDs (IDs should be unique within a page)</li>
</ul></li>
</ol>
</div>
</div>
<div id="outline-container-org0a89abe" class="outline-3">
<h3 id="org0a89abe"><span class="section-number-3">4.2.</span> Modify a DOM</h3>
<div class="outline-text-3" id="text-4-2">
<ul class="org-ul">
<li><code class="src src-js">content.querySelector(<span style="color: #98be65;">".taglist"</span>).remove()</code>: removes the element from the DOM, i.e., it modifies <code class="src src-js">content</code>.</li>
</ul>
</div>
</div>
<div id="outline-container-org83b7583" class="outline-3">
<h3 id="org83b7583"><span class="section-number-3">4.3.</span> Syntax</h3>
<div class="outline-text-3" id="text-4-3">
<ul class="org-ul">
<li><code class="src src-js"><span style="color: #51afef;">const</span> <span style="color: #dcaeea;">escapedQuery</span> = query.replace(<span style="color: #98be65;">/[.*+?^${}()|[\]\\]/</span>g, <span style="color: #98be65;">"\\$&"</span>)</code>: add a backslash to any special character in the query; <code>$&</code> is a special pattern used in Javascript’s <code class="src src-js">replacement</code> method.</li>
</ul>
</div>
</div>
</div>
<div class="taglist"><a href="https://chenyo.me/tags.html">Tags</a>: <a href="https://chenyo.me/tag-web.html">web</a> <a href="https://chenyo.me/tag-app.html">app</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-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>