-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreact1.html
1643 lines (1627 loc) · 143 KB
/
react1.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
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<link rel="stylesheet" href="./resources/css/courses.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React </title>
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/0196cd3152.js" crossorigin="anonymous"></script>
<script src="./resources/script.js" defer></script>
</head>
<body>
<button class="openbtn" onclick="openNav()">☰</button>
<header>
<p id="mainPage"><a href="index.html">Main page </a></p>
<h1>React</h1>
</header>
<nav>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#1" class="dropdown-btn">React: The Virtual DOM <i class="fa-solid fa-caret-down"></i></a>
<div class="dropdown-container">
<ul>
<li> <a href="#1a">The Problem </a> </li>
<li><a href="#1b">The Virtual DOM </a> </li>
<li><a href="#1c">How it helps</a> </li>
</ul>
</div>
<a href="#2" class="notDropdown-btn"> Why React?</a>
<a href="#3" class="dropdown-btn">JSX <i class="fa-solid fa-caret-down"></i></a>
<div class="dropdown-container">
<ul>
<li> <a href="#3a">What is JSX? </a> </li>
<li> <a href="#3b">JSX Elements
</a> </li>
<li> <a href="#3c"> JSX Elements And Their Surroundings </a> </li>
<li> <a href="#3d"> Attributes In JSX </a>
</li>
<li> <a href="#3e"> Nested JSX </a>
</li>
<li> <a href="#3f"> JSX Outer Elements </a> </li>
<li> <a href="#3g"> ReactDOM.render() I</a> </li>
<li> <a href="#3h"> ReactDOM.render() II
</a> </li>
<li> <a href="#3i"> Passing a Variable to ReactDOM.render()
</a> </li>
<li> <a href="#3j"> The Virtual DOM
</a> </li>
</ul>
</div>
<a href="#4" class="dropdown-btn">Advanced JSX <i class="fa-solid fa-caret-down"></i></a>
<div class="dropdown-container">
<ul>
<li> <a href="#4a">class vs className
</a> </li>
<li> <a href="#4b">Self-Closing Tags </a> </li>
<li> <a href="#4c">Curly Braces in JSX </a></li>
<li> <a href="#4d"> Variables in JSX </a></li>
<li> <a href="#4e">Variable Attributes in JSX </a> </li>
<li> <a href="#4f">Event Listeners in JSX</a> </li>
<li> <a href="#4g">JSX Conditionals: If Statements That Don't Work </a></li>
<li> <a href="#4h"> JSX Conditionals: If Statements That Do Work </a></li>
<li> <a href="#4i">JSX Conditionals: The Ternary Operator </a> </li>
<li> <a href="#4j">JSX Conditionals: &&</a> </li>
<li> <a href="#4k">.map in JSX </a></li>
<li> <a href="#4l">Keys </a> </li>
<li> <a href="#4m">React.createElement</a> </li>
</ul>
</div>
<a href="#5" class="dropdown-btn"> React Component <i class="fa-solid fa-caret-down"></i></a>
<div class="dropdown-container">
<ul>
<li> <a href="#5a"> Your First React Component </a> </li>
<li> <a href="#5b"> Import React </a> </li>
<li> <a href="#5c"> Import ReactDOM </a> </li>
<li> <a href="#5d"> Create a Component Class </a> </li>
<li> <a href="#5e"> Name a Component Class </a> </li>
<li> <a href="#5f"> Component Class Instructions </a> </li>
<li> <a href="#5g"> The Render Function </a> </li>
<li> <a href="#5h"> Create a Component Instance </a> </li>
<li> <a href="#5i"> Render A Component </a> </li>
</ul>
</div>
<a href="#6" class="dropdown-btn"> Advanced Component <i class="fa-solid fa-caret-down"></i></a>
<div class="dropdown-container">
<ul>
<li> <a href="#6a">Use Multiline JSX in a Component</a> </li>
<li> <a href="#6b">Use a Variable Attribute in a Component </a> </li>
<li> <a href="#6c"> Put Logic in a Render Function </a> </li>
<li> <a href="#6d"> Use a Conditional in a Render Function </a>
</li>
<li> <a href="#6e"> Use this in a Component</a> </li>
<li> <a href="#6f"> Use an Event Listener in a Component </a></li>
<li> <a href="#6g"> Components Recap</a></li>
</ul>
</div>
<a href="#7" class="dropdown-btn">Creating a React App <i class="fa-solid fa-caret-down"></i></a>
<div class="dropdown-container">
<ul>
<li> <a href="#7a">Introduction</a> </li>
<li> <a href="#7b">Getting Ready </a> </li>
<li> <a href="#7c">1. Setting Up the Boilerplate Application</a></li>
<li> <a href="#7d"> 2. React App Structure </a></li>
<li> <a href="#7e">3. Starting the React App Development Server</a> </li>
<li> <a href="#7f">Next Steps </a> </li>
<li> <a href="#7g">Documentation: Create React App </a></li>
</ul>
</div>
<a href="#8" class="notDropdown-btn"> Review React Part 1</a>
</nav>
<main>
<h2 class="c21" id="h.loiv7xmhi7f9"><span class="c3">Introduction</span></h2>
<p class="c1"><span class="c4">In this unit, you will be introduced to React.</span></p>
<p class="c1"><span class="c4">The goal of this unit is to introduce you to the popular JavaScript library,
React.
React will help you build better, scalable front-ends for your website through the creation of
components.
An overview of ES6 and functional JavaScript concepts will help in your understanding of React.</span>
</p>
<p class="c1"><span class="c4">After this unit, you will be able to:</span></p>
<ul class="c17 lst-kix_tkt2r0cj1ag6-0 start">
<li class="c1 c16 li-bullet-0"><span class="c4">Understand ES6+ and functional JavaScript programming
concepts</span></li>
<li class="c1 c16 li-bullet-0"><span class="c4">Know what a Virtual DOM is and how it is used in
React</span>
</li>
<li class="c1 c16 li-bullet-0"><span class="c4">Learn JSX</span></li>
<li class="c1 c16 li-bullet-0"><span class="c4">Build first React components</span></li>
</ul>
<p class="c7 c2"><span class="c4"></span></p>
<h2 id="1"><span class="c3">React: The Virtual DOM</span></h2>
<p class="c1"><span class="c4">Fighting Wasteful DOM Manipulation</span></p>
<h3 id="1a"><span class="c0">The Problem</span></h3>
<p class="c1"><span class="c5"><a class="c6"
href="https://www.google.com/url?q=https://www.codecademy.com/courses/build-interactive-websites/lessons/javascript-dom/exercises/document&sa=D&source=editors&ust=1663325376132108&usg=AOvVaw0AGm65rqgHtVBcFo4BAnAH">DOM
manipulation</a></span><span class="c4"> is the heart of the modern, interactive web.
Unfortunately, it is also a lot slower than most JavaScript operations.</span></p>
<p class="c1"><span>This slowness is made worse by the fact that </span><span class="c13 c11">most JavaScript
frameworks update the DOM much more than they have to.</span></p>
<p class="c1"><span>As an example, let’s say that you have a list that contains ten items. You check off
the
first item. Most JavaScript frameworks would rebuild </span><span class="c8">the entire list</span><span
class="c4">. That’s ten times more work than necessary! Only one item changed, but the remaining
nine
get rebuilt exactly how they were before.</span></p>
<p class="c1"><span class="c4">Rebuilding a list is no big deal to a web browser, but modern websites can use
huge
amounts of DOM manipulation. Inefficient updating has become a serious problem.</span></p>
<p class="c1"><span>To address this problem, the people at React popularized something called the </span><span
class="c8 c14">virtual DOM.</span></p>
<h3 id="1b"><span class="c0">The Virtual DOM</span></h3>
<p class="c1"><span>In React, for every</span><span><a class="c6"
href="https://www.google.com/url?q=http://eloquentjavascript.net/13_dom.html&sa=D&source=editors&ust=1663325376133051&usg=AOvVaw3PKkrjLW_5rlyO2VrxAKD0"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=http://eloquentjavascript.net/13_dom.html&sa=D&source=editors&ust=1663325376133248&usg=AOvVaw2-VmYH0VpVexkzvQCvi5ro">DOM
object</a></span><span>, there is a corresponding “virtual DOM object.” A virtual DOM
object
is a </span><span class="c8">representation</span><span class="c4"> of a DOM object, like a
lightweight
copy.</span></p>
<p class="c1"><span class="c4">A virtual DOM object has the same properties as a real DOM object, but it lacks
the
real thing’s power to directly change what’s on the screen.</span></p>
<p class="c1"><span class="c4">Manipulating the DOM is slow. Manipulating the virtual DOM is much faster,
because
nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to
moving rooms in an actual house.</span></p>
<h3 id="1c"><span class="c0">How it helps</span></h3>
<p class="c1"><span class="c4">When you render a JSX element, every single virtual DOM object gets
updated.</span>
</p>
<p class="c1"><span class="c4">This sounds incredibly inefficient, but the cost is insignificant because the
virtual
DOM can update so quickly.</span></p>
<p class="c1"><span>Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM
</span><span class="c8">snapshot</span><span class="c4"> that was taken right before the update.</span>
</p>
<p class="c1"><span>By comparing the new virtual DOM with a pre-update version, React figures out </span><span
class="c8">exactly which virtual DOM objects have changed.</span><span class="c4"> This process is
called “diffing.”</span></p>
<p class="c1"><span>Once React knows which virtual DOM objects have changed, then React updates those objects,
</span><span class="c8">and only those objects,</span><span class="c4"> on the real DOM. In our example
from earlier, React would be smart enough to rebuild your one checked-off list-item, and leave the rest
of
your list alone.</span></p>
<p class="c1"><span class="c4">This makes a big difference! React can update only the necessary parts of the
DOM.
React’s reputation for performance comes largely from this innovation.</span></p>
<p class="c1"><span class="c4">In summary, here’s what happens when you try to update the DOM in
React:</span>
</p>
<ol class="c17 lst-kix_5sasqihibfu2-0 start" start="1">
<li class="c1 c16 li-bullet-0"><span class="c4">The entire virtual DOM gets updated.</span></li>
<li class="c1 c16 li-bullet-0"><span class="c4">The virtual DOM gets compared to what it looked like before
you
updated it. React figures out which objects have changed.</span></li>
<li class="c1 c16 li-bullet-0"><span>The changed objects, and the changed objects only, get updated on the
</span><span class="c8">real</span><span class="c4"> DOM.</span></li>
<li class="c1 c16 li-bullet-0"><span class="c4">Changes on the real DOM cause the screen to change.</span>
</li>
</ol>
<p class="c1"><span>If you’d like to learn more about the virtual DOM,</span><span><a class="c6"
href="https://www.google.com/url?q=http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/&sa=D&source=editors&ust=1663325376134824&usg=AOvVaw3W9XncpNex0a61DIgAvak1"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/&sa=D&source=editors&ust=1663325376135057&usg=AOvVaw3l1B0jBC2q1o0uQbWoLC3n">here’s
a good place to start</a></span><span class="c4">.</span></p>
<p class="c1 c2"><span class="c4"></span></p>
<h3 id="1d"><span class="c0"></span></h3>
<h2 id="2"><span class="c3">Why React?</span></h2>
<p class="c1"><span class="c4">React.js is a JavaScript library. It was developed by engineers at
Facebook.</span>
</p>
<p class="c1"><span class="c4">Here are just a few of the reasons why people choose to program with
React:</span>
</p>
<ul class="c17 lst-kix_ti67fxrro64x-0 start">
<li class="c1 c16 li-bullet-0"><span>React is </span><span class="c8">fast</span><span class="c4">. Apps
made in
React can handle complex updates and still feel quick and responsive.<br></span></li>
<li class="c1 c16 li-bullet-0"><span>React is </span><span class="c8">modular</span><span>. Instead of
writing
large, dense files of code, you can write many smaller, reusable files. React’s modularity can
be
a beautiful solution to JavaScript’s</span><span><a class="c6"
href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Spaghetti_code&sa=D&source=editors&ust=1663325376135928&usg=AOvVaw0skznm_y77mw9GtvRVvDbj"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Spaghetti_code&sa=D&source=editors&ust=1663325376136125&usg=AOvVaw0Nr5N9M02GY9u3buuWNG8N">maintainability
problems</a></span><span class="c4">.<br></span></li>
<li class="c1 c16 li-bullet-0"><span>React is </span><span class="c8">scalable</span><span class="c4">.
Large
programs that display a lot of changing data are where React performs best.<br></span></li>
<li class="c1 c16 li-bullet-0"><span>React is </span><span class="c8">flexible</span><span>. You can use
React
for interesting projects that have nothing to do with making a web app. People are still figuring
out
React’s potential.</span><span><a class="c6"
href="https://www.google.com/url?q=https://github.com/jiwonbest/amazing-react-projects&sa=D&source=editors&ust=1663325376136624&usg=AOvVaw3npRHOmY8awSRxN8fbnWLT"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://github.com/jiwonbest/amazing-react-projects&sa=D&source=editors&ust=1663325376136848&usg=AOvVaw2gLBTWo3zw0R0eoWD6JNVM">There’s
room to explore.<br></a></span></li>
<li class="c1 c16 li-bullet-0"><span>React is </span><span class="c8">popular</span><span class="c4">. While
this reason has admittedly little to do with React’s quality, the truth is that understanding
React will make you more employable.<br></span></li>
</ul>
<h2 id="3"><span class="c3">JSX</span></h2>
<h3 id="3a"><span class="c0">What is JSX?</span></h3>
<p class="c1"><span class="c8">JSX</span><span class="c4"> is a syntax extension for JavaScript. It was
written
to be used with React. JSX code looks a lot like HTML.</span></p>
<p class="c1"><span class="c4">What does “syntax extension” mean?</span></p>
<p class="c1"><span class="c4">In this case, it means that JSX is not valid JavaScript. Web browsers can’t
read it!</span></p>
<p class="c1"><span>If a JavaScript file contains JSX code, then that file will have to be </span><span
class="c8">compiled</span><span>. That means that before the file reaches a web browser, a </span><span
class="c8">JSX compiler</span><span class="c4"> will translate any JSX into regular
JavaScript.</span>
</p>
<p class="c1"><span class="c4">Codecademy’s servers already have a JSX compiler installed, so you
don’t
have to worry about that for now. Eventually we’ll walk through how to set up a JSX compiler on
your
personal computer.</span></p>
<h3 id="3b"><span class="c0">JSX Elements</span></h3>
<p class="c1"><span>A basic unit of JSX is called a JSX </span><span class="c8">element</span><span
class="c4">.</span></p>
<p class="c1"><span class="c4">Here’s an example of a JSX element:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 284.00px; height: 73.00px;"><img
alt="" src="./resources/images/react1/image39.png"
style="width: 284.00px; height: 73.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">This JSX element looks exactly like HTML! The only noticeable difference is that
you
would find it in a JavaScript file, instead of in an HTML file.</span></p>
<p class="c1 c2"><span class="c4"></span></p>
<h3 id="3c"><span class="c0">JSX Elements And Their Surroundings</span></h3>
<p class="c1"><span>JSX elements are treated as JavaScript </span><span class="c8">expressions</span><span
class="c4">. They can go anywhere that JavaScript expressions can go.</span></p>
<p class="c1"><span class="c4">That means that a JSX element can be saved in a variable, passed to a function,
stored in an object or array…you name it.</span></p>
<p class="c1"><span class="c4">Here’s an example of a JSX element being saved in a variable:</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 322.00px; height: 226.00px;"><img
alt="" src="./resources/images/react1/image11.png"
style="width: 322.00px; height: 226.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1 c2"><span class="c4"></span></p>
<h3 id="3d"><span class="c0">Attributes In JSX</span></h3>
<p class="c1"><span>JSX elements can have </span><span class="c8">attributes</span><span class="c4">, just like
HTML
elements can.</span></p>
<p class="c1"><span>A JSX attribute is written using HTML-like syntax: a </span><span
class="c8">name</span><span>,
followed by an equals sign, followed by a </span><span class="c8">value</span><span>. The </span><span
class="c8">value</span><span class="c4"> should be wrapped in quotes, like this:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 338.00px; height: 55.00px;"><img
alt="" src="./resources/images/react1/image32.png"
style="width: 338.00px; height: 55.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>Here are some JSX elements with </span><span class="c14 c8">attributes:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 358.00px; height: 159.00px;"><img
alt="" src="./resources/images/react1/image41.png"
style="width: 358.00px; height: 159.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">A single JSX element can have many attributes, just like in HTML:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 303.00px; height: 91.00px;"><img
alt="" src="./resources/images/react1/image54.png"
style="width: 303.00px; height: 91.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="3e"><span class="c0">Nested JSX</span></h3>
<p class="c1"><span>You can </span><span class="c8">nest</span><span class="c4"> JSX elements inside of
other
JSX elements, just like in HTML.</span></p>
<p class="c1"><span>Here’s an example of a JSX <h1> element, </span><span
class="c8">nested</span><span class="c4"> inside of a JSX <a> element:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 307.00px; height: 69.00px;"><img
alt="" src="./resources/images/react1/image58.png"
style="width: 307.00px; height: 69.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">To make this more readable, you can use HTML-style line breaks and
indentation:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 313.00px; height: 133.00px;"><img
alt="" src="./resources/images/react1/image24.png"
style="width: 313.00px; height: 133.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">If a JSX expression takes up more than one line, then you must wrap the
multi-line
JSX expression in parentheses. This looks strange at first, but you get used to it:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 336.00px; height: 180.00px;"><img
alt="" src="./resources/images/react1/image18.png"
style="width: 336.00px; height: 180.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c8">Nested</span><span> JSX expressions can be saved as variables, passed to
functions, etc., just like non-nested JSX expressions can! Here’s an example of a </span><span
class="c8">nested</span><span class="c4"> JSX expression being saved as a variable:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 354.00px; height: 178.00px;"><img
alt="" src="./resources/images/react1/image13.png"
style="width: 354.00px; height: 178.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="3f"><span class="c0">JSX Outer Elements</span></h3>
<p class="c1"><span>There’s a rule that we haven’t mentioned: a JSX expression must have exactly
</span><span class="c8">one</span><span class="c4"> outermost element.</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 362.00px; height: 157.00px;"><img
alt="" src="./resources/images/react1/image46.png"
style="width: 362.00px; height: 157.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">But this code will not work:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 306.00px; height: 119.00px;"><img
alt="" src="./resources/images/react1/image15.png"
style="width: 306.00px; height: 119.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>The </span><span class="c8">first opening tag</span><span> and the </span><span
class="c8">final closing tag</span><span class="c4"> of a JSX expression must belong to the same
JSX
element!</span></p>
<p class="c1"><span class="c4">It’s easy to forget about this rule, and end up with errors that are tough
to
diagnose.</span></p>
<p class="c1"><span class="c4">If you notice that a JSX expression has multiple outer elements, the solution is
usually simple: wrap the JSX expression in a <div></div>.</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="3g"><span class="c0">ReactDOM.render() I</span></h3>
<p class="c1"><span class="c4">Let’s examine the code that you just wrote in the last exercise.</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 352.00px; height: 76.00px;"><img
alt="" src="./resources/images/react1/image14.png"
style="width: 352.00px; height: 76.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">You can see something called ReactDOM. What’s that?</span></p>
<p class="c1"><span>ReactDOM is the name of a JavaScript library. This library contains several React-specific
methods, all of which deal with</span><span><a class="c6"
href="https://www.google.com/url?q=http://www.w3schools.com/js/js_htmldom.asp&sa=D&source=editors&ust=1663325376141926&usg=AOvVaw1IgEgEYfMRFnp35GglrTfg"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=http://www.w3schools.com/js/js_htmldom.asp&sa=D&source=editors&ust=1663325376142226&usg=AOvVaw39cFC4rckRmucURVFzPU3z">the
DOM</a></span><span class="c4"> in some way or another.</span></p>
<p class="c1"><span class="c4">We’ll talk more later about how ReactDOM got into your file. For now, just
understand that it’s yours to use.</span></p>
<p class="c1"><span class="c4">Move slightly to the right, and you can see one of ReactDOM‘s methods:
ReactDOM.render().</span></p>
<p class="c1"><span>ReactDOM.render() is the most common way to </span><span class="c8">render</span><span
class="c4"> JSX. It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds
that
tree to the DOM. That is the way to make a JSX expression appear onscreen.</span></p>
<p class="c1"><span class="c4">Move to the right a little more, and you come to this expression:</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 205.00px; height: 56.00px;"><img
alt="" src="./resources/images/react1/image33.png"
style="width: 205.00px; height: 56.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>This is the first </span><span class="c8">argument</span><span class="c4"> being passed
to
ReactDOM.render(). ReactDOM.render()‘s first argument should be a JSX expression, and it will be
rendered to the screen.</span></p>
<p class="c1 c2"><span class="c4"></span></p>
<h3 id="3h"><span class="c0">ReactDOM.render() II</span></h3>
<p class="c1"><span class="c4">Move to the right a little more, and you will see this expression:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 277.00px; height: 55.00px;"><img
alt="" src="./resources/images/react1/image7.png"
style="width: 277.00px; height: 55.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>You just learned that ReactDOM.render() makes its </span><span
class="c8">first</span><span> argument appear onscreen. But </span><span
class="c8">where</span><span class="c4"> on the screen should that first argument appear?</span>
</p>
<p class="c1"><span>The first argument is </span><span class="c8">appended</span><span> to whatever element
is
selected by the </span><span class="c8">second</span><span class="c4"> argument.</span></p>
<p class="c1"><span>In the code editor, select </span><span class="c11">index.html</span><span class="c4">. See
if
you can find an element that would be selected by document.getElementById('app').</span></p>
<p class="c1"><span>That element acted as a </span><span class="c8">container</span><span class="c4"> for
ReactDOM.render()‘s first argument! At the end of the previous exercise, this appeared on the
screen:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 200.00px; height: 94.00px;"><img
alt="" src="./resources/images/react1/image25.png"
style="width: 200.00px; height: 94.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="3i"><span class="c0">Passing a Variable to ReactDOM.render()</span></h3>
<p class="c1"><span>ReactDOM.render()‘s first argument should </span><span
class="c8">evaluate</span><span> to a JSX expression, it doesn’t have to literally
</span><span class="c8">be</span><span class="c4"> a JSX expression.</span></p>
<p class="c1"><span class="c4">The first argument could also be a variable, so long as that variable evaluates
to a
JSX expression.</span></p>
<p class="c1"><span>In this example, we save a JSX expression as a </span><span class="c8">variable</span><span
class="c4"> named toDoList. We then pass toDoList as the first argument to
ReactDOM.render():</span>
</p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 310.00px; height: 267.00px;"><img
alt="" src="./resources/images/react1/image10.png"
style="width: 310.00px; height: 267.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="3j"><span class="c0">The Virtual DOM</span></h3>
<p class="c1"><span>One special thing about ReactDOM.render() is that it </span><span class="c8">only updates
DOM
elements that have changed</span><span class="c4">.</span></p>
<p class="c1"><span class="c4">That means that if you render the exact same thing twice in a row, the second
render
will do nothing:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 350.00px; height: 282.00px;"><img
alt="" src="./resources/images/react1/image6.png"
style="width: 350.00px; height: 282.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">This is significant! Only updating the necessary DOM elements is a large part of
what
makes React so successful.</span></p>
<p class="c1"><span>React accomplishes this thanks to something called </span><span class="c8">the virtual
DOM.</span><span> Before moving on to the end of the lesson,</span><span><a class="c6"
href="https://www.google.com/url?q=https://www.codecademy.com/articles/react-virtual-dom&sa=D&source=editors&ust=1663325376145305&usg=AOvVaw2Np96H2PC1BuRnCytnCRe9"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://www.codecademy.com/articles/react-virtual-dom&sa=D&source=editors&ust=1663325376145573&usg=AOvVaw3g7k30x7MCB28PNojGdXoT">read
this article about the Virtual DOM</a></span><span class="c4">.</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h2 id="4"><span class="c3">Advanced JSX</span></h2>
<h3 id="4a"><span class="c0">class vs className</span></h3>
<p class="c1"><span class="c4">This lesson will cover more advanced JSX. You’ll learn some powerful
tricks,
and some common errors to avoid.</span></p>
<p class="c1"><span class="c4">Grammar in JSX is mostly the same as in HTML, but there are subtle differences to
watch out for. Probably the most frequent of these involves the word class.</span></p>
<p class="c1"><span class="c4">In HTML, it’s common to use class as an attribute name:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 229.00px; height: 53.00px;"><img
alt="" src="./resources/images/react1/image31.png"
style="width: 229.00px; height: 53.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">In JSX, you can’t use the word class! You have to use className
instead:</span>
</p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 285.00px; height: 54.00px;"><img
alt="" src="./resources/images/react1/image60.png"
style="width: 285.00px; height: 54.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">This is because JSX gets translated into JavaScript, and class is a reserved word
in
JavaScript.</span></p>
<p class="c1"><span>When JSX is </span><span class="c8">rendered</span><span class="c4">, JSX className
attributes
are automatically rendered as class attributes.</span></p>
<p class="c1 c2"><span class="c4"></span></p>
<h3 id="4b"><span class="c0">Self-Closing Tags</span></h3>
<p class="c1"><span>Another JSX ‘gotcha’ involves </span><span class="c8">self-closing
tags</span><span class="c4">.</span></p>
<p class="c1"><span class="c4">What’s a self-closing tag?</span></p>
<p class="c1"><span>Most HTML elements use two tags: an </span><span class="c8">opening
tag</span><span> (<div>), and a </span><span class="c8">closing
tag</span><span> (</div>). However, some HTML elements such as <img> and <input>
use
only one tag. The tag that belongs to a single-tag element isn’t an opening tag nor a closing tag;
it’s a </span><span class="c14 c8">self-closing tag.</span></p>
<p class="c1"><span>When you write a self-closing tag in HTML, it is </span><span
class="c8">optional</span><span class="c4"> to include a forward-slash immediately before the final
angle-bracket:</span></p>
<p class="c1 c2"><span class="c4"></span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 280.00px; height: 180.00px;"><img
alt="" src="./resources/images/react1/image40.png"
style="width: 280.00px; height: 180.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1 c2"><span class="c4"></span></p>
<p class="c1"><span class="c4">But!</span></p>
<p class="c1"><span>In JSX, you </span><span class="c8">have to</span><span class="c4"> include the slash.
If
you write a self-closing tag in JSX and forget the slash, you will raise an error:</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 218.00px; height: 179.00px;"><img
alt="" src="./resources/images/react1/image44.png"
style="width: 218.00px; height: 179.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1 c2"><span class="c4"></span></p>
<h3 id="4c"><span class="c0">Curly Braces in JSX</span></h3>
<p class="c1"><span class="c4">The code in the last exercise didn’t behave as one might expect. Instead of
adding 2 and 3, it printed out “2 + 3” as a string of text. Why?</span></p>
<p class="c1"><span class="c4">This happened because 2 + 3 is located in between <h1> and </h1>
tags.</span></p>
<p class="c1"><span class="c4">Any code in between the tags of a JSX element will be read as JSX, not as regular
JavaScript! JSX doesn’t add numbers - it reads them as text, just like HTML.</span></p>
<p class="c1"><span class="c4">You need a way to write code that says, “Even though I am located in
between
JSX tags, treat me like ordinary JavaScript and not like JSX.”</span></p>
<p class="c1"><span>You can do this by wrapping your code in </span><span class="c8">curly braces</span><span
class="c4">.</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 178.00px; height: 52.00px;"><img
alt="" src="./resources/images/react1/image38.png"
style="width: 178.00px; height: 52.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="4d"><span class="c0">Variables in JSX</span></h3>
<p class="c1"><span class="c4">When you inject JavaScript into JSX, that JavaScript is part of the same
environment
as the rest of the JavaScript in your file.</span></p>
<p class="c1"><span class="c4">That means that you can access variables while inside of a JSX expression, even
if
those variables were declared on the outside.</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 350.00px; height: 154.00px;"><img
alt="" src="./resources/images/react1/image50.png"
style="width: 350.00px; height: 154.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="4e"><span class="c0">Variable Attributes in JSX</span></h3>
<p class="c1"><span>When writing JSX, it’s common to use variables to set </span><span
class="c8">attributes</span><span class="c4">.</span></p>
<p class="c1"><span class="c4">Here’s an example of how that might work:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 341.00px; height: 281.00px;"><img
alt="" src="./resources/images/react1/image52.png"
style="width: 341.00px; height: 281.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">Notice how in this example, the <img />‘s attributes each get their
own
line. This can make your code more readable if you have a lot of attributes on one element.</span></p>
<p class="c1"><span class="c8">Object properties</span><span class="c4"> are also often used to set
attributes:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 325.00px; height: 508.00px;"><img
alt="" src="./resources/images/react1/image22.png"
style="width: 325.00px; height: 508.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="4f"><span class="c0">Event Listeners in JSX</span></h3>
<p class="c1"><span>JSX elements can have </span><span class="c8">event listeners</span><span class="c4">, just
like
HTML elements can. Programming in React means constantly working with event listeners.</span></p>
<p class="c1"><span>You create an event listener by giving a JSX element a special </span><span
class="c8">attribute</span><span class="c4">. Here’s an example:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 237.00px; height: 52.00px;"><img
alt="" src="./resources/images/react1/image59.png"
style="width: 237.00px; height: 52.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>An event listener attribute’s </span><span class="c8">name</span><span> should be
something like onClick or onMouseOver: the word on, plus the type of event that you’re listening
for.
You can see a list of valid event names</span><span><a class="c6"
href="https://www.google.com/url?q=http://facebook.github.io/react/docs/events.html%23supported-events&sa=D&source=editors&ust=1663325376150386&usg=AOvVaw2Dt9ZpCF9W816RKM1KcE4p"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=http://facebook.github.io/react/docs/events.html%23supported-events&sa=D&source=editors&ust=1663325376150723&usg=AOvVaw1J151JVmYu_mdgH_avpVLD">here</a></span><span
class="c4">.</span></p>
<p class="c1"><span>An event listener attribute’s </span><span class="c8">value</span><span
class="c4"> should be a function. The above example would only work if myFunc were a valid function
that had been defined elsewhere:</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 345.00px; height: 161.00px;"><img
alt="" src="./resources/images/react1/image34.png"
style="width: 345.00px; height: 161.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>Note that in HTML, event listener </span><span class="c8">names</span><span
class="c4"> are
written in all lowercase, such as onclick or onmouseover. In JSX, event listener names are written in
camelCase, such as onClick or onMouseOver.</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="4g"><span class="c0">JSX Conditionals: If Statements That Don't Work</span>
</h3>
<p class="c1"><span class="c4">Great work! You’ve learned how to use curly braces to inject JavaScript
into a
JSX expression!</span></p>
<p class="c1"><span class="c4">Here’s a rule that you need to know: you can not inject an if statement
into a
JSX expression.</span></p>
<p class="c1"><span class="c4">This code will break:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 302.00px; height: 245.00px;"><img
alt="" src="./resources/images/react1/image37.png"
style="width: 302.00px; height: 245.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>The reason why has to do with the way that JSX is compiled. You don’t need to
understand
the mechanics of it for now, but if you’re interested then you can learn more in
the</span><span><a class="c6"
href="https://www.google.com/url?q=https://reactjs.org/docs/jsx-in-depth.html&sa=D&source=editors&ust=1663325376151881&usg=AOvVaw39LWaM6UGhYqDzoSxmSXp4"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://reactjs.org/docs/jsx-in-depth.html&sa=D&source=editors&ust=1663325376152178&usg=AOvVaw3F-JvCaS1_zr5k8Kxyxn5k">React
documentation</a></span><span class="c4">.</span></p>
<p class="c1"><span class="c4">What if you want a JSX expression to render, but only under certain
circumstances?
You can’t inject an if statement. What can you do?</span></p>
<p class="c1"><span>You have lots of options. In the next few lessons, we’ll explore some simple ways to
write
</span><span class="c8">conditionals</span><span class="c4"> (expressions that are only executed under
certain conditions) in JSX.</span></p>
<h3 id="4h"><span class="c0">JSX Conditionals: If Statements That Do Work</span></h3>
<p class="c1"><span>How can you write a </span><span class="c8">conditional</span><span class="c4">, if you
can’t inject an if statement into JSX?</span></p>
<p class="c1"><span>Well, one option is to write an if statement, and </span><span class="c8">not</span><span
class="c4"> inject it into JSX.</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 345.00px; height: 413.00px;"><img
alt="" src="./resources/images/react1/image1.png"
style="width: 345.00px; height: 413.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c11">this</span><span> works, because the words if and else are </span><span
class="c8">not</span><span class="c4"> injected in between JSX tags. The if statement is on the
outside, and no JavaScript injection is necessary.</span></p>
<p class="c1"><span class="c4">This is a common way to express conditionals in JSX.</span></p>
<h3 id="4i"><span class="c0">JSX Conditionals: The Ternary Operator</span></h3>
<p class="c1"><span>There’s a more compact way to write conditionals in JSX: the </span><span
class="c8">ternary operator</span><span class="c4">.</span></p>
<p class="c1"><span class="c4">The ternary operator works the same way in React as it does in regular
JavaScript.
However, it shows up in React surprisingly often.</span></p>
<p class="c1"><span>Recall how it works: you write x ? y : z, where x, y, and z are all JavaScript expressions.
When
your code is executed, x is evaluated as either “truthy” or “falsy.” If x is
truthy,
then the entire ternary operator returns y. If x is falsy, then the entire ternary operator returns
z.</span><span><a class="c6"
href="https://www.google.com/url?q=http://stackoverflow.com/questions/6259982/how-to-use-the-ternary-operator-in-javascript&sa=D&source=editors&ust=1663325376153822&usg=AOvVaw1CkWPZXAZp9IG7bpHFoRoo"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=http://stackoverflow.com/questions/6259982/how-to-use-the-ternary-operator-in-javascript&sa=D&source=editors&ust=1663325376154088&usg=AOvVaw1B0uphGfh_RSaJE6aw6xMd">Here’s</a></span><span
class="c4"> a nice explanation if you need a refresher.</span></p>
<p class="c1"><span class="c4">Here’s how you might use the ternary operator in a JSX expression:</span>
</p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 347.00px; height: 156.00px;"><img
alt="" src="./resources/images/react1/image30.png"
style="width: 347.00px; height: 156.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">In the above example, if age is greater than or equal to drinkingAge, then
headline
will equal <h1>Buy Drink</h1>. Otherwise, headline will equal <h1>Do Teen
Stuff</h1>.</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="4j"><span class="c0">JSX Conditionals: &&</span></h3>
<p class="c1"><span class="c4">We’re going to cover one final way of writing conditionals in React: the
&& operator.</span></p>
<p class="c1"><span class="c4">Like the ternary operator, && is not React-specific, but it shows up in
React
surprisingly often.</span></p>
<p class="c1"><span>In the last two lessons, you wrote statements that would sometimes render a kitty and other
times render a doggy. && would </span><span class="c8">not</span><span class="c4"> have
been
the best choice for those lessons.</span></p>
<p class="c1"><span>&& works best in conditionals that will sometimes do an action, but other times do
</span><span class="c8">nothing at all</span><span class="c4">.</span></p>
<p class="c1"><span class="c4">Here’s an example:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 329.00px; height: 248.00px;"><img
alt="" src="./resources/images/react1/image21.png"
style="width: 329.00px; height: 248.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">If the expression on the left of the && evaluates as true, then the JSX
on
the right of the && will be rendered. If the first expression is false, however, then the JSX to
the
right of the && will be ignored and not rendered.</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="4k"><span class="c0">.map in JSX</span></h3>
<p class="c1"><span class="c4">The array method .map() comes up often in React. It’s good to get in the
habit
of using it alongside JSX.</span></p>
<p class="c1"><span class="c4">If you want to create a list of JSX elements, then .map() is often your best bet.
It
can look odd at first:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 361.00px; height: 176.00px;"><img
alt="" src="./resources/images/react1/image51.png"
style="width: 361.00px; height: 176.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">In the above example, we start out with an array of strings. We call .map() on
this
array of strings, and the .map() call returns a new array of <li>s.</span></p>
<p class="c1"><span>On the last line of the example, note that {listItems} will evaluate to an array, because
it’s the returned value of .map()! JSX <li>s don’t have to be in an array like this,
but
they </span><span class="c8">can</span><span class="c4"> be.</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 312.00px; height: 407.00px;"><img
alt="" src="./resources/images/react1/image17.png"
style="width: 312.00px; height: 407.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="4l"><span class="c0">Keys</span></h3>
<p class="c1"><span class="c4">When you make a list in JSX, sometimes your list will need to include something
called keys:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 309.00px; height: 136.00px;"><img
alt="" src="./resources/images/react1/image5.png"
style="width: 309.00px; height: 136.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>A key is a JSX attribute. The attribute’s </span><span
class="c8">name</span><span> is key. The attribute’s </span><span
class="c8">value</span><span class="c4"> should be something unique, similar to an id
attribute.</span></p>
<p class="c1"><span class="c4">keys don’t do anything that you can see! React uses them internally to keep
track of lists. If you don’t use keys when you’re supposed to, React might accidentally
scramble
your list-items into the wrong order.</span></p>
<p class="c1"><span class="c4">Not all lists need to have keys. A list needs keys if either of the following are
true:</span></p>
<ol class="c17 lst-kix_8ubiqyn3ug33-0 start" start="1">
<li class="c1 c16 li-bullet-0"><span>The list-items have </span><span class="c8">memory</span><span
class="c4"> from one render to the next. For instance, when a to-do list renders, each item
must
“remember” whether it was checked off. The items shouldn’t get amnesia when they
render.<br></span></li>
<li class="c1 c16 li-bullet-0"><span class="c4">A list’s order might be shuffled. For instance, a list
of
search results might be shuffled from one render to the next.<br></span></li>
</ol>
<p class="c1"><span class="c4">If neither of these conditions are true, then you don’t have to worry about
keys. If you aren’t sure then it never hurts to use them!</span></p>
<h3 id="4m"><span class="c0">React.createElement</span></h3>
<p class="c1"><span class="c4">You can write React code without using JSX at all!</span></p>
<p class="c1"><span class="c4">The majority of React programmers do use JSX, and we will use it for the
remainder of
this tutorial, but you should understand that it is possible to write React code without it.</span></p>
<p class="c1"><span class="c4">The following JSX expression:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 299.00px; height: 53.00px;"><img
alt="" src="./resources/images/react1/image8.png"
style="width: 299.00px; height: 53.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">can be rewritten without JSX, like this:</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 291.00px; height: 138.00px;"><img
alt="" src="./resources/images/react1/image55.png"
style="width: 291.00px; height: 138.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span>When a JSX element is compiled, the compiler </span><span class="c8">transforms</span><span
class="c4"> the JSX element into the method that you see above: React.createElement(). Every JSX
element is secretly a call to React.createElement().</span></p>
<p class="c1"><span>We won’t go in-depth into how React.createElement() works, but you can start with
the</span><span><a class="c6"
href="https://www.google.com/url?q=http://facebook.github.io/react/docs/top-level-api.html%23react.createelement&sa=D&source=editors&ust=1663325376158184&usg=AOvVaw0hSQ5C0AicUGzZ7GHgb-TX"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=http://facebook.github.io/react/docs/top-level-api.html%23react.createelement&sa=D&source=editors&ust=1663325376158494&usg=AOvVaw3VlSQL67mfCYbb4kg44-2q">documentation</a></span><span
class="c4"> if you’d like to learn more!</span></p>
<h2 id="5"><span class="c3">React Component</span></h2>
<h3 id="5a"><span class="c0">Your First React Component</span></h3>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c1"><span>React applications are made out of </span><span class="c14 c8">components.</span></p>
<p class="c1"><span class="c4">What’s a component?</span></p>
<p class="c1"><span class="c4">A component is a small, reusable chunk of code that is responsible for one job.
That
job is often to render some HTML.</span></p>
<p class="c1"><span class="c4">Take a look at the code below. This code will create and render a new React
component:</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 322.00px; height: 325.00px;"><img
alt="" src="./resources/images/react1/image45.png"
style="width: 322.00px; height: 325.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">A lot of that code is probably unfamiliar. However, you can recognize some JSX in
there, as well as ReactDOM.render().</span></p>
<p class="c1"><span class="c4">We are going to unpack that code, one small piece at a time. By the end of this
lesson, you’ll understand how to build a React component!</span></p>
<p class="c1 c10"><span class="c11">A note from the Curriculum Developers</span><span>: In this course, we teach
both</span><span><a class="c6"
href="https://www.google.com/url?q=https://reactjs.org/docs/components-and-props.html%23function-and-class-components&sa=D&source=editors&ust=1663325376159815&usg=AOvVaw0HFZtUbyAh_7X4W75kuzug"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://reactjs.org/docs/components-and-props.html%23function-and-class-components&sa=D&source=editors&ust=1663325376160078&usg=AOvVaw1AXqPhGDEu5rZ0H8VWK-ra">class
components and function components</a></span><span class="c4">. We start with class components
because
they are still widely used in legacy code, are common in tutorials/documentation found online, and are
required for a few specific use-cases. In the module on Hooks, we introduce function components which
are
the recommended way of creating React components. From that point on, we use function components
throughout
the remainder of our React content.</span></p>
<h3 id="5b"><span class="c0">Import React</span></h3>
<p class="c1"><span class="c4">Wooo! Your first React component!</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 241.00px; height: 50.00px;"><img
alt="" src="./resources/images/react1/image48.png"
style="width: 241.00px; height: 50.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c7 c2"><span class="c4"></span></p>
<p class="c1"><span class="c4">This creates an object named React which contains methods necessary to use the
React
library.</span></p>
<p class="c1"><span class="c4">Later, we’ll go over where the React library is imported from, and how the
importing process works. For now, just know that this is how we import the React library.</span></p>
<p class="c1"><span>You’ve already seen one of the methods contained in the React library:
React.createElement(). Recall that when a JSX element is </span><span class="c8">compiled</span><span
class="c4">, it transforms into a React.createElement() call.</span></p>
<p class="c1"><span>For this reason, you </span><span class="c8">have to</span><span class="c4"> import the
React library, and save it in a variable named React, before you can use any JSX at all.
React.createElement() must be available in order for JSX to work.</span></p>
<h3 id="5c"><span class="c0">Import ReactDOM</span></h3>
<p class="c1"><span class="c4">In order to create our first component, we next imported the ReactDOM:</span></p>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 306.00px; height: 51.00px;"><img
alt="" src="./resources/images/react1/image16.png"
style="width: 306.00px; height: 51.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1 c2"><span class="c4"></span></p>
<p class="c1"><span class="c4">Both import JavaScript objects. In both lines, the imported object contains
React-related methods.</span></p>
<p class="c1"><span class="c4">However, there is a difference!</span></p>
<p class="c1"><span class="c4">The methods imported from 'react-dom' are meant for interacting with the
DOM.
You are already familiar with one of them: ReactDOM.render().</span></p>
<p class="c1"><span class="c4">The methods imported from 'react' don’t deal with the DOM at all.
They
don’t engage directly with anything that isn’t part of React.</span></p>
<p class="c1"><span>To clarify: the DOM is </span><span class="c8">used</span><span> in React applications,
but
it isn’t </span><span class="c8">part</span><span class="c4"> of React. After all, the DOM is
also used in countless non-React applications. Methods imported from 'react' are only for pure
React
purposes, such as creating components or writing JSX elements.</span></p>
<p class="c7 c2"><span class="c4"></span></p>
<h3 id="5d"><span class="c0">Create a Component Class</span></h3>
<p class="c1"><span>You’ve learned that a </span><span class="c8">React component</span><span
class="c4"> is a small, reusable chunk of code that is responsible for one job, which often
involves
rendering HTML.</span></p>
<p class="c1"><span>Here’s another fact about components: we can use a JavaScript class to define a new
React
component. We can also define components with JavaScript functions, but we’ll focus on
</span><span class="c8">class components</span><span class="c4"> first.</span></p>
<p class="c1"><span class="c4">All class components will have some methods and properties in common (more on
this
later). Rather than rewriting those same properties over and over again every time, we extend the
Component
class from the React library. This way, we can use code that we import from the React library, without
having to write it over and over again ourselves.</span></p>
<p class="c1"><span>After we </span><span class="c8">define</span><span> our class component, we can use it
to
</span><span class="c8">render</span><span class="c4"> as many instances of that component as we
want.</span></p>
<p class="c1"><span>What </span><span class="c8">is</span><span class="c4"> React.Component, and how do you
use
it to make a component class?</span></p>
<p class="c1"><span>React.Component is a JavaScript </span><span class="c8">class</span><span>. To create your
own
component class, you must </span><span class="c8">subclass</span><span class="c4"> React.Component.
You
can do this by using the syntax class YourComponentNameGoesHere extends React.Component {}.</span></p>
<p class="c1"><span>JavaScript classes and subclassing are a complex topic beyond the scope of this course. If
you
aren’t comfortable with them, here are some good resources to consult:</span><span><a class="c6"
href="https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes&sa=D&source=editors&ust=1663325376163097&usg=AOvVaw0-Pr3V989JhKMtnEo1Gx1H"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes&sa=D&source=editors&ust=1663325376163369&usg=AOvVaw3IONTVewVPF4HvXLZVHEyO">1</a></span><span><a
class="c6"
href="https://www.google.com/url?q=https://hacks.mozilla.org/2015/07/es6-in-depth-classes/&sa=D&source=editors&ust=1663325376163563&usg=AOvVaw1LetU7AfEwotAm-PsGxdCM"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://hacks.mozilla.org/2015/07/es6-in-depth-classes/&sa=D&source=editors&ust=1663325376163774&usg=AOvVaw0fEOa4f9E8ObAVT7VYFuYl">2</a></span><span><a
class="c6"
href="https://www.google.com/url?q=https://hacks.mozilla.org/2015/08/es6-in-depth-subclassing/&sa=D&source=editors&ust=1663325376163986&usg=AOvVaw0ICM4dpKDuYMJ85c_RHFWm"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://hacks.mozilla.org/2015/08/es6-in-depth-subclassing/&sa=D&source=editors&ust=1663325376164181&usg=AOvVaw2jd83LmRMWJBAftAHYoKUB">3</a></span><span><a
class="c6"
href="https://www.google.com/url?q=http://exploringjs.com/es6/ch_classes.html&sa=D&source=editors&ust=1663325376164357&usg=AOvVaw3G3fDh7cvJc0ok6AuVvLKb"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=http://exploringjs.com/es6/ch_classes.html&sa=D&source=editors&ust=1663325376164534&usg=AOvVaw0imm6rTzMnjpw5cvaXLyhN">4</a></span><span
class="c4">.</span></p>
<p class="c1"><span class="c4">Take another look at the code from the first exercise:</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 321.00px; height: 326.00px;"><img
alt="" src="./resources/images/react1/image23.png"
style="width: 321.00px; height: 326.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1 c2"><span class="c4"></span></p>
<p class="c1 c2"><span class="c4"></span></p>
<p class="c1"><span class="c4">A lot of it is still unfamiliar, but you can understand more than you could
before!</span></p>
<p class="c1"><span>On line 4, you know that you are declaring a new </span><span class="c8">component
class</span><span class="c4">, which is like a factory for building React components. You know that
React.Component is a class, which you must subclass in order to create a component class of your own.
You
also know that React.Component is a property on the object which was returned by import React from
'react' on line 1.</span></p>
<p class="c1 c2"><span class="c4"></span></p>
<h3 id="5e"><span class="c0">Name a Component Class</span></h3>
<p class="c7"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 300.00px; height: 159.00px;"><img
alt="" src="./resources/images/react1/image4.png"
style="width: 300.00px; height: 159.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">Component class variable names must begin with capital letters!</span></p>
<p class="c1"><span>This adheres to JavaScript’s class syntax. This naming convention is also seen in
other
languages that write</span><span><a class="c6"
href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Naming_convention_(programming)%23Java&sa=D&source=editors&ust=1663325376165623&usg=AOvVaw16qC4haajXQt5PlG87xz0-"> </a></span><span
class="c5"><a class="c6"
href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Naming_convention_(programming)%23Java&sa=D&source=editors&ust=1663325376165855&usg=AOvVaw0OhCeZz5zFqgi8CwgE0WG_">class
names in UpperCamelCase, like Java</a></span><span class="c4">.</span></p>
<p class="c1"><span class="c4">In addition, there is a React-specific reason why component class names must
always
be capitalized. We’ll get to that soon!</span></p>
<h3 id="5f"><span class="c0">Component Class Instructions</span></h3>
<p class="c1"><span>Let’s review what you’ve learned so far! Find each of these points in
</span><span class="c13 c11">app.js:</span></p>
<ul class="c17 lst-kix_o95b8giqfi1f-0 start">
<li class="c1 c16 li-bullet-0"><span class="c4">On line 1, import React from 'react' creates a
JavaScript object. This object contains properties that are needed to make React work, such as
React.createElement() and React.Component.<br></span></li>
<li class="c1 c16 li-bullet-0"><span class="c4">On line 2, import ReactDOM from 'react-dom' creates
another JavaScript object. This object contains methods that help React interact with the DOM, such
as
ReactDOM.render().<br></span></li>
<li class="c1 c16 li-bullet-0"><span>On line 4, by subclassing React.Component, you create a new
</span><span class="c8">component class</span><span class="c4">. This is not a component! A component
class is more
like a factory that produces components. When you start making components, each one will come from a
component class.<br></span></li>
<li class="c1 c16 li-bullet-0"><span class="c4">Whenever you create a component class, you need to give that
component class a name. That name should be written in UpperCamelCase. In this case, your chosen
name is
MyComponentClass.<br></span></li>
</ul>
<p class="c1"><span>Something that we </span><span class="c8">haven’t</span><span> talked about yet
is
the </span><span class="c8">body</span><span class="c4"> of your component class: the pair of curly
braces after React.Component, and all of the code between those curly braces.</span></p>
<p class="c1"><span class="c4">Like all JavaScript classes, this one needs a body. The body will act as a set of
instructions, explaining to your component class how it should build a React component.</span></p>
<p class="c1"><span>Here’s what your class body would look like on its own, without the rest of the class
declaration syntax. Find it in </span><span class="c11">app.js</span><span class="c4">:</span></p>
<p class="c1"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 302.00px; height: 143.00px;"><img
alt="" src="./resources/images/react1/image63.png"
style="width: 302.00px; height: 143.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span></p>
<p class="c1"><span class="c4">That doesn’t look like a set of instructions explaining how to build a