-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathREADME.html
More file actions
1964 lines (1926 loc) · 158 KB
/
README.html
File metadata and controls
1964 lines (1926 loc) · 158 KB
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./toc.css">
<link rel="stylesheet" href="./readme.css">
<link rel="stylesheet" href="./boot.css">
<link rel="stylesheet"
href="https://raw.githubusercontent.com/bgoonz/styling-templates/master/mixu-bootstrap/assets/css/bootstrap.css">
<script async src="./toc.js"></script>
<meta http-equiv="Content-Type" content="text/html">
<meta name="Author" content="Bryan Guner">
<title> directory </title>
</head>
<body>
<h5>Automatic Table of Contents</h5>
<div id="ToC" class="my_class"> </div>
<div class="mume markdown-preview ">
<div class="markdown-body">
<h1># A journey through my experiences learning React.js and the tools I discover along the way!</h1>
<script>
var inscrybmde = new InscrybMDE();
</script>
<h2><a href="#react-mental-models"></a>React Mental Models</h2>
<p>React helps us build complex, interactive UIs more easily than ever before. It also encourages us to write code
in a certain way, guiding us to create apps that are simpler to navigate and understand.</p>
<p><img
src="https://obedparla.com/static/c9f28303d7dad2744b40d64b0ab33358/9aabf/react-mental-model-illustration.jpg"
alt="An abstract model inside a mind looking at the React logo"></p>
<p>React itself is a mental model with a simple idea at its core: encapsulate portions of your app that rely on
similar logic and UI and React will make sure that portion is always up kept up to date.</p>
<p>Whether you've been working with React for years or are just starting, having a clear mental model is the
best way to feel confident working with it. So for me to transfer my mental models to you I'll start from
first-principles and build on top of them.</p>
<h2><a href="#its-functions-all-the-way-down"></a>It's functions all the way down</h2>
<p>Let's start by modeling the basic building blocks of JavaScript and React: functions.</p>
<ul>
<li>A React component is just a function</li>
<li>Components containing other components are functions calling other functions</li>
<li>Props are the function's arguments</li>
</ul>
<p>This is hidden away by JSX, the markup language React uses. Strip away JSX and React is a bunch of functions
calling one another. JSX is in itself an applied mental model that makes using React simpler and more intuitive.
</p>
<p>Let's look at each part individually.</p>
<h3><a href="#a-component-is-a-function-that-returns-jsx"></a>A component is a function that returns JSX</h3>
<p>React is used with JSX—JavaScript XML—a way to write what seems as HTML with all of
JavaScript's power. JSX offers a great applied mental model for using nested functions in a way that feels
intuitive.</p>
<p>Let's ignore class components and focus on the far more common functional components. A
<em>functional</em> component is a function that behaves exactly like any other JavaScript function. React
components always return JSX which is then executed and turned into HTML.
</p>
<p>This is what simple JSX looks like:</p>
<pre class="language-js"> <span const</span> <span ><span class="token maybe-class-name">Li</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token keyword module">export</span> <span const</span> <span ><span class="token maybe-class-name">RickRoll</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>wrapper<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Li</span></span> <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">'red'</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Never</span> give you up<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Li</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
<p>Which compiled into pure JavaScript by Babel:</p>
<pre class="language-js"> <span const</span> <span ><span class="token maybe-class-name">Li</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">,</span> props<span class="token punctuation">,</span> props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword module">export</span> <span const</span> <span ><span class="token maybe-class-name">RickRoll</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
<span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
<span class="token string">'div'</span><span class="token punctuation">,</span>
<span class="token keyword null nil">null</span><span class="token punctuation">,</span>
<span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
<span class="token string">'div'</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
className<span class="token operator">:</span> <span class="token string">'wrapper'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
<span class="token string">'ul'</span><span class="token punctuation">,</span>
<span class="token keyword null nil">null</span><span class="token punctuation">,</span>
<span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
<span class="token maybe-class-name">Li</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string">'Never give you up'</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
<p>Now, notice how each component is a function calling another function, and each new component is the third
argument for the <code class="language-javascript">React.createElement</code> function. Whenever you write a
component, it's useful to
keep in mind that it's a normal JavaScript function.</p>
<p>An important feature of React is that a component can have many children but only one parent. I found this a
confusing until I realized it's the same logic HTML has, where each element must be inside other elements,
and can have many children. You can notice this in the code above, where there's only one parent
<code class="language-javascript">div</code> containing all the children.
</p>
<h3><a href="#components-props-are-the-same-as-a-functions-arguments"></a>component's props are the same as a
function's arguments</h3>
<p>When using a function we can use arguments to share information with that function. For React components we
call these arguments <code class="language-javascript">props</code> (funny story, I didn't realize props is
short for
<em>properties</em> for a long time).
</p>
<p>Under the hood, props behave <em>exactly</em> like function arguments, the differences are that we interact
with them through the nicer interface of JSX, and that React gives extra functionality to props such as
<code class="language-javascript">children</code> .
</p>
<h2><a href="#creating-a-mental-model-around-functions"></a>Creating a mental model around functions</h2>
<p>Using this knowledge let's craft a mental model to intuitively understand functions!</p>
<p>When I think about a function I imagine it as a box, and that box will do something whenever it's called.
It could return a value or not:</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"> <span function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword control-flow">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span function</span> <span class="token function">logSum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
<p>Since a component is a fancy function, that makes a component a box as well, with <code
class="language-javascript">props</code> as the
ingredients the box needs to create the output.</p>
<p><img src="https://obedparla.com/static/1078eb1563b832008167b49c2b8edb11/ce2e0/a-plus-b-box.jpg"
alt="A plus B in a box with props explaining a mental model for JavaScript functions"></p>
<p>When a component is executed it will run whatever logic it has, if any, and evaluate its JSX. Any tags will
become HTML and any component will be executed, and the process is repeated until reaching the last component in
the chain of children.</p>
<p>Since a component can have many children but only one parent I imagine multiple components as a set of boxes,
one inside another. Each box must be contained within a bigger box and can have many smaller boxes inside.</p>
<p><img src="https://obedparla.com/static/cf7892f6a3db2815d6c502fe74538e4a/1df45/box-inside-box.jpg"
alt="One big box with many smaller boxes inside and text saying "it's a box in another box"">
</p>
<p>But the mental model of a box representing a component is not complete without understanding how it can
interact with other boxes.</p>
<h2><a href="#how-to-think-about-closures"></a><br>
How To Think About Closures</h2>
<p>Closures are a core concept in JavaScript. They enable complex functionality in the language, they're
super important to understand to have a good mental model around React.</p>
<p>They're also one of the features newcomers struggle with the most, so instead of explaining the
technicalities I'll demonstrate the mental model I have around closures.</p>
<p>The basic description of a closure is that it's a function. I imagine it as a box that keeps what's
inside of it from spilling out, while allowing the things outside of it from entering, like a semi-permeable
box. But spilling out where?</p>
<p>While the closure itself is a box, any closure will be inside bigger boxes, with the outermost box being the
Window object.</p>
<p><img src="https://obedparla.com/static/952aebfcba6f1850f93b3bf6d15392f3/ce2e0/closures_window.jpg"
alt="A box describing a mental model of a javascript closure, showing Window, scripts and React apps"></p>
<blockquote>
<p>The window object encapsulates everything else</p>
</blockquote>
<h3><a href="#but-what-is-a-closure"></a>But what <em>is</em> a closure?</h3>
<p>A closure is a feature of JavaScript functions. If you're using a function, you're using a closure.
</p>
<p>As I've mentioned, a function is a box and that makes a closure a box too. Considering that each function
can contain many others inside of it, then the closure is the ability of a function to use the information
outside of it, while keeping the information it has inside from "spilling out", or being used by the
outer function.</p>
<p>Speaking in terms of my mental model: I imagine the functions as boxes within boxes, and each smaller box can
see the information of the outer box, or parent, but the big box cannot see the smaller one's information.
That's as simple and accurate an explanation of closures as I can make.</p>
<p>"Each function can only access its own</p>
<p><img src="https://obedparla.com/static/96f403cd585425c1057214447165bbbe/01d85/data-flow.jpg"
alt="(information and the parent's")"></p>
<p>Each function can only access its own information and the parent's</p>
<p>Closures are important because they can be exploited to create some powerful mechanics and React takes full
advantage of this.</p>
<h3><a href="#closures-in-react"></a>Closures in React</h3>
<p>Each React component is also a closure. Within components, you can only pass props down from parent to child
and the parent cannot see what's inside the child, this is an intended feature to make our app's data
flow simpler to trace. To find where data comes from, we usually need to go up the tree to find which parent is
sending it down.</p>
<p>A great example of closures in React is updating a parent's state through a child component. You've
probably done this without realizing you were messing around with closures.</p>
<p>To start, we know the parent can't access the child's information directly, but the child can access
the parent's. So we send down that info from parent to child through <code
class="language-javascript">props</code> . In this case, the
information takes the shape of a function that updates the parent's state.</p>
<pre class="language-js"> <span const</span> <span ><span class="token maybe-class-name">Parent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token maybe-class-name">The</span> count is <span class="token punctuation">{</span>count<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ChildButtons</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>setCount<span class="token punctuation">}</span></span> <span class="token attr-name">count</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span const</span> <span ><span class="token maybe-class-name">ChildButtons</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token method function property-access">onClick</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token maybe-class-name">Increase</span> count
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token method function property-access">onClick</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token maybe-class-name">Decrease</span> count
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
<p>When an <code class="language-javascript">onClick</code> happens in a <code
class="language-javascript">button</code> , that will execute the function received from
props <code class="language-javascript">props.onClick</code> , and update the value using <code
class="language-javascript">props.count</code> .</p>
<p>The insight here lies in the way we're updating a parent's state through a child, in this case, the
<code class="language-javascript">props.onClick</code> function. The reason this works is that the function was
<em>declared</em> within the
<code class="language-javascript">Parent</code> component's scope, within its closure, so it will have
access to the parent's
information. Once that function is called in a child, it still lives in the same closure.
</p>
<p>This can be hard to grasp, so the way I imagine it is as a "tunnel" between closures. Each has its
own scope, but we can create a one-way communication tunnel that connects both.</p>
<p>Once we understand how closures affect our components, we can take the next big step: React state.</p>
<h2><a href="#fitting-reacts-state-into-our-mental-model"></a>Fitting React's State Into Our Mental Model
</h2>
<p>React's philosophy is simple: it handles <em>when</em> and <em>how</em> to render elements, and developers
control <em>what</em> to render. State is our tool to decide that what.</p>
<p>When state changes, its component renders and therefore re-executes all the code within. We do this to show
new, updated information to the user.</p>
<p>In my mental model state is like a special property inside the box. It's independent of everything else
that happens within it. It will get a default value on the first render and always be up to date with the latest
value.</p>
<p>Each variable and function is created on every render, which means their values are also brand new. Even if a
variable's value never changes, it is recalculated and reassigned every time. That's not the case with
state, it only changes when there's a request for it to change via a <code class="language-javascript">set
state</code> event.</p>
<p><img src="https://obedparla.com/static/acd86ef0ea8a3fe610df603769e68ad9/44313/state-in-box.jpg"
alt="React component state visualized as a part of a bigger box with props coming in from outside"></p>
<p>State is a special, independent part of the box; with props coming from outside</p>
<p>State follows a simple rule: Whenever it changes it will re-rendered the component and its children. Props
follow the same logic, if a prop changes, the component will re-render, however, we can control state by
modifying it, props are more static and usually change as a reaction to a state change.</p>
<h1>the-rendering-mental-model-understanding-reacts-magic</h1>
<blockquote>
<p>The Rendering Mental Model: understanding React's magic</p>
</blockquote>
<hr>
<p>I consider rendering to be React's most confusing part because a lot of things happen during rendering
that sometimes isn't obvious by looking at the code. That's why having a clear mental model helps.</p>
<p>The way I imagine rendering with my imaginary boxes is two-fold: the first render brings the box into
existence, that's when the state is initialized. The second part is when it re-renders, that's the box
being recycled, most of it is brand new but some important elements of it remain namely state.</p>
<p>On every render, everything inside a component is created, including variables and functions, that's why
we can have variables storing a calculation's results, since they will be recalculated on every render.
It's also why functions are not reliable as values, due to their reference (the function's value, per
se) being different every render.</p>
<pre class="language-js"> <span const</span> <span ><span class="token maybe-class-name">Thumbnail</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">withIcon</span> <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AmazingIcon</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">imgUrl</span><span class="token punctuation">}</span></span> <span class="token attr-name">alt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">alt</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
<p>The above will give a different result depending on the props the component receives. The reason React
<em>must</em> re-render on every prop change is that it wants to keep the user up to date with the latest
information.
</p>
<p>However, the state doesn't change on re-renders, its value is maintained. That's why the box is
"recycled" instead of created brand new every time. Internally, React is keeping track of each box and
making sure its state is always consistent. That's how React knows when to update a component.</p>
<p><img src="https://obedparla.com/static/78de62863da9bd4c40c588c294167031/7efee/react-rendering-mental-model.jpg"
alt="Mental model of a React component re-rendering when props change"></p>
<blockquote>
<p>"When props (or state) changes, a new render happens and the component's output can
change")]<br>
<img
src="https://obedparla.com/static/78de62863da9bd4c40c588c294167031/ea2ac/react-rendering-mental-model.jpg"
alt>
</p>
</blockquote>
<p>When props (or state) changes, a new render happens and the component's output can change</p>
<p>By imagining a box being recycled I can understand what's going on inside of it. For simple components,
it's easy to grasp, but the more complex a component becomes, the more props it receives, the more state it
maintains, the more useful a clear mental model becomes.</p>
<h2><a href="#a-complete-react-mental-model-putting-it-all-together"></a>A complete React mental model: Putting it
all together.</h2>
<p>Now that I've explained all the different parts of the puzzle separately, let's put it all together.
Here's the complete mental model I use for React components, directly translated from how I imagine them
into words.</p>
<p>I imagine a React component as a box that contains all of its information within its walls, including its
children, which are more boxes.</p>
<p>And like a box in the real world, it can have other boxes inside of it and these boxes can, in turn, contain
more boxes. That way each box/component must have a single parent, and a parent can have many children.</p>
<p><img src="https://obedparla.com/static/d6c8afaef3597fd26d9174e070be1ce3/ce2e0/react-mental-model-basic.jpg"
alt="Basic representation of a React component as a mental model using boxes"></p>
<p><img src="https://obedparla.com/static/d6c8afaef3597fd26d9174e070be1ce3/ce2e0/react-mental-model-basic.jpg"
alt="("The basic representation of a React component")"></p>
<blockquote>
<p>The basic representation of a React component</p>
</blockquote>
<p>The boxes are semi-permeable, meaning they never leak anything to the outside but can use information from the
outside as if it belonged to them. I imagine like this to represent how closures work in JavaScript.</p>
<p>In React the way to share information between components is called <code
class="language-javascript">props</code> , the same idea applies
to function and then it's called <code class="language-javascript">arguments</code> , they both work in the
same way but with a
different syntax.</p>
<p>Within components, information can only travel <em>down</em> from parents to children. In other words, children
can access their parent's data and state, but not the other way around, and the way we share that
information is through <code class="language-javascript">props</code> .</p>
<p>I imagine this directional sharing of information as boxes within boxes. With the inner-most box being able to
absorb the parent's data.</p>
<p><img src="https://obedparla.com/static/a3471b4d03d16406ea159b3bc3f3e218/ce2e0/data-sharing-model.jpg"
alt=" React Mental model of data sharing between components visualized as information flowing downward "></p>
<p>Data is shared from parent to child</p>
<p>The box must first be created though, and this happens on <code class="language-javascript">render</code> ,
where the default value is
given to <code class="language-javascript">state</code> and just like with functions, all the code within the
component is executed. In my
mental model, this is equivalent to the box being <em>created</em>.</p>
<p>Subsequent renders, or <code class="language-javascript">re-renders</code> , execute all the code in the
component again, recalculating
variables, recreating functions, and so on. Everything except for <code class="language-javascript">state</code>
is brand new on each
render. State's value is maintained across renders is updated only through a <code
class="language-javascript">set</code> method.</p>
<p>In my mental model, I see re-rendering as recycling the box since most of it is recreated, but it's still
the same box due to React keeping track of the component's state.</p>
<p>When a box is recycled all the boxes within it, its children, are also recycled. This can happen because the
component's state was modified or a prop changed.</p>
<p><img
src="https://obedparla.com/static/267768646d810a0032728d222c3f13a5/7efee/react-rendering-mental-model-full.jpg"
alt="Mental model of a React component re-rendering when props or state change"></p>
<p>Mental model of a React component re-rendering when props or state change</p>
<p>Remember that a state or prop changing means the information the user sees is outdated, and React always wants
to keep the UI updated so it re-renders the component that must show the new data.</p>
<h2>---<a href="#react-mental-models"></a>React Mental Models</h2>
<p>React helps us build complex, interactive UIs more easily than ever before. It also encourages us to write code
in a certain way, guiding us to create apps that are simpler to navigate and understand.</p>
<p><img
src="https://obedparla.com/static/c9f28303d7dad2744b40d64b0ab33358/9aabf/react-mental-model-illustration.jpg"
alt="An abstract model inside a mind looking at the React logo"></p>
<p>React itself is a mental model with a simple idea at its core: encapsulate portions of your app that rely on
similar logic and UI and React will make sure that portion is always up kept up to date.</p>
<p>Whether you've been working with React for years or are just starting, having a clear mental model is the
best way to feel confident working with it. So for me to transfer my mental models to you I'll start from
first-principles and build on top of them.</p>
<h2><a href="#its-functions-all-the-way-down"></a>It's functions all the way down</h2>
<p>Let's start by modeling the basic building blocks of JavaScript and React: functions.</p>
<ul>
<li>A React component is just a function</li>
<li>Components containing other components are functions calling other functions</li>
<li>Props are the function's arguments</li>
</ul>
<p>This is hidden away by JSX, the markup language React uses. Strip away JSX and React is a bunch of functions
calling one another. JSX is in itself an applied mental model that makes using React simpler and more intuitive.
</p>
<p>Let's look at each part individually.</p>
<h3><a href="#a-component-is-a-function-that-returns-jsx"></a>A component is a function that returns JSX</h3>
<p>React is used with JSX—JavaScript XML—a way to write what seems as HTML with all of
JavaScript's power. JSX offers a great applied mental model for using nested functions in a way that feels
intuitive.</p>
<p>Let's ignore class components and focus on the far more common functional components. A
<em>functional</em> component is a function that behaves exactly like any other JavaScript function. React
components always return JSX which is then executed and turned into HTML.
</p>
<p>This is what simple JSX looks like:</p>
<pre class="language-js"> <span const</span> <span ><span class="token maybe-class-name">Li</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token keyword module">export</span> <span const</span> <span ><span class="token maybe-class-name">RickRoll</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>wrapper<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Li</span></span> <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">'red'</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Never</span> give you up<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Li</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
<p>Which compiled into pure JavaScript by Babel:</p>
<pre class="language-js"> <span const</span> <span ><span class="token maybe-class-name">Li</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">,</span> props<span class="token punctuation">,</span> props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword module">export</span> <span const</span> <span ><span class="token maybe-class-name">RickRoll</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
<span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
<span class="token string">'div'</span><span class="token punctuation">,</span>
<span class="token keyword null nil">null</span><span class="token punctuation">,</span>
<span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
<span class="token string">'div'</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
className<span class="token operator">:</span> <span class="token string">'wrapper'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
<span class="token string">'ul'</span><span class="token punctuation">,</span>
<span class="token keyword null nil">null</span><span class="token punctuation">,</span>
<span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
<span class="token maybe-class-name">Li</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string">'Never give you up'</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
<p>Now, notice how each component is a function calling another function, and each new component is the third
argument for the <code class="language-javascript">React.createElement</code> function. Whenever you write a
component, it's useful to
keep in mind that it's a normal JavaScript function.</p>
<p>An important feature of React is that a component can have many children but only one parent. I found this a
confusing until I realized it's the same logic HTML has, where each element must be inside other elements,
and can have many children. You can notice this in the code above, where there's only one parent
<code class="language-javascript">div</code> containing all the children.
</p>
<h3><a href="#components-props-are-the-same-as-a-functions-arguments"></a>component's props are the same as a
function's arguments</h3>
<p>When using a function we can use arguments to share information with that function. For React components we
call these arguments <code class="language-javascript">props</code> (funny story, I didn't realize props is
short for
<em>properties</em> for a long time).
</p>
<p>Under the hood, props behave <em>exactly</em> like function arguments, the differences are that we interact
with them through the nicer interface of JSX, and that React gives extra functionality to props such as
<code class="language-javascript">children</code> .
</p>
<h2><a href="#creating-a-mental-model-around-functions"></a>Creating a mental model around functions</h2>
<p>Using this knowledge let's craft a mental model to intuitively understand functions!</p>
<p>When I think about a function I imagine it as a box, and that box will do something whenever it's called.
It could return a value or not:</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"> <span function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword control-flow">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span function</span> <span class="token function">logSum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
<p>Since a component is a fancy function, that makes a component a box as well, with <code
class="language-javascript">props</code> as the
ingredients the box needs to create the output.</p>
<p><img src="https://obedparla.com/static/1078eb1563b832008167b49c2b8edb11/ce2e0/a-plus-b-box.jpg"
alt="A plus B in a box with props explaining a mental model for JavaScript functions"></p>
<p><img src="https://obedparla.com/static/1078eb1563b832008167b49c2b8edb11/ce2e0/a-plus-b-box.jpg"
alt="(" ")"></p>
<p>When a component is executed it will run whatever logic it has, if any, and evaluate its JSX. Any tags will
become HTML and any component will be executed, and the process is repeated until reaching the last component in
the chain of children.</p>
<p>Since a component can have many children but only one parent I imagine multiple components as a set of boxes,
one inside another. Each box must be contained within a bigger box and can have many smaller boxes inside.</p>
<p><img src="https://obedparla.com/static/cf7892f6a3db2815d6c502fe74538e4a/1df45/box-inside-box.jpg"
alt="One big box with many smaller boxes inside and text saying "it's a box in another box"">
</p>
<p>But the mental model of a box representing a component is not complete without understanding how it can
interact with other boxes.</p>
<h2><a href="#how-to-think-about-closures"></a><br>
How To Think About Closures</h2>
<p>Closures are a core concept in JavaScript. They enable complex functionality in the language, they're
super important to understand to have a good mental model around React.</p>
<p>They're also one of the features newcomers struggle with the most, so instead of explaining the
technicalities I'll demonstrate the mental model I have around closures.</p>
<p>The basic description of a closure is that it's a function. I imagine it as a box that keeps what's
inside of it from spilling out, while allowing the things outside of it from entering, like a semi-permeable
box. But spilling out where?</p>
<p>While the closure itself is a box, any closure will be inside bigger boxes, with the outermost box being the
Window object.</p>
<p><img src="https://obedparla.com/static/952aebfcba6f1850f93b3bf6d15392f3/ce2e0/closures_window.jpg"
alt="A box describing a mental model of a javascript closure, showing Window, scripts and React apps"></p>
<blockquote>
<p>The window object encapsulates everything else</p>
</blockquote>
<h3><a href="#but-what-is-a-closure"></a>But what <em>is</em> a closure?</h3>
<p>A closure is a feature of JavaScript functions. If you're using a function, you're using a closure.
</p>
<p>As I've mentioned, a function is a box and that makes a closure a box too. Considering that each function
can contain many others inside of it, then the closure is the ability of a function to use the information
outside of it, while keeping the information it has inside from "spilling out", or being used by the
outer function.</p>
<p>Speaking in terms of my mental model: I imagine the functions as boxes within boxes, and each smaller box can
see the information of the outer box, or parent, but the big box cannot see the smaller one's information.
That's as simple and accurate an explanation of closures as I can make.</p>
<p><img src="https://obedparla.com/static/96f403cd585425c1057214447165bbbe/7efee/data-flow.jpg"
alt="Visual representation of closures and the sharing of information between functions in a mental model, from a box view and a tree view">
</p>
<p>"Each function can only access its own</p>
<p>Each function can only access its own information and the parent's</p>
<p>Closures are important because they can be exploited to create some powerful mechanics and React takes full
advantage of this.</p>
<h3><a href="#closures-in-react"></a>Closures in React</h3>
<p>Each React component is also a closure. Within components, you can only pass props down from parent to child
and the parent cannot see what's inside the child, this is an intended feature to make our app's data
flow simpler to trace. To find where data comes from, we usually need to go up the tree to find which parent is
sending it down.</p>
<p>A great example of closures in React is updating a parent's state through a child component. You've
probably done this without realizing you were messing around with closures.</p>
<p>To start, we know the parent can't access the child's information directly, but the child can access
the parent's. So we send down that info from parent to child through <code
class="language-javascript">props</code> . In this case, the
information takes the shape of a function that updates the parent's state.</p>
<pre class="language-js"> <span const</span> <span ><span class="token maybe-class-name">Parent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
<span const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token maybe-class-name">The</span> count is <span class="token punctuation">{</span>count<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ChildButtons</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>setCount<span class="token punctuation">}</span></span> <span class="token attr-name">count</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span const</span> <span ><span class="token maybe-class-name">ChildButtons</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token method function property-access">onClick</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token maybe-class-name">Increase</span> count
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token method function property-access">onClick</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token maybe-class-name">Decrease</span> count
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
<p>When an <code class="language-javascript">onClick</code> happens in a <code
class="language-javascript">button</code> , that will execute the function received from
props <code class="language-javascript">props.onClick</code> , and update the value using <code
class="language-javascript">props.count</code> .</p>
<p>The insight here lies in the way we're updating a parent's state through a child, in this case, the
<code class="language-javascript">props.onClick</code> function. The reason this works is that the function was
<em>declared</em> within the
<code class="language-javascript">Parent</code> component's scope, within its closure, so it will have
access to the parent's
information. Once that function is called in a child, it still lives in the same closure.
</p>
<p>This can be hard to grasp, so the way I imagine it is as a "tunnel" between closures. Each has its
own scope, but we can create a one-way communication tunnel that connects both.</p>
<p>Once we understand how closures affect our components, we can take the next big step: React state.</p>
<h2><a href="#fitting-reacts-state-into-our-mental-model"></a>Fitting React's State Into Our Mental Model
</h2>
<p>React's philosophy is simple: it handles <em>when</em> and <em>how</em> to render elements, and developers
control <em>what</em> to render. State is our tool to decide that what.</p>
<p>When state changes, its component renders and therefore re-executes all the code within. We do this to show
new, updated information to the user.</p>
<p>In my mental model state is like a special property inside the box. It's independent of everything else
that happens within it. It will get a default value on the first render and always be up to date with the latest
value.</p>
<p>Each variable and function is created on every render, which means their values are also brand new. Even if a
variable's value never changes, it is recalculated and reassigned every time. That's not the case with
state, it only changes when there's a request for it to change via a <code class="language-javascript">set
state</code> event.</p>
<p><img src="https://obedparla.com/static/acd86ef0ea8a3fe610df603769e68ad9/44313/state-in-box.jpg"
alt="React component state visualized as a part of a bigger box with props coming in from outside"></p>
<p>State is a special, independent part of the box; with props coming from outside</p>
<p>State follows a simple rule: Whenever it changes it will re-rendered the component and its children. Props
follow the same logic, if a prop changes, the component will re-render, however, we can control state by
modifying it, props are more static and usually change as a reaction to a state change.</p>
<h1>the-rendering-mental-model-understanding-reacts-magic</h1>
<blockquote>
<p>The Rendering Mental Model: understanding React's magic</p>
</blockquote>
<hr>
<p>I consider rendering to be React's most confusing part because a lot of things happen during rendering
that sometimes isn't obvious by looking at the code. That's why having a clear mental model helps.</p>
<p>The way I imagine rendering with my imaginary boxes is two-fold: the first render brings the box into
existence, that's when the state is initialized. The second part is when it re-renders, that's the box
being recycled, most of it is brand new but some important elements of it remain namely state.</p>
<p>On every render, everything inside a component is created, including variables and functions, that's why
we can have variables storing a calculation's results, since they will be recalculated on every render.
It's also why functions are not reliable as values, due to their reference (the function's value, per
se) being different every render.</p>
<pre class="language-js"> <span const</span> <span ><span class="token maybe-class-name">Thumbnail</span></span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">withIcon</span> <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AmazingIcon</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">imgUrl</span><span class="token punctuation">}</span></span> <span class="token attr-name">alt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">alt</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
<p>The above will give a different result depending on the props the component receives. The reason React
<em>must</em> re-render on every prop change is that it wants to keep the user up to date with the latest
information.
</p>
<p>However, the state doesn't change on re-renders, its value is maintained. That's why the box is
"recycled" instead of created brand new every time. Internally, React is keeping track of each box and
making sure its state is always consistent. That's how React knows when to update a component.</p>
<p><img src="https://obedparla.com/static/78de62863da9bd4c40c588c294167031/7efee/react-rendering-mental-model.jpg"
alt="Mental model of a React component re-rendering when props change"></p>
<blockquote>
<p>"When props (or state) changes, a new render happens and the component's output can
change")]<br>
<img
src="https://obedparla.com/static/78de62863da9bd4c40c588c294167031/ea2ac/react-rendering-mental-model.jpg"
alt>
</p>
</blockquote>
<p>When props (or state) changes, a new render happens and the component's output can change</p>
<p>By imagining a box being recycled I can understand what's going on inside of it. For simple components,
it's easy to grasp, but the more complex a component becomes, the more props it receives, the more state it
maintains, the more useful a clear mental model becomes.</p>
<h2><a href="#a-complete-react-mental-model-putting-it-all-together"></a>A complete React mental model: Putting it
all together.</h2>
<p>Now that I've explained all the different parts of the puzzle separately, let's put it all together.
Here's the complete mental model I use for React components, directly translated from how I imagine them
into words.</p>
<p>I imagine a React component as a box that contains all of its information within its walls, including its
children, which are more boxes.</p>
<p>And like a box in the real world, it can have other boxes inside of it and these boxes can, in turn, contain
more boxes. That way each box/component must have a single parent, and a parent can have many children.</p>
<p><img src="https://obedparla.com/static/d6c8afaef3597fd26d9174e070be1ce3/ce2e0/react-mental-model-basic.jpg"
alt="Basic representation of a React component as a mental model using boxes"></p>
<p><img src="https://obedparla.com/static/d6c8afaef3597fd26d9174e070be1ce3/ce2e0/react-mental-model-basic.jpg"
alt="("The basic representation of a React component")"></p>
<blockquote>
<p>The basic representation of a React component</p>
</blockquote>
<p>The boxes are semi-permeable, meaning they never leak anything to the outside but can use information from the
outside as if it belonged to them. I imagine like this to represent how closures work in JavaScript.</p>
<p>In React the way to share information between components is called <code
class="language-javascript">props</code> , the same idea applies
to function and then it's called <code class="language-javascript">arguments</code> , they both work in the
same way but with a
different syntax.</p>
<p>Within components, information can only travel <em>down</em> from parents to children. In other words, children
can access their parent's data and state, but not the other way around, and the way we share that
information is through <code class="language-javascript">props</code> .</p>
<p>I imagine this directional sharing of information as boxes within boxes. With the inner-most box being able to
absorb the parent's data.</p>
<p><img src="https://obedparla.com/static/a3471b4d03d16406ea159b3bc3f3e218/ce2e0/data-sharing-model.jpg"
alt=" React Mental model of data sharing between components visualized as information flowing downward "></p>
<p>Data is shared from parent to child</p>
<p>The box must first be created though, and this happens on <code class="language-javascript">render</code> ,
where the default value is
given to <code class="language-javascript">state</code> and just like with functions, all the code within the
component is executed. In my
mental model, this is equivalent to the box being <em>created</em>.</p>
<p>Subsequent renders, or <code class="language-javascript">re-renders</code> , execute all the code in the
component again, recalculating
variables, recreating functions, and so on. Everything except for <code class="language-javascript">state</code>
is brand new on each
render. State's value is maintained across renders is updated only through a <code
class="language-javascript">set</code> method.</p>
<p>In my mental model, I see re-rendering as recycling the box since most of it is recreated, but it's still
the same box due to React keeping track of the component's state.</p>
<p>When a box is recycled all the boxes within it, its children, are also recycled. This can happen because the
component's state was modified or a prop changed.</p>
<p><img
src="https://obedparla.com/static/267768646d810a0032728d222c3f13a5/7efee/react-rendering-mental-model-full.jpg"
alt="Mental model of a React component re-rendering when props or state change"></p>
<p>Mental model of a React component re-rendering when props or state change</p>
<p>Remember that a state or prop changing means the information the user sees is outdated, and React always wants
to keep the UI updated so it re-renders the component that must show the new data.</p>
<hr>
<hr>
<h1>REACT RESOURCES:</h1>
<ul>
<li><a href="#a-journey-through-my-experiences-learning-reactjs-and-the-tools-i-discover-along-the-way">A
journey through my experiences learning React.js and the tools I discover along the way!</a>
<ul>
<li><a href="#react">React</a>
<ul>
<li><a href="#react-general-resources">React General Resources</a></li>
<li><a href="#react-community">React Community</a></li>
<li><a href="#react-online-playgrounds">React Online Playgrounds</a></li>
<li><a href="#react-tutorials">React Tutorials</a>
<ul>
<li><a href="#react-general-tutorials">React General Tutorials</a></li>
<li><a href="#react-hooks">React Hooks</a></li>
<li><a href="#react-and-typescript">React and TypeScript</a></li>
<li><a href="#react-performance">React Performance</a></li>
<li><a href="#react-internals">React Internals</a></li>
<li><a href="#react-interview-questions">React Interview Questions</a></li>
</ul>
</li>
<li><a href="#react-tools">React Tools</a>
<ul>
<li><a href="#react-development-tools">React Development Tools</a></li>
<li><a href="#react-frameworks">React Frameworks</a></li>
<li><a href="#react-styling">React Styling</a></li>
<li><a href="#react-routing">React Routing</a></li>
<li><a href="#react-component-libraries">React Component Libraries</a></li>
<li><a href="#react-awesome-components">React Awesome Components</a></li>
<li><a href="#react-for-command-line">React for Command Line</a></li>
<li><a href="#react-testing">React Testing</a></li>
<li><a href="#react-libraries">React Libraries</a></li>
<li><a href="#react-integration">React Integration</a></li>
<li><a href="#react-state-management">React State Management</a></li>
<li><a href="#react-ar-and-vr">React AR and VR</a></li>
<li><a href="#react-renderers">React Renderers</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#autocomplete">Autocomplete</a></li>
<li><a href="#graphics">Graphics</a></li>
<li><a href="#data-managing">Data Managing</a></li>
<li><a href="#maps">Maps</a></li>
<li><a href="#charts">Charts</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#react-native">React Native</a>
<ul>
<li><a href="#react-native-general-resources">React Native General Resources</a></li>
<li><a href="#react-native-tutorials">React Native Tutorials</a></li>
<li><a href="#react-native-development-tools">React Native Development Tools</a></li>
<li><a href="#react-native-sample-apps">React Native Sample Apps</a></li>
<li><a href="#react-native-boilerplates">React Native Boilerplates</a></li>
<li><a href="#react-native-awesome-components">React Native Awesome Components</a></li>
<li><a href="#react-native-libraries">React Native Libraries</a></li>
</ul>
</li>
<li><a href="#redux">Redux</a>
<ul>
<li><a href="#redux-general-resources">Redux General Resources</a></li>
<li><a href="#redux-tools">Redux Tools</a></li>
<li><a href="#redux-tutorials">Redux Tutorials</a></li>
</ul>
</li>
<li><a href="#mobx">MobX</a>
<ul>
<li><a href="#mobx-general-resources">MobX General Resources</a></li>
<li><a href="#mobx-tools">MobX Tools</a></li>
<li><a href="#mobx-tutorials">MobX Tutorials</a></li>
</ul>
</li>
<li><a href="#graphql">GraphQL</a>
<ul>
<li><a href="#graphql-spec">GraphQL Spec</a></li>
<li><a href="#graphql-tools">GraphQL Tools</a></li>
<li><a href="#graphql-tutorials">GraphQL Tutorials</a></li>
<li><a href="#graphql-implementations">GraphQL Implementations</a></li>
<li><a href="#server-integration">Server Integration</a></li>
<li><a href="#database-integration">Database Integration</a></li>
</ul>
</li>
<li><a href="#relay">Relay</a>
<ul>
<li><a href="#relay-general-resources">Relay General Resources</a></li>
<li><a href="#relay-tutorials">Relay Tutorials</a></li>
<li><a href="#relay-tools">Relay Tools</a></li>
</ul>
</li>
<li><a href="#apollo">Apollo</a>
<ul>
<li><a href="#apollo-general-resources">Apollo General Resources</a></li>
<li><a href="#apollo-tools">Apollo Tools</a></li>
</ul>
</li>
<li><a href="#videos">Videos</a>
<ul>
<li><a href="#reactjsvideoscom">reactjsvideos.com</a></li>
<li><a href="#important-talks">Important Talks</a></li>
<li><a href="#reactjs-conf-2015-playlist">React.js Conf 2015 Playlist</a></li>
<li><a href="#reacteurope-conf-2015-day-1-playlist">ReactEurope Conf 2015 Day 1 Playlist</a></li>
<li><a href="#reacteurope-conf-2015-day-2-playlist">ReactEurope Conf 2015 Day 2 Playlist</a></li>
<li><a href="#reactrally-conf-2015-playlist">ReactRally Conf 2015 Playlist</a></li>
<li><a href="#reactjs-conf-2016-playlist">React.js Conf 2016 Playlist</a></li>
<li><a href="#react-amsterdam-2016-playlist">React Amsterdam 2016 Playlist</a></li>
<li><a href="#reacteurope-conf-2016-day-1-playlist">ReactEurope Conf 2016 Day 1 Playlist</a></li>
<li><a href="#reacteurope-conf-2016-day-2-playlist">ReactEurope Conf 2016 Day 2 Playlist</a></li>
<li><a href="#reactrally-conf-2016-playlist">ReactRally Conf 2016 Playlist</a></li>
<li><a href="#reactjs-amsterdam-2018-playlist">React.js Amsterdam 2018 Playlist</a></li>
<li><a href="#video-tutorials">Video Tutorials</a></li>
</ul>
</li>
<li><a href="#demo-react-apps">Demo React Apps</a></li>
<li><a href="#real-react-apps">Real React Apps</a></li>
</ul>
</li>
</ul>
<hr>
<h3>React</h3>
<blockquote>
<p>JavaScript Library for building User Interfaces</p>
</blockquote>
<h4>React General Resources</h4>
<ul>
<li><a href="https://reactjs.org/">React Official Website</a></li>
<li><a href="https://reactjs.org/docs">React Documentation</a></li>
<li><a href="https://github.com/facebook/react">React GitHub</a></li>
</ul>
<h4>React Community</h4>
<ul>
<li><a href="http://www.reactiflux.com/">Reactiflux Discord Channel</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/reactjs">React StackOverflow</a></li>
<li><a href="https://twitter.com/reactjs">React Twitter</a></li>
</ul>
<h4>React Online Playgrounds</h4>
<ul>
<li><a href="https://reactjs.org/redirect-to-codepen/hello-world">CodePen</a></li>
<li><a href="https://codesandbox.io/s/new">CodeSandbox</a></li>
<li><a href="https://jsfiddle.net/boilerplate/react-jsx">JSFiddle</a></li>
</ul>
<h4>React Tutorials</h4>
<h5>React General Tutorials</h5>
<ul>
<li><a href="https://facebook.github.io/react/docs/tutorial.html">React Official Tutorial</a></li>
<li><a href="https://code.visualstudio.com/docs/nodejs/reactjs-tutorial">Using React in Visual Studio Code</a>
</li>
<li><a href="https://scrimba.com/g/glearnreact">Scrimba - Learn React for free interactively</a></li>
<li><a href="https://learn.freecodecamp.org/front-end-libraries/react">FreeCodeCamp React Challenges</a></li>
<li><a href="https://devhints.io/react">React Cheatsheet</a></li>
<li><a href="https://reactpatterns.com/">React Patterns</a></li>
<li><a href="https://flow.org/en/docs/react/">Setup Flow with React</a></li>
</ul>
<h5>React Hooks</h5>
<ul>
<li><a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a></li>
<li><a
href="https://medium.com/octopus-labs-london/replacing-redux-with-react-hooks-and-context-part-1-11b72ffdb533">Replacing
Redux with React Hooks and Context</a></li>
<li><a
href="https://blog.logrocket.com/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70/">React
Hooks cheat sheet: Unlock solutions to common problems</a></li>
<li><a href="https://www.robinwieruch.de/react-hooks-fetch-data/">How to fetch data with React Hooks?</a></li>
<li><a href="https://usehooks.com/">Easy to understand React Hook recipes</a></li>
<li><a href="https://github.com/rehooks/awesome-react-hooks">Awesome React Hooks</a></li>
<li><a
href="https://www.cometchat.com/tutorials/building-a-chat-app-with-react-hooks-a-pragmatic-example/">Build a
React chat app with Hooks, a pragmatic example</a></li>
</ul>
<h5>React and TypeScript</h5>
<ul>
<li><a href="https://www.typescriptlang.org/docs/handbook/react-&-webpack.html">TypeScript, React and
Webpack</a></li>
<li><a href="https://www.typescriptlang.org/docs/handbook/jsx.html">JSX in TypeScript</a></li>
<li><a href="https://github.com/typescript-cheatsheets/react-typescript-cheatsheet">Cheatsheets for experienced
React developers getting started with TypeScript</a></li>
<li><a href="https://reactbyexample.github.io/">React by Example</a></li>
</ul>
<h5>React Performance</h5>
<ul>
<li><a href="https://reactjs.org/docs/optimizing-performance.html">React Optimizing Performance</a></li>
<li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html">Introducing the React
Profiler</a></li>
<li><a href="https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained">Optimizing React:
Virtual DOM explained</a></li>
<li><a href="https://www.simform.com/react-performance/">A Definitive Guide to Optimize Major Performance issues
in React</a></li>
<li><a
href="https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3">Twitter
Lite and High Performance React Progressive Web Apps at Scale</a></li>
<li><a
href="https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/">Using
the React DevTools Profiler to Diagnose React App Performance Issues</a></li>
<li><a href="https://www.codementor.io/blizzerand/top-5-practices-to-boost-react-performance-jv6zr89ep">Top 5
Practices to Boost React Performance</a></li>
<li><a
href="https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba">React
is Slow, React is Fast: Optimizing react Apps in Practice</a></li>
<li><a href="https://addyosmani.com/blog/react-window/">Rendering large lists with react-window</a></li>
</ul>
<h5>React Internals</h5>
<ul>
<li><a href="https://reactjs.org/docs/reconciliation.html">Reconciliation</a></li>
<li><a href="https://github.com/acdlite/react-fiber-architecture">React Fiber Architecture</a></li>
<li><a
href="https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5">Build
your own React</a></li>
<li><a
href="https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e">Inside
Fiber: In-depth overview of the new reconciliation algorithm in React</a></li>
<li><a href="https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS">Entire React code base explanation by
visual block schemes</a></li>
</ul>
<h5>React Interview Questions</h5>
<ul>
<li><a href="https://www.toptal.com/react/interview-questions">13 Essential React Interview Questions</a></li>
<li><a href="https://github.com/sudheerj/reactjs-interview-questions">List of React interview Questions and
Answers</a></li>
</ul>
<h4>React Tools</h4>
<h5>React Development Tools</h5>
<ul>
<li><a href="https://github.com/facebook/create-react-app">create-react-app</a> - Set up a modern Web app by
running one command</li>
<li><a href="https://github.com/kriasoft/react-starter-kit">react-starter-kit</a> - Isomorphic Web app
boilerplate</li>
<li><a href="https://github.com/facebook/react-devtools">react-devtools</a> - Inspection of React component
hierarchy in the Chrome and Firefox Developer Tools</li>
<li><a href="https://github.com/gaearon/react-hot-loader">react-hot-loader</a> - Tweak React components in real
time</li>
<li><a href="https://github.com/jamiebuilds/react-loadable">react-loadable</a> - A higher order component for
loading components with promises</li>
<li><a href="https://github.com/smooth-code/loadable-components">loadable-components</a> - React code splitting
made easy</li>
<li><a href="https://github.com/skellock/reactotron">reactotron</a> - A desktop app for inspecting your React
and React Native projects</li>
<li><a href="https://github.com/storybookjs/storybook">storybook</a> - UI component dev & test</li>
<li><a href="https://github.com/doczjs/docz">docz</a> - Zero Config, live-reloading documentation with Markdown
+ JSX</li>
<li><a href="https://github.com/styleguidist/react-styleguidist">react-styleguidist</a> - Isolated React
component development environment with a living style guide</li>
<li><a href="https://github.com/react-cosmos/react-cosmos">react-cosmos</a> - Dev tool for creating reusable
React components</li>
<li><a href="https://github.com/yannickcr/eslint-plugin-react">eslint-plugin-react</a> - React specific linting
rules for ESLint</li>
<li><a href="https://github.com/evcohen/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y</a> - Static AST checker
for a11y rules on JSX elements</li>
<li><a href="https://github.com/dequelabs/axe-core-npm">@axe-core/react</a> - Accessibility auditing for React
applications</li>
<li><a href="https://codesandbox.io/s/new">codesandbox</a> - An online IDE for rapid React development with
integrated React DevTools.</li>
<li><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md">DataFormsJS JSX
Loader</a> - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page</li>
<li><a href="https://github.com/welldone-software/why-did-you-render">Why Did You Render</a> - Monkey patches
React to notify you about avoidable re-renders.</li>
<li><a href="https://divjoy.com">Divjoy</a> - React codebase and UI generator to speed up development (paid)
</li>
</ul>
<h5>React Frameworks</h5>
<ul>
<li><a href="https://github.com/vercel/next.js">next.js</a> - The React Framework</li>
<li><a href="https://github.com/gatsbyjs/gatsby">gatsby.js</a> - Free and open source framework based on React
</li>
<li><a href="https://github.com/marmelab/react-admin">react-admin</a> - Frontend Framework for building B2B
applications on top of REST/GraphQL APIs</li>
<li><a href="https://remix.run/">remix</a> - Finally, a killer React framework from the creators of React Router
</li>
<li><a href="https://github.com/alephjs/aleph.js">aleph.js</a> - The React Framework in Deno</li>
</ul>
<h5>React Styling</h5>
<ul>
<li><a href="https://github.com/styled-components/styled-components">styled-components</a> - Visual primitives
for the component age</li>
<li><a href="https://github.com/emotion-js/emotion">emotion</a> - Library designed for writing CSS styles with
JavaScript</li>
<li><a href="https://github.com/FormidableLabs/radium">radium</a> - A toolchain for React component styling</li>
<li><a href="https://github.com/cssinjs/jss">jss</a> - Authoring tool for CSS</li>
<li><a href="https://github.com/Khan/aphrodite">aphrodite</a> - Framework-agnostic CSS-in-JS with support for
server-side rendering, browser prefixing, and minimum CSS generation</li>
</ul>
<h5>React Routing</h5>
<ul>
<li><a href="https://github.com/ReactTraining/react-router">react-router</a> - Declarative routing for React
</li>
<li><a href="https://github.com/frontarm/navi">navi</a> - Declarative, asynchronous routing for React</li>
<li><a href="https://github.com/pshrmn/curi">curi</a> - JavaScript router for single-page applications</li>
<li><a href="https://github.com/reach/router">reach</a> - Next Generation Routing for React</li>
<li><a href="https://github.com/kriasoft/universal-router">universal-router</a> - A simple middleware-style
router for isomorphic JavaScript web apps</li>
</ul>
<h5>React Component Libraries</h5>
<ul>
<li><a href="https://github.com/mui-org/material-ui">material-ui</a> - React components for faster and easier
web development</li>
<li><a href="https://github.com/ant-design/ant-design">ant-design</a> - A design system with values of Nature
and Determinacy</li>
<li><a href="https://github.com/palantir/blueprint">blueprint</a> - A React-based UI toolkit for the webs</li>
<li><a href="https://github.com/microsoft/fluentui">Fluent UI</a> - A set of React components for building
Microsoft web experiences</li>
<li><a href="https://github.com/react-bootstrap/react-bootstrap">react-bootstrap</a> - Bootstrap components
built with React</li>
<li><a href="https://github.com/reactstrap/reactstrap">reactstrap</a> - Simple React Bootstrap 4 components</li>
<li><a href="https://github.com/Semantic-Org/Semantic-UI-React">semantic-ui-react</a> - The official
Semantic-UI-React integration</li>
<li><a href="https://github.com/segmentio/evergreen">evergreen</a> - Evergreen React UI Framework by Segment
</li>
<li><a href="https://github.com/grommet/grommet">grommet</a> - A react-based framework that provides
accessibility, modularity, responsiveness, and theming in a tidy package</li>
<li><a href="https://github.com/chakra-ui/chakra-ui/">chakra-ui</a> - Simple, Modular & Accessible UI
Components for your React Applications</li>
<li><a href="https://github.com/rebassjs/rebass">rebass</a> - React primitive UI components built with
styled-system</li>
<li><a href="https://github.com/FortAwesome/react-fontawesome">react-fontawesome</a> - Font Awesome 5 component
library for React</li>
<li><a href="https://github.com/reakit/reakit">reakit</a> - Accessible, Composable and Customizable components
for React</li>
<li><a href="https://github.com/rsuite/rsuite">rsuite</a> - A suite of React components</li>
<li><a href="https://bitbucket.org/atlassian/atlaskit-mk-2">atlaskit</a> - Atlassian's official UI library,
built according to the Atlassian Design Guidelines.</li>
<li><a href="https://github.com/uber/baseweb">baseweb</a> - Base Web is a foundation for initiating, evolving,
and unifying web products.</li>
<li><a href="https://github.com/primefaces/primereact">primereact</a> - A complete UI Framework for React with
50+ components featuring material, bootstrap and custom themes.</li>
<li><a href="https://github.com/couds/react-bulma-components">react-bulma-components</a> - React components for
Bulma framework</li>
<li><a href="https://github.com/kulakowka/react-bulma">react-bulma</a> - React.js components for Modern CSS
framework based on Flexbox</li>
<li><a href="https://github.com/dfee/rbx">rbx</a> - The Comprehensive Bulma UI Framework for React</li>
<li><a href="https://github.com/fibo/trunx">trunx</a> - Super Saiyan React components, son of awesome Bulma,
implemented in TypeScript</li>
<li><a href="https://github.com/emortlock/tailwind-react-ui">tailwind-react-ui</a> - React utility component
primitives & UI framework for use with Tailwind CSS</li>
<li><a href="https://github.com/knipferrc/tails-ui">tails-ui</a> - Clean UI based on tailwindcss</li>
<li><a href="https://github.com/geist-org/react">geist-org/react</a> - Modern and minimalist React UI library,
originating from Vercel's design</li>
<li><a href="https://github.com/elastic/eui">elastic ui framework</a> - The Elastic UI Framework is a collection
of React UI components for quickly building user interfaces at Elastic.</li>
<li><a href="https://bumbag.style/">bugbag react ui kit</a> - Bumbag is a friendly React UI Kit suitable for
MVPs or large-scale applications.</li>
<li><a href="https://github.com/JetBrains/ring-ui">ring-ui</a> - JetBrains Web UI components</li>
<li><a href="https://github.com/alibaba/ChatUI">ChatUI</a> - The UI design language and React library for
Conversational UI</li>