5HDFW'HVLJQ3DWWHUQVDQG

%HVW3UDFWLFHV
6HFRQG(GLWLRQ

Design, build and deploy production-ready web applications

using standard industry practices

&DUORV6DQWDQD5ROGáQ

%,50,1*+$0080%$,
mapt.io

,0`%/`*`+*(%*!` %#%0(`(%..5`0$0`#%2!/`5+1`"1((`!//`0+`+2!.`<L777`++'/`* `2% !+/L`/

3!((`/`%* 1/0.5`(! %*#`0++(/`0+`$!(,`5+1`,(*`5+1.`,!./+*(` !2!(+,)!*0`* ` 2*!
5+1.`.!!.K`+.`)+.!`%*"+.)0%+*L`,(!/!`2%/%0`+1.`3!/%0!K

:K\VXEVFULEH"
,!* `(!//`0%)!`(!.*%*#`* `)+.!`0%)!`+ %*#`3%0$`,.0%(`!++'/`* `% !+/
".+)`+2!.`;L777`%* 1/0.5`,.+"!//%+*(/

),.+2!`5+1.`(!.*%*#`3%0$`'%((`(*/`1%(0`!/,!%((5`"+.`5+1

!0``".!!`!++'`+.`2% !+`!2!.5`)+*0$

,0`%/`"1((5`/!.$(!

+,5`* `,/0!L`,.%*0L`* `++').'`+*0!*0

3DFNWFRP
% `5+1`'*+3`0$0`'0`+""!./`!++'`2!./%+*/`+"`!2!.5`++'`,1(%/$! L`3%0$``*
!1`"%(!/`2%((!O`+1`*`1,#. !`0+`0$!`!++'`2!./%+*`0`www.packt.com`* `/``,.%*0
++'`1/0+)!.L`5+1`.!`!*0%0(! `0+`` %/+1*0`+*`0$!`!++'`+,5K` !0`%*`0+1$`3%0$`1/`0
customercare@packtpub.com`"+.`)+.!` !0%(/K

0`www.packt.comL`5+1`*`(/+`.! ``+((!0%+*`+"`".!!`0!$*%(`.0%(!/L`/%#*`1,`"+.`
.*#!`+"`".!!`*!3/(!00!./L`* `.!!%2!`!4(1/%2!` %/+1*0/`* `+""!./`+*`'0`++'/`*
!++'/K`
5HDFW'HVLJQ3DWWHUQVDQG%HVW3UDFWLFHV
6HFRQG(GLWLRQ
+,5.%#$0`©`978@`'0`1(%/$%*#

((`.%#$0/`.!/!.2! K`+`,.0`+"`0$%/`++'`)5`!`.!,.+ 1! L`/0+.! `%*``.!0.%!2(`/5/0!)L`+.`0.*/)%00! `%*`*5`"+.)

+.`5`*5`)!*/L`3%0$+10`0$!`,.%+.`3.%00!*`,!.)%//%+*`+"`0$!`,1(%/$!.L`!4!,0`%*`0$!`/!`+"`.%!"`-1+00%+*/
!)! ! `%*`.%0%(`.0%(!/`+.`.!2%!3/K

2!.5`!""+.0`$/`!!*`) !`%*`0$!`,.!,.0%+*`+"`0$%/`++'`0+`!*/1.!`0$!`1.5`+"`0$!`%*"+.)0%+*`,.!/!*0! K
+3!2!.L`0$!`%*"+.)0%+*`+*0%*! `%*`0$%/`++'`%/`/+( `3%0$+10`3..*05L`!%0$!.`!4,.!//`+.`%),(%! K`!%0$!.`0$!
10$+.L`*+.`'0`1(%/$%*#`+.`%0/` !(!./`* ` %/0.%10+./L`3%((`!`$!( `(%(!`"+.`*5` )#!/`1/! `+.`((!#! `0+
$2!`!!*`1/! ` %.!0(5`+.`%* %.!0(5`5`0$%/`++'K

'0`1(%/$%*#`$/`!* !2+.! `0+`,.+2% !`0. !).'`%*"+.)0%+*`+10`((`+"`0$!`+),*%!/`* `,.+ 10/

)!*0%+*! `%*`0$%/`++'`5`0$!`,,.+,.%0!`1/!`+"`,%0(/K` +3!2!.L`'0`1(%/$%*#`**+0`#1.*0!!`0$!`1.5
+"`0$%/`%*"+.)0%+*K

+))%//%+*%*#` %0+.M` 1*(`$1 $.%

-1%/%0%+*` %0+.M`.%//`%*0+
+*0!*0`!2!(+,)!*0` %0+.M`+$))! `1/1"` ).03(!
!$*%(` %0+.M`!!*`0%(
+,5` %0+.M`"%/` %0%*#
.+&!0`++. %*0+.M`.#0%`$1'(
.++".! !.M`"%/` %0%*#
* !4!.M`!&(`.13(!`+*%
.,$%/M`(%/$+*`!* +*/
.+ 10%+*`++. %*0+.M`+)`.%

%./0`,1(%/$! M` *1.5`978>
!+* `! %0%+*M`.$`978@

.+ 10%+*`.!"!.!*!M`89@7:8@

1(%/$! `5`'0`1(%/$%*#`0 K
%2!.5`(!
:<`%2!.5`0.!!0
%.)%*#$)
:`9L` K

`@>?_8_>?@<:_78>_@

www.packtpub.com
 &RQWULEXWRUV

$ERXWWKHDXWKRU
.(+/`*0*`+( á*`%/``/!*%+.`3!` !2!(+,!.`3%0$`)+.!`0$*`89`5!./`+"`!4,!.%!*!K
1..!*0(5L`$!`%/`3+.'%*#`/``!*%+.`!0`!2!(+,!.`0`%* + 5` *K` !`%/`0$!`"+1* !.`+"
!2` 10%+*L`+*!`+"`0$!`)+/0`,+,1(.` !2!(+,!.`+))1*%0%!/`%*`0%*`)!.%L`0.%*%*#
,!+,(!`%*`3!`0!$*+(+#%!/`/1$`/`!0L`+ !K&/L` .,$L`* ` 2.%,0`%*`#!*!.(K
$ERXWWKHUHYLHZHU
51.`**`%/``/!*%+.`/+"03.!`+*/1(0*0`3%0$`+2!.`87`5!./`+"`!4,!.%!*!K` !`$/
3+.'! `+*`2.%+1/`$%#$_2(1!`,.+&!0/`3%0$`%*0!.*0%+*(`(%!*0/`/1$`/`0$!`+.( `*'
* `0$!`*%0! `0%+*/L`* `,(5! ``'!5`.+(!`%*`.!0%*#`0$!`.$%0!01.!`+"`0$+/!`,.+&!0/
1/%*#`0$!`(0!/0`0!$*+(+#%!/L`%*(1 %*#`!0L`*#1(.L`+ !K&/L`+*#+L`,.%*#`++0L
%.!/!L`)6+*`!`!.2%!/L`* ` ++#(!`(+1 `(0"+.)K`51.`%/`0$!`+10$+.`+"
!.2!.(!//`!`,,(%0%+*/`3%0$`!0`* `%.!/!`5`'0`1(%/$%*#K` !`$+( /``)/0!.W/
!#.!!`%*`+),10!.`,,(%0%+*/`* `$/`0.%*! `(+0`+"`!*#%*!!.%*#`/01 !*0/`0$.+1#$`0!$
3+.'/$+,/K` *`$%/`".!!`0%)!L`$!`,(5/`0(!`0!**%/`* `.%'!0K

`3*0`0+`0$*'`)5`3%"!L`.K`1.*N`)5`,.!*0/L`.K`0%((`* `./K`%.)(N`)5`(%00(!
$%( L`$5!5N`* `0$!`.!/0`+"`)5`")%(5`"+.`0$!%.`2(1(!`/1,,+.0K`%0$+10`0$!%.`/1,,+.0L
0$!`.!2%!3`+"`0$%/`++'`3+1( `*+0`$2!`!!*`,+//%(!K` `3+1( `(/+`(%'!`0+`0$*'`0$!`'0
0!)`"+.`#%2%*#`)!`0$!`+,,+.01*%05`0+`.!2%!3`0$%/`++'K

3DFNWLVVHDUFKLQJIRUDXWKRUVOLNH\RX
"`5+1W.!`%*0!.!/0! `%*`!+)%*#`*`10$+.`"+.`'0L`,(!/!`2%/%0`authors.packtpub.com
* `,,(5`0+ 5K`!`$2!`3+.'! `3%0$`0$+1/* /`+"` !2!(+,!./`* `0!$`,.+"!//%+*(/L
&1/0`(%'!`5+1L`0+`$!(,`0$!)`/$.!`0$!%.`%*/%#$0`3%0$`0$!`#(+(`0!$`+))1*%05K`+1`*
)'!``#!*!.(`,,(%0%+*L`,,(5`"+.``/,!%"%`$+0`0+,%`0$0`3!`.!`.!.1%0%*#`*`10$+.
"+.L`+.`/1)%0`5+1.`+3*`% !K
 7DEOHRI&RQWHQWV
3UHIDFH 

6HFWLRQ+HOOR5HDFW
&KDSWHU7DNLQJ<RXU)LUVW6WHSVZLWK5HDFW 
'HFODUDWLYHSURJUDPPLQJ 
5HDFWHOHPHQWV 
8QOHDUQLQJHYHU\WKLQJ 
&RPPRQPLVFRQFHSWLRQV 
6XPPDU\ 
&KDSWHU&OHDQ8S<RXU&RGH 
-6; 
%DEHO 
+HOOR:RUOG 
'20HOHPHQWVDQG5HDFWFRPSRQHQWV 
3URSV 
&KLOGUHQ 
'LIIHUHQFHVZLWK+70/ 
$WWULEXWHV 
6W\OH 
5RRW 
6SDFHV 
%RROHDQDWWULEXWHV 
6SUHDGDWWULEXWHV 
-DYD6FULSWWHPSODWLQJ 
&RPPRQSDWWHUQV 
0XOWLOLQH 
0XOWLSURSHUWLHV 
&RQGLWLRQDOV 
/RRSV 
&RQWUROVWDWHPHQWV 
6XEUHQGHULQJ 
&RGHVW\OH 
(GLWRU&RQILJ 
&RQILJXULQJ(GLWRU&RQILJ 
(6/LQW 
,QVWDOODWLRQ 
&RQILJXUDWLRQ 
*LWKRRNV 
5HDFWSOXJLQ 
$LUEQE5HDFW-6;VW\OHJXLGH 
(!`+"`+*0!*0/

7KHEDVLFVRIIXQFWLRQDOSURJUDPPLQJ 
)LUVWFODVVREMHFWV 
3XULW\ 
,PPXWDELOLW\ 
&XUU\LQJ 
&RPSRVLWLRQ 
)3DQGXVHULQWHUIDFHV 
6XPPDU\ 

6HFWLRQ+RZ5HDFWZRUNV
&KDSWHU&UHDWLQJ7UXO\5HXVDEOH&RPSRQHQWV 
&UHDWLQJFODVVHV 
7KHFUHDWH&ODVVIDFWRU\ 
([WHQGLQJ5HDFW&RPSRQHQW 
7KHPDLQGLIIHUHQFHV 
3URSV 
6WDWH 
$XWRELQGLQJ 
6WDWHOHVVFRPSRQHQWV 
3URSVDQGFRQWH[W 
7KHWKLVNH\ZRUG 
6WDWH 
/LIHF\FOH 
5HIVDQGHYHQWKDQGOHUV 
2SWLPL]DWLRQ 
/D\RXWFRPSRQHQWV 
7KHVWDWH 
([WHUQDOOLEUDULHV 
+RZLWZRUNV 
$V\QFKURQRXV 
8VLQJWKHVWDWH 
'HULYDEOHV 
7KHUHQGHUPHWKRG 
5HDFWKRRNV 
3URSW\SHV 
5HDFW'RFJHQ 
5HXVDEOHFRPSRQHQWV 
)UDJPHQWV 
6XPPDU\ 
&KDSWHU&RPSRVH$OOWKH7KLQJV 
&RPPXQLFDWLRQEHWZHHQFRPSRQHQWV 
&KLOGUHQ 
7KHFRQWDLQHUDQGSUHVHQWDWLRQDOSDWWHUQ 
0L[LQV 
+LJKHURUGHUFRPSRQHQWV 

S`%%`T
(!`+"`+*0!*0/

5HFRPSRVH 
&RQWH[W 
)XQFWLRQ$V&KLOG 
6XPPDU\ 
&KDSWHU3URSHU'DWD)HWFKLQJ 
'DWDIORZ 
&KLOGSDUHQWFRPPXQLFDWLRQ FDOOEDFNV 
&RPPRQSDUHQW 
'DWDIHWFKLQJ 
5HDFWUHIHWFK 
&RQWH[W$3, 
6XPPDU\ 
&KDSWHU:ULWH&RGHIRUWKH%URZVHU 
)RUPV 
8QFRQWUROOHGFRPSRQHQWV 
&RQWUROOHGFRPSRQHQWV 
-621VFKHPD 
+DQGOLQJHYHQWV 
5HIV 
$QLPDWLRQV 
5HDFWPRWLRQ 
6FDODEOH9HFWRU*UDSKLFV 
6XPPDU\ 

6HFWLRQ3HUIRUPDQFH,PSURYHPHQWVDQG
3URGXFWLRQ
&KDSWHU0DNH<RXU&RPSRQHQWV/RRN%HDXWLIXO 
&66LQ-DYD6FULSW 
,QOLQHVW\OHV 
5DGLXP 
&66PRGXOHV 
:HESDFN 
6HWWLQJXSDSURMHFW 
/RFDOO\VFRSHG&66 
$WRPLF&66PRGXOHV 
5HDFW&66PRGXOHV 
6W\OHGFRPSRQHQWV 
6XPPDU\ 
&KDSWHU6HUYHU6LGH5HQGHULQJIRU)XQDQG3URILW 
8QLYHUVDODSSOLFDWLRQV 
5HDVRQVWRLPSOHPHQW665 

S`%%%`T
(!`+"`+*0!*0/

6(2 
$FRPPRQFRGHEDVH 
%HWWHUSHUIRUPDQFH 
'RQ WXQGHUHVWLPDWHWKHFRPSOH[LW\ 
$EDVLFH[DPSOH 
$GDWDIHWFKLQJH[DPSOH 
1H[WMV 
6XPPDU\ 
&KDSWHU,PSURYHWKH3HUIRUPDQFHRI<RXU$SSOLFDWLRQV 
5HFRQFLOLDWLRQ 
.H\V 
2SWLPL]DWLRQWHFKQLTXHV 
VKRXOG&RPSRQHQW8SGDWH 
6WDWHOHVVIXQFWLRQDOFRPSRQHQWV 
&RPPRQVROXWLRQV 
:K\GLG\RXXSGDWH" 
&UHDWLQJIXQFWLRQVLQVLGHWKHUHQGHUPHWKRG 
&RQVWDQWVSURSV 
5HIDFWRULQJDQGJRRGGHVLJQ 
7RROVDQGOLEUDULHV 
,PPXWDELOLW\ 
%DEHOSOXJLQV 
6XPPDU\ 
&KDSWHU$ERXW7HVWLQJDQG'HEXJJLQJ 
7KHEHQHILWVRIWHVWLQJ 
3DLQOHVV-DYD6FULSWWHVWLQJZLWK-HVW 
7HVWLQJHYHQWV 
5HDFW'HY7RROV 
5HGX['HY7RROV 
6XPPDU\ 
&KDSWHU5HDFW5RXWHU 
,QVWDOODWLRQDQGFRQILJXUDWLRQ 
&UHDWLQJRXUVHFWLRQV 
$GGLQJSDUDPHWHUVWRWKHURXWHV 
6XPPDU\ 
&KDSWHU$QWL3DWWHUQVWREH$YRLGHG 
,QLWLDOL]LQJWKHVWDWHXVLQJSURSHUWLHV 
0XWDWLQJWKHVWDWH 
8VLQJLQGH[HVDVDNH\ 
6SUHDGLQJSURSHUWLHVRQ'20HOHPHQWV 
6XPPDU\ 

S`%2`T
(!`+"`+*0!*0/

&KDSWHU'HSOR\LQJWR3URGXFWLRQ 
&UHDWLQJRXUILUVW'LJLWDO2FHDQ'URSOHW 
6LJQLQJXSWR'LJLWDO2FHDQ 
&UHDWLQJRXUILUVW'URSOHW 
,QVWDOOLQJ1RGHMV 
&RQILJXULQJ*LWDQG*LW+XE 
7XUQLQJRIIRXUGURSOHW 
&RQILJXULQJQJLQ[30DQGDGRPDLQ 
,QVWDOOLQJDQGFRQILJXULQJQJLQ[ 
6HWWLQJXSDUHYHUVHSUR[\VHUYHU 
$GGLQJDGRPDLQWRRXUGURSOHW 
,PSOHPHQWLQJ&LUFOH&,IRUFRQWLQXRXVLQWHJUDWLRQ 
$GGLQJDQ66+NH\WR&LUFOH&, 
&RQILJXULQJ&LUFOH&, 
&UHDWLQJ(19YDULDEOHVLQ&LUFOH&, 
6XPPDU\ 
&KDSWHU1H[W6WHSV 
&RQWULEXWLQJWR5HDFW 
'LVWULEXWLQJ\RXUFRGH 
3XEOLVKLQJDQQSPSDFNDJH 
6XPPDU\ 
2WKHU%RRNV<RX0D\(QMR\ 
,QGH[ 

S`2`T
.!"!

Chapter 2L`(!*`,`+1.`+ !L`0!$!/`0$!`.! !.``#.!0` !(`+10`$+3` `3+.'/`*

$+3`0+`1/!`%0`%*`0$!`.%#$0`35`%*`+1.`+),+*!*0/K`!`/0.0`".+)`0$!`/%/`+"`0$!`/5*04`0+
.!0!``/+(% `'*+3(! #!`/!`0$0`3%((`!*(!`1/`0+`)/0!.` `* `%0/`"!01.!/K` *`0$!
/!+* `,.0L`3!`3%((`(++'`0`$+3`%*0`* `%0/`,(1#%*/`*`$!(,`1/`"%* `,.+(!)/`"/0!.
* `!*"+.!``+*/%/0!*0`/05(!`#1% !`.+//`+1.`+ !`/!K`%*((5L`3!`3%((`#+`0$.+1#$`0$!
/%/`+"`"1*0%+*(`,.+#.))%*#`0+`1* !./0* `0$!`%),+.0*0`+*!,0/`0+`1/!`3$!*
3.%0%*#``!0`,,(%0%+*K`+3`0$0`+1.`+ !`%/`(!*L`3!`.!`.! 5`0+`/0.0` %##%*#
!!,!.`%*0+`!0`* `(!.*`$+3`0+`3.%0!`0.1(5`.!1/(!`+),+*!*0/K

Chapter 3L`.!0!`.1(5`!1/(!`+),+*!*0/L`/0.0/`".+)`` !!,`/01 5`+"`0$!`/%/L

+10(%*%*#`0$!` %""!.!*!/`!03!!*`/00!"1(`* `/00!(!//`+),+*!*0/L`* `,.+2% %*#`*
!4),(!`+"`$+3`0+`)'!``0%#$0(5_+1,(! `+),+*!*0`.!1/(!K`!W((`(++'`0`0$!`%*0!.*(
/00!`+"``+),+*!*0`* `0`3$!*`%0`%/`!00!.`0+`2+% `1/%*#`%0K`!`3%((`(/+`(!.*`0$!`/%/
+"`,.+,`05,!/L`* `3%((`,,(5`0$+/!`+*!,0/`0+`0$!`.!1/(!`+),+*!*0/`3!`.!0! K
%*((5L`3!W((`(++'`0`$+3`(%2%*#`/05(!`#1% !/`*`$!(,`1/`0+`+))1*%0!`!00!.`3%0$`+0$!.
)!)!./`+"`+1.`0!)L`/+`/`0+`2+% `.!0%*#` 1,(%0! `+),+*!*0/`* `0+`!*"+.!
+*/%/0!*5`3%0$%*`0$!`,,(%0%+*K

Chapter 4L`+),+/!`((`0$!`$%*#/L`!4,(%*/`$+3`0+`+),+/!`+1.`.!1/(!`+),+*!*0/`*
)'!`0$!)`+))1*%0!`!""!0%2!(5K`$!*L`3!`3%((`#+`0$.+1#$`/+)!`+"`0$!`)+/0`%*0!.!/0%*#
+),+/%0%+*`,00!.*/`%*`!0K`!`3%((`(/+`/!!`$+3`!0`0.%! `0+`/+(2!`0$!`,.+(!)`+"
/$.%*#`"1*0%+*(%0%!/`!03!!*`+),+*!*0/`3%0$`)%4%*/K`!W((`0$!*`(!.*`$+3`0+` !(`3%0$
0$!`+*0!40`3%0$+10`*!! %*#`0+`+1,(!`+1.`+),+*!*0/`0+`%0L`0$*'/`0+` +/K`%*((5L`3!W((
/!!`$+3`3!`*`+),+/!`+),+*!*0/` 5*)%((5`5`"+((+3%*#
0$!`FunctionAsChild`,00!.*K

Chapter 5L`.+,!.`0`!0$%*#L`#+!/`0$.+1#$`/+)!`+"`0$!`)+/0`+))+*`,00!.*/`0+`)'!`
$%( `* `,.!*0`+))1*%0!`1/%*#`(('/K`!W((`0$!*`(!.*`$+3`3!`+1( `1/!`
+))+*`,.!*0`0+`/$.!` 0`.+//`+),+*!*0/`0$0`.!`*+0` %.!0(5`+**!0! K`!`0$!*
/0.0`3%0$``/%),(!`+),+*!*0L`3$%$`3%((`!`(!`0+`(+ ` 0`".+)` %0 1L`* `3!`)'!
%0`.!1/(!`3%0$` +L`* `0$!*`#+`+*`0+`(!.*`$+3`3!`+1( `1/!`.!0_.!"!0$`0+`,,(5` 0
"!0$%*#`,00!.*/`0+`+1.`+),+*!*0/`* `2+% `.!%*2!*0%*#`0$!`3$!!(K`%*((5L`3!`(!.*
$+3`0+`1/!`0$!`*!3`+*0!40` K

Chapter 6L`.%0!`+ !`"+.`0$!`.+3/!.L`(++'/`0` %""!.!*0`0$%*#/`3!`*` +`3$!*`3!`0.#!0

0$!`.+3/!.`3%0$`!0L`".+)`"+.)`.!0%+*`0+`!2!*0/N`".+)`*%)0%+*/`0+` /K`!0`#%2!/
1/`` !(.0%2!`35`0+`)*#!`((`0$!`/,!0/`3!`*!! `0+` !(`3%0$`3$!*`3!`.!0!``3!
,,(%0%+*K`!0`#%2!/`1/`!//`0+`0$!`01(``*+ !/`%*``35`0$0`3!`*`,!."+.)
%),!.0%2!`+,!.0%+*/`3%0$`0$!)L`3$%$`%/`1/!"1(`%"`3!`*!! `0+`%*0!#.0!`!0`3%0$`*
!4%/0%*#`%),!.0%2!`(%..5K

S`9`T
.!"!

Chapter 7L`'!`+1.`+),+*!*0/`++'`!10%"1(L`/01 %!/`0$!`.!/+*/`3$5`.!#1(.``)5

*+0`!`0$!`!/0`,,.+$`"+.`/05(%*#`+),+*!*0/L`(+*#`3%0$`0$!`2.%+1/`(0!.*0%2!
/+(10%+*/K`+2%*#`0$.+1#$`0$!`$,0!.L`3!W((`(!.*`0+`1/!`%*(%*!`/05(!/`%*`!0L`(+*#`3%0$
0$!` +3*/% !/`+"`0$%/L`3$%$`*`!`"%4! `5`1/%*#` %1)`%..5K`0`0$!`!* L``*!3
(%..5L`/05(! _+),+*!*0/L`3%((`!`%*0.+ 1! L`(+*#`3%0$`*`+10(%*!`+"`0$!`)+ !.*
,,.+$`0$0`%0`+""!./K

Chapter 8L`!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0L`%*2%0!/`5+1`0+`"+((+3`!.0%*`/0!,/`0+`/!0

1,``/!.2!._/% !`.!* !.! `,,(%0%+*K`5`0$!`!* `+"`0$%/`$,0!.L`3!`3%((`!`(!`0+`1%( `
1*%2!./(`,,(%0%+*L`* `!`3.!`+"`%0/`,.+/`* `+*/K

Chapter 9L` ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/L`0'!/``-1%'`(++'`0`0$!`/%

+),+*!*0/`+"`0$!`,!."+.)*!`+"`!0L`* `$+3`3!`*`1/!`/+)!` /`0+`$!(,`0$!`(%..5
"%* `0$!`+,0%)(`,0$`0+`1, 0!`0$!``3%0$+10` !#. %*#`0$!`1/!.`!4,!.%!*!K`!`3%((
(/+`(!.*`$+3`0+`)+*%0+.`,!."+.)*!`* `"%* `+00(!*!'/`1/%*#`/+)!`0++(/`0$0`3!
*`%),+.0`%*0+`+1.`+ !`/!K`0`0$!`!* L`3!W((`/!!`$+3`%))10%(%05`* `1.!+),+*!*0
.!`0$!`,!."!0`0++(/`0+`1%( `"/0`!0`,,(%0%+*/K

Chapter 10L`+10`!/0%*#`* `!1##%*#L`!4,(%*/`3$5`%0`%/`%),+.0*0`0+`0!/0`+1.

,,(%0%+*/L`(+*#`3%0$`*`+10(%*!`+"`0$!`)+/0`,+,1(.`0++(/`0$0`3!`+1( `1/!`0+`.!0!
0!/0/`3%0$`!0K`!`(/+`(!.*`0+`/!0`1,`` !/0`!*2%.+*)!*0`0+`0!/0`+),+*!*0/`1/%*#
*65)!L`(+*#`3%0$`` %/1//%+*`+"`3$0`*65)!`%/`* `3$5`%0`%/``)1/0`"+.`0!/0%*#`!0
,,(%0%+*/K`5`+2!.%*#`((`0$!/!`0+,%/L`0`0$!`!* `+"`0$!`$,0!.L`3!`3%((`!`(!`0+`.!0!
`0!/0`!*2%.+*)!*0`".+)`/.0$`* `3.%0!`0!/0/`"+.`+1.`,,(%0%+*W/`+),+*!*0/K

Chapter 11L`!0`+10!.L`(++'/`0`!.0%*`/0!,/`0$0`3%((`$!(,`1/`0+`%),(!)!*0`!0`+10!.
%*`+1.`,,(%0%+*K`+2%*#`$! L`/`3!`+),(!0!`!$`/!0%+*L`3!`3%((`!`(!`0+`
5*)%`.+10!/`* `1* !./0* `$+3`!40(5`!0`+10!.`3+.'/K`!`3%((`(!.*`$+3
0+`%*/0((`* `+*"%#1.!`!0`+10!.L`(+*#`3%0$` %*#``D3%0$E`+),+*!*0L`!40`,.+,L
* `,.)!0!./`0+`.+10!/K

Chapter 12L`*0%_00!.*/`0+`!`2+% ! L`%/`((`+10`0$!`+))+*`*0%_,00!.*/`3!`/$+1(

2+% `3$!*`1/%*#`!0K`!`3%((`/01 5`3$5`)100%*#`0$!`/00!`%/`$.)"1(`"+.`,!."+.)*!K
$++/%*#`0$!`.%#$0`'!5/`* `$!(,%*#`0$!`.!+*%(!.`3%((`(/+`!`+2!.! `%*`0$%/`$,0!.L
(+*#`3%0$`0$!`.!/+*`3$5`/,.! %*#`,.+,/`+*``!(!)!*0/`%/` `* `$+3`*`3!
2+% ` +%*#`0$0K

Chapter 13L`!,(+5%*#`0+`.+ 10%+*L`+2!./`$+3`0+` !,(+5`+1.`!0`,,(%0%+*`1/%*#

+ !K&/`* `*#%*4`+*`*`1*01`/!.2!.`".+)`%#%0(`!*L`(+*#`3%0$`+*"%#1.%*#`*#%*4L
9L`* `` +)%*K` ),(!)!*0%*#`%.(! `"+.`+*0%*1+1/`%*0!#.0%+*`3%((`(/+`!`+2!.! K

S`:`T
 3UHIDFH
$%/`++'`3%((`0'!`5+1`+*``&+1.*!5`0$.+1#$`0$!`)+/0`2(1(!` !/%#*`,00!.*/`%*`!0L
!)+*/0.0%*#`$+3`0+`,,(5` !/%#*`,00!.*/`* `!/0`,.0%!/`%*`.!(_(%"!`/%010%+*/K`$%/
++'`3%((`$!(,`)'!`5+1.`,,(%0%+*/`)+.!`"(!4%(!L`,!."+.)`!00!.L`* `3%((`)'!`0$!)
!/%!.`0+`)%*0%*L`3$%(!`#%2%*#`5+1.`3+.'"(+3``$1#!`++/0`5`%),.+2%*#`/,!! L`10
.1%((5`3%0$+10`""!0%*#`-1(%05K
!W((`!#%*`5`1* !./0* %*#`0$!`%*0!.*(/`+"`!0L`!"+.!`#. 1((5`)+2%*#`+*`0+`3.%0%*#
(!*`* `)%*0%*(!`+ !K`!W((`1%( `+),+*!*0/`0$0`.!`.!1/(!`.+//`0$!
,,(%0%+*L`/0.101.!`,,(%0%+*/L`* `.!0!`"+.)/`0$0`01((5`3+.'K`
!`3%((`0$!*`/05(!`!0`+),+*!*0/`* `+,0%)%6!`0$!)`0+`)'!`,,(%0%+*/`"/0!.`*
)+.!`.!/,+*/%2!K`%*((5L`3!W((`3.%0!`0!/0/`!""!0%2!(5L`* `5+1W((`(!.*`$+3`0+`+*0.%10!`0+
!0`* `%0/`!+/5/0!)K
5`0$!`!* `+"`0$!`++'L`5+1W((`!`/2! `".+)``(+0`+"`0.%(`* `!..+.`* ` !2!(+,)!*0(
$! $!/L`* `5+1`3%((`!`+*`0$!`.+ `0+`!+)%*#``!0`!4,!.0K
:KRWKLVERRNLVIRU
$!`++'`*`!`1/! `5`*5` !2!(+,!.`3$+`$/``/%`'*+3(! #!`+"`1%( %*#`3!
,,(%0%+*/K`$%/`%/`)%*(5`%)! `0` 2.%,0` !2!(+,!./L`10`*5`+0$!.`05,!`+"` !2/`3%((
!*!"%0`".+)`0$%/`++'K
:KDWWKLVERRNFRYHUV
Chapter 1L`'%*#`+1.`%./0`0!,/`3%0$`!0L`+2!./`/+)!`/%`+*!,0/`0$0`.!`%),+.0*0
"+.`"+((+3%*#`0$!`.!/0`+"`0$!`++'L`* `0$0`.!`.1%(`0+`3+.'%*#`3%0$`!0` %(5K`!`3%((
(!.*`$+3`0+`3.%0!` !(.0%2!`+ !L`* `3%((`#%*``(!.`1* !./0* %*#`+"`0$!` %""!.!*!
!03!!*`0$!`+),+*!*0/`3!`.!0!L`* `0$!`!(!)!*0/`!0`1/!/`0+` %/,(5`0$!%.`%*/0*!/
+*`0$!`/.!!*K`!W((`0$!*`(!.*`0$!`.!/+*/`!$%* `0$!`$+%!`+"`+_(+0%*#`(+#%`*
0!),(0!/`0+#!0$!.L`* `3$5`0$0`1*,+,1(.` !%/%+*`$/`!!*``%#`3%*`"+.`!0K`!`3%((
#+`0$.+1#$`0$!`.!/+*/`3$5`%0`%/`+))+*`0+`"!!(`"0%#1!`%*`0$!` 2.%,0`!+/5/0!)L`10
3!W((`(/+`/!!`$+3`0+`2+% `0$+/!`,.+(!)/`5`"+((+3%*#`*`%0!.0%2!`,,.+$K`%*((5L`3!
3%((`/!!`3$0`0$!`*!3`.!0!_.!0_,,` `%/L`* `3%0$`0$0L`3!W((`!`.! 5`0+`/0.0`3.%0%*#
/+)!`.!(`+ !K
.!"!

Chapter 14L`!40`0!,/L` !)+*/0.0!/`$+3`3!`*`+*0.%10!`0+`0$!`!0`(%..5`5

+,!*%*#`%//1!/`* `,1((`.!-1!/0/L`* `!4,(%*/`3$5`%0`%/`%),+.0*0`0+`#%2!`'`0+`0$!
+))1*%05`* `/$.!`+1.`+ !K`0`0$!`!* L`3!`3%((`+2!.`0$!`)+/0`%),+.0*0`/,!0/`0+
'!!,`%*`)%* `3$!*`,1/$%*#`+,!*`/+1.!`+ !L`(+*#`3%0$`$+3`3!`*`,1(%/$`*`*,)
,'#!`* `$+3`0+`1/!`/!)*0%`2!./%+*%*#K

7RJHWWKHPRVWRXWRIWKLVERRN
+`)/0!.`!0L`5+1`*!! `0+`$2!``"1* )!*0(`'*+3(! #!`+"` 2.%,0`* `+ !K&/K
$%/`++'`%/`)+/0(5`0.#!0%*#`3!` !2!(+,!./L`* L`0`0$!`0%)!`+"`3.%0%*#L`0$!`"+((+3%*#
//1),0%+*/`3!.!`) !`+"`0$!`.! !.M

$!`.! !.`'*+3/`$+3`0+`%*/0((`0$!`(0!/0`2!./%+*`+"`+ !K&/K

$!`.! !.`%/`*`%*0!.)! %0!` !2!(+,!.`3$+`*`1* !./0* ` 2.%,0`=
/5*04K
+)!`!4,!.%!*!`+"` `0++(/`* `+ !K&/`/5*04`%/`.!-1%.! K

'RZQORDGWKHH[DPSOHFRGHILOHV
+1`*` +3*(+ `0$!`!4),(!`+ !`"%(!/`"+.`0$%/`++'`".+)`5+1.`+1*0`0
www.packt.comK` "`5+1`,1.$/! `0$%/`++'`!(/!3$!.!L`5+1`*`2%/%0
www.packt.com/support`* `.!#%/0!.`0+`$2!`0$!`"%(!/`!)%(! ` %.!0(5`0+`5+1K

+1`*` +3*(+ `0$!`+ !`"%(!/`5`"+((+3%*#`0$!/!`/0!,/M

8K +#`%*`+.`.!#%/0!.`0`www.packt.comK
9K !(!0`0$!``0K
:K (%'`+*`+ !`+3*(+ /`J`..0K
;K *0!.`0$!`*)!`+"`0$!`++'`%*`0$!`!.$`+4`* `"+((+3`0$!`+*/.!!*
%*/0.10%+*/K

*!`0$!`"%(!`%/` +3*(+ ! L`,(!/!`)'!`/1.!`0$0`5+1`1*6%,`+.`!40.0`0$!`"+( !.`1/%*#`0$!

(0!/0`2!./%+*`+"M

%*\>_%,`"+.`%* +3/
%,!#\%%,\*.`"+.`
>_%,\!%,`"+.`%*14

S`;`T
.!"!

$!`+ !`1* (!`"+.`0$!`++'`%/`(/+`$+/0! `+*` %0 1`0`https:/b/bgithub.bcom/

PacktPublishing/bReact-bDesign-bPatterns-band-bBest-bPractices-bSecond-bEditionK` *`/!
0$!.!W/`*`1, 0!`0+`0$!`+ !L`%0`3%((`!`1, 0! `+*`0$!`!4%/0%*#` %0 1`.!,+/%0+.5K

!`(/+`$2!`+0$!.`+ !`1* (!/`".+)`+1.`.%$`0(+#`+"`++'/`* `2% !+/`2%((!

0`https:/b/bgithub.bcom/bPacktPublishing/bK`$!'`0$!)`+10P

'RZQORDGWKHFRORULPDJHV
!`(/+`,.+2% !```"%(!`0$0`$/`+(+.`%)#!/`+"`0$!`/.!!*/$+0/\ %#.)/`1/! `%*`0$%/
++'K`+1`*` +3*(+ `%0`$!.!M`https:/b/bwww.bpacktpub.bcom/bsites/bdefault/bfiles/
downloads/b9781789530179_bColorImages.bpdfK

&RQYHQWLRQVXVHG
$!.!`.!``*1)!.`+"`0!40`+*2!*0%+*/`1/! `0$.+1#$+10`0$%/`++'K

CodeInTextM` * %0!/`+ !`3+. /`%*`0!40L` 0/!`0(!`*)!/L`"+( !.`*)!/L`"%(!*)!/L

"%(!`!40!*/%+*/L`,0$*)!/L` 1))5`/L`1/!.`%*,10L`* `3%00!.`$* (!/K` !.!`%/`*
!4),(!M`X#%*L`3%0$`createClassL`3!`1/!``"1*0%+*L`3$%(!L`3%0$`0$!`=`(//!/L`3!`/!0
*`00.%10!`+"`0$!`%*/0*!KX

`(+'`+"`+ !`%/`/!0`/`"+((+3/M
const Button = React.createClass({
getInitialState() {
return {
text: 'Click me!'
};
},
render() {
return <button>{this.state.text}</button>;
}
});

$!*`3!`3%/$`0+` .3`5+1.`00!*0%+*`0+``,.0%1(.`,.0`+"``+ !`(+'L`0$!`.!(!2*0`(%*!/

+.`%0!)/`.!`/!0`%*`+( M
React.FUHDWH(OHPHQW("img", {
VUF: "https://www.dev.education/images/logo.png",
DOW: "DEV Education"
});

S`<`T
.!"!

*5`+))* _(%*!`%*,10`+.`+10,10`%/`3.%00!*`/`"+((+3/M
QSPLQVWDOOJFUHDWHUHDFWDSS

+( M` * %0!/``*!3`0!.)L`*`%),+.0*0`3+. L`+.`3+. /`0$0`5+1`/!!`+*`/.!!*K`+.

!4),(!L`3+. /`%*`)!*1/`+.` %(+#`+4!/`,,!.`%*`0$!`0!40`(%'!`0$%/K` !.!`%/`*`!4),(!M
X!0W/`/0.0`3%0$``/%`!4),(!— %/,(5%*#``"+.)`3%0$`*`%*,10`"%!( `*
`1)%0`100+*KX

.*%*#/`+.`%),+.0*0`*+0!/`,,!.`(%'!`0$%/K

%,/`* `0.%'/`,,!.`(%'!`0$%/K

*HWLQWRXFK
!! '`".+)`+1.`.! !./`%/`(35/`3!(+)!K

!*!.(`"!! 'M` "`5+1`$2!`-1!/0%+*/`+10`*5`/,!0`+"`0$%/`++'L`)!*0%+*`0$!`++'

0%0(!`%*`0$!`/1&!0`+"`5+1.`)!//#!`* `!)%(`1/`0`customercare@packtpub.comK

..0M`(0$+1#$`3!`$2!`0'!*`!2!.5`.!`0+`!*/1.!`0$!`1.5`+"`+1.`+*0!*0L`)%/0'!/
+`$,,!*K` "`5+1`$2!`"+1* ``)%/0'!`%*`0$%/`++'L`3!`3+1( `!`#.0!"1(`%"`5+1`3+1(
.!,+.0`0$%/`0+`1/K`(!/!`2%/%0`www.packt.com/submit-errataL`/!(!0%*#`5+1.`++'L`(%'%*#
+*`0$!`..0`1)%//%+*`+.)`(%*'L`* `!*0!.%*#`0$!` !0%(/K

%.5M` "`5+1`+)!`.+//`*5`%((!#(`+,%!/`+"`+1.`3+.'/`%*`*5`"+.)`+*`0$!`%*0!.*!0L`3!
3+1( `!`#.0!"1(`%"`5+1`3+1( `,.+2% !`1/`3%0$`0$!`(+0%+*` .!//`+.`3!/%0!`*)!K
(!/!`+*00`1/`0`copyright@packt.com`3%0$``(%*'`0+`0$!`)0!.%(K

"`5+1`.!`%*0!.!/0! `%*`!+)%*#`*`10$+.M` "`0$!.!`%/``0+,%`0$0`5+1`$2!`!4,!.0%/!`%*L

* `5+1`.!`%*0!.!/0! `%*`!%0$!.`3.%0%*#`+.`+*0.%10%*#`0+``++'L`,(!/!`2%/%0
authors.packtpub.comK

S`=`T
.!"!
5HYLHZV
(!/!`(!2!``.!2%!3K`*!`5+1`$2!`.! `* `1/! `0$%/`++'L`3$5`*+0`(!2!``.!2%!3`+*
0$!`/%0!`0$0`5+1`,1.$/! `%0`".+)O`+0!*0%(`.! !./`*`0$!*`/!!`* `1/!`5+1.`1*%/!
+,%*%+*`0+`)'!`,1.$/!` !%/%+*/L`3!`0`'0`*`1* !./0* `3$0`5+1`0$%*'`+10`+1.
,.+ 10/L`* `+1.`10$+./`*`/!!`5+1.`"!! '`+*`0$!%.`++'K`$*'`5+1P
+.`)+.!`%*"+.)0%+*`+10`'0L`,(!/!`2%/%0`packt.comK
S`>`T
 6HFWLRQ+HOOR5HDFW

*`0$%/`/!0%+*L`3!`3%((`(!.*``+10`0$!`/%/`+"`!0`* `)+ !.*` 2.%,0`+*!,0/K`!
3%((`0$!*`)+2!`+*`0+`1* !./0* %*#`+*!,0/`%*(1 %*#` L`/,.! `00.%10!/L` 2.%,0
0!),(0%*#L`* `+))+*`,00!.*/`* `+ !`/05(!/K`%*((5L`3!`3%((`0'!``(++'`0`0$!`/%/
+"`"1*0%+*(`,.+#.))%*#K
$!`"+((+3%*#`$,0!./`3%((`!`+2!.! `%*`0$%/`/!0%+*M
Chapter 1L`'%*#`+1.`%./0`0!,/`3%0$`!0
Chapter 2L`(!*`,`+1.`+ !
 7DNLQJ<RXU)LUVW6WHSVZLWK

5HDFW
!((+L`.! !./P
$%/`++'`//1)!/`0$0`5+1`(.! 5`'*+3`3$0`!0`%/`* `3$0`,.+(!)/`%0`*`/+(2!`"+.
5+1K`+1`)5`$2!`3.%00!*``/)((\)! %1)`,,(%0%+*`3%0$`!0L`* `5+1`3*0`0+
%),.+2!`5+1.`/'%((/`* `*/3!.`((`+"`5+1.`+,!*`-1!/0%+*/K`+1`/$+1( `'*+3`0$0`!0`%/
)%*0%*! `5` !2!(+,!./`0`!++'`* `$1* .! /`+"`+*0.%10+./`3%0$%*`0$!` 2.%,0
+))1*%05K`!0`%/`+*!`+"`0$!`)+/0`,+,1(.`(%..%!/`"+.`.!0%*#`1/!.`%*0!."!/L`* `%0`%/
3!((_'*+3*`0+`!`"/0L`0$*'/`0+`%0/`/).0`35`+"`0+1$%*#`0$!`+1)!*0`&!0
+ !(`QRK` 0`+)!/`3%0$` L``*!3`/5*04`0+`3.%0!`).'1,`%*` 2.%,0L`3$%$
.!-1%.!/`5+1`0+`$*#!`5+1.`)%* `.!#. %*#`0$!`/!,.0%+*`+"`+*!.*/K` 0`$/`)*5`++(
"!01.!/L`/1$`/`/!.2!._/% !`.!* !.%*#L`3$%$`#%2!/`5+1`0$!`,+3!.`0+`3.%0!`1*%2!./(
,,(%0%+*/K
+`"+((+3`0$%/`++'L`5+1`3%((`*!! `0+`'*+3`$+3`0+`1/!`0$!`0!.)%*(`0+`%*/0((`*
.1*`npm`,'#!/`%*`5+1.`+ !K&/`!*2%.+*)!*0K`((`0$!`!4),(!/`.!`3.%00!*`%*`)+ !.*
2.%,0L`3$%$`5+1`/$+1( `!`(!`0+`.! `* `1* !./0* K
*`0$%/`"%./0`$,0!.L`3!`3%((`#+`0$.+1#$`/+)!`/%`+*!,0/`0$0`.!`!//!*0%(`0+`)/0!.`%*
+. !.`0+`1/!`!0`!""!0%2!(5L`10`.!`/0.%#$0"+.3. `!*+1#$`"+.`!#%**!./`0+`"%#1.!`+10M
$!` %""!.!*!`!03!!*`%),!.0%2!`* ` !(.0%2!`,.+#.))%*#
!0`+),+*!*0/`* `0$!%.`%*/0*!/L`* `$+3`!0`1/!/`!(!)!*0/`0+`+*0.+(
0$!` `"(+3
+3`!0`$*#!/`0$!`35`3!`1%( `3!`,,(%0%+*/L`!*"+.%*#`` %""!.!*0
*!3`+*!,0`+"`/!,.0%+*`+"`+*!.*/L`* `0$!`.!/+*/`!$%* `%0/`1*,+,1(.
!/%#*`$+%!
$5`,!+,(!`"!!(`0$!` 2.%,0`"0%#1!L`* `3$0`5+1`*` +`0+`2+% `0$!`)+/0
+))+*`!..+./` !2!(+,!./`)'!`3$!*`,,.+$%*#`0$!`!0`!+/5/0!)
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
'HFODUDWLYHSURJUDPPLQJ
! %*#`0$!`!0` +1)!*00%+*`+.`(+#`,+/0/`+10`!0L`5+1`$2!`1* +10! (5`+)!
.+//`0$!`0!.)` !(.0%2!K`*!`+"`0$!`.!/+*/`3$5`!0`%/`/+`,+3!."1(`%/`!1/!`%0
!*"+.!/`` !(.0%2!`,.+#.))%*#`,. %#)K
+*/!-1!*0(5L`0+`)/0!.`!0L`%0`%/`!//!*0%(`0+`1* !./0* `3$0` !(.0%2!`,.+#.))%*#
)!*/`* `3$0`0$!`)%*` %""!.!*!/`!03!!*`%),!.0%2!`* ` !(.0%2!`,.+#.))%*#
.!K`$!`!/%!/0`35`0+`,,.+$`0$!`,.+(!)`%/`0+`0$%*'`+10`%),!.0%2!`,.+#.))%*#`/
`35`+"` !/.%%*#`$+3`0$%*#/`3+.'L`* ` !(.0%2!`,.+#.))%*#`/``35`+"` !/.%%*#
3$0`5+1`3*0`0+`$%!2!K
`.!(_(%"!`,.((!(`%*`0$!`%),!.0%2!`3+.( `3+1( `!`!*0!.%*#``.`"+.``!!.L`* `#%2%*#
0$!`"+((+3%*#`%*/0.10%+*/`0+`0$!`.0!* !.M
8K '!``#(//`".+)`0$!`/$!("K
9K 10`0$!`#(//`%*`".+*0`+"`0$!` ."0K
:K 1((` +3*`0$!`$* (!`1*0%(`0$!`#(//`%/`"1((K
;K //`)!`0$!`#(//K
*`0$!` !(.0%2!`3+.( L`5+1`3+1( `&1/0`/5M`!!.L`,(!/!K
$!` !(.0%2!`,,.+$`+"`/'%*#`"+.``!!.`//1)!/`0$0`0$!`.0!* !.`'*+3/`$+3`0+
/!.2!`+*!L`* `0$0`%/`*`%),+.0*0`/,!0`+"`0$!`35` !(.0%2!`,.+#.))%*#`3+.'/K
!0W/`)+2!`%*0+`` 2.%,0`!4),(!L`3.%0%*#``/%),(!`"1*0%+*`0$0L`#%2!*`*`..5`+"
1,,!./!`/0.%*#/L`.!01.*/`*`..5`3%0$`0$!`/)!`/0.%*#/`%*`(+3!./!M
WR/RZHU&DVH(['FOO', 'BAR']) > IRR  EDU @
*`%),!.0%2!`"1*0%+*`0+`/+(2!`0$!`,.+(!)`3+1( `!`%),(!)!*0! `/`"+((+3/M
FRQVW toLowerCase = input => {
FRQVW output = [];
IRU (let i = 0; i < input.length; i++) {
output.SXVK(input[i].WR/RZHU&DVH());
}
UHWXUQ output;
};
%./0`+"`((L`*`!),05`..5`0+`+*0%*`0$!`.!/1(0`#!0/`.!0! K`$!*L`0$!`"1*0%+*`(++,/
0$.+1#$`((`0$!`!(!)!*0/`+"`0$!`%*,10`..5`* `,1/$!/`0$!`(+3!./!`2(1!/`%*0+`0$!`!),05
..5K`%*((5L`0$!`+10,10`..5`#!0/`.!01.*! K
S`87`T
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
` !(.0%2!`/+(10%+*`3+1( `!`/`"+((+3/M
FRQVW toLowerCase = input => input.PDS(value => value.WR/RZHU&DVH());
$!`%0!)/`+"`0$!`%*,10`..5`.!`,//! `0+``map`"1*0%+*`0$0`.!01.*/``*!3`..5
+*0%*%*#`0$!`(+3!./!`2(1!/K`$!.!`.!`/+)!`/%#*%"%*0` %""!.!*!/`0+`*+0!M`0$!`"+.)!.
!4),(!`%/`(!//`!(!#*0`* `%0`.!-1%.!/`)+.!`!""+.0`0+`!`1* !./0++ K`$!`(00!.`%/`0!./!.`*
!/%!.`0+`.! L`3$%$`)'!/``$1#!` %""!.!*!`%*`%#`+ !`/!/L`3$!.!`)%*0%*%(%05`%/
.1%(K
*+0$!.`/,!0`3+.0$`)!*0%+*%*#`%/`0$0L`%*`0$!` !(.0%2!`!4),(!L`0$!.!`%/`*+`*!! `0+`1/!
2.%(!/`*+.`0+`'!!,`0$!%.`2(1!/`1, 0! ` 1.%*#`0$!`!4!10%+*K`!(.0%2!`,.+#.))%*#
0!* /`0+`2+% `.!0%*#`* `)100%*#``/00!K
/``"%*(`!4),(!L`(!0W/`/!!`3$0`%0`)!*/`"+.`!0`0+`!` !(.0%2!K
$!`,.+(!)`3!`3%((`0.5`0+`/+(2!`%/``+))+*`0/'`%*`3!` !2!(+,)!*0M`/$+3%*#``),
3%0$``).'!.K
$!` 2.%,0`%),(!)!*00%+*`Q1/%*#`0$!` ++#(!`,/` R`%/`/`"+((+3/M
FRQVW map = QHZ google.maps.0DS(document.JHW(OHPHQW%\,G('map'), {
]RRP: 4,
FHQWHU: myLatLng
});
FRQVW marker = QHZ google.maps.0DUNHU({
SRVLWLRQ: myLatLng,
WLWOH: 'Hello World!'
});
marker.VHW0DS(map);
0`%/`%),!.0%2!`!1/!`((`0$!`%*/0.10%+*/`*!! ! `0+`.!0!`0$!`),L`* `.!0!`0$!`).'!.
* `00$`%0`0+`0$!`),L`.!` !/.%! `%*/% !`0$!`+ !`+*!`"0!.`0$!`+0$!.K
`!0`+),+*!*0`0+`/$+3``),`+*``,#!`3+1( `(++'`(%'!`0$%/`%*/0! M
*PDSV ]RRP={4} FHQWHU={myLatLng}!
0DUNHU SRVLWLRQ={myLatLng} WLWOH="Hello world!" !
*PDSV!
*` !(.0%2!`,.+#.))%*#L` !2!(+,!./`+*(5` !/.%!`3$0`0$!5`3*0`0+`$%!2!L`*
0$!.!W/`*+`*!! `0+`(%/0`((`0$!`/0!,/`0+`)'!`%0`3+.'K
$!`"0`0$0`!0`+""!./`` !(.0%2!`,,.+$`)'!/`%0`!/5`0+`1/!L`* `+*/!-1!*0(5L`0$!
.!/1(0%*#`+ !`%/`/%),(!L`3$%$`+"0!*`(! /`0+`"!3!.`1#/`* `)+.!`)%*0%*%(%05K
S`88`T
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
`!(!)!*0/`* `+),+*!*0/`*`!`*!/0! `3%0$`!$`+0$!.`/`"+((+3/L`0+`.!,.!/!*0`0$!
.!* !.`0.!!M
{
W\SH: Title,
SURSV: {
FRORU: 'red',
FKLOGUHQ: {
W\SH: 'h1',
SURSV: {
FKLOGUHQ: 'Hello, H1!'
}
}
}
}
$!*`0$!`05,!`+"`0$!`!(!)!*0`%/``"1*0%+*L`!0`((/`%0L`,//%*#`0$!`,.+,/`0+`#!0`'`0$!
1* !.(5%*#`!(!)!*0/K` 0`'!!,/`+*`,!."+.)%*#`0$!`/)!`+,!.0%+*`.!1./%2!(5`+*
0$!`.!/1(0`1*0%(`%0`#!0/``0.!!`+"``*+ !/`0$0`!0`*`.!* !.`+*`0$!`/.!!*K`$%/`,.+!//
%/`((! `.!+*%(%0%+*L`* `%0`%/`1/! `5`+0$`!0``* `!0`0%2!`0+`.!0!`0$!
1/!.`%*0!."!/`+"`0$!%.`.!/,!0%2!`,(0"+.)/K
8QOHDUQLQJHYHU\WKLQJ
/%*#`!0`"+.`0$!`"%./0`0%)!`1/1((5`.!-1%.!/`*`+,!*`)%* `!1/!`%0`%/``*!3`35`+"
!/%#*%*#`3!`* `)+%(!`,,(%0%+*/K`!0`0.%!/`0+`%**+20!`0$!`35`3!`1%( `1/!.
%*0!."!/`"+((+3%*#``,0$`0$0`.!'/`)+/0`+"`0$!`3!((_'*+3*`!/0`,.0%!/K
*`0$!`(/0`03+` ! !/L`3!`(!.*! `0$0`0$!`/!,.0%+*`+"`+*!.*/`%/`%),+.0*0L`* `3!
1/! `0+`0$%*'`+10`%0`.!#. %*#`/!,.0%*#`0$!`(+#%`".+)`0$!`0!),(0!/K`1.`#+(`$/
(35/`!!*`0+`3.%0!`0$!` 2.%,0`* `0$!` `%*` %""!.!*0`"%(!/K
.%+1/`0!),(0%*#`/+(10%+*/`$2!`!!*`.!0! `0+`$!(,` !2!(+,!./`$%!2!`0$%/K
$!`,.+(!)`%/`0$0L`)+/0`+"`0$!`0%)!L`0$0`'%* `+"`/!,.0%+*`%/`&1/0`*`%((1/%+*`* `0$!`0.10$
%/`0$0`0$!` 2.%,0`* `0$!` `.!`0%#$0(5`+1,(! L`*+`)00!.`3$!.!`0$!5`(%2!K
!0W/`/!!`*`!4),(!`+"``0!),(0!M
^^LWHPV``
^^ILUVW``
<li><strong>^^QDPH``</strong></li>
^^ILUVW``
^^OLQN``
S`8:`T
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
<li><a href="^^XUO``">^^QDPH``</a></li>
^^OLQN``
^^LWHPV``
$!`,.!! %*#`/*%,,!0`%/`0'!*`".+)`0$!`1/0$!`3!/%0!L`+*!`+"`0$!`)+/0`,+,1(.
0!),(0%*#`/5/0!)/K
$!`"%./0`.+3`0!((/`1/0$!`0+`(++,`0$.+1#$``+((!0%+*`+"`%0!)/K` */% !`0$!`(++,L`0$!.!`%/
/+)!`+* %0%+*(`(+#%`0+`$!'`3$!0$!.`0$!`#first`* `0$!`#link`,.+,!.0%!/`!4%/0L`* L
!,!* %*#`+*`0$!%.`2(1!/L`` %""!.!*0`,%!!`+"` `%/`.!* !.! K`.%(!/`.!`3.,,!
%*0+`1.(5`.!/K
"`5+1.`,,(%0%+*`$/`+*(5`0+` %/,(5`/+)!`2.%(!/L``0!),(0%*#`(%..5`+1( `.!,.!/!*0
`#++ `/+(10%+*L`10`3$!*`%0`+)!/`0+`/0.0%*#`0+`3+.'`3%0$`+),(!4` 0`/0.101.!/L`0$%*#/
$*#!K`!),(0%*#`/5/0!)/`* `0$!%.`+)%*_,!%"%`*#1#!`QR`+""!.``/1/!0`+"
"!01.!/L`* `0$!5`0.5`0+`,.+2% !`0$!`"1*0%+*(%0%!/`+"``.!(`,.+#.))%*#`(*#1#!
3%0$+10`.!$%*#`0$!`/)!`(!2!(`+"`+),(!0!*!//K
/`/$+3*`%*`0$!`!4),(!L`0!),(0!/`$%#$(5` !,!* `+*`0$!`)+ !(/`0$!5`.!!%2!`".+)`0$!
(+#%`(5!.`0+` %/,(5`0$!`%*"+.)0%+*K
*`0$!`+0$!.`$* L` 2.%,0`%*0!.0/`3%0$`0$!``!(!)!*0/`.!* !.! `5`0$!`0!),(0!/
0+`1, 0!`0$!` L`!2!*`%"`0$!5`.!`(+ ! `".+)`/!,.0!`"%(!/K`$!`/)!`,.+(!)`,,(%!/`0+
/05(!/`–`0$!5`.!` !"%*! `%*`` %""!.!*0`"%(!L`10`0$!5`.!`.!"!.!*! `%*`0$!`0!),(0!/L`* `0$!
`/!(!0+./`"+((+3`0$!`/0.101.!`+"`0$!`).'1,L`/+`%0`%/`()+/0`%),+//%(!`0+`$*#!`+*!
3%0$+10`.!'%*#`0$!`+0$!.L`3$%$`%/`0$!` !"%*%0%+*`+"`+1,(%*#K`$0`%/`3$5`0$!`(//%
/!,.0%+*`+"`+*!.*/`!* ! `1,`!%*#`)+.!``/!,.0%+*`+"`0!$*+(+#%!/L`3$%$`%/L`+"
+1./!L`*+0`` `0$%*#L`10`%0` +!/*W0`/+(2!`*5`.!(`,.+(!)/K
!0`0.%!/`0+`)+2!``/0!,`"+.3. `5`,100%*#`0$!`0!),(0!/`3$!.!`0$!5`!(+*#`–`*!40`0+`0$!
(+#%K`$!`.!/+*`%0` +!/`0$0`%/`!1/!`!0`/1##!/0/`5+1`+.#*%6!`5+1.`,,(%0%+*/`5
+),+/%*#`/)((`.%'/`((! `+),+*!*0/K`$!`".)!3+.'`/$+1( `*+0`0!((`5+1`$+3`0+
/!,.0!`0$!`+*!.*/L`!1/!`!2!.5`,,(%0%+*`$/`%0/`+3*L`* `+*(5`0$!` !2!(+,!./
/$+1( ` !% !`$+3`0+`(%)%0`0$!`+1* .%!/`+"`0$!%.`,,(%0%+*/K
$!`+),+*!*0_/! `,,.+$` ./0%((5`$*#!/`0$!`35`3!`3.%0!`3!`,,(%0%+*/L
3$%$`%/`3$5`0$!`(//%`+*!,0`+"`/!,.0%+*`+"`+*!.*/`%/`#. 1((5`!%*#`0'!*`+2!.`5
`)1$`)+.!`)+ !.*`/0.101.!K`$!`,. %#)`!*"+.! `5`!0`%/`*+0`*!3L`* `%0`3/`*+0
%*2!*0! `5`%0/`.!0+./L`10`!0`$/`+*0.%10! `0+`)'%*#`0$!`+*!,0`)%*/0.!)`* L
)+/0`%),+.0*0(5L`,+,1(.%6! `%0`%*`/1$``35`0$0`%/`!/%!.`0+`1* !./0* `"+.` !2!(+,!./
3%0$` %""!.!*0`(!2!(/`+"`!4,!.0%/!K
S`8;`T
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
$!`render`)!0$+ `+"``!0`+),+*!*0`(++'/`(%'!`0$%/M
UHQGHU() {
UHWXUQ (
EXWWRQ VW\OH={{ FRORU: 'red' }} RQ&OLFN={this.KDQGOH&OLFN}!
Click me!
EXWWRQ!
);
}
!`((`#.!!`0$0`%0`/!!)/``%0`3!%. `%*`0$!`!#%**%*#L`10`%0`%/`&1/0`!1/!`3!`.!`*+0`1/!
0+`0$0`'%* `+"`/5*04K`/`/++*`/`3!`(!.*`%0`* `3!`.!(%6!`$+3`,+3!."1(`%0`%/L`3!
1* !./0* `%0/`,+0!*0%(K`/%*#` 2.%,0`"+.`+0$`(+#%`* `0!),(0%*#`*+0`+*(5`$!(,/`1/
/!,.0!`+1.`+*!.*/`%*``!00!.`35L`10`%0`(/+`#%2!/`1/`)+.!`,+3!.`* `)+.!
!4,.!//%2%05L`3$%$`%/`3$0`3!`*!! `0+`1%( `+),(!4`1/!.`%*0!."!/K
$0`%/`3$5L`!2!*`%"`0$!`% !`+"`)%4%*#` 2.%,0`* ` `/+1* /`3!%. `%*`0$!
!#%**%*#L`%0`%/`2%0(`0+`#%2!`!0`"%2!`)%*10!/K`$!`!/0`35`0+`#!0`/0.0! `3%0$``*!3
0!$*+(+#5`%/`0+`0.5`%0`%*``/)((`/% !`,.+&!0`* `/!!`$+3`%0`#+!/K` *`#!*!.(L`0$!`.%#$0
,,.+$`%/`(35/`0+`!`.! 5`0+`1*(!.*`!2!.50$%*#`* `$*#!`5+1.`)%* /!0`%"`0$!`(+*#_
0!.)`!*!"%0/`.!`3+.0$`%0K
$!.!`%/`*+0$!.`+*!,0`0$0`%/`,.!005`+*0.+2!./%(`* `$. `0+`!,0L`* `0$0`0$!
!*#%*!!./`!$%* `!0`.!`0.5%*#`0+`,1/$`0+`0$!`+))1*%05M`)+2%*#`0$!`/05(%*#`(+#%
%*/% !`0$!`+),+*!*0L`0++K`$!`!* `#+(`%/`0+`!*,/1(0!`!2!.5`/%*#(!`0!$*+(+#5`1/! `0+
.!0!`+1.`+),+*!*0/`* `/!,.0!`0$!`+*!.*/`+. %*#`0+`0$!%.` +)%*`*
"1*0%+*(%0%!/K
!.!`%/`*`!4),(!`+"``/05(!`+&!0`0'!*`".+)`0$!`!0` +1)!*00%+*M
FRQVW divStyle = {
FRORU: 'white',
EDFNJURXQG,PDJH: `url(${imgUrl})`,
:HENLW7UDQVLWLRQ: 'all', QRWHWKHFDSLWDO : KHUH
PV7UDQVLWLRQ: 'all'  PV LVWKHRQO\ORZHUFDVHYHQGRUSUHIL[
};
ReactDOM.UHQGHU(GLYVW\OH={divStyle}!Hello World!GLY!, mountNode);
$%/`/!0`+"`/+(10%+*/L`3$!.!` !2!(+,!./`1/!` 2.%,0`0+`3.%0!`0$!%.`/05(!/L`%/`'*+3*
/`#CSSinJSL`* `3!`3%((`0('`+10`%0`!40!*/%2!(5`%*`Chapter 7L`'!`+1.`+),+*!*0/
++'`!10%"1(K
S`8<`T
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
&RPPRQPLVFRQFHSWLRQV
$!.!`%/``,.!2%(%*#`+,%*%+*`0$0`!0`%/``2/0`/!0`+"`0!$*+(+#%!/`* `0++(/L`* `%"`5+1
3*0`0+`1/!`%0L`5+1`.!`"+.! `0+` !(`3%0$`,'#!`)*#!./L`0.*/,%(!./L`)+ 1(!`1* (!./L
* `*`%*"%*%0!`(%/0`+"` %""!.!*0`(%..%!/K`$%/`% !`%/`/+`3% !/,.! `* `/$.! `)+*#
,!+,(!`0$0`%0`$/`!!*`(!.(5` !"%*! L`* `$/`!!*`#%2!*`0$!`*)!` 2.%,0`"0%#1!K
0`%/`*+0`$. `0+`1* !./0* `0$!`.!/+*/`!$%* `0$%/K`((`0$!`.!,+/%0+.%!/`* `(%..%!/`%*`0$!
!0`!+/5/0!)`.!`) !`1/%*#`/$%*5`*!3`0!$*+(+#%!/L`0$!`(0!/0`2!./%+*`+"` 2.%,0L
* `0$!`)+/0` 2*! `0!$*%-1!/`* `,. %#)/K
+.!+2!.L`0$!.!`%/``)//%2!`*1)!.`+"`!0`+%(!.,(0!/`+*` %0 1L`!$`3%0$`0!*/`+"
!,!* !*%!/`0+`+""!.`/+(10%+*/`"+.`*5`,.+(!)/K` 0`%/`/0.%#$0"+.3. `0+`0$%*'`0$0`((`0$!/!
0++(/`.!`.!-1%.! `0+`/0.0`1/%*#`!0L`10`0$%/`%/`".`".+)`0$!`0.10$K`!/,%0!`0$%/`+))+*
35`+"`0$%*'%*#L`!0`%/``,.!005`0%*5`(%..5L`* `%0`*`!`1/! `%*/% !`*5`,#!`Q+.`!2!*
%*/% !`` % (!R`%*`0$!`/)!`35`!2!.5+*!`1/! `0+`1/!`&1!.5`+.`'+*!L`&1/0`5
%*(1 %*#`0$!`/.%,0`+*`0$!`,#!`!"+.!`0$!`(+/%*#`body`!(!)!*0K
$!.!`.!`03+`/.%,0/L`!1/!`!0`%/`/,(%0`%*0+`03+`,'#!/M
reactM` ),(!)!*0/`0$!`+.!`"!01.!/`+"`0$!`(%..5
react-domM`+*0%*/`((`0$!`.+3/!._.!(0! `"!01.!/
$!`.!/+*`!$%* `0$%/`%/`!1/!`0$!`+.!`,'#!`%/`1/! `0+`/1,,+.0` %""!.!*0`0.#!0/L`/1$
/`!0``%*`.+3/!./L`* `!0`0%2!`+*`)+%(!` !2%!/K`1**%*#
`!0`,,(%0%+*`%*/% !``/%*#(!` `,#!` +!/`*+0`.!-1%.!`*5`,'#!`)*#!.`+.
+),(!4`+,!.0%+*K`+1`*`&1/0` +3*(+ `0$!` %/0.%10%+*`1* (!`* `$+/0`%0`5+1./!("`Q+.
1/!`https:/b/bunpkg.bcom/bRL`* `5+1`.!`.! 5`0+`#!0`/0.0! `3%0$`!0`* `%0/`"!01.!/`%*`
"!3`)%*10!/K
!.!`.!`0$!`/`0+`!`%*(1 ! `%*`0$!` `0+`/0.0`1/%*#`!0M
https:/b/bunpkg.bcom/breact@16.b7.b0/bumd/breact.bproduction.bmin.bjs
https:/b/bunpkg.bcom/breact-bdom@16.b7.b0/bumd/breact-bdom.bproduction.bmin.bjs
"`3!` `0$!`+.!`!0`(%..5`+*(5L`3!`**+0`1/!` `!1/!`%0`%/`*+0``/0* .
(*#1#!`/1,,+.0! `5`0$!`.+3/!.N`10L`0$!`3$+(!`,+%*0`%/`0+`/0.0`3%0$`0$!`.!`)%*%)1)
/!0`+"`"!01.!/`* ` `)+.!`"1*0%+*(%0%!/`/`/++*`/`0$!5`.!`*!! ! K`+.``/%),(!` L`3!
+1( `&1/0`1/!`createElement`* L`+*(5`3$!*`3!`/0.0`1%( %*#`/+)!0$%*#`)+.!`+),(!4L
3!`*`%*(1 !``0.*/,%(!.`0+`!*(!` `* `+*2!.0`%0`%*0+` 2.%,0K`/`/++*`/`0$!`,,
#.+3/``%0`)+.!L`3!`)5`*!! ``.+10!.`0+`$* (!` %""!.!*0`,#!/`* `2%!3/L`* `3!`*
%*(1 !`0$0`/`3!((K
S`8=`T
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
0`/+)!`,+%*0L`3!`)5`3*0`0+`(+ ` 0`".+)`/+)!` `!* ,+%*0/L`* L`%"`0$!`,,(%0%+*
'!!,/`#.+3%*#L`3!`3%((`.!$`0$!`,+%*0`3$!.!`3!`*!! `/+)!`!40!.*(` !,!* !*%!/`0+
/0.0`+),(!4`+,!.0%+*/K`*(5`0`0$0`2!.5`)+)!*0`/$+1( `3!`%*0.+ 1!``,'#!
)*#!.K`$!*L`0$!`0%)!`3%((`+)!`0+`/,(%0`+1.`,,(%0%+*`%*0+`/!,.0!`)+ 1(!/`*
+.#*%6!`+1.`"%(!/`%*`0$!`.%#$0`35K`0`0$0`,+%*0L`3!`/$+1( `/0.0`0$%*'%*#`+10`1/%*#`
)+ 1(!`1* (!.K
+((+3%*#`0$%/`/%),(!`,,.+$L`0$!.!W/`*+`"0%#1!K`0.0%*#`3%0$``+%(!.,(0!`0$0`$/`+*!
$1* .! ` !,!* !*%!/`* `0!*/`+"`npm`,'#!/`+"`3$%$`3!`'*+3`*+0$%*#`%/`0$!`!/0`35
0+`#!0`(+/0K` 0`%/`%),+.0*0`0+`*+0!`0$0`!2!.5`,.+#.))%*#_.!(0! `&+
Q* `".+*0!* `!*#%*!!.%*#`%*`,.0%1(.R`.!-1%.!/`+*0%*1+1/`(!.*%*#K` 0`%/`0$!`*01.!`+"`0$!
3!`0+`!2+(2!`0``.!'*!'`,!`* `$*#!`+. %*#`0+`0$!`*!! /`+"`+0$`1/!./`*
!2!(+,!./K`$%/`%/`0$!`35`+1.`!*2%.+*)!*0`$/`3+.'! `/%*!`0$!`!#%**%*#L`* `%/`3$0
)'!/`%0`2!.5`!4%0%*#K
/`3!`#%*`!4,!.%!*!`3+.'%*#`+*`0$!`3!L`3!`(!.*`0$0`3!`**+0`)/0!.`!2!.50$%*#`*
3!`/$+1( `"%* `0$!`.%#$0`35`0+`'!!,`+1./!(2!/`1, 0! `0+`2+% `0$!`"0%#1!K`!`!+)!
(!`0+`"+((+3`((`0$!`*!3`0.!* /`3%0$+10`&1),%*#`%*0+`0$!`*!3`(%..%!/`"+.`0$!`/'!
+"`%0`1*(!//`3!`$2!`0%)!`"+.``/% !`,.+&!0K
0`%/`/0+*%/$%*#`$+3L`%*`0$!` 2.%,0`3+.( L`/`/++*`/``/,!%"%0%+*`%/`**+1*! `+.
."0! L`/+)!+*!`%*`0$!`+))1*%05`%),(!)!*0/`%0`/``0.*/,%(!.`,(1#%*`+.``,+(5"%((L`(!00%*#
!2!.5+*!`!(/!`,(5`3%0$`%0`3$%(!`0$!`.+3/!.`2!* +./`#.!!`* `/0.0`/1,,+.0%*#`%0K
$%/`%/`/+)!0$%*#`0$0`)'!/` 2.%,0`* `0$!`.+3/!.``+),(!0!(5` %""!.!*0
!*2%.+*)!*0`+),.! `0+`*5`+0$!.`(*#1#!`+.`,(0"+.)K`$!` +3*/% !`+"`%0`%/`0$0`0$%*#/
$*#!`2!.5`-1%'(5L`10`%0`%/`&1/0``)00!.`+"`"%* %*#`0$!`.%#$0`(*!`!03!!*`!00%*#`+*
*!3`0!$*+(+#%!/`2!./1/`/05%*#`/"!K
*`*5`/!L`!++'` !2!(+,!./`.!``(+0`+10`0$!`!2!(+,!.`4,!.%!*!`QRL`* `0$!5
(%/0!*`.!"1((5`0+`0$!`+))1*%05K`+L`!2!*`%"`%0`%/`*+0`0.1!`0$0`0+`1/!`!0`3!`.!`.!-1%.!
0+`(!.*`$1* .! /`+"` %""!.!*0`0++(/L`0$!5`.!(%6! `0$0`,!+,(!`3!.!`"!!(%*#`0$!`"0%#1!`*
0$!5`.!(!/! `` `0++(`0$0`)'!/`%0`%*.! %(5`!/5`0+`/""+( `* `.1*``.!(`!0
,,(%0%+*K
$!`+*(5`.!-1%.!)!*0`%/`0+`1/!``node.js/npm`!*2%.+*)!*0`* `%*/0((`0$!` `0++(
#(+((5`/`"+((+3/M
QSPLQVWDOOJFUHDWHUHDFWDSS
S`8>`T
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
$!*`0$!`!4!10(!`%/`%*/0((! L`3!`*`1/!`%0`0+`.!0!`+1.`,,(%0%+*`,//%*#``"+( !.
*)!M
FUHDWHUHDFWDSS KHOORZRUOG
%*((5L`3!`)+2!`%*0+`0$!`"+( !.`+"`+1.`,,(%0%+*`3%0$`cd hello-worldL`* `3!`&1/0`.1*
0$!`+))* M
QSPVWDUW
#%((5L`+1.`,,(%0%+*`%/`.1**%*#`3%0$``/%*#(!` !,!* !*5L`10`3%0$`((`0$!`"!01.!/
*!! ! `0+`1%( ``+),(!0!`!0`,,(%0%+*`1/%*#`0$!`)+/0` 2*! `0!$*%-1!/K`$!
"+((+3%*#`/.!!*/$+0`/$+3/`0$!` !"1(0`,#!`+"`*`,,(%0%+*`.!0! `3%0$`create-
react-appM
$%/`%/`0$!`*!3`2!./%+*`+"`create-react-app`Q29RL`3$%$`%*(1 !/`0$!
*!3`!(`>K
S`8?`T
'%*#`+1.`%./0`0!,/`3%0$`!0 $,0!.`8
6XPPDU\
*`0$%/`"%./0`$,0!.L`3!`$2!`(!.*! `/+)!`/%`+*!,0/`0$0`.!`2!.5`%),+.0*0`"+.
"+((+3%*#`0$!`.!/0`+"`0$!`++'L`* `0$0`.!`.1%(`0+`3+.'%*#`3%0$`!0` %(5K
!`*+3`'*+3`$+3`0+`3.%0!` !(.0%2!`+ !L`* `3!`$2!``(!.`1* !./0* %*#`+"`0$!
%""!.!*!`!03!!*`0$!`+),+*!*0/`3!`.!0!`* `0$!`!(!)!*0/`!0`1/!/`0+` %/,(5`0$!%.
%*/0*!/`+*`0$!`/.!!*K
!`(!.*! `0$!`.!/+*/`!$%* `0$!`$+%!`+"`(+0%*#`(+#%`* `0!),(0!/`0+#!0$!.L`* `3$5
0$0`1*,+,1(.` !%/%+*`$/`!!*``%#`3%*`"+.`!0K
!`3!*0`0$.+1#$`0$!`.!/+*/`3$5`%0`%/`+))+*`0+`"!!(`"0%#1!`%*`0$!` 2.%,0`!+/5/0!)L
10`3!`$2!`(/+`/!!*`$+3`0+`2+% `0$+/!`,.+(!)/`5`"+((+3%*#`*`%0!.0%2!`,,.+$K
%*((5L`3!`$2!`/!!*`3$0`0$!`*!3`create-react-app` `%/L`* `3!`.!`*+3`.! 5`0+
/0.0`3.%0%*#`/+)!`.!(`+ !K
S`8@`T
 &OHDQ8S<RXU&RGH

$%/`$,0!.`//1)!/`0$0`5+1`(.! 5`$2!`!4,!.%!*!`3%0$` `* `5+1`3*0`0+`%),.+2!
5+1.`/'%((/`0+`1/!`%0`!""!0%2!(5K`+`1/!` `3%0$+10`*5`,.+(!)/`+.`1*!4,!0! `!$2%+./L
%0`%/`!//!*0%(`0+`1* !./0* `$+3`%0`3+.'/`1* !.`0$!`$++ L`* `0$!`.!/+*/`3$5`%0`%/``1/!"1(
0++(`"+.`1%( %*#` /K
1.`#+(`%/`0+`3.%0!`(!*`* `)%*0%*(!` `+ !L`* `0+`$%!2!`0$0`3!`$2!`0+`'*+3
3$!.!`%0`+)!/`".+)L`$+3`%0`#!0/`0.*/(0! `0+` 2.%,0L`* `3$%$`"!01.!/`%0`,.+2% !/K
*`0$!`"%./0`/!0%+*L`3!`3%((` +``(%00(!`/0!,`'L`10`,(!/!`!.`3%0$`)!`!1/!`%0`%/`.1%(
0+`)/0!.`0$!`/%/`0+`,,(5`0$!`!/0`,.0%!/K
*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M
$0`%/` L`* `3$5`/$+1( `3!`1/!`%0O
$0`%/`!(`* `$+3`*`3!`1/!`%0`0+`3.%0!`)+ !.*` 2.%,0`+ !O
$!`)%*`"!01.!/`+"` `* `0$!` %""!.!*!/`!03!!*` `* ` 
!/0`,.0%!/`0+`3.%0!` `%*`*`!(!#*0`* `)%*0%*(!`35
+3`(%*0%*#L`* `%*0`%*`,.0%1(.L`*`)'!`+1.` 2.%,0`+ !`+*/%/0!*0
.+//`,,(%0%+*/`* `0!)/
$!`/%/`+"`"1*0%+*(`,.+#.))%*#`* `3$5`"+((+3%*#``"1*0%+*(`,. %#)
3%((`)'!`1/`3.%0!`!00!.`!0`+),+*!*0/
-6;
*`0$!`,.!2%+1/`$,0!.L`3!`/3`$+3`!0`$*#!/`0$!`+*!,0`+"`/!,.0%+*`+"`+*!.*/L
)+2%*#`0$!`+1* .%!/`%*/% !`+),+*!*0/K`!`(/+`(!.*! `$+3`!0`1/!/`0$!`!(!)!*0/
.!01.*! `5`0$!`+),+*!*0/`0+` %/,(5`0$!` `+*`0$!`/.!!*K
!0W/`*+3`(++'`0`$+3`3!`*` !(.!`+1.`!(!)!*0/`%*/% !`+1.`+),+*!*0/K
(!*`,`+1.`+ ! $,0!.`9
!0`,.+2% !/`03+`35/`0+` !"%*!`+1.`!(!)!*0/K`$!`"%./0`+*!`%/`5`1/%*#` 2.%,0
"1*0%+*/L`* `0$!`/!+* `+*!`%/`5`1/%*#` L`*`+,0%+*(`_(%'!`/5*04K` !.!`%/`0$!
!4),(!/`/!0%+*`+"`0$!`+""%%(`!0K&/`3!/%0!`Qhttps:/b/breactjs.borg/b#examplesRM
+`!#%*`3%0$L` `%/`+*!`+"`0$!`)%*`.!/+*/`3$5`,!+,(!`"%(`0+`,,.+$`!0L`!1/!
(++'%*#`0`0$!`!4),(!/`+*`0$!`$+)!`,#!`* `/!!%*#` 2.%,0`)%4! `3%0$` `"+.`0$!
"%./0`0%)!`/!!)/`/0.*#!`0+`)+/0`+"`1/K
/`/++*`/`3!`#!0`1/! `0+`%0L`3!`.!(%6!`0$0`%0`%/`2!.5`+*2!*%!*0L`,.!%/!(5`!1/!`%0`%/
/%)%(.`0+` `* `(++'/`2!.5`")%(%.`0+`*5+*!`3$+`$/`(.! 5`.!0! ` /`+*`0$!
3!K`$!`+,!*%*#`* `(+/%*#`0#/`)'!`%0`!/%!.`0+`.!,.!/!*0`*!/0! `0.!!/`+"`!(!)!*0/L
/+)!0$%*#`0$0`3+1( `$2!`!!*`1*.! (!`* `$. `0+`)%*0%*`1/%*#`,(%*` 2.%,0K
%DEHO
+`1/!` `Q* `/+)!`"!01.!/`+"`=R`%*`+1.`+ !L`3!`$2!`0+`%*/0((`0$!`*!3`!(`>K
%./0`+"`((L`%0`%/`%),+.0*0`0+`(!.(5`1* !./0* `0$!`,.+(!)/`%0`*`/+(2!`"+.`1/`* `3$5
3!`*!! `0+` ``/0!,`0+`+1.`,.+!//K`$!`.!/+*`%/`0$0`3!`3*0`0+`1/!`"!01.!/`+"`0$!
(*#1#!`0$0`$2!`*+0`5!0`!!*` ! `%*`0$!`.+3/!.L`+1.`0.#!0`!*2%.+*)!*0K`$+/!
 2*! `"!01.!/`)'!`+1.`+ !`(!*!.`"+.` !2!(+,!./L`10`0$!`.+3/!.`**+0
1* !./0* `* `!4!10!`%0K
$!`/+(10%+*`%/`0+`3.%0!`+1.`/.%,0/`%*` `* `=L`* L`3$!*`3!`.!`.! 5`0+`/$%,L`3!`
+),%(!`0$!`/+1.!/`%*0+`<L`0$!`/0* . `/,!%"%0%+*`%),(!)!*0! `%*`)&+.`.+3/!./
0+ 5K
S`98`T
(!*`,`+1.`+ ! $,0!.`9
!(`%/``,+,1(.` 2.%,0`+),%(!.`3% !(5` +,0! `3%0$%*
0$!`!0`+))1*%05K
!(`*`+),%(!`=`+ !`%*0+`<` 2.%,0L`/`3!((`/`+),%(!` `%*0+` 2.%,0
"1*0%+*/K`$!`,.+!//`%/`((! `0.*/,%(0%+*L`!1/!`%0`+),%(!/`0$!`/+1.!`%*0+``*!3
/+1.!`.0$!.`0$*`%*0+`*`!4!10(!K
*`+( !.`2!./%+*/`+"`!(`=KL`5+1`%*/0((! `0$!`babel-cli`,'#!`* `5+1`#+0`babel-
node`* `babel-core`*+3`!2!.50$%*#`%/`/!,.0! M
@babel/coreL`@babel/cliL`@babel/nodeL`* `/+`+*K
+`%*/0((`%0L`3!`*!! `0+`%*/0((`@babel/core`* `@babel/node`/`"+((+3/M
QSPLQVWDOOJ#EDEHOFRUH#EDEHOQRGH
"`5+1` +`*+0`3*0`0+`%*/0((`%0`#(+((5`Q !2!(+,!./`1/1((5`0!* `0+`2+% `0$%/RL`5+1`*
%*/0((`!(`(+((5`0+``,.+&!0`* `.1*`%0`0$.+1#$`*`npm`/.%,0L`10`"+.`0$%/`$,0!.L`
#(+(`%*/0*!`%/`"%*!K
$!*`0$!`%*/0((0%+*`%/`+),(!0!L`3!`*`.1*`0$!`"+((+3%*#`+))* `0+`+),%(!`*5
2.%,0`"%(!M
EDEHOVRXUFHMVRRXWSXWMV
*!`+"`0$!`.!/+*/`!(`%/`/+`,+3!."1(`%/`!1/!`%0`%/`$%#$(5`+*"%#1.(!K`!(`%/`&1/0`
0++(`0+`0.*/,%(!``/+1.!`"%(!`%*0+`*`+10,10`"%(!L`10`0+`,,(5`/+)!`0.*/"+.)0%+*/L`3!
*!! `0+`+*"%#1.!`%0K
1'%(5L`0$!.!`.!`/+)!`2!.5`1/!"1(`,.!/!0/`+"`+*"%#1.0%+*/`0$0`3!`*`!/%(5`%*/0((`*
1/!M
QSPLQVWDOOJ#EDEHOSUHVHWHQY#EDEHOSUHVHWUHDFW
*!`0$!`%*/0((0%+*`%/`+),(!0!L`3!`.!0!``+*"%#1.0%+*`"%(!`((! `.babelrc`%*`0$!`.++0
"+( !.L`* `,10`0$!`"+((+3%*#`(%*!/`%*0+`%0`0+`0!((`!(`0+`1/!`0$+/!`,.!/!0/M
{
"SUHVHWV": [
"@babel/preset-env",
"@babel/preset-react"
]
}
S`99`T
(!*`,`+1.`+ ! $,0!.`9
.+)`0$%/`,+%*0`+*L`3!`*`3.%0!`=`* ` `%*`+1.`/+1.!`"%(!/`* `!4!10!`0$!`+10,10`"%(!/
%*`0$!`.+3/!.K
+HOOR:RUOG
+3`0$0`+1.`!*2%.+*)!*0`$/`!!*`/!0`1,`0+`/1,,+.0` L`3!`*` %2!`%*0+`0$!`)+/0`/%
!4),(!M`#!*!.0%*#``div`!(!)!*0K
$%/`%/`$+3`5+1`3+1( `.!0!``div`!(!)!*0`3%0$`!0W/`createElement`"1*0%+*M
React.FUHDWH(OHPHQW('div')
* `0$%/`%/`0$!` `"+.`.!0%*#``div`!(!)!*0M
GLY!
0`(++'/`/%)%(.`0+`.!#1(.` K
$!`%#` %""!.!*!`%/`0$0`3!`.!`3.%0%*#`0$!`).'1,`%*/% !``.js`"%(!L`10`%0`%/`%),+.0*0`0+
*+0!`0$0` `%/`+*(5`/5*00%`/1#.L`* `%0`#!0/`0.*/,%(! `%*0+` 2.%,0`!"+.!`!%*#
!4!10! `%*`0$!`.+3/!.K`
*`"0L`+1.`<div />`!(!)!*0`%/`0.*/(0! `%*0+`React.createElement('div')`3$!*`3!
.1*`!(L`3$%$`%/`/+)!0$%*#`3!`/$+1( `(35/`'!!,`%*`)%* `3$!*`3!`3.%0!`+1.
0!),(0!/K
'20HOHPHQWVDQG5HDFWFRPSRQHQWV
%0$` L`3!`*`.!0!`+0$` `!(!)!*0/`* `!0`+),+*!*0/N`0$!`+*(5` %""!.!*!`%/
3$!0$!.`+.`*+0`0$!5`/0.0`3%0$``,%0(`(!00!.K
+.`!4),(!L`0+`.!* !.`*` `100+*L`3!`1/!`<button />L`3$%(!`0+`.!* !.
0$!`Button`+),+*!*0`3!`1/!`<Button />K
$!`"%./0`100+*`%/`0.*/,%(! `%*0+`0$!`"+((+3%*#M
React.FUHDWH(OHPHQW('button');
$!`/!+* `+*!`%/`0.*/,%(! `%*0+`0$!`"+((+3%*#M
React.FUHDWH(OHPHQW(Button);
S`9:`T
(!*`,`+1.`+ ! $,0!.`9

$!` %""!.!*!`$!.!`%/`0$0`%*`0$!`"%./0`((`3!`.!`,//%*#`0$!`05,!`+"`0$!``!(!)!*0`/`
/0.%*#L`3$%(!`%*`0$!`/!+* `((`3!`.!`,//%*#`0$!`+),+*!*0`%0/!("L`3$%$`)!*/`0$0`%0
/$+1( `!4%/0`%*`0$!`/+,!`0+`3+.'K

/`5+1`)5`$2!`*+0%! L` `/1,,+.0/`/!("_(+/%*#`0#/L`3$%$`.!`,.!005`#++ `"+.`'!!,%*#

0$!`+ !`0!./!`* ` +`*+0`.!-1%.!`1/`0+`.!,!0`1**!!//.5`0#/K

3URSV
`%/`2!.5`+*2!*%!*0`3$!*`5+1.``!(!)!*0/`+.`!0`+),+*!*0/`$2!`,.+,/K`/%*#
`%/`,.!005`!/5`0+`/!0`00.%10!/`+*`!(!)!*0/M
LPJ VUF="https://www.dev.education/images/logo.png" DOW="DEV
Education" !

$!`!-1%2(!*0`%*` 2.%,0`3+1( `!`/`"+((+3/M

React.FUHDWH(OHPHQW("img", {
VUF: "https://www.dev.education/images/logo.png",
DOW: "DEV Education"
});

$%/`%/`".`(!//`.! (!L`* `!2!*`3%0$`+*(5``+1,(!`+"`00.%10!/`%0`%/`$. !.`0+`.!

3%0$+10``%0`+"`.!/+*%*#K

&KLOGUHQ
`((+3/`5+1`0+` !"%*!`$%( .!*`0+` !/.%!`0$!`0.!!`+"`!(!)!*0/`* `+),+/!`+),(!4
 /K

`/%`!4),(!`%/``(%*'`3%0$`0!40`%*/% !`%0L`/`"+((+3/M
DKUHI="https://dev.education"!Click me!D!

$%/`3+1( `!`0.*/,%(! `%*0+`0$!`"+((+3%*#M

React.FUHDWH(OHPHQW(
"a",
{ KUHI: "https://www.dev.education" },
"Click me!"
);

S`9;`T
(!*`,`+1.`+ ! $,0!.`9

1.`(%*'`*`!`!*(+/! `%*/% !``div`!(!)!*0`"+.`/+)!`(5+10`.!-1%.!)!*0/L`* `0$!` 

/*%,,!0`0+`$%!2!`0$0`%/`/`"+((+3/M
GLY!
D KUHI="https://www.dev.education"!Click me!D!
GLY!

$!` 2.%,0`!-1%2(!*0`%/`/`"+((+3/M
React.FUHDWH(OHPHQW(
"div",
QXOO,
React.FUHDWH(OHPHQW(
"a",
{ KUHI: "https://www.dev.education" },
"Click me!"
)
);

0`/$+1( `*+3`!`(!.`$+3`0$!`_(%'!`/5*04`+"` `)'!/`!2!.50$%*#`)+.!`.! (!

* `)%*0%*(!L`10`%0`%/`(35/`%),+.0*0`0+`'*+3`0$!` 2.%,0`,.((!(`+"`+1.` `0+
$2!`+*0.+(`+2!.`0$!`.!0%+*`+"`!(!)!*0/K

$!`#++ `,.0`%/`0$0`3!`.!`*+0`(%)%0! `0+`$2%*#`!(!)!*0/`/`$%( .!*`+"`!(!)!*0/L`10`3!

*`1/!` 2.%,0`!4,.!//%+*/L`/1$`/`"1*0%+*/`+.`2.%(!/K

+` +`0$%/L`3!`$2!`0+`!*(+/!`0$!`!4,.!//%+*`3%0$%*`1.(5`.!/M
GLY!
Hello, {YDULDEOH}.
I'm a {  ! console.ORJ('Function')}.
GLY!

$!`/)!`,,(%!/`0+`*+*_/0.%*#`00.%10!/L`/`"+((+3/M
D KUHI={this.FUHDWH/LQN()}!Click me!D!

'LIIHUHQFHVZLWK+70/
+`".L`3!`$2!`(++'! `0`0$!`/%)%(.%0%!/`!03!!*` `* ` K`!0W/`*+3`(++'`0`0$!
(%00(!` %""!.!*!/`!03!!*`0$!)`* `0$!`.!/+*/`0$!5`!4%/0K

S`9<`T
(!*`,`+1.`+ ! $,0!.`9

0XOWLOLQH
!0W/`/0.0`3%0$``2!.5`/%),(!`+*!K`/`/00! `,.!2%+1/(5L`+*!`+"`0$!`)%*`.!/+*/`3!`/$+1(
,.!"!.` `+2!.`!0W/`createElement`"1*0%+*`%/`!1/!`+"`%0/`_(%'!`/5*04L`*
!1/!`(*! `+,!*%*#`* `(+/%*#`0#/`.!`,!."!0`0+`.!,.!/!*0``0.!!`+"`*+ !/K

$!.!"+.!L`3!`/$+1( `0.5`0+`1/!`%0`%*`0$!`.%#$0`35`* `#!0`0$!`)+/0`+10`+"`%0K

*!`!4),(!`%/`/`"+((+3/N`3$!*!2!.`3!`$2!`*!/0! `!(!)!*0/L`3!`/$+1( `(35/`#+

)1(0%(%*!M
GLY!
+HDGHU!
GLY!
0DLQ content={...} !
GLY!
GLY!

$%/`%/`,.!"!.(!`0+`0$!`"+((+3%*#M
GLY!+HDGHU!GLY!0DLQ content={...} !GLY!GLY!

$!`!4!,0%+*`%/`%"`0$!`$%( .!*`.!`*+0`!(!)!*0/L`/1$`/`0!40`+.`2.%(!/K` *`0$0`/!L`%0

)'!/`/!*/!`0+`.!)%*`+*`0$!`/)!`(%*!`* `2+% ` %*#`*+%/!`0+`0$!`).'1,L`/`"+((+3/M
GLY!
$OHUW!{message}$OHUW!
%XWWRQ!Close%XWWRQ!
GLY!

(35/`.!)!)!.`0+`3.,`5+1.`!(!)!*0/`%*/% !`,.!*0$!/!/`3$!*`5+1`3.%0!`0$!)`%*
)1(0%,(!`(%*!/K` `(35/`#!0/`.!,(! `5`"1*0%+*/L`* `"1*0%+*/`3.%00!*`+*``*!3`(%*!
*`#%2!`5+1`*`1*!4,!0! `.!/1(0`!1/!`+"`10+)0%`/!)%+(+*`%*/!.0%+*K`1,,+/!L`"+.
!4),(!L`0$0`5+1`.!`.!01.*%*#` `".+)`5+1.`.!* !.`)!0$+ L`3$%$`%/`$+3`5+1`.!0!` /
%*`!0K

$!`"+((+3%*#`!4),(!`3+.'/`"%*!`!1/!`0$!`div`!(!)!*0`%/`+*`0$!`/)!`(%*!`/`0$!
.!01.*M
UHWXUQ <div />;

$!`"+((+3%*#L`$+3!2!.L`%/`*+0`.%#$0M
UHWXUQ
<div />;

S`:8`T
(!*`,`+1.`+ ! $,0!.`9

$!`.!/+*`"+.`0$%/`%/`!1/!`5+1`3+1( `0$!*`$2!`0$!`"+((+3%*#M
UHWXUQ
React.FUHDWH(OHPHQW("div", QXOO);

$%/`%/`3$5`5+1`$2!`0+`3.,`0$!`/00!)!*0`%*`,.!*0$!/!/L`/`"+((+3/M
UHWXUQ (
<div />
);

0XOWLSURSHUWLHV
`+))+*`,.+(!)`%*`3.%0%*#` `+)!/`3$!*`*`!(!)!*0`$/`)1(0%,(!/`00.%10!/K`*!
/+(10%+*`%/`0+`3.%0!`((`0$!`00.%10!/`+*`0$!`/)!`(%*!L`10`0$%/`3+1( `(! `0+`2!.5`(+*#`(%*!/
0$0`3!` +`*+0`3*0`%*`+1.`+ !`Q/!!`0$!`"+((+3%*#`/!0%+*`"+.`$+3`0+`!*"+.!`+ %*#`/05(!
#1% !/RK

`+))+*`/+(10%+*`%/`0+`3.%0!`!$`00.%10!`+*``*!3`(%*!L`3%0$`+*!`(!2!(`+"`%* !*00%+*L
* `0$!*`(%#*`0$!`(+/%*#`.'!0`3%0$`0$!`+,!*%*#`0#M
EXWWRQ
IRR="bar"
YHU\/RQJ3URSHUW\1DPH="baz"
RQ6RPHWKLQJ={this.KDQGOH6RPHWKLQJ}
!

&RQGLWLRQDOV
$%*#/`#!0`)+.!`%*0!.!/0%*#`3$!*`3!`/0.0`3+.'%*#`3%0$`+* %0%+*(/L`"+.`!4),(!L`%"`3!
3*0`0+`.!* !.`/+)!`+),+*!*0/`+*(5`3$!*`!.0%*`+* %0%+*/`.!`)0$! K`$!`"0`0$0
3!`*`1/!` 2.%,0`%*`+1.`+* %0%+*/`%/``%#`,(1/L`10`0$!.!`.!`)*5` %""!.!*0`35/`0+
!4,.!//`+* %0%+*/`%*` L`* `%0`%/`%),+.0*0`0+`1* !./0* `0$!`!*!"%0/`* `,.+(!)/`+"
!$`+*!`+"`0$!/!`0+`3.%0!`+ !`0$0`%/`+0$`.! (!`* `)%*0%*(!K

1,,+/!`3!`3*0`0+`/$+3``(+#+10`100+*`+*(5`%"`0$!`1/!.`%/`1..!*0(5`(+##! `%*0+`+1.
,,(%0%+*K

S`:9`T
(!*`,`+1.`+ ! $,0!.`9

`/%),(!`/*%,,!0`0+`/0.0`3%0$`%/`/`"+((+3/M
OHW button;
LI (isLoggedIn) {
button = /RJRXW%XWWRQ!;
}
UHWXUQ GLY!{button}GLY!;

$%/`3+.'/L`10`%0`%/`*+0`2!.5`.! (!L`!/,!%((5`%"`0$!.!`.!`)1(0%,(!`+),+*!*0/`*
)1(0%,(!`+* %0%+*/K

*` L`3!`*`1/!`*`%*(%*!`+* %0%+*M
GLY!
{LV/RJJHG,Q && /RJLQ%XWWRQ!}
GLY!

$%/`3+.'/`!1/!`%"`0$!`+* %0%+*`%/`falseL`*+0$%*#`#!0/`.!* !.! L`10`%"`0$!`+* %0%+*`%/

trueL`0$!`createElement`"1*0%+*`+"`0$!`LoginButton`#!0/`((! L`* `0$!`!(!)!*0`%/
.!01.*! `0+`+),+/!`0$!`.!/1(0%*#`0.!!K

"`0$!`+* %0%+*`$/`*`(0!.*0%2!`Q0$!`(//%`if...else`/00!)!*0RL`* `3!`3*0L`"+.

!4),(!L`0+`/$+3``(+#+10`100+*`%"`0$!`1/!.`%/`(+##! `%*`* ``(+#%*`100+*`+0$!.3%/!L`3!
*`1/!` 2.%,0W/`if...else`/00!)!*0`/`"+((+3/M
OHW button;

LI (isLoggedIn) {
button = /RJRXW%XWWRQ!;
} HOVH {
button = /RJLQ%XWWRQ!;
}
UHWXUQ GLY!{button}GLY!;

(0!.*0%2!(5L`* `!00!.`/0%((L`3!`*`1/!``0!.*.5`+* %0%+*`0$0`)'!/`0$!`+ !`)+.!

+),0M
GLY!
{LV/RJJHG,Q /RJRXW%XWWRQ! : /RJLQ%XWWRQ!}
GLY!

S`::`T
(!*`,`+1.`+ ! $,0!.`9

+1`*`"%* `0$!`0!.*.5`+* %0%+*`1/! `%*`,+,1(.`.!,+/%0+.%!/L`/1$`/`0$!`! 14`.!(_

3+.( `!4),(!`Qhttps:/b/bgithub.bcom/breactjs/bredux/bblob/bmaster/bexamples/breal-
world/bsrc/bcomponents/bList.bjs#L28RL`3$!.!`0$!`0!.*.5`%/`1/! `0+`/$+3``(+ %*#`(!(`%"
0$!`+),+*!*0`%/`"!0$%*#`0$!` 0L`+.`(+ `)+.!`%*/% !``100+*` !,!* %*#`+*`0$!`2(1!`+"
0$!`isFetching`2.%(!M
EXWWRQ [...]!
{LV)HWFKLQJ  'Loading...' : 'Load More'}
EXWWRQ!

!0W/`*+3`(++'`0`0$!`!/0`/+(10%+*`"+.`3$!*`0$%*#/`#!0`)+.!`+),(%0! `* L`"+.`!4),(!L

3!`$2!`0+`$!'`)+.!`0$*`+*!`2.%(!`0+` !0!.)%*!`3$!0$!.`0+`.!* !.``+),+*!*0`+.
*+0M
GLY!
{GDWD,V5HDG\ && (LV$GPLQ || XVHU+DV3HUPLVVLRQV) &&
6HFUHW'DWD!
}
GLY!

*`0$%/`/!L`%0`%/`(!.`0$0`1/%*#`0$!`%*(%*!`+* %0%+*`%/``#++ `/+(10%+*L`10`0$!`.! %(%05`%/

/0.+*#(5`%),0! K` */0! L`3!`*`.!0!``$!(,!.`"1*0%+*`%*/% !`+1.`+),+*!*0`* `1/!`%0
%*` `0+`2!.%"5`0$!`+* %0%+*M
FDQ6KRZ6HFUHW'DWD() {
FRQVW { dataIsReady, isAdmin, userHasPermissions } = this.SURSV;
UHWXUQ dataIsReady (isAdmin __ userHasPermissions);
}
UHWXUQ (
GLY!
{this.FDQ6KRZ6HFUHW'DWD() && 6HFUHW'DWD!}
GLY!
);

/`5+1`*`/!!L`0$%/`$*#!`)'!/`0$!`+ !`)+.!`.! (!`* `0$!`+* %0%+*`)+.!`!4,(%%0K

"`5+1`(++'`0`0$%/`+ !`%*`/%4`)+*0$/L`5+1`3%((`/0%((`"%* `%0`(!.`&1/0`5`.! %*#`0$!`*)!`+"
0$!`"1*0%+*K

"`5+1` +`*+0`(%'!`1/%*#`"1*0%+*/L`5+1`*`1/!`*`+&!0W/`#!00!./L`3$%$`)'!/`0$!`+ !
)+.!`!(!#*0K

+.`!4),(!L`%*/0! `+"` !(.%*#``"1*0%+*L`3!` !"%*!``#!00!.`/`"+((+3/M

JHW canShowSecretData() {
FRQVW { dataIsReady, isAdmin, userHasPermissions } = this.SURSV;
UHWXUQ dataIsReady && (isAdmin || userHasPermissions);
}

S`:;`T
(!*`,`+1.`+ ! $,0!.`9

UHWXUQ (
GLY!
{this.canShowSecretData() && 6HFUHW'DWD!}
GLY!
);

$!`/)!`,,(%!/`0+`+),10! `,.+,!.0%!/K`1,,+/!`5+1`$2!`03+`/%*#(!`,.+,!.0%!/`"+.
1..!*5`* `2(1!K` */0! `+"`.!0%*#`0$!`,.%!`/0.%*#`%*/% !`5+1.`render`)!0$+ L`5+1
*`.!0!``(//`"1*0%+*M
JHW3ULFH() {
UHWXUQ C${this.props.FXUUHQF\}${this.props.YDOXH}C;
}
UHWXUQ GLY!{this.JHW3ULFH()}GLY!;

$%/`%/`!00!.`!1/!`%0`%/`%/+(0! `* `5+1`*`!/%(5`0!/0`%0`%*`/!`%0`+*0%*/`(+#%K

(0!.*0%2!(5L`5+1`*`#+``/0!,`"1.0$!.`* L`/`3!`$2!`&1/0`/!!*L`1/!`#!00!./M
JHWprice() {
UHWXUQ C${this.props.FXUUHQF\}${this.props.YDOXH}C;
}
UHWXUQ GLY!{this.SULFH()}GLY!;

+%*#`'`0+`+* %0%+*(`/00!)!*0/L`+0$!.`/+(10%+*/`.!-1%.!`1/%*#`!40!.*(` !,!* !*%!/K

`#++ `,.0%!`%/`0+`2+% `!40!.*(` !,!* !*%!/`/`)1$`/`3!`*`0+`'!!,`+1.`1* (!
/)((!.L`10`%0`)5`!`3+.0$`%0`%*`0$%/`,.0%1(.`/!L`!1/!`%),.+2%*#`0$!`.! %(%05`+"
+1.`0!),(0!/`%/``%#`3%*K

$!`"%./0`/+(10%+*`%/`render-ifL`3$%$`3!`*`%*/0((`3%0$`0$!`"+((+3%*#M
QSPLQVWDOOVDYHUHQGHULI

!`*`0$!*`!/%(5`1/!`%0`%*`+1.`,.+&!0/L`/`"+((+3/M
FRQVW { dataIsReady, isAdmin, userHasPermissions } = this.SURSV;

FRQVW canShowSecretData = UHQGHU,I(

dataIsReady && (isAdmin || userHasPermissions)
);
UHWXUQ (
<div>
{FDQ6KRZ6HFUHW'DWD(6HFUHW'DWD!)}
</div>
);

!`3.,`+1.`+* %0%+*/`%*/% !`0$!`renderIf`"1*0%+*K

S`:<`T
(!*`,`+1.`+ ! $,0!.`9

$!`10%(%05`"1*0%+*`0$0`#!0/`.!01.*! `*`!`1/! `/``"1*0%+*`0$0`.!!%2!/`0$!` 

).'1,`0+`!`/$+3*`3$!*`0$!`+* %0%+*`%/`trueK

*!`#+(`3!`/$+1( `(35/`'!!,`%*`)%* `%/`0+`*!2!.` `0++`)1$`(+#%`%*/% !`+1.

+),+*!*0/K`+)!`+"`0$!)`3%((`.!-1%.!``%0`+"`%0L`10`3!`/$+1( `0.5`0+`'!!,`0$!)`/`/%),(!
/`,+//%(!`/+`0$0`3!`*`!/%(5`/,+0`* `"%4`!..+./K

!`/$+1( `0`(!/0`0.5`0+`'!!,`0$!`renderIf`)!0$+ `/`(!*`/`,+//%(!L`* L`0+` +`0$0L

3!`*`1/!`*+0$!.`10%(%05`(%..5`((! `react-only-ifL`3$%$`(!0/`1/`3.%0!`+1.
+),+*!*0/`/`%"`0$!`+* %0%+*`%/`(35/`true`5`/!00%*#`0$!`+* %0%+*(`"1*0%+*`1/%*#`
$%#$!._+. !.`+),+*!*0`Q +RK

!`3%((`0('`+10` +`!40!*/%2!(5`%*`Chapter 4L`+),+/!`((`0$!`$%*#/L`10L`"+.`*+3L`5+1

*!! `0+`'*+3`0$0`0$!5`.!`"1*0%+*/`0$0`.!!%2!``+),+*!*0`* `.!01.*`*`!*$*! `+*!
5` %*#`/+)!`,.+,!.0%!/`+.`)+ %"5%*#`%0/`!$2%+.K

+`1/!`0$!`(%..5L`3!`*!! `0+`%*/0((`%0`/`"+((+3/M
QSPLQVWDOOVDYHUHDFWRQO\LI

*!`%0`%/`%*/0((! L`3!`*`1/!`%0`%*`+1.`,,/`%*`0$!`"+((+3%*#`35M
LPSRUW onlyIf IURP 'react-only-if';

FRQVW SecretDataOnlyIf = RQO\,I(

({ dataIsReady, isAdmin, userHasPermissions }) ! dataIsReady
(isAdmin __ userHasPermissions)
)(SecretData);

UHWXUQ (
GLY!
6HFUHW'DWD2QO\,I
GDWD,V5HDG\={...}
LV$GPLQ={...}
XVHU+DV3HUPLVVLRQV={...}
!
GLY!
);

/`5+1`*`/!!`$!.!L`0$!.!`%/`*+`(+#%`0`((`%*/% !`0$!`+),+*!*0`%0/!("K

!`,//`0$!`+* %0%+*`/`0$!`"%./0`,.)!0!.`+"`0$!`onlyIf`"1*0%+*L`* `3$!*`0$!

+* %0%+*`%/`)0$! L`0$!`+),+*!*0`%/`.!* !.! K

S`:=`T
(!*`,`+1.`+ ! $,0!.`9

$!`"1*0%+*`1/! `0+`2(% 0!`0$!`+* %0%+*`.!!%2!/`0$!`,.+,/L`/00!L`* `+*0!40`+"`0$!

+),+*!*0K

*`0$%/`35L`3!`2+% `,+((10%*#`+1.`+),+*!*0`3%0$`+* %0%+*(/`/+`0$0`%0`%/`!/%!.`0+

1* !./0* `* `.!/+*`+10K

/RRSV
`2!.5`+))+*`+,!.0%+*`%*` ` !2!(+,)!*0`%/`0+` %/,(5`(%/0/`+"`%0!)/K`$!*`%0`+)!/`0+`
/$+3%*#`(%/0/L`1/%*#` 2.%,0`/``0!),(0!`(*#1#!`%/``2!.5`#++ `% !K

"`3!`3.%0!``"1*0%+*`0$0`.!01.*/`*`..5`%*/% !`+1.` `0!),(0!L`!$`!(!)!*0`+"`0$!

..5`#!0/`+),%(! `%*0+`*`!(!)!*0K

/`3!`$2!`/!!*`!"+.!L`3!`*`1/!`*5` 2.%,0`!4,.!//%+*/`%*/% !`1.(5`.!/L`* `0$!

)+/0`+))+*`35`0+`#!*!.0!`*`..5`+"`!(!)!*0/L`#%2!*`*`..5`+"`+&!0/L`%/`0+`1/!`mapK

!0W/` %2!`%*0+``.!(_3+.( `!4),(!K`1,,+/!`5+1`$2!``(%/0`+"`1/!./L`!$`+*!`3%0$`

*)!`,.+,!.05`00$! `0+`%0K

+`.!0!`*`1*+. !.! `(%/0`0+`/$+3`0$!`1/!./L`5+1`*` +`0$!`"+((+3%*#M

XO!
{users.PDS(user => OL!{user.name}OL!)}
XO!

$%/`/*%,,!0`%/`%*.! %(5`/%),(!`* `%*.! %(5`,+3!."1(`0`0$!`/)!`0%)!L`3$!.!`0$!

,+3!.`+"`0$!` `* ` 2.%,0`+*2!.#!K

&RQWUROVWDWHPHQWV
+* %0%+*(/`* `(++,/`.!`2!.5`+))+*`+,!.0%+*/`%*` `0!),(0!/L`* `5+1`)5`"!!(
3.+*#`1/%*#`0$!` 2.%,0`0!.*.5`+.`0$!`),`"1*0%+*`0+`,!."+.)`0$!)K` `$/`!!*`1%(0
%*`/1$``35`0$0`%0`+*(5`/0.0/`0$!`.!0%+*`+"`0$!`!(!)!*0/L`(!2%*#`0$!`(+#%`,.0/`0+
.!(` 2.%,0L`3$%$`%/`#.!0`!4!,0`0$0L`/+)!0%)!/L`0$!`+ !`!+)!/`(!//`(!.K

*`#!*!.(L`3!`%)`0+`.!)+2!`((`0$!`(+#%`".+)`+1.`+),+*!*0/L`* `!/,!%((5`".+)`+1.
.!* !.`)!0$+ /L`10`/+)!0%)!/`3!`$2!`0+`/$+3`* `$% !`!(!)!*0/`+. %*#`0+`0$!`/00!
+"`0$!`,,(%0%+*L`* `2!.5`+"0!*`3!`$2!`0+`(++,`0$.+1#$`+((!0%+*/`* `..5/K

"`5+1`"!!(`0$0`1/%*#` `"+.`0$0`'%* `+"`+,!.0%+*`3%((`)'!`5+1.`+ !`)+.!`.! (!L

0$!.!`%/``!(`,(1#%*`2%((!`0+` +`&1/0`0$0M`jsx-control-statementsK

S`:>`T
(!*`,`+1.`+ ! $,0!.`9
$%/`"+((+3/`0$!`/)!`,$%(+/+,$5`/` L`* `%0` +!/`*+0` `*5`.!(`"1*0%+*(%05`0+`0$!
(*#1#!N`%0`%/`&1/0`/5*00%`/1#.`0$0`#!0/`+),%(! `%*0+` 2.%,0K
!0W/`/!!`$+3`%0`3+.'/K
%./0`+"`((L`3!`$2!`0+`%*/0((`%0M
QSPLQVWDOOVDYHMV[FRQWUROVWDWHPHQWV
*!`%0`%/`%*/0((! L`3!`$2!`0+` `%0`0+`0$!`(%/0`+"`+1.`!(`,(1#%*/`%*`+1.`.babelrc`"%(!M
"SOXJLQV": ["jsx-control-statements"]
.+)`*+3`+*`3!`*`1/!`0$!`/5*04`,.+2% ! `5`0$!`,(1#%*`* `!(`3%((`0.*/,%(!`%0
0+#!0$!.`3%0$`0$!`+))+*` `/5*04K
`+* %0%+*(`/00!)!*0`3.%00!*`1/%*#`0$!`,(1#%*`(++'/`(%'!`0$!`"+((+3%*#`/*%,,!0M
,I condition={this.FDQ6KRZ6HFUHW'DWD}>
6HFUHW'DWD!
,I!
$%/`#!0/`0.*/,%(! `%*0+``0!.*.5`!4,.!//%+*`/`"+((+3/M
{FDQ6KRZ6HFUHW'DWD  6HFUHW'DWD! : QXOO}
$!`If`+),+*!*0`%/`#.!0L`10`%"L`"+.`/+)!`.!/+*L`5+1`$2!`*!/0! `+* %0%+*/`%*`5+1.
.!* !.`)!0$+ L`%0`*`!/%(5`!+)!`)!//5`* `$. `0+`"+((+3K` !.!`%/`3$!.!
0$!`Choose`+),+*!*0`+)!/`%*`$* 5M
&KRRVH!
:KHQ condition={...}!
VSDQ!ifVSDQ!
:KHQ!
:KHQ condition={...}!
VSDQ!else ifVSDQ!
:KHQ!
2WKHUZLVH!
VSDQ!elseVSDQ!
2WKHUZLVH!
&KRRVH!
(!/!`*+0!`0$0`0$!`,.!! %*#`+ !`#!0/`0.*/,%(! `%*0+`)1(0%,(!`0!.*.%!/K
S`:?`T
(!*`,`+1.`+ ! $,0!.`9
%*((5L`0$!.!`%/``+),+*!*0`Q(35/`.!)!)!.`0$0`3!`.!`*+0`0('%*#`+10`.!(
+),+*!*0/`10`&1/0`/5*00%`/1#.R`0+`)*#!`0$!`(++,/`0$0`.!`(/+`2!.5`+*2!*%!*0M
XO!
)RU HDFK="user" RI={this.props.users}!
OL!{user.name}OL!
)RU!
XO!
$!`,.!! %*#`+ !`#!0/`0.*/,%(! `%*0+``),`"1*0%+*`–`*+`)#%`0$!.!K
"`5+1`.!`1/! `0+`1/%*#`(%*0!./L`5+1`)%#$0`3+* !.`3$5`0$!`(%*0!.`%/`*+0`+),(%*%*#`+10
0$0`+ !K`$!`user`2.%(!` +!/`*+0`!4%/0`!"+.!`0$!`0.*/,%(0%+*L`*+.`%/`%0`3.,,! `%*0+`
"1*0%+*K`+`2+% `0$+/!`(%*0%*#`!..+./L`0$!.!`%/`*+0$!.`,(1#%*`0+`%*/0((M`eslint-plugin-
jsx-control-statementsK
"`5+1` % `*+0`1* !./0* `0$!`,.!2%+1/`/!*0!*!L` +*W0`3+..5N`3!`3%((`0('`+10`(%*0%*#`%*
0$!`"+((+3%*#`/!0%+*K
6XEUHQGHULQJ
0`%/`3+.0$`/0.!//%*#`0$0`3!`(35/`3*0`0+`'!!,`+1.`+),+*!*0/`2!.5`/)((`* `+1.
.!* !.`)!0$+ /`2!.5`(!*`* `/%),(!K
+3!2!.L`0$0`%/`*+0`*`!/5`#+(L`!/,!%((5`3$!*`5+1`.!`.!0%*#`*`,,(%0%+*
%0!.0%2!(5L`* `%*`0$!`"%./0`%0!.0%+*`5+1`.!`*+0`/1.!`!40(5`$+3`0+`/,(%0`0$!`+),+*!*0/
%*0+`/)((!.`+*!/K`+L`3$0`/$+1( `3!`!` +%*#`3$!*`0$!`render`)!0$+ `!+)!/`0++`%#
0+`)%*0%*O`*!`/+(10%+*`%/`0+`/,(%0`%0`%*0+`/)((!.`"1*0%+*/`%*``35`0$0`(!0/`1/`'!!,`((
0$!`(+#%`%*`0$!`/)!`+),+*!*0K
!0W/`(++'`0`*`!4),(!M
UHQGHU8VHU0HQX() {
-6;IRUXVHUPHQX
}
UHQGHU$GPLQ0HQX() {
-6;IRUDGPLQPHQX
}
UHQGHU() {
UHWXUQ (
GLY!
K!Welcome back!K!
{this.XVHU([LVWV && this.UHQGHU8VHU0HQX()}
{this.XVHU,V$GPLQ && this.UHQGHU$GPLQ0HQX()}
GLY!
S`:@`T
(!*`,`+1.`+ ! $,0!.`9
);
}
$%/`%/`*+0`(35/`+*/% !.! `!/0`,.0%!`!1/!`%0`/!!)/`)+.!`+2%+1/`0+`/,(%0`0$!
+),+*!*0`%*0+`/)((!.`+*!/K` +3!2!.L`/+)!0%)!/`%0`$!(,/`0+`'!!,`0$!
.!* !.`)!0$+ `(!*!.K`+.`!4),(!L`%*`0$!`! 14`.!(_3+.( `!4),(!/L``/1_.!* !.
)!0$+ `%/`1/! `0+`.!* !.`0$!`(+ `)+.!`100+*K
+3`0$0`3!`.!` `,+3!.`1/!./L`%0`%/`0%)!`0+`)+2!`+*`* `/!!`$+3`0+`"+((+3``/05(!`#1% !
3%0$%*`+1.`+ !`0+`)'!`%0`+*/%/0!*0K
&RGHVW\OH
*`0$%/`/!0%+*L`5+1`3%((`(!.*`$+3`0+`%),(!)!*0` %0+.+*"%#`* `%*0`0+`%),.+2!`5+1.
+ !`-1(%05`5`2(% 0%*#`5+1.`+ !`/05(!K
(GLWRU&RQILJ
 %0+.+*"%#`$!(,/` !2!(+,!./`0+`)%*0%*`+*/%/0!*0`+ %*#`/05(!/`!03!!*` %""!.!*0` /K
&RQILJXULQJ(GLWRU&RQILJ
 %0+.+*"%#`%/`/1,,+.0! `5``(+0`+"`! %0+./K`+1`*`$!'`3$!0$!.`5+1.`! %0+.`%/`
/1,,+.0! `+.`*+0`+*`0$!`+""%%(`3!/%0!L`https:/b/bwww.beditorconfig.borgK
+1`*!! `0+`.!0!``"%(!`((! `.editorconfig`%*`5+1.`.++0` %.!0+.5`–`0$!`+*"%#1.0%+*`
1/!`%/`0$%/`+*!M
URRW = true
> @
LQGHQWBVW\OH = space
LQGHQWBVL]H = 2
HQGBRIBOLQH = lf
FKDUVHW = utf-8
WULPBWUDLOLQJBZKLWHVSDFH = true
LQVHUWBILQDOBQHZOLQH = true
> KWPO@
LQGHQWBVL]H = 4
> FVV@
S`;7`T
(!*`,`+1.`+ ! $,0!.`9

LQGHQWBVL]H = 4

> PG@
WULPBWUDLOLQJBZKLWHVSDFH = false

+1`*`""!0`((`0$!`"%(!/`3%0$`[]L`* `/,!%"%`"%(!/`3%0$`[.extension]K

(6/LQW
!`(35/`0.5`0+`3.%0!`0$!`!/0`+ !`,+//%(!L`10`/+)!0%)!/`!..+./`$,,!*L`* `/,!* %*#
`"!3`$+1./`0$%*#``1#` 1!`0+``05,+`%/`2!.5`".1/0.0%*#K`1'%(5L`/+)!`0++(/`*`$!(,`1/
$!'`0$!`+..!0*!//`+"`+1.`+ !`/`/++*`/`3!`05,!`%0K`$!/!`0++(/`.!`*+0`(!`0+`0!((`1/`%"
+1.`+ !`%/`#+%*#`0+` +`3$0`%0W/`/1,,+/! `0+` +L`10`0$!5`*`$!(,`1/`0+`2+% `/5*00%(
!..+./K

"`5+1`+)!`".+)``/00%`(*#1#!L`/1$`/`HL`5+1`.!`1/! `0+`#!00%*#`0$0`'%* `+"`3.*%*#

%*/% !`5+1.` K`+1#(/`.+'"+. `) !`(%*0%*#`,+,1(.`%*` 2.%,0`3%0$` %*0
Q%*%0%((5`.!(!/! `%*`9779R``"!3`5!./`#+N`0$!*`3!`$ `  %*0L`* `"%*((5L`0$!` !_"0+
/0* . `%*`0$!`!0`3+.( `*+3 5/`%/`%*0K

%*0`%/`*`+,!*`/+1.!`,.+&!0`.!(!/! `%*`978:`0$0`!)!`,+,1(.`0$*'/`0+`0$!`"0`0$0
%0`%/`$%#$(5`+*"%#1.(!`* `!40!*/%(!K

*`0$!` 2.%,0`!+/5/0!)L`3$!.!`(%..%!/`* `0!$*%-1!/`$*#!`2!.5`-1%'(5L`%0`%/

.1%(`0+`$2!``0++(`0$0`*`!`!/%(5`!40!* ! `3%0$`,(1#%*/L`* `.1(!/`0$0`*`!
!*(! `* ` %/(! `3$!*`*!! ! K`+/0`%),+.0*0(5L`*+3 5/`3!`1/!`0.*/,%(!./L`/1$
/`!(L`* `!4,!.%)!*0(`"!01.!/`0$0`.!`*+0`,.0`+"`0$!`/0* . `2!./%+*`+"` 2.%,0L
/+`3!`*!! `0+`!`(!`0+`0!((`+1.`(%*0!.`3$%$`.1(!/`3!`.!`"+((+3%*#`%*`+1.`/+1.!`"%(!/K`+0
+*(5` +!/``(%*0!.`$!(,`1/`0+`)'!`"!3!.`!..+./L`+.`0`(!/0L`"%* `0$+/!`!..+./`/++*!.L`10`%0`
!*"+.!/`/+)!`+))+*`+ %*#`/05(!`#1% !/L`3$%$`%/`%),+.0*0L`!/,!%((5`%*`%#`0!)/
3%0$`)*5` !2!(+,!./L`!$`+*!`3%0$`0$!%.`"2+.%0!`+ %*#`/05(!K

0`%/`2!.5`$. `0+`.! `0$!`+ !`%*``+ !`/!`3$!.!` %""!.!*0`"%(!/L`+.`!2!*`2.%+1/

"1*0%+*/L`.!`3.%00!*`1/%*#`%*+*/%/0!*0`/05(!/K

,QVWDOODWLRQ
%./0`+"`((L`3!`$2!`0+`%*/0((`%*0`/`"+((+3/M
QSPLQVWDOOJOREDOHVOLQW

S`;8`T
(!*`,`+1.`+ ! $,0!.`9

*!`0$!`!4!10(!`%/`%*/0((! L`3!`*`.1*`%0`3%0$`0$!`"+((+3%*#`+))* M
HVOLQWVRXUFHMV

$!`+10,10`3%((`0!((`1/`%"`0$!.!`.!`!..+./`3%0$%*`0$!`"%(!K

$!*`3!`%*/0((`* `.1*`%0`"+.`0$!`"%./0`0%)!L`3!` +`*+0`/!!`*5`!..+./`!1/!`%0`%/

+),(!0!(5`+*"%#1.(!`* `%0` +!/`*+0`+)!`3%0$`*5` !"1(0`.1(!/K

&RQILJXUDWLRQ
!0W/`/0.0`+*"%#1.%*#`%0K

%*0`*`!`+*"%#1.! `1/%*#``.eslintrc`"%(!`0$0`(%2!/`%*`0$!`.++0`"+( !.`+"`0$!`,.+&!0K

+` `/+)!`.1(!/L`3!`1/!`0$!`rules`'!5K

+.`!4),(!L`(!0W/`.!0!``.eslintrc`"%(!`* ` %/(!`0$!`/!)%+(+*M
{
"UXOHV": {
"VHPL": [2, "QHYHU"]
}
}

$%/`+*"%#1.0%+*`"%(!`*!! /``%0`+"`!4,(*0%+*M`"semi"`%/`0$!`*)!`+"`0$!`.1(!`* `[2,

"never"]`%/`0$!`2(1!K` 0`%/`*+0`2!.5`%*01%0%2!`0$!`"%./0`0%)!`5+1`/!!`%0K

%*0`.1(!/`$2!`0$.!!`(!2!(/`0$0` !0!.)%*!`0$!`/!2!.%05`+"`0$!`,.+(!)M

+""`Q+.`7RM`$!`.1(!`%/` %/(!
3.*`Q+.`8RM`$!`.1(!`%/``3.*%*#
!..+.`Q+.`9RM`$!`.1(!`0$.+3/`*`!..+.

!`.!`1/%*#`0$!`2`2(1!`!1/!`3!`3*0`%*0`0+`0$.+3`*`!..+.`!2!.5`0%)!`+1.`+ !
+!/`*+0`"+((+3`0$!`.1(!K`$!`/!+* `,.)!0!.`0!((/`%*0`0$0`3!`3*0`0$!`/!)%+(+*`0+`
*!2!.`!`1/! `Q0$!`+,,+/%0!`%/`(35/RK`%*0`* `%0/`,(1#%*/`.!`2!.5`3!((` +1)!*0! L
* `"+.`*5`/%*#(!`.1(!`5+1`*`"%* `0$!` !/.%,0%+*`+"`0$!`.1(!`* `/+)!`!4),(!/`+"`3$!*
%0`,//!/`* `3$!*`%0`"%(/K

+3L`.!0!`*`index.js`"%(!`3%0$`0$!`"+((+3%*#`+*0!*0M
YDU foo = 'bar';

S`;9`T
(!*`,`+1.`+ ! $,0!.`9

+0!`0$0`3!`.!`1/%*#`var`$!.!`!1/!`%*0` +!/`*+0`'*+3`5!0`0$0
3!`3*0`0+`3.%0!`+ !`%*`=`Q978<RK

"`3!`.1*`eslint index.js`3!`#!0`0$!`"+((+3%*#M
Extra semicolon (semi)

$%/`%/`#.!0N`3!`/!0`1,`0$!`(%*0!.L`* `%0`%/`$!(,%*#`1/`"+((+3`+1.`"%./0`.1(!K

!`*`!*(!`* ` %/(!`!2!.5`/%*#(!`.1(!`)*1((5L`+.`3!`*`!*(!`0$!`.!+))!* !
+*"%#1.0%+*`%*`+*!`#+`5`,100%*#`0$!`"+((+3%*#`+ !`%*0+`+1.`.eslintrc`"%(!M
{
"H[WHQGV": "eslint:recommended"
}

$!`extends`'!5`)!*/`0$0`3!`.!`!40!* %*#`0$!`.!+))!* ! `.1(!/`".+)`0$!`%*0

+*"%#1.0%+*L`10`3!`*`(35/`+2!..% !`/%*#(!`.1(!/`)*1((5`%*/% !
+1.`.eslintrc`"%(!`1/%*#`0$!`rules`'!5L`/`3!`$2!` +*!`!"+.!K

*!`0$!`.!+))!* ! `.1(!/`.!`!*(! L`* `3!`.1*`%*0`#%*L`3!`/$+1( `*+0`.!!%2!

*`!..+.`"+.`0$!`/!)%+(+*`Q3$%$`%/`*+0`,.0`+"`0$!`.!+))!* ! `+*"%#1.0%+*RL`10`3!
/$+1( `/!!`0$!`(%*0!.`+),(%*%*#`+10`0$!`"0`0$0`0$!`foo`2.%(!`$/`!!*` !(.! `*
*!2!.`1/! K

$!`no-unused-vars`.1(!`%/`,.!005`1/!"1(`"+.`'!!,%*#`+1.`+ !`(!*K

/`3!`$2!`/% `/%*!`0$!`!#%**%*#L`3!`3*0`0+`3.%0!`=`Q978<R`+ !L`10`$*#%*#`0$!

+ !`0+`0$!`"+((+3%*#`.!01.*/`*`!..+.M
FRQVW foo = 'bar';

$%/`%/`0$!`!..+.`%*`-1!/0%+*M
Parsing error: The keyword 'const' is reserved

+L`0+`!*(!`=`Q978<RL`3!`$2!`0+` `0$!`parserOptions`+*"%#1.0%+*`+,0%+*M
{
"H[WHQGV": "eslint:recommended",
"SDUVHU2SWLRQV": {
"HFPD9HUVLRQ": 6
}
}

S`;:`T
(!*`,`+1.`+ ! $,0!.`9

*!`3!`$2!` +*!`0$%/L`3!`3%((`#!0`0$!`1*1/! `!..+.`#%*L`3$%$`%/`"%*!K

%*((5L`0+`!*(!` L`3!`1/!`0$!`"+((+3%*#M
{
"H[WHQGV": "eslint:recommended",
"SDUVHU2SWLRQV": {
"HFPD9HUVLRQ": 6,
"HFPD)HDWXUHV": {
"MV[": true
}
}
}

0`0$%/`,+%*0L`%"`5+1`$2!`3.%00!*`*5`!0`,,(%0%+*/`!"+.!`* `$2!`*!2!.`1/! `
(%*0!.L``#++ `!4!.%/!`0+`(!.*`0$!`.1(!/`* `#!0`1/! `0+`%0`%/`0+`.1*`%*0`#%*/0`0$!`/+1.!
* `"%4`((`0$!`%//1!/K

$!.!`.!` %""!.!*0`35/`%*`3$%$`3!`)'!`%*0`$!(,`1/`3.%0!`!00!.`+ !K`*!`%/`3$0

3!`$2!` +*!`1*0%(`*+3`–`.1*`%0`".+)`0$!`+))* `(%*!`* `#!0`0$!`(%/0`+"`!..+./K

$%/`3+.'/L`10`%0`%/`*+0`2!.5`+*2!*%!*0`0+`.1*`%0`)*1((5`((`0$!`0%)!K` 0`3+1( `!`#.!0`0+

 `0$!`(%*0%*#`,.+!//`%*/% !`+1.`! %0+.`0+`#!0`%))! %0!`"!! '`/`/++*`/`3!`05,!K`+
+`0$0L`0$!.!`.!`%*0`,(1#%*/`"+.`0+)L`%/1(`01 %+`+ !`QRL`* `0$!`+0$!.`)+/0
,+,1(.`! %0+./K

*`0$!`.!(`3+.( L`.1**%*#`%*0`)*1((5`+.`#!00%*#`0$!`"!! '`(%2!`%*`0$!`! %0+.L`!2!*`%"

%0`%/`2!.5`1/!"1(L`%/`*+0`!*+1#$L`!1/!`3!`*`)%//`/+)!`3.*%*#/`+.`!..+./L`+.
3!`*`/%),(5`%#*+.!`0$!)K

*LWKRRNV
+`2+% `$2%*#`1*(%*0! `+ !`%*`+1.`.!,+/%0+.5L`3$0`3!`*` +`%/` `%*0`0`+*!`,+%*0
+"`+1.`,.+!//`1/%*#` %0`$++'/K`+.`!4),(!L`3!`*`1/!` 1/'5`0+`.1*`+1.`(%*0!.`%*`` %0
$++'`((! `,.!_+))%0L`* `%0`%/`(/+`1/!"1(`0+`.1*`+1.`1*%0`0!/0/`+*`0$!`$++'`,.!_,1/$K

+`%*/0((`$1/'5L`5+1`*!! `0+`.1*M
QSPLQVWDOOVDYHGHYKXVN\

S`;;`T
(!*`,`+1.`+ ! $,0!.`9

$!*`%*`+1.`package.json`"%(!L`3!`*` `0$%/`*+ !`0+`+*"%#1.!`0$!`0/'/`3!`3*0`0+`.1*

%*`0$!` %0`$++'/M
{
"VFULSWV": {
"OLQW": "eslint H[W .jsx,.js src",
"OLQWIL[": "eslint H[W .jsx,.js IL[ src",
"WHVW": "jest src"
},
"KXVN\": {
"KRRNV": {
"SUHFRPPLW": "npm lint",
"SUHSXVK": "npm test"
}
}
}

$!.!`%/``/,!%(`+,0%+*`Q"(#R`"+.`0$!`(%*0`+))* `((! `--fix`–`3%0$`0$%/`+,0%+*L`

%*0`3%((`0.5`0+`"%4`((`+1.`(%*0!.`!..+./`10+)0%((5`Q*+0`((`+"`0$!)RL`!`.!"1(`3%0$`0$%/
+,0%+*`!1/!`/+)!0%)!/`*`""!0``(%00(!`%0`+"`+1.`+ !`/05(!K`*+0$!.`1/!"1(`"(#`%/`--
ext`0+`/,!%"5`0$!`!40!*/%+*/`+"`0$!`"%(!/`3!`3*0`0+`2(% 0!L`%*`0$%/`/!`&1/0`0$!`.jsx`*
.js`"%(!/K

5HDFWSOXJLQ
/`)!*0%+*! `,.!2%+1/(5L`+*!`+"`0$!`)%*`.!/+*/`%*0`%/`,+,1(.`%/`!1/!`%0`%/
!40!*/%(!`3%0$`,(1#%*/N`0$!`)+/0`%),+.0*0`+*!`"+.`1/`%/`eslint-plugin-reactK

%*0`*`,./!` `3%0$+10`*5`,(1#%*/`Q&1/0`5`!*(%*#`0$!`"(#RL`10`3!`3*0`0+` +
)+.!K`+.`!4),(!L`3!`)5`3*0`0+`!*"+.!`+*!`+"`0$!`!/0`,.0%!/`3!`$2!`/!!*`%*`0$!
,.!2%+1/`/!0%+*`* `'!!,`+1.`0!),(0!/`+*/%/0!*0`.+//` !2!(+,!./`* `0!)/K

+`1/!`0$!`,(1#%*L`3!`"%./0`$2!`0+`%*/0((`%0M
QSPLQVWDOOJOREDOHVOLQWSOXJLQUHDFW

*!`%0`%/`%*/0((! L`3!`%*/0.10`%*0`0+`1/!`%0`5` %*#`0$!`"+((+3%*#`(%*!`0+`0$!

+*"%#1.0%+*`"%(!M
"SOXJLQV": [
"react"
]

S`;<`T
(!*`,`+1.`+ ! $,0!.`9

/`5+1`*`/!!L`%0`%/`,.!005`/0.%#$0"+.3. L`* `%0` +!/`*+0`.!-1%.!`*5`+),(!4

+*"%#1.0%+*`+.`/!0`1,K` 1/0`(%'!`%*0L`3%0$+10`*5`.1(!/`%0` +!/*W0` +`*50$%*#L`10`3!
*`!*(!`0$!`.!+))!* ! `+*"%#1.0%+*`0+`0%20!``/%`/!0`+"`.1(!/K

+` +`0$0L`3!`1, 0!`0$!`"extends"`'!5`%*`+1.`.eslintrc`"%(!`/`"+((+3/M

"H[WHQGV": [
"eslint:recommended",
"plugin:react/recommended"
]

+3L`%"`3!`3.%0!`/+)!0$%*#`3.+*#L`"+.`!4),(!L`3!`0.5`0+`1/!`0$!`/)!`,.+,`03%!`%*`
!0`+),+*!*0L`3!`.!`#+%*#`0+`#!0`*`!..+.M
<Foo bar bar />

$!`,.!! %*#`+ !`.!01.*/`0$!`"+((+3%*#M

1RGXSOLFDWHSURSVDOORZHG UHDFWMV[QRGXSOLFDWHSURSV

$!.!`.!``(+0`+"`.1(!/`2%((!`0+`!`1/! `%*`+1.`,.+&!0K`!0W/`#+`0$.+1#$`/+)!`+"`0$!)
* `/!!`$+3`0$!5`*`$!(,`1/`0+`"+((+3`0$!`!/0`,.0%!/K

/` %/1//! `%*`0$!`,.!2%+1/`$,0!.L`%0`%/`2!.5`$!(,"1(`0+`%* !*0`+1.` `"+((+3%*#`0$!`0.!!

/0.101.!`+"`0$!`!(!)!*0/`0+`%),.+2!`0$!`.! %(%05K

$!`,.+(!)`+)!/`3$!*`0$!`%* !*00%+*`%/`*+0`+*/%/0!*0`0$.+1#$`0$!`+ !`/!`*

+),+*!*0/K

+L`$!.!`%/`*`!4),(!`+"`$+3`%*0`*`!`1/!"1(`0+`$!(,`!2!.5+*!`%*`0$!`0!)`"+((+3`
/05(!`#1% !`3%0$+10`$2%*#`0+`)!)+.%6!`%0K

+0%!`$+3L`%*`0$%/`/!L`$2%*#`0$!`3.+*#`%* !*00%+*`%/`*+0`*`01(`!..+.`* `0$!`+ !

3+.'/N`%0`%/`&1/0``)00!.`+"`+*/%/0!*5K

%./0`+"`((L`3!`$2!`0+`0%20!`0$!`.1(!M
"rules": {
"react/jsx-indent": [2, 2]
}

$!`"%./0`2`)!*/`0$0`3!`3*0`%*0`0+`.%/!`*`!..+.`%*`/!`0$!`.1(!`%/`*+0`"+((+3!
3%0$%*`0$!`+ !L`* `0$!`/!+* `2`)!*/`0$0`3!`3*0`!2!.5` `!(!)!*0`0+`!`%* !*0!
3%0$`03+`/,!/K`%*0` +!/`*+0`)'!`*5` !%/%+*/`"+.`5+1L`/+`%0`%/`1,`0+`5+1`0+` !% !
3$%$`.1(!/`0+`!*(!K`+1`*`!2!*`$++/!`0+`"+.!``*+*_%* !*00%+*`1/%*#`7`/``/!+*
,.)!0!.K

S`;=`T
(!*`,`+1.`+ ! $,0!.`9

.%0!`/+)!0$%*#`(%'!`0$!`"+((+3%*#M
GLY!
GLY!
GLY!

%*0`+),(%*/L`/`"+((+3/M
([SHFWHGLQGHQWDWLRQRIVSDFHFKDUDFWHUVEXWIRXQG
 UHDFWMV[LQGHQW

`/%)%(.`.1(!`.!#. /`0$!`35`3!`%* !*0`+1.`00.%10!/`3$!*`3!`3.%0!`0$!)`+*``*!3`(%*!K

/`3!`$2!`/!!*`%*`0$!`,.!2%+1/`/!0%+*L`3$!*`0$!`00.%10!/`.!`0++`)*5`+.`0++`(+*#L`%0`%/
`#++ `,.0%!`0+`3.%0!`0$!)`+*``*!3`(%*!K

+`!*"+.!`"+.)00%*#`3$!.!`0$!`00.%10!/`.!`%* !*0! `5`03+`/,!/`%*`.!(0%+*`0+`0$!

!(!)!*0`*)!L`3!`*`&1/0`!*(!`0$!`"+((+3%*#`.1(!M
"UHDFWMV[LQGHQWSURSV": [2, 2]

.+)`*+3`+*L`%"`3!` +`*+0`%* !*0`0$!`00.%10!/`3%0$`03+`/,!/L`%*0`3%((`"%(K

$!`-1!/0%+*`%/L`3$!*` +`3!`+*/% !.``(%*!`0++`(+*#O` +3`)*5`00.%10!/`.!`0++`)*5O

2!.5` !2!(+,!.`3%((`$2!`` %""!.!*0`+,%*%+*`+10`0$%/K`%*0`$!(,/`1/`0+`)%*0%*
+*/%/0!*5`3%0$`0$!`jsx-max-props-per-line`.1(!`/+`0$0`!2!.5`+),+*!*0`%/`3.%00!*`%*
0$!`/)!`35K

$!`!0`,(1#%*`"+.`%*0`*+0`+*(5`#%2!/`1/`/+)!`.1(!/`0+`3.%0!`!00!.` L`10`(/+`/+)!
.1(!/`0+`3.%0!`!00!.`!0`+),+*!*0/K

+.`!4),(!L`3!`*`!*(!``.1(!`0+`!*"+.!`0$!`/+.0%*#`+"`0$!`,.+,`05,!/`%*0+`(,$!0%(
+. !.L``.1(!`0+`#%2!`1/`*`!..+.`3$!*`3!`.!`1/%*#``,.+,`0$0`$/`*+0`!!*` !(.! L``.1(!
0+`"+.!`1/`0+`,.!"!.`/00!(!//`"1*0%+*(`+),+*!*0/`+2!.`(//!/`Q3!`3%((`/!!`0$!` %""!.!*!
%*` !0%(`%*`Chapter 3L`.!0!`.1(5`!1/(!`+),+*!*0/RL`* `/+`+*K

$LUEQE5HDFW-6;VW\OHJXLGH
$!`%.*`!0\ `/05(!`#1% !`%/`0$!`)+/0`,+,1(.`/05(!`#1% !`"+.`+ %*#`%*`!0K`

+`%),(!)!*0`0$!`%.*`!0\ `/05(!`#1% !L`3!`*!! `0+`%*/0((`/+)!`,'#!/M

QSPLQVWDOOVDYHGHYEDEHOHVOLQWHVOLQWHVOLQWFRQILJDLUEQEHVOLQW
SOXJLQLPSRUWHVOLQWSOXJLQMV[D\HVOLQWSOXJLQUHDFW

S`;>`T
(!*`,`+1.`+ ! $,0!.`9

+1`*`$!'`((`0$!`%*0`.1(!/`+*`0$!`+""%%(`3!/%0!
Qhttps://eslint.org/docs/rulesR`* `((`0$!`/,!%(`!0`%*0`.1(!/`0
https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rulesK

$!`.1(!/`0$0` `,.!"!.`*+0`0+`1/!L`+.`0$0` `,.!"!.`0+`$*#!`0$!` !"1(0`2(1!/`+"L`.!`/

"+((+3/M

comma-dangleM`""
arrow-parensM`""
max-lenM`897
no-param-reassignM`""
function-paren-newlineM`""
react/require-default-propsM`""

%./0L`5+1`*!! `0+`.!0!``*!3`"%(!`((! `.eslintrc`0`0$!`.++0`(!2!(M

{
"SDUVHU": "babel-eslint",
"H[WHQGV": "airbnb",
"UXOHV": {
"DUURZSDUHQV": "off",
"FRPPDGDQJOH": "off",
"IXQFWLRQSDUHQQHZOLQH": "off",
"PD[OHQ": [1, 120],
"QRSDUDPUHDVVLJQ": "off",
"UHDFWUHTXLUHGHIDXOWSURSV": "off"
}
}

+`.1*`5+1.`(%*0!.L`5+1`$2!`0+` ``(%*0`/.%,0`%*0+`5+1.`package.json`"%(!M
{
"VFULSWV": {
"OLQW": "eslint H[W .jsx,.js src"
}
}

+3`5+1`*`(%*0`5+1.`"%(!/`1/%*#`0$!`%.*`!0\ `/05(!`#1% !K

S`;?`T
(!*`,`+1.`+ ! $,0!.`9

7KHEDVLFVRIIXQFWLRQDOSURJUDPPLQJ
,.0`".+)`"+((+3%*#`0$!`!/0`,.0%!/`3$!*`3!`3.%0!` `* `1/!``(%*0!.`0+`!*"+.!
+*/%/0!*5`* `"%* `!..+./`!.(%!.L`0$!.!`%/`+*!`)+.!`0$%*#`3!`*` +`0+`(!*`1,`+1.`+ !M
"+((+3``"1*0%+*(`,.+#.))%*#`QR`/05(!K

/` %/1//! `%*`Chapter 1L`'%*#`+1.`%./0`0!,/`3%0$`!0L`!0`$/`` !(.0%2!

,.+#.))%*#`,,.+$`0$0`)'!/`+1.`+ !`)+.!`.! (!K

`%/`` !(.0%2!`,. %#)L`3$!.!`/% !_!""!0/`.!`2+% ! L`* ` 0`%/`+*/% !.!

%))10(!`0+`)'!`0$!`+ !`!/%!.`0+`)%*0%*`* `0+`.!/+*`+10K

+*W0`+*/% !.`0$!`"+((+3%*#`/!0%+*`*`!4$1/0%2!`#1% !`0+`"1*0%+*(`,.+#.))%*#N`%0`%/

+*(5`*`%*0.+ 10%+*`0+`#!0`/0.0! `3%0$`/+)!`+*!,0/`0$0`.!`+))+*(5`1/! `%*`!0`+"
3$%$`5+1`/$+1( `!`3.!K

)LUVWFODVVREMHFWV
*` 2.%,0L`"1*0%+*/`.!`"%./0_(//`+&!0/L`3$%$`)!*/`0$0`0$!5`*`!`//%#*! `0+
2.%(!/`* `,//! `/`,.)!0!./`0+`+0$!.`"1*0%+*/K

$%/`((+3/`1/`0+`%*0.+ 1!`0$!`+*!,0`+"`$%#$!._+. !.`"1*0%+*/`Q +/RK` +/`.!`

"1*0%+*/`0$0`0'!``"1*0%+*`/``,.)!0!.L`+,0%+*((5`/+)!`+0$!.`,.)!0!./L
* `.!01.*``"1*0%+*K`$!`.!01.*! `"1*0%+*`%/`1/1((5`!*$*! `3%0$`/+)!`/,!%(
!$2%+./K

!0W/`(++'`0``/%),(!`!4),(!`3$!.!`0$!.!`%/``"1*0%+*`"+.` %*#`03+`*1)!./`0$0`#!0/
!*$*! `3%0$``"1*0%+*`0$0`"%./0`(+#/`((`0$!`,.)!0!./`* `0$!*`!4!10!/`0$!`+.%#%*(
+*!M
FRQVW add = (x, y) => x + y;

FRQVW log = fn => (...args) => {

console.ORJ(...args);
UHWXUQ fn(...args);
};

FRQVW logAdd = ORJ(add);

$%/`+*!,0`%/`,.!005`%),+.0*0`0+`1* !./0* L`!1/!L`%*`0$!`!0`3+.( L``+))+*

,00!.*`%/`0+`1/!` +/L`0+`0.!0`+1.`+),+*!*0/`/`"1*0%+*/L`* `0+`!*$*!`0$!)`3%0$
+))+*`!$2%+./K`!`3%((`/!!` +/`* `+0$!.`,00!.*/`%*`Chapter 4L`+),+/!`((`0$!
$%*#/K

S`;@`T
(!*`,`+1.`+ ! $,0!.`9

3XULW\
*`%),+.0*0`/,!0`+"``%/`0+`3.%0!`,1.!`"1*0%+*/K`+1`3%((`!*+1*0!.`0$%/`+*!,0`2!.5
+"0!*`%*`0$!`!0`!+/5/0!)L`!/,!%((5`%"`5+1`(++'`%*0+`(%..%!/`/1$`/`! 14K

$0` +!/`%0`)!*`"+.``"1*0%+*`0+`!`,1.!O

`"1*0%+*`%/`,1.!`3$!*`0$!.!`.!`*+`/% !_!""!0/L`3$%$`)!*/`0$0`0$!`"1*0%+*` +!/`*+0

$*#!`*50$%*#`0$0`%/`*+0`(+(`0+`0$!`"1*0%+*/`%0/!("K

+.`!4),(!L``"1*0%+*`0$0`$*#!/`0$!`/00!`+"`*`,,(%0%+*L`+.`)+ %"%!/`2.%(!/
!"%*! `%*`0$!`1,,!.`/+,!L`+.``"1*0%+*`0$0`0+1$!/`!40!.*(`!*0%0%!/L`/1$`/`0$!`L`%/
+*/% !.! `%),1.!K` ),1.!`"1*0%+*/`.!`$. !.`0+` !1#L`* `)+/0`+"`0$!`0%)!`%0`%/`*+0
,+//%(!`0+`,,(5`0$!)`)1(0%,(!`0%)!/`* `!4,!0`0+`#!0`0$!`/)!`.!/1(0K

+.`!4),(!L`0$!`"+((+3%*#`"1*0%+*`%/`,1.!M
FRQVW add = (x, y) => x + y;

0`*`!`.1*`)1(0%,(!`0%)!/L`(35/`#!00%*#`0$!`/)!`.!/1(0L`!1/!`*+0$%*#`%/`/0+.!
*53$!.!`* `*+0$%*#`#!0/`)+ %"%! K

$!`"+((+3%*#`"1*0%+*`%/`*+0`,1.!M
OHW x = 0;
FRQVW add = y => (x = x + y);

1**%*#`add(1)`03%!L`3!`#!0`03+` %""!.!*0`.!/1(0/K`$!`"%./0`0%)!`3!`#!0`1L`10`0$!`/!+*
0%)!`3!`#!0`2L`!2!*`%"`3!`((`0$!`/)!`"1*0%+*`3%0$`0$!`/)!`,.)!0!.K`$!`.!/+*`3!
#!0`0$0`!$2%+.`%/`0$0`0$!`#(+(`/00!`#!0/`)+ %"%! `"0!.`!2!.5`!4!10%+*K

,PPXWDELOLW\
!`$2!`/!!*`$+3`0+`3.%0!`,1.!`"1*0%+*/`0$0` +*W0`)100!`0$!`/00!L`10`3$0`%"`3!`*!!
0+`$*#!`0$!`2(1!`+"``2.%(!O` *`L``"1*0%+*L`%*/0! `+"`$*#%*#`0$!`2(1!`+"`
2.%(!L`.!0!/``*!3`2.%(!`3%0$``*!3`2(1!`* `.!01.*/`%0K`$%/`35`+"`3+.'%*#`3%0$
0`%/`((! `%))10%(%05K

*`%))10(!`2(1!`%/``2(1!`0$0`**+0`!`$*#! K

S`<7`T
(!*`,`+1.`+ ! $,0!.`9

!0W/`(++'`0`*`!4),(!M
FRQVW add3 = arr => arr.SXVK(3);
FRQVW myArr = [1, 2];

DGG(myArr); >@
DGG(myArr); >@

$!`,.!! %*#`"1*0%+*` +!/*W0`"+((+3`%))10%(%05`!1/!`%0`$*#!/`0$!`2(1!`+"`0$!

#%2!*`..5K`#%*L`%"`3!`((`0$!`/)!`"1*0%+*`03%!L`3!`#!0` %""!.!*0`.!/1(0/K

!`*`$*#!`0$!`,.!! %*#`"1*0%+*`0+`)'!`%0`%))10(!`1/%*#`concatL`3$%$`.!01.*/`
*!3`..5`3%0$+10`)+ %"5%*#`0$!`#%2!*`+*!M
FRQVW add3 = arr => arr.FRQFDW(3);
FRQVW myArr = [1, 2];
FRQVW result1 = DGG(myArr); >@
FRQVW result2 = DGG(myArr); >@

"0!.`3!`$2!`.1*`0$!`"1*0%+*`03%!L`myArr`/0%((`$/`%0/`+.%#%*(`2(1!K

&XUU\LQJ
`+))+*`0!$*%-1!`%*``%/`1..5%*#K`1..5%*#`%/`0$!`,.+!//`+"`+*2!.0%*#``"1*0%+*
0$0`0'!/`)1(0%,(!`.#1)!*0/`%*0+``"1*0%+*`0$0`0'!/`+*!`.#1)!*0`0``0%)!L
.!01.*%*#`*+0$!.`"1*0%+*K`!0W/`(++'`0`*`!4),(!`0+`(.%"5`0$!`+*!,0K

!0W/`/0.0`3%0$`0$!`add`"1*0%+*`3!`$2!`/!!*`!"+.!`* `0.*/"+.)`%0`%*0+``1..%!
"1*0%+*K

*/0! `+"`3.%0%*#`0$!`"+((+3%*#`+ !M
FRQVW add = (x, y) => x + y;

!` !"%*!`0$!`"1*0%+*`/`"+((+3/M
FRQVW add = x => y => x + y;

* `3!`1/!`%0`%*`0$!`"+((+3%*#`35M
FRQVW add1 = DGG(1);
DGG(2); 
DGG(3); 

$%/`%/``,.!005`+*2!*%!*0`35`+"`3.%0%*#`"1*0%+*/`!1/!L`/%*!`0$!`"%./0`2(1!`%/`/0+.!
"0!.`0$!`,,(%0%+*`+"`0$!`"%./0`,.)!0!.L`3!`*`.!1/!`0$!`/!+* `"1*0%+*`)1(0%,(!`0%)!/K

S`<8`T
(!*`,`+1.`+ ! $,0!.`9

&RPSRVLWLRQ
%*((5L`*`%),+.0*0`+*!,0`%*``0$0`*`!`,,(%! `0+`!0`%/`+),+/%0%+*K`1*0%+*/
Q* `+),+*!*0/R`*`!`+)%*! `0+`,.+ 1!`*!3`"1*0%+*/`3%0$`)+.!` 2*! `"!01.!/
* `,.+,!.0%!/K

+*/% !.`0$!`"+((+3%*#`"1*0%+*/M
FRQVW add = (x, y) => x + y;
FRQVW square = x => x * x;

$!/!`"1*0%+*/`*`!`+),+/! `0+#!0$!.`0+`.!0!``*!3`"1*0%+*`0$0` /`03+`*1)!./

* `0$!*` +1(!/`0$!`.!/1(0M
FRQVW addAndSquare = (x, y) => VTXDUH(DGG(x, y));

+((+3%*#`0$%/`,. %#)L`3!`!* `1,`3%0$`/)((L`/%),(!L`0!/0(!`,1.!`"1*0%+*/`0$0`*`!

+),+/! `0+#!0$!.K

)3DQGXVHULQWHUIDFHV
$!`(/0`/0!,`0+`0'!`%/`0+`(!.*`$+3`3!`*`1/!``0+`1%( ` /L`3$%$`%/`3$0`3!`1/!`!0
"+.K

!`*`0$%*'`+10`` `/``"1*0%+*`0+`3$%$`%/`,,(%! `0$!`/00!`+"`0$!`,,(%0%+*L`/

"+((+3/M
UI = I(state);

!`!4,!0`0$%/`"1*0%+*`0+`!`% !),+0!*0`/+`0$0`%0`.!01.*/`0$!`/)!` `#%2!*`0$!`/)!`/00!

+"`0$!`,,(%0%+*K

/%*#`!0L`3!`.!0!`+1.` /`1/%*#`+),+*!*0/`3!`*`+*/% !.`"1*0%+*/L`/`3!`3%((`/!!

%*`0$!`"+((+3%*#`$,0!./K

+),+*!*0/`*`!`+),+/! `0+`"+.)`0$!`"%*(` L`3$%$`%/``,.+,!.05`+"`K

$!.!`.!``(+0`+"`/%)%(.%0%!/`%*`0$!`35`3!`1%( ` /`3%0$`!0`* `0$!`,.%*%,(!/`+"`L

* `0$!`)+.!`3!`.!`3.!`+"`%0L`0$!`!00!.`+1.`+ !`3%((`!K

S`<9`T
(!*`,`+1.`+ ! $,0!.`9

6XPPDU\
*`0$%/`$,0!.L`3!`(!.*! ``#.!0` !(`+10`$+3` `3+.'/`* `$+3`0+`1/!`%0`%*`0$!`.%#$0
35`%*`+1.`+),+*!*0/K`!`/0.0! `".+)`0$!`/%/`+"`0$!`/5*04`0+`.!0!``/+(%
'*+3(! #!`/!`0$0`3%((`!*(!`1/`0+`)/0!.` `* `%0/`"!01.!/K

*`0$!`/!+* `,.0L`3!`(++'! `0`$+3`%*0`* `%0/`,(1#%*/`*`$!(,`1/`"%* `,.+(!)/

"/0!.`* `!*"+.!``+*/%/0!*0`/05(!`#1% !`.+//`+1.`+ !`/!K

%*((5L`3!`3!*0`0$.+1#$`0$!`/%/`+"`"1*0%+*(`,.+#.))%*#`0+`1* !./0* `0$!

%),+.0*0`+*!,0/`0+`1/!`3$!*`3.%0%*#``!0`,,(%0%+*K

+3`0$0`+1.`+ !`%/`(!*L`3!`.!`.! 5`0+`/0.0` %##%*#` !!,!.`%*0+`!0`* `(!.*`$+3

0+`3.%0!`0.1(5`.!1/(!`+),+*!*0/K

S`<:`T
 
6HFWLRQ+RZ5HDFWZRUNV
*`0$%/`/!0%+*L`3!`!#%*`5`(!.*%*#``$+3`0+`.!0!`.!1/(!`+),+*!*0/`%*`+. !.`0+`'!!,
0$!`+ !`/!`(!*`* `)%*0%*(!K`!`3%((`(!.*`$+3`0+`+.#*%6!`+1.`+),+*!*0/`*
)'!`0$!)`+))1*%0!`3%0$`!$`+0$!.`5`,,(5%*#`+*/+(% 0!`,00!.*/K`!`3%((`(/+
(++'`0`$+3`0+`'!!,`0$!`+ !`(!*`* `K`!`3%((`0$!*`#+`0$.+1#$`0$!` %""!.!*0
0!$*%-1!/`* `,,.+$!/`3!`*`1/!`0+`"!0$` 0`%*`0$!`!0`35K`* `"%*((5L`3!`3%((
0'!``(++'`0`"+.)/`* `!2!*0/K

*`0$%/`/!0%+*L`3!`3%((`+2!.`0$!`"+((+3%*#`$,0!./M

Chapter 3L`.!0!`.1(5`!1/(!`+),+*!*0/
Chapter 4L`+),+/!`((`0$!`$%*#/
Chapter 5L`.+,!.`0`!0$%*#
Chapter 6L`.%0!`+ !`"+.`0$!`.+3/!.
 
&UHDWLQJ7UXO\5HXVDEOH
&RPSRQHQWV
+`.!0!`0.1(5`.!1/(!`+),+*!*0/L`3!`$2!`0+`1* !./0* `0$!` %""!.!*0`,+//%%(%0%!/`0$0
!0`#%2!/`1/`"+.` !"%*%*#`+),+*!*0/L`* `3$!*`%0`%/`!00!.`0+`$++/!`+*!`+.`*+0$!.K`
*!3`05,!`+"`+),+*!*0`$/`!!*`%*0.+ 1! `%*`!0`0$0`(!0/`1/` !(.!``+),+*!*0`/
`/00!(!//`"1*0%+*K` 0`%/`.1%(`0+`1* !./0* `0$%/`+),+*!*0`* `(!.*`3$!*`* `3$5`%0
/$+1( `!`1/! K

+1`)5`$2!`(.! 5`10%(%6! `0$!`%*0!.*(`/00!`+"`+),+*!*0/L`10`5+1`)5`/0%((`!

1*(!.`+10`3$!*`%0`/$+1( `!`1/! `* `0$!`,.+(!)/`%0`*`1/!`1/K`$!`!/0`35`0+
(!.*`%/`5`(++'%*#`0`!4),(!/L`* `3!`3%((` +`0$0`5`/0.0%*#`".+)``+),+*!*0`0$0
/!.2!/``/%*#(!`,1.,+/!`* `0.*/"+.)%*#`%0`%*0+``.!1/(!`+*!K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M

$!` %""!.!*0`)!0$+ /`3!`*`"+((+3`0+`.!0!`!0`+),+*!*0/L`* `3$!*`3!

/$+1( `1/!`+*!`.0$!.`0$*`0$!`+0$!.
$0`/00!(!//`"1*0%+*(`+),+*!*0/`.!L`* `0$!` %""!.!*!/`!03!!*`"1*0%+*(
* `/00!"1(`+*!/
+3`0$!`/00!`3+.'/`* `3$!*`0+`2+% `1/%*#`%0
$5`%0`%/`%),+.0*0`0+` !"%*!`(!.`,.+,`05,!/`"+.`!$`+),+*!*0L`* `$+3`0+
#!*!.0!` +1)!*00%+*` 5*)%((5`".+)`0$!)`3%0$`!0`+#!*
*0.+ 10%+*`0+`!0` ++'/
`.!(`!4),(!`+"`0.*/"+.)%*#``+1,(! `+),+*!*0`%*0+``.!1/(!`+*!
* !./0* %*#`.#)!*0/
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

&UHDWLQJFODVVHV
!`/3`%*`0$!`"%./0`$,0!.`$+3`!0`1/!/`!(!)!*0/`0+` %/,(5`0$!`+),+*!*0/`+*`0$!
/.!!*K

!0W/`*+3`(++'`0`0$!` %""!.!*0`35/`%*`3$%$`3!`*` !"%*!`+1.`+),+*!*0/`3%0$`!0L

* `0$!`.!/+*/`3$5`3!`/$+1( `1/!`+*!`+.`+0$!.`0!$*%-1!K

#%*L`0$%/`++'`//1)!/`0$0`5+1W2!`(.! 5`,(5! `3%0$`!0`%*``/)((\)! %1)

,,(%0%+*L`3$%$`)!*/`0$0`5+1`)1/0`$2!`.!0! `/+)!`+),+*!*0/`!"+.!K

+1`)5`$2!`$+/!*`+*!`)!0$+ `+. %*#`0+`0$!`!4),(!/`+*`0$!`!0`3!/%0!L`+.`5

"+((+3%*#`0$!`/05(!`+"`0$!`+%(!.,(0!`5+1`1/! `0+`/""+( `0$!`,.+&!0K

+*!,0/`/1$`/`,.+,/L`/00!L`* `(%"!`5(!`)!0$+ /`/$+1( `!`(!.`0`0$%/`,+%*0L`* `3!

.!`*+0`#+%*#`0+`(++'`0`0$!)`%*` !0%(K

7KHFUHDWH&ODVVIDFWRU\
++'%*#`0`0$!`!0` +1)!*00%+*`Q0`0$!`0%)!`+"`3.%0%*#RL`0$!`"%./0`!4),(!`3!`"%* `
/$+3/`1/`$+3`0+` !"%*!`+),+*!*0/`1/%*#`React.createClassK

!0W/`/0.0`3%0$``2!.5`/%),(!`/*%,,!0M
FRQVW Button = React.FUHDWH&ODVV({
UHQGHU() {
UHWXUQ <button />;
}
});

%0$`0$!`,.!! %*#`+ !L`3!`.!0! ``100+*L`* `3!`*`.!"!.!*!`%0`%*/% !`+0$!.

+),+*!*0/`%*`+1.`,,(%0%+*K

!`*`$*#!`0$!`/*%,,!0`0+`1/!`,(%*` 2.%,0`/`"+((+3/M
FRQVW Button = React.FUHDWH&ODVV({
UHQGHU() {
UHWXUQ React.FUHDWH(OHPHQW('button');
}
});

!`*`.1*`0$!`+ !`!2!.53$!.!`3%0$+10`*!! %*#`0+`1/!`!(`"+.`0.*/,%(%*#L`3$%$`%/`

#++ `35`0+`/0.0`3%0$`!0L`2+% %*#`0$!`!""+.0`+"`(!.*%*#` %""!.!*0`0++(/`%*`0$!`!0
!+/5/0!)K

S`<=`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

([WHQGLQJ5HDFW&RPSRQHQW
$!`/!+* `35`0+` !"%*!``!0`+),+*!*0`%/`5`1/%*#`0$!`978<`(//!/K
$!`class`'!53+. `%/`3% !(5`/1,,+.0! `%*`)+ !.*`.+3/!./L`10`3!`*`/"!(5`0.*/,%(!`%0
3%0$`!(L`3$%$L`/1,,+/! (5L`3!`(.! 5`$2!`%*`+1.`/0'`%"`3!`.!`3.%0%*#` K

!0W/`/!!`3$0`%0`)!*/`0+`.!0!`0$!`/)!`100+*`".+)`0$!`,.!2%+1/`!4),(!`1/%*#``(//M
FODVV Button H[WHQGV React.Component {
UHQGHU() {
UHWXUQ <button />;
}
}

$%/`*!3`35`0+` !"%*!``+),+*!*0`3/`.!(!/! `3%0$`!0`7K8:L`* `!++'

!2!(+,!./`.!`,1/$%*#`0$!`+))1*%05`0+`1/!`%0K`+.`!4),(!L`*`.)+2L`*`0%2!
)!)!.`+"`0$!`+))1*%05`* ``!++'`!),(+5!!L`.!!*0(5`/% M

X=`(//!/M`!00!.`0$!` !2%(`0$0W/`/0* . %6! `3$%(!`0('%*#`+10`.!0!(//`2/K

!40!* /`+),+*!*0KX

$!5`3*0` !2!(+,!./`0+`1/!`0$!`(00!.`/%*!`%0W/`*`978<`/0* . `"!01.!L

3$%(!`0$!`createClass`"0+.5`%/`*+0K

7KHPDLQGLIIHUHQFHV
,.0`".+)`0$!` %/.!,*%!/`.!#. %*#`0$!`/5*04L`0$!.!`.!`/+)!`)&+.` %""!.!*!/`0$0
3!`$2!`0+`'!!,`%*`)%* `3$!*`3!` !% !`0+`1/!`+*!`+.`*+0$!.K

!0W/`#+`0$.+1#$`((`+"`0$!)`%*` !0%(`/+`5+1`*`$2!`((`0$!`%*"+.)0%+*`5+1`*!! `0+

$++/!`0$!`!/0`35`"+.`0$!`*!! /`+"`5+1.`0!)`* `5+1.`,.+&!0/K

3URSV
$!`"%./0` %""!.!*!`%/`%*`$+3`3!`*` !"%*!`0$!`,.+,/`0$0``+),+*!*0`!4,!0/`0+`.!!%2!L
* `0$!` !"1(0`2(1!/`"+.`!$`+*!`+"`0$!`,.+,/K

!`3%((`/!!`$+3`,.+,/`3+.'`%*` !0%(`"1.0$!.`%*0+`0$%/`$,0!.L`/+`(!0W/`*+3`+*!*0.0!`+*
$+3`3!`*` !"%*!`0$!)K

S`<>`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

%0$`createClassL`3!` !(.!`0$!`,.+,/`%*/% !`0$!`+&!0`0$0`3!`,//`/``,.)!0!.`0+

0$!`"1*0%+*L`* `3!`1/!`0$!`getDefaultProps`"1*0%+*`0+`.!01.*`0$!` !"1(0`2(1!/M
FRQVW Button = React.FUHDWH&ODVV({
SURS7\SHV: {
WH[W: React.PropTypes.VWULQJ
},
JHW'HIDXOW3URSV() {
UHWXUQ {
WH[W: 'Click me!'
};
},
UHQGHU() {
UHWXUQ EXWWRQ!{this.props.text}EXWWRQ!;
}
});

/`5+1`*`/!!L`3!`1/!`0$!`propTypes`00.%10!`0+`(%/0`((`0$!`,.+,/`0$0`3!`*`,//`0+`0$!
+),+*!*0K

!`0$!*`1/!`0$!`getDefaultProps`"1*0%+*`0+` !"%*!`0$!`2(1!/`0$0`0$!`,.+,/`.!`#+%*#
0+`$2!`5` !"1(0L`* `3$%$`3%((`!`+2!.3.%00!*`5`0$!`,.+,/`,//! `".+)`0$!`,.!*0L`%"
0$!5`.!`,.!/!*0K

+`$%!2!`0$!`/)!`.!/1(0`1/%*#`(//!/L`3!`$2!`0+`1/!``/(%#$0(5` %""!.!*0`/0.101.!M
FODVV Button H[WHQGV React.Component {
UHQGHU() {
UHWXUQ EXWWRQ!{this.props.text}EXWWRQ!;
}
}
Button.SURS7\SHV = {
WH[W: React.PropTypes.VWULQJ
};
Button.GHIDXOW3URSV = {
WH[W: 'Click me!'
};

%*!`(//`,.+,!.0%!/`.!`/0%((`%*` ."0`Q0$!5`.!`*+0`,.0`+"`0$!`.%,0`/0* . `5!0RL`0+

!"%*!`0$!`,.+,!.0%!/`+"`0$!`(//`3!`$2!`0+`/!0`0$!`00.%10!/`+*`0$!`(//`%0/!("L`"0!.`%0`$/
!!*`.!0! K

/`5+1`*`/!!`%*`0$!`!4),(!L`0$!`propTypes`+&!0`%/`0$!`/)!`3!`1/!
3%0$`createClassK

S`<?`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

$!*`%0`+)!/`0+`/!00%*#`0$!` !"1(0`,.+,/`%*/0! L`3!`1/! `0+`1/!``"1*0%+*`0+`.!01.*`0$!

!"1(0`,.+,!.0%!/`+&!0N`10`3%0$`(//!/L`3!`$2!`0+` !"%*!``defaultProps`00.%10!`+*
0$!`(//`* `//%#*`0$!` !"1(0`,.+,/`0+`%0K

$!`#++ `0$%*#`+10`1/%*#`(//!/`%/`0$0`3!` !"%*!`,.+,!.0%!/`+*`0$!` 2.%,0`+&!0

3%0$+10`$2%*#`0+`1/!`!0_/,!%"%`"1*0%+*/L`/1$`/`getDefaultPropsK

6WDWH
*+0$!.`%#` %""!.!*!`!03!!*`0$!`createClass`"0+.5`* `0$!`extends
React.Component`)!0$+ `%/`0$!`35`5+1` !"%*!`0$!`%*%0%(`/00!`+"`0$!`+),+*!*0/K

#%*L`3%0$`createClassL`3!`1/!``"1*0%+*L`3$%(!`3%0$`0$!`=`(//!/`3!`/!0`*`00.%10!
+"`0$!`%*/0*!K

!0W/`/!!`*`!4),(!`+"`0$0`%*`0$!`"+((+3%*#`+ !`/*%,,!0M
FRQVW Button = React.FUHDWH&ODVV({
JHW,QLWLDO6WDWH() {
UHWXUQ {
WH[W: 'Click me!'
};
},
UHQGHU() {
UHWXUQ EXWWRQ!{this.state.text}EXWWRQ!;
}
});

$!`getInitialState`)!0$+ `!4,!0/`*`+&!0`3%0$`0$!` !"1(0`2(1!/`"+.`!$`+*!`+"

0$!`/00!`,.+,!.0%!/K

+3!2!.L`3%0$`(//!/L`3!` !"%*!`+1.`%*%0%(`/00!`1/%*#`0$!`state`00.%10!`+"`0$!`%*/0*!
* `/!00%*#`%0`%*/% !`0$!`constructor`)!0$+ `+"`0$!`(//M
FODVV Button H[WHQGV React.Component {
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
WH[W: 'Click me!'
};
}
UHQGHU() {
UHWXUQ EXWWRQ!{this.state.text}EXWWRQ!;
}
}

S`<@`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

$!/!`03+`35/`+"` !"%*%*#`0$!`/00!`.!`!-1%2(!*0`10L`#%*L`3%0$`(//!/`3!`&1/0` !"%*!

,.+,!.0%!/`+*`0$!`%*/0*!`3%0$+10`1/%*#`*5`!0_/,!%"%` /L`3$%$`%/`#++ K

*`=L`0+`1/!`this`%*`/1_(//!/L`3!`"%./0`)1/0`((`superK` *`0$!`/!`+"`!0L`3!`(/+
,//`0$!`,.+,/`0+`0$!`,.!*0K

$XWRELQGLQJ
createClass`$/``++(`"!01.!`0$0`%/`,.!005`+*2!*%!*0L`10`%0`*`(/+`$% !`0$!`35
2.%,0`3+.'/L`3$%$`%/`)%/(! %*#L`!/,!%((5`"+.`!#%**!./K`$%/`"!01.!`(!0/`5+1`.!0!
!2!*0`$* (!./`//1)%*#`0$0L`3$!*`0$!5`#!0`((! L`this`.!"!.!*!/`0$!`+),+*!*0`%0/!("K

!`3%((`/!!`$+3`!2!*0`$* (!./`3+.'`%*`Chapter 6L`.%0!`+ !`"+.`0$!`.+3/!.K`+.`*+3L`3!

.!`+*(5`%*0!.!/0! `%*`0$!`35`0$!5`.!`+1* `0+`0$!`+),+*!*0/`3!`.!` !"%*%*#K

!0W/`/0.0`3%0$``/%),(!`!4),(!M
FRQVW Button = React.FUHDWH&ODVV({
KDQGOH&OLFN() {
console.ORJ(this);
},
UHQGHU() {
UHWXUQ EXWWRQ RQ&OLFN={this.handleClick} !;
}
});

%0$`createClassL`3!`*`/!0`*`!2!*0`$* (!.`%*`0$%/`35`* `.!(5`+*`0$!`"0

0$0`this`%*/% !`0$!`"1*0%+*`.!"!./`0+`0$!`+),+*!*0`%0/!("K`!1/!`+"`0$%/L`3!`*L`"+.
!4),(!L`((`+0$!.`)!0$+ /`+"`0$!`/)!`+),+*!*0`%*/0*!K
((%*#`this.setState()L`+.`*5`+0$!.`"1*0%+*/L`3+1( `3+.'`/`!4,!0! K

!0W/`*+3`/!!`$+3`this`3+.'/` %""!.!*0(5`3%0$`(//!/L`* `3$0`3!`*` +`0+`.!0!`0$!

/)!`!$2%+.K`!`+1( ` !"%*!``+),+*!*0`%*`0$!`"+((+3%*#`35L
!40!* %*#`React.ComponentM
FODVV Button H[WHQGV React.Component {
KDQGOH&OLFN() {
console.ORJ(this);
}
UHQGHU() {
UHWXUQ EXWWRQ RQ&OLFN={this.handleClick} !;
}
}

S`=7`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

$!`.!/1(0`3+1( `!``null`+10,10`%*`0$!`+*/+(!`3$!*`0$!`100+*`%/`(%'! K`$%/`%/

!1/!`+1.`"1*0%+*`#!0/`,//! `0+`0$!`!2!*0`$* (!.`* `3!`(+/!`0$!`.!"!.!*!`0+`0$!
+),+*!*0K

$0` +!/`*+0`)!*`0$0`3!`**+0`1/!`!2!*0`$* (!./`3%0$`(//!/L`3!`&1/0`$2!`0+`%*

+1.`"1*0%+*/`)*1((5K

!0W/`/!!`3$0`/+(10%+*/`3!`*` +,0L`* `%*`3$%$`/!*.%+`3!`/$+1( `,.!"!.`+*!`+.

*+0$!.K

/`5+1`,.+(5`'*+3`(.! 5L`0$!`*!3`=`..+3`"1*0%+*`10+)0%((5`%* /`0$!

1..!*0`this`'!53+. `0+`0$!`+ 5`+"`0$!`"1*0%+*K

+L`(!0W/`(++'`0`0$!`"+((+3%*#`!4),(!M
() => this.VHW6WDWH();

$!`,.!! %*#`+ !`#!0/`0.*/,%(! `%*0+`0$!`"+((+3%*#`+ !`3%0$`!(M

YDU _this = this;
(IXQFWLRQ () {
UHWXUQ _this.VHW6WDWH();
});

/`5+1`*`%)#%*!L`+*!`,+//%(!`/+(10%+*`0+`0$!`10+%* %*#`,.+(!)`%/`1/%*#`0$!`..+3
"1*0%+*` %.!0(5`%*`0$!`render`)!0$+ K`!0W/`(++'`0`0$!`"+((+3%*#`!4),(!M
FODVV Button H[WHQGV React.Component {
KDQGOH&OLFN() {
console.ORJ(this);
}
UHQGHU() {
UHWXUQ EXWWRQ RQ&OLFN={() => this.KDQGOH&OLFN()}!;
}
}

$%/`3+1( `3+.'`/`!4,!0! `3%0$+10`*5`,.0%1(.`,.+(!)/K`$!`+*(5` +3*/% !`%/`0$0`%"

3!`.!`+10`,!."+.)*!L`3!`$2!`0+`1* !./0* `3$0`0$!`+ !`%/` +%*#K

%* %*#``"1*0%+*`%*/% !`0$!`.!* !.`)!0$+ `$/L`%*`"0L`*`1*!4,!0! `/% !_!""!0L`!1/!

0$!`..+3`"1*0%+*`#!0/`"%.! `!2!.5`0%)!`0$!`+),+*!*0`%/`.!* !.! `Q3$%$`$,,!*/
)1(0%,(!`0%)!/` 1.%*#`0$!`(%"!0%)!`+"`0$!`,,(%0%+*RK

%.%*#``"1*0%+*`%*/% !`0$!`.!* !.`)1(0%,(!`0%)!/L`!2!*`%"`%0`%/`*+0`+,0%)(L`%0`%/`*+0`

,.+(!)`5`%0/!("K

S`=8`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

$!`%//1!`%/`0$0L`%"`3!`.!`,//%*#`0$!`"1*0%+*` +3*`0+``$%( `+),+*!*0L`%0`.!!%2!/`

*!3`,.+,`+*`!$`1, 0!L`3$%$`(! /`0+`%*!""%%!*0`.!* !.%*#L`* `0$0`.!,.!/!*0/`
,.+(!)`–`!/,!%((5`%"`0$!`+),+*!*0`%/`,1.!`Q3!`3%((`0('`+10`,!."+.)*!`%*`Chapter
9L` ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/RK

$!`!/0`35`0+`/+(2!`%0`%/`0+`%* `0$!`"1*0%+*`3%0$`*`..+3`"1*0%+*`10`%*`0$!`)!0$+
%0/!("L`* `,//`0$!`.!"!.!*!`0+`0$!`onClick`,.+,!.05M
FODVV Button H[WHQGV React.Component {
KDQGOH&OLFN () => {
console.ORJ(this);
}
UHQGHU() {
UHWXUQ EXWWRQ RQ&OLFN={this.handleClick}!;
}
}

*+0$!.`35`0+`/+(2!`%0`%/`0+`%* `0$!`"1*0%+*`%*/% !`0$!`+*/0.10%+*`%*``35`0$0`%0

+!/*W0`!2!.`$*#!L`!2!*`%"`0$!`+),+*!*0`.!* !./`)1(0%,(!`0%)!/M
FODVV Button H[WHQGV React.Component {
FRQVWUXFWRU(props) {
VXSHU(props);
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}
KDQGOH&OLFN() {
console.ORJ(this);
}
UHQGHU() {
UHWXUQ EXWWRQ RQ&OLFN={this.handleClick}!;
}
}

$0W/`%0K`.+(!)`/+(2! P

6WDWHOHVVFRPSRQHQWV
+`".L`3!`$2!`+*(5`(!.*! `$+3`0+`.!0!`(//`+),+*!*0/`%*`!0K`$!/!`+),+*!*0/
.!`1/!"1(`3$!*`5+1`*!! `0+`$* (!`(+(`/00!/L`10`%*`/+)!`/!/L`3!`3%((`*!! `0+`.!* !.
/00%`).'1,K`+.`/00%`+),+*!*0/L`3!`*!! `0+`1/!`"1*0%+*(`+),+*!*0/L`(/+`'*+3*`/
/00!(!//`+),+*!*0/K`$%/`3%((`%),.+2!`0$!`,!."+.)*!`+"`+1.`,,(%0%+*K

S`=9`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

!0W/`/!!`$+3`%0`3+.'/`* `3$0`%0`,.+2% !/`"%./0L`* `0$!*`3!`3%((` %#`%*0+`0$!`/!/`3$!.!

+*!`/+(10%+*`"%0/`!00!.`0$*`*+0$!.K

$!`/5*04`%/`,.0%1(.(5`0!./!`* `!(!#*0`–`(!0W/`/!!`*`!4),(!M
() => <button />

$!`,.!! %*#`+ !`.!0!/`*`!),05`100+*`* L`0$*'/`0+`0$!`+*%/!`..+3`"1*0%+*

/5*04L`%0`%/`/0.%#$0"+.3. `* `!4,.!//%2!K`/`5+1`*`/!!L`%*/0! `+"`1/%*#
0$!`createClass`"0+.5`+.`!40!* %*#`0$!`+),+*!*0L`3!`+*(5` !"%*!``"1*0%+*`0$0
.!01.*/`0$!`!(!)!*0/`0+`!` %/,(5! K

!`*L`+"`+1./!L`1/!`0$!` `/5*04`%*/% !`0$!`+ 5`+"`0$!`"1*0%+*K

3URSVDQGFRQWH[W
+),+*!*0/`0$0`.!`*+0`(!`0+`.!!%2!`*5`,.+,/`".+)`0$!`,.!*0/`.!`*+0`,.0%1(.(5
1/!"1(L`* `0$!`/00!(!//`"1*0%+*(`+),+*!*0/`*`.!!%2!`props`/`,.)!0!./M
props => EXWWRQ!{props.WH[W}EXWWRQ!;

(0!.*0%2!(5L`3!`*`1/!`*`!2!*`)+.!`+*%/!`/5*04`3%0$`0$!`=` !/0.101.%*#M
({ WH[W }) => EXWWRQ!{text}EXWWRQ!;

!`*` !"%*!`0$!`props`/+`0$0``/00!(!//`"1*0%+*`*`.!!%2!`1/%*#
0$!`,.+,5,!/`00.%10!`%*``/%)%(.`35`/`3!` +`3$!*`3!`!40!* `+),+*!*0/M
LPSRUW{string }IURP prop-types 

FRQVW Button = ({ text }) => EXWWRQ!{text}EXWWRQ!

Button.SURS7\SHV = {
WH[W: string
}

00!(!//`"1*0%+*(`+),+*!*0/`(/+`.!!%2!``/!+* `,.)!0!.`0$0`.!,.!/!*0/`0$!
+*0!40M
(props, context) => (
EXWWRQ!{context.currency}{props.value}EXWWRQ!
);

S`=:`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

7KHWKLVNH\ZRUG
*!`0$%*#`0$0`)'!/`0$!`/00!(!//`"1*0%+*(`+),+*!*0/` %""!.!*0`".+)`0$!%.`/00!"1(
+1*0!.,.0/`%/`0$!`"0`0$0`this` +!/`*+0`.!,.!/!*0`0$!`+),+*!*0` 1.%*#`0$!%.`!4!10%+*K

+.`0$%/`.!/+*L`%0`%/`*+0`,+//%(!`0+`1/!`"1*0%+*/`/1$`/`setStateL`+.`(%"!`5(!`)!0$+ /
0$0`.!`//+%0! `3%0$`0$!`+),+*!*0`%*/0*!K

6WDWH
$!`*)!`/00!(!//`0!((/`1/`(!.(5`0$0`0$!`/00!(!//`"1*0%+*(`+),+*!*0/` +`*+0`$2!`*5
%*0!.*(`/00!L`* `0$!`"0`0$0`0$%/` +!/`*+0`!4%/0`!*"+.!/`%0K`$0`)'!/`0$!)`!40.!)!(5
,+3!."1(`* `!/5`0+`1/!`0`0$!`/)!`0%)!K

$!`/00!(!//`"1*0%+*(`+),+*!*0/`+*(5`.!!%2!`,.+,/`Q* `+*0!40RL`* `0$!5`.!01.*`0$!

!(!)!*0/K`$%/`/$+1( `.!)%* `1/`+"`0$!`,.%*%,(!/`+"`"1*0%+*(`,.+#.))%*#`0$0`3!`/3
%*`Chapter 2L`(!*`,`+1.`+ !K

/LIHF\FOH
00!(!//`"1*0%+*(`+),+*!*0/` +`*+0`,.+2% !`*5`(%"!`5(!`$++'/L`/1$
/`componentDidMountN`0$!5`%),(!)!*0``.!* !._(%'!`)!0$+ L`* `!2!.50$%*#`!(/!`$/`0+
!`$* (! `5`0$!`,.!*0K

5HIVDQGHYHQWKDQGOHUV
%*!`0$!.!`%/`*+`+),+*!*0`%*/0*!L`0+`1/!`.!"/`+.`!2!*0`$* (!./`3%0$
/00!(!//`"1*0%+*(`+),+*!*0/L`5+1`*` !"%*!`0$!)`%*`0$!`"+((+3%*#`35M
() => {
OHW input;

FRQVW onClick = () => input.IRFXV();

UHWXUQ (
GLY!
LQSXWUHI={el => (input = HO)} !
EXWWRQRQ&OLFN={onClick}!Focus<EXWWRQ!
GLY!
)
}

S`=;`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

2SWLPL]DWLRQ
*!`0$%*#`3!`/$+1( `'!!,`%*`)%* `3$!*`3!`1/!`/00!(!//`"1*0%+*(`+),+*!*0/`%/`0$0L
!2!*`%"`!++'` !2!(+,!./`/5`0$0`%*`0$!`"101.!`0$!5`3+1( `!`(!`0+`,.+2% !
,!."+.)*!`+,0%)%60%+*/`"+.`+),+*!*0/`3%0$+10``/00!L`0`0$!`0%)!`+"`3.%0%*#L`0$!5
,!."+.)``(%00(!`%0`(!//`3!((K

$!`shouldComponentUpdate`"1*0%+*` +!/`*+0`!4%/0L`* `0$!.!`%/`*+0``35`0+`0!((`!0

0$0``"1*0%+*(`+),+*!*0`/$+1( `*+0`!`.!* !.! `%"`0$!`,.+,/`Q+.``,.0%1(.`,.+,R`.!
*+0`$*#! K

$%/`%/`*+0``%#`%//1!L`10`%0`%/`/+)!0$%*#`0+`+*/% !.K

/D\RXWFRPSRQHQWV
+.)((5L`5+1`*`1/!`/00!(!//`+),+*!*0/`"+.`(5+10`+),+*!*0/L`/1$`/`$! !./L
+*0!*0L`+.`"++0!./L`/%*!`5+1`&1/0`*!! `0+`.!* !.`/00%`).'1,K

!0W/`.!0!``*!3`,,(%0%+*`3%0$`create-react-appK` "`5+1`.1*`5+1.`,.+&!0`3%0$`npm
/0.0`5+1`3%((`/!!`/+)!0$%*#`(%'!`0$%/M

"`5+1`+,!*`0$!`"%(!`(+0! `%*`src/App.js`5+1`3%((`/!!`0$%/`+ !M
LPSRUW React, { Component } IURP 'react';
LPSRUW logo IURP './logo.svg';
LPSRUW './App.css';

FODVV App H[WHQGV Component {

UHQGHU() {

S`=<`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

UHWXUQ (
GLY FODVV1DPH="App"!
KHDGHUFODVV1DPH="App-header"!
LPJVUF={logo} FODVV1DPH="App-logo" DOW="logo"!
S!
Edit FRGH!src/App.jsFRGH! and save to reload.
S!
D
FODVV1DPH="App-link"
KUHI="https://reactjs.org"
WDUJHW="_blank"
UHO="noopener noreferrer"
!
Learn React
D!
KHDGHU!
GLY!
);
}
}

H[SRUWGHIDXOW App;

+3L`(!0W/`.!'`+1.`+ !`%*0+`(5+10`"%(!/`–`0$0`)!*/`3!`3%((`.!0!`0$!`HeaderL
ContentL`* `Footer`+),+*!*0/`0+`/%),(%"5`+1.`+ !K

$!`"%./0`+),+*!*0`%/`0$!`Header`+),+*!*0N`(!0W/`(++'`0`0$!`+ !`3!`*!! M
LPSRUW React IURP 'react';
LPSRUW { string } IURP 'prop-types';

FRQVW Header = ({ title }) => (

KHDGHUFODVV1DPH="App-header"!
K!{title}K!
KHDGHU!
);

Header.SURS7\SHV = {
WLWOH string.LV5HTXLUHG
};

H[SRUWGHIDXOW Header;

S`==`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

/`5+1`*`/!!L` `.!0! ``*!3` %.!0+.5`((! `components`0+`/!,.0!`+1.`+),+*!*0/L

* `%*/% !`*+0$!.`+*!`((! `layout`0+`#.+1,`+1.`(5+10`+),+*!*0/K`(/+L`3!`.!
!/0.101.%*#`+1.`props`0+`,//``0%0(!`%*`0$!`+),+*!*0`* `&1/0`.!* !.`%0L`"0!.`3!`.!0!
0$%/`+),+*!*0`3!`*!! `0+`$*#!`App.js`0+`%),+.0`* `.!* !.`0$!`Header`+),+*!*0M
LPSRUW React, { Component } IURP 'react';
LPSRUW Header IURP './components/layout/Header';
LPSRUW './App.css';

FODVV App H[WHQGV Component {

UHQGHU() {
UHWXUQ (
GLYFODVV1DPH="App"!
+HDGHU WLWOH="Dev Education"!
GLY!
);
}
}

H[SRUWGHIDXOW App;

`$*#! ``(%00(!`%0`0$!`/05(!/`–` `)+2! `0$!`#.5`'#.+1* `0+`0$!`+ 5L`* `

.!)+2! `min-height: 100vh;`".+)`0$!`.App-header`(//L`* `0$%/`%/`0$!`.!/1(0M

+3L`(!0W/`.!0!``*!3`+),+*!*0`0+` `0$!`Content`+),+*!*0`+"`0$!`/%0!M
LPSRUW React IURP 'react';
LPSRUW { node } IURP 'prop-types';

FRQVW Content = ({ FKLOGUHQ }) => (

GLYFODVV1DPH="Content"!
{FKLOGUHQ}
GLY!
);

Content.SURS7\SHV = {
FKLOGUHQ: node.LV5HTXLUHG

S`=>`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

};

H[SRUWGHIDXOW Content;

+.`0$%/`+),+*!*0L`3!`*!! `0+`,//`0$!`/,!%(`,.+,`$%( .!*`0+`%*(1 !`0$!`%*&!0!

`%*/% !`0$!`Content`+),+*!*0L`%"`3!`(++'`0`App.js`%0`/$+1( `*+3`(++'`(%'!`0$%/M
LPSRUW React, { Component } IURP 'react';
LPSRUW Header IURP './components/layout/Header';
LPSRUW Content IURP './components/layout/Content';
LPSRUW './App.css';

FODVV App H[WHQGV Component {

UHQGHU() {
UHWXUQ (
GLYFODVV1DPH="App"!
+HDGHUWLWOH="Dev Education"!

&RQWHQW!
^ 7KLVFRQWHQWLVVHQGLQJDVWKHFKLOGUHQSURS `
S!
This is our VWURQJ!Content>VWURQJ! component
S!
&RQWHQW!
GLY!
);
}
}

H[SRUWGHIDXOW App;

$!`.!/1(0`%/`/`"+((+3/M

S`=?`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

%*((5L`(!0W/`.!0!``Footer`+),+*!*0M
LPSRUW React IURP 'react';
LPSRUW { string } IURP 'prop-types';

FRQVW Footer = ({ copyright }) => (

GLYFODVV1DPH="Footer"!
S!&copy; {FRS\ULJKW}S!
GLY!
);

Footer.SURS7\SHV = {
FRS\ULJKW: string.LV5HTXLUHG
};

H[SRUWGHIDXOW Footer;

!`(/+`*!! `0+`.!* !.`+1.`Footer`+),+*!*0`%*`App.jsM

LPSRUW React, { Component } IURP 'react';
LPSRUW Header IURP './components/layout/Header';
LPSRUW Content IURP './components/layout/Content';
LPSRUW Footer IURP './components/layout/Footer';
LPSRUW './App.css';

FODVV App H[WHQGV Component {

UHQGHU() {
UHWXUQ (
GLYFODVV1DPH="App"!
+HDGHUWLWOH="Dev Education"!

&RQWHQW!
^ 7KLVFRQWHQWLVUHFHLYHGZLWKWKHFKLOGUHQSURS `
S!
This is our VWURQJ!Content>VWURQJ! component
S!
&RQWHQW!

)RRWHU
FRS\ULJKW={`Dev.education ^QHZ Date().JHW)XOO<HDU()``}
!
GLY!
);
}
}

H[SRUWGHIDXOW App;

S`=@`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

/`5+1`*`/!!L`.!'%*#`+1.`+),+*!*0/`%*`0$%/`35`$!(,`1/`0+`.!0!`(!*`* `)+ 1(.

+),+*!*0/K`$!`"%*(`.!/1(0`3%0$`0$!`Footer`+),+*!*0`%/`0$%/`+*!M

7KHVWDWH
!`$2!`/!!*`$+3`0+`.!0!``+),+*!*0`3%0$`0$!`"0+.5L`!40!* %*#`0$!`!0`(//L`+.
1/%*#`/00!(!//`"1*0%+*(`+),+*!*0/K

!0W/`*+3`#+` !!,!.`%*0+`0$!`0+,%`+"`/00!`* `/!!`!40(5`3$5`%0`%/`%),+.0*0`0+`1/!`%0`*

"%* `+10`$+3`%0`3+.'/K

!`3%((`(!.*`3$!*`3!`/$+1( `1/!`/00!(!//`"1*0%+*/`.0$!.`0$*`/00!"1(`+),+*!*0/L`*
3$5`0$0`.!,.!/!*0/``"1* )!*0(` !%/%+*`%*` !/%#*%*#`+),+*!*0/K

([WHUQDOOLEUDULHV
%./0`+"`((L`%0`%/`%),+.0*0`0+`1* !./0* `3$5`3!`/$+1( `+*/% !.`1/%*#`0$!`/00!`%*/% !`+1.
+),+*!*0/L`* `3$5`%0`*`$!(,`1/`%*` %""!.!*0`35/K

+/0`+"`0$!`010+.%(/`+.`+%(!.,(0!/`"+.`!0`(.! 5`%*(1 !`!40!.*(`(%..%!/`0+`

)*#!`0$!`/00!`+"`0$!`,,(%0%+*L`/1$`/`! 14`+.`+K

$%/`(! /`0+``+))+*`)%/+*!,0%+*`0$0`5+1`**+0`3.%0!``/00!"1(`,,(%0%+*`1/%*#
!0`+*(5L`3$%$`%/`".`".+)`0$!`0.10$K

S`>7`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

$!` %.!0`+*/!-1!*!`%/`0$0`)*5` !2!(+,!./`0.5`0+`(!.*`!0`* `! 14`0+#!0$!.L`/+

0$!5`*!2!.`"%* `+10`$+3`0+`1/!`0$!`!0`/00!`+..!0(5K

$%/`/!0%+*`%/`+1.`+,,+.01*%05`0+`)'!`%0`(!.`$+3`3!`*`1/!`0$!`/00!`%*`0$!`.%#$0`35
* `1* !./0* `3$5L`%*`/+)!`/!/L`3!` +`*+0`*!! `*5`!40!.*(`(%..%!/K

%*!`0$!`2!./%+*`8=K:K7L`!0`%*0.+ 1! ``*!3`+*0!40` `0$0`%/`)+.!

!""%%!*0`* `/1,,+.0/`+0$`/00%`05,!`$!'%*#`* ` !!,`1, 0!/K`

+RZLWZRUNV
,.0`".+)`0$!` %""!.!*!/`%*` !(.%*#`0$!`%*%0%(`/00!`1/%*#`0$!`"0+.5`+.`!40!* %*#`0$!
+),+*!*0L`0$!`%),+.0*0`+*!,0`3!W2!`(!.*! `%/`0$0`!$`/00!"1(`!0`+),+*!*0`*
$2!`*`%*%0%(`/00!K

1.%*#`0$!`(%"!0%)!`+"`0$!`+),+*!*0L`0$!`/00!`*`!`)+ %"%! `)1(0%,(!`0%)!/

1/%*#`setState`%*/% !`(%"!`5(!`)!0$+ /`+.`!2!*0`$* (!./K`2!.5`0%)!`0$!`/00!`$*#!/L
!0`.!* !./`0$!`+),+*!*0`#%*`3%0$`0$!`*!3`/00!L`3$%$`%/`3$5` +1)!*00%+*`+"0!*
/5/`0$0``!0`+),+*!*0`%/`/%)%(.`0+``/00!`)$%*!K

$!*`0$!`setState`)!0$+ `%/`((! `3%0$``*!3`/00!`Q+.`,.0`+"`%0RL`0$!`+&!0`#!0/`)!.#!

%*0+`0$!`1..!*0`/00!K`+.`!4),(!L`%"`3!`$2!`*`%*%0%(`/00!`/`0$!`"+((+3%*#`+*!M
this.VWDWH = {
WH[W: 'Click me!'
};

* `3!`.1*`setState`3%0$``*!3`,.)!0!.`/`"+((+3/M
this.VHW6WDWH({
FOLNHG: true
});

$!`.!/1(0%*#`/00!`%/`/`"+((+3/M
{
FOLNHG: true,
WH[W: 'Click it!'
}

2!.5`0%)!`0$!`/00!`$*#!/L`!0`.1*/`0$!`.!* !.`"1*0%+*`#%*L`/+`0$!.!W/`*+`*!! `"+.`1/

0+` +`*50$%*#`+0$!.`0$*`/!00%*#`0$!`*!3`/00!K

S`>8`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

+3!2!.L`%*`/+)!`/!/L`3!`)5`3*0`0+`,!."+.)`/+)!`+,!.0%+*/`3$!*`0$!`/00!`%/
1, 0! L`* `!0`,.+2% !/``(('`"+.`0$0`/`"+((+3/M
this.VHW6WDWH({
FOLFNHG: true
}, () => {
console.ORJ('the state is now', this.VWDWH);
});

"`3!`,//`*5`"1*0%+*`/``/!+* `,.)!0!.`+"`0$!`setState`)!0$+ L`%0`#!0/`"%.! `3$!*

0$!`/00!`%/`1, 0! L`* `0$!`+),+*!*0`$/`!!*`.!* !.! K

$V\QFKURQRXV
$!`setState`"1*0%+*`/$+1( `(35/`!`+*/% !.! `/5*$.+*+1/L`/`0$!`+""%%(
+1)!*00%+*`/5/M

X$!.!`%/`*+`#1.*0!!`+"`/5*$.+*+1/`+,!.0%+*`+"`((/`0+`/!000!`SKKKTX

"`3!`0.5`0+`(+#`0$!`1..!*0`2(1!`+"`0$!`/00!`%*0+`0$!`+*/+(!`"0!.`3!`"%.!`setState`%*`*
!2!*0`$* (!.L`3!`#!0`0$!`+( `/00!`2(1!M
KDQGOH&OLFN() {
this.VHW6WDWH({
FOLFNHG: true,
});
console.ORJ('the state is now', this.VWDWH);
}
UHQGHU() {
UHWXUQ EXWWRQ RQ&OLFN={this.KDQGOH&OLFN}!Click me!EXWWRQ!;
}

+.`!4),(!L`0$!`,.!! %*#`/*%,,!0`*+3`.!* !./`0$!`/00!`/`*1((K

*0+`0$!`+*/+(!K`$!`.!/+*`0$%/`$,,!*/`%/`0$0`!0`'*+3/`$+3`0+`+,0%)%6!`0$!`/00!
1, 0!`%*/% !`!2!*0`$* (!./`* `%0`0$!/`0$!`+,!.0%+*`"+.`!00!.`,!."+.)*!K

+3!2!.L`%"`3!`$*#!`+1.`+ !``(%00(!`/`"+((+3/M
KDQGOH&OLFN() {
VHW7LPHRXW(() => {
this.VHW6WDWH({
FOLFNHG: true
});

console.ORJ('the state is now', this.VWDWH);

S`>9`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

});
}

$!`.!/1(0`%/`#+%*#`0+`!`/`"+((+3/M
the state is now Object {clicked: true}

$%/`%/`3$0`3!`)5`$2!`!4,!0! `%*`0$!`"%./0`,(!L`* `%0W/`!1/!`!0` +!/`*+0`$2!

*5`35`0+`+,0%)%6!`0$!`!4!10%+*`* `%0`0.%!/`0+`1, 0!`0$!`/00!`/`/++*`/`,+//%(!K

(!/!`*+0%!`0$0`setTimeout`$/`!!*`1/! `%*`0$!`!4),(!`+*(5`0+`/$+3`0$!`!$2%+.`+"
!0L`10`5+1`/$+1( `*!2!.`3.%0!`!2!*0`$* (!./`%*`0$0`35K

8VLQJWKHVWDWH
+3`0$0`3!`'*+3`$+3`0$!`/00!`3+.'/L`%0`%/`%),+.0*0`0+`1* !./0* `3$!*`%0`/$+1( `!
1/! `* `3$!*`3!`/$+1( `2+% `/0+.%*#``2(1!`%*`0$!`/00!K

"`3!`"+((+3`0$!`.1(!/L`3!`*`!/%(5`"%#1.!`+10`3$!*``+),+*!*0`/$+1( `!`/00!(!//`+.
/00!"1(L`* `$+3`0+` !(`3%0$`0$!`/00!`0+`)'!`+1.`+),+*!*0`.!1/(!`.+//`0$!
,,(%0%+*K

%./0`+"`((L`3!`/$+1( `(35/`'!!,`%*`)%* `0$0`+*(5`0$!`)%*%)(`)+1*0`+"` 0`*!! !

/$+1( `!`,10`%*0+`0$!`/00!K

+.`!4),(!L`%"`3!`$2!`0+`$*#!``(!(`3$!*``100+*`%/`(%'! L`3!`/$+1( `*+0`/0+.!`0$!

0!40`+"`0$!`(!(L`10`3!`/$+1( `+*(5`/2!``++(!*`"(#`0$0`0!((/`1/`%"`0$!`100+*`$/`!!*
(%'! `+.`*+0K

*`0$0`35L`3!`.!`1/%*#`0$!`/00!`,.+,!.(5L`* `3!`*`(35/`.!(1(0!` %""!.!*0`2(1!/

+. %*#`0+`%0K

!+* (5L`3!`/$+1( ` `0+`0$!`/00!`+*(5`0$!`2(1!/`0$0`3!`3*0`0+`1, 0!`3$!*`*`!2!*0

$,,!*/L`* `"+.`3$%$`3!`3*0`0+`)'!`0$!`+),+*!*0`.!_.!* !.K

$!`isClicked`"(#`%/`*`!4),(!`+"`0$0L`* `*+0$!.`+*!`+1( `!`0$!`2(1!`+"`*`%*,10

"%!( `!"+.!`%0`#!0/`/1)%00! K

*`#!*!.(L`3!`/$+1( `/0+.!`%*0+`0$!`/00!`+*(5`0$!`%*"+.)0%+*`*!! ! `0+`'!!,`0.'`+"`0$!

1..!*0`1/!.`%*0!."!`/00!L`/1$`/`0$!`1..!*0(5`/!(!0! `0`+"``0! `)!*1K

*+0$!.`35`0+`"%#1.!`+10`3$!0$!.`0$!`/00!`%/`0$!`.%#$0`,(!`0+`/0+.!`%*"+.)0%+*`%/`0+
$!'`%"`0$!` 0`3!`.!`,!./%/0%*#`%/`*!! ! `+10/% !`0$!`+),+*!*0`%0/!("`+.`5`%0/`$%( .!*K

S`>:`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

"`)1(0%,(!`+),+*!*0/`*!! `0+`'!!,`0.'`+"`0$!`/)!`%*"+.)0%+*L`3!`/$+1( `+*/% !.

1/%*#``/00!`)*#!.`/1$`/`! 14`0`0$!`,,(%0%+*`(!2!(K

!`3%((`*+3`(++'`0`0$!`/!/`3$!.!`3!`/$+1( `2+% `1/%*#`0$!`/00!`%"`3!`3*0`0+`"+((+3

0$!`!/0`,.0%!`#1% !(%*!/K

'HULYDEOHV
2!.5`0%)!`3!`*`+),10!`0$!`"%*(`2(1!`".+)`0$!`,.+,/L`3!`/$+1( `*+0`/0+.!`*5` 0
%*0+`0$!`/00!K

+L`"+.`!4),(!L`%"`3!`.!!%2!`0$!`1..!*5`* `0$!`,.%!`".+)`0$!`,.+,/L`* `3!`(35/

/$+3`0$!)`0+#!0$!.L`3!`)5`0$%*'`0$0`%0`3+1( `!`!00!.`0+`/0+.!`%0`%*`0$!`/00!`* `1/!`0$!
/00!`2(1!`%*/% !`0$!`.!* !.`/`"+((+3/M
FODVV Price H[WHQGV React.Component {
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
SULFH: `${props.FXUUHQF\}${props.YDOXH}`
};
}
UHQGHU() {
UHWXUQ GLY!{this.state.SULFH}GLY!;
}
}

$%/`3+1( `3+.'`%"`3!`.!0!`%0`(%'!`0$%/`%*`0$!`,.!*0`+),+*!*0M
3ULFH FXUUHQF\="$" YDOXH="100" !

$!`,.+(!)`%/`0$0L`%"`0$!`1..!*5`+.`0$!`2(1!`$*#!/` 1.%*#`0$!`(%"!0%)!`+"
0$!`Price`+),+*!*0L`0$!`/00!`*!2!.`#!0/`.!(1(0! `Q!1/!`0$!`+*/0.10+.`%/`((!
+*!R`* `0$!`,,(%0%+*`/$+3/`0$!`3.+*#`,.%!K

$!.!"+.!L`3!`/$+1( `1/!`0$!`,.+,/`0+`(1(0!``2(1!`3$!*!2!.`3!`*K

/`3!`/3`%*`Chapter 2L`(!*`,`+1.`+ !L`3!`+1( `1/!``$!(,!.`"1*0%+*` %.!0(5`%*

+1.`render`)!0$+ `/`"+((+3/M
JHW3ULFH() {
UHWXUQ `${this.props.FXUUHQF\}${this.props.YDOXH}`;
}

S`>;`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

7KHUHQGHUPHWKRG
!`/$+1( `(35/`'!!,`%*`)%* `0$0`/!00%*#`0$!`/00!`1/!/`0$!`+),+*!*0`0+`.!_.!* !.
* L`"+.`0$0`.!/+*L`3!`/$+1( `+*(5`/0+.!`%*`0$!`/00!`0$+/!`2(1!/`0$0`3!`.!`1/%*#`%*/% !
0$!`render`)!0$+ K

+.`!4),(!L`%"`3!`*!! `0+`,!./%/0` `/1/.%,0%+*/`+.`0%)!+10`2.%(!/`0$0`3!`1/!`%*/% !

+1.`+),+*!*0/L`10`0$0` +`*+0`""!0`0$!`.!* !.`%*`*5`35L`3!`/$+1( `+*/% !.`'!!,%*#
0$!)`%*``/!,.0!`)+ 1(!K

$!`"+((+3%*#`+ !`%/`3.+*#L`!1/!`3!`.!`/0+.%*#``2(1!`%*`0$!`/00!`0+`1/!`%0`(0!.L`10
3!` +`*+0`!//`%0`%*`+1.`render`)!0$+ L`* `3!`"%.!`*`1**!!//.5`render`3$!*`3!`/!0
0$!`*!3`/00!M
FRPSRQHQW'LG0RXQW() {
this.VHW6WDWH({
UHTXHVW: API.JHW(...);
});
}
FRPSRQHQW:LOO8QPRXQW {
this.state.request.DERUW();
}

*``/!*.%+`(%'!`0$!`,.!2%+1/`+*!L`%0`3+1( `!`,.!"!.(!`0+`'!!,`0$!` `.!-1!/0`/0+.! `%*

*`!40!.*(`)+ 1(!K

*+0$!.`+))+*`/+(10%+*`"+.`0$%/`'%* `+"`/%010%+*`%/`0+`/0+.!`0$!`.!-1!/0`/``,.%20!
)!)!.`+"`0$!`+),+*!*0`%*/0*!M
FRPSRQHQW'LG0RXQW() {
this.UHTXHVW = API.JHW(...);
}
FRPSRQHQW:LOO8QPRXQW() {
this.request.DERUW();
}

*`0$0`35L`0$!`.!-1!/0`%/`!*,/1(0! `%*0+`0$!`+),+*!*0`3%0$+10`""!0%*#`0$!`/00!L`/+`%0
+!/`*+0`0.%##!.`*5` %0%+*(`.!* !.%*#`3$!*`0$!`2(1!`$*#!/K

$!`"+((+3%*#`$!0`/$!!0`".+)`*`.)+2`3%((`$!(,`5+1`)'!`0$!`.%#$0` !%/%+*M
IXQFWLRQ shouldIKeepSomethingInReactState() {
LI (FDQ,&DOFXODWH,W)URP3URSV()) {
'RQ WGXSOLFDWHGDWDIURPSURSVLQVWDWH
&DOFXODWHZKDW\RXFDQLQUHQGHU PHWKRG
UHWXUQ false;
}

S`><`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

LI (!DP,8VLQJ,W,Q5HQGHU0HWKRG()) {
'RQ WNHHSVRPHWKLQJLQWKHVWDWH
LI\RXGRQ WXVHLWIRUUHQGHULQJ
)RUH[DPSOH$3,VXEVFULSWLRQVDUH
EHWWHURIIDVFXVWRPSULYDWHILHOGV
RUYDULDEOHVLQH[WHUQDOPRGXOHV
UHWXUQ false;
}

<RXFDQXVH5HDFWVWDWHIRUWKLV
UHWXUQ true;
}

5HDFWKRRNV
!0` ++'/`.!``*!3`"!01.!`%*`!0`8=K?K`$!5`(!0`1/`1/!`/00!L`* `+0$!.`!0`"!01.!/L
3%0$+10`3.%0%*#``(//`+),+*!*0L`"+.`!4),(!M
LPSRUW React, { useState } IURP 'react';

IXQFWLRQ Counter() {
WLPHVLVRXUQHZVWDWHYDULDEOHDQGVHW7LPHVWKHIXQFWLRQWRXSGDWH
WKDWVWDWH
FRQVW [times, setTimes] = XVH6WDWH(0); LVWKHLQLWLDOYDOXHRI
WLPHV

UHWXUQ (
GLYFODVV1DPH="Times"!
S!Times clicked: {WLPHV}S!
EXWWRQRQ&OLFN={() => VHW7LPHV(WLPHV + )}!Click it!EXWWRQ!
GLY!
);
}

H[SRUWGHIDXOW Counter;

/`5+1`*`/!!L`useState`.!0!/`0$!`*!3`/00!`* `0$!`"1*0%+*`0+`1, 0!`0$!`/00!L`5+1

$2!`0+` !"%*!`0$!`%*%0%(`2(1!`3$!*`5+1`((! `–`*+0`&1/0`*1)!./L`5+1`*` `*5`05,!`+"
2(1!L`!2!*`+&!0/M
LPSRUW React, { useState } IURP 'react';

IXQFWLRQ Form() {
FRQVW [data, setData] = XVH6WDWH({
QDPH: '',
DJH: 0

S`>=`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

});

UHWXUQ (
GLYFODVV1DPH="Form"!
S!
LQSXW
QDPH="name"
W\SH="text"
RQ&KDQJH={(e) => VHW'DWD({
QDPH: e.target.YDOXH,
DJH: data.DJH
})}
!
S!

S!
LQSXW
QDPH="age"
W\SH="number"
RQ&KDQJH={(e) => VHW'DWD({
DJH: e.target.YDOXH,
QDPH: data.QDPH
})}
!
S!

S!
Name: {data.QDPH} EU!
Age: {data.DJH}
S!
GLY!
);
}

H[SRUWGHIDXOW Form;

3URSW\SHV
1.`#+(`%/`0+`3.%0!`0.1(5`.!1/(!`+),+*!*0/L`* `0+` +`0$0`3!`$2!`0+` !"%*!`0$!%.
%*0!."!`%*`0$!`(!.!/0`,+//%(!`35K

"`3!`3*0`+1.`+),+*!*0/`0+`!`.!1/! `.+//`0$!`,,(%0%+*L`%0`%/`.1%(`0+`)'!`/1.!
0$0`+1.`+),+*!*0/`* `0$!%.`,.)!0!./`.!`3!((_ !"%*! `* `/0.%#$0"+.3. `0+`1/!K

S`>>`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

%0$`!0L`0$!.!`%/``,+3!."1(`0++(`0$0`(!0/`1/`!4,.!//L`%*``2!.5`/%),(!`35L`0$!`*)!`+"
0$!`,.+,/`0$0``+),+*!*0`!4,!0/`0+`.!!%2!L`* `/+)!`2(% 0%+*`.1(!/`"+.`!$`+*!`+"
0$!)K

$!`.1(!/`.!(0!`0+`0$!`05,!`+"`,.+,!.05L`/`3!((`/`0+`3$!0$!.`0$!`,.+,!.05`%/`+,0%+*(`+.
.!-1%.! K`$!.!`%/`(/+`0$!`+,0%+*`0+`3.%0!`1/0+)`2(% 0%+*`"1*0%+*/K

%*!`!0`8<K<K7L`0$!`PropTypes`00.%10!/`.!`*+`(+*#!.`,.0`+"`0$!
!0`+.!K` */0! L`5+1`*!! `0+`%*/0((``/!,.0!`,'#!`((! `prop-
types`0+`1/!`%0K
npm install --save-dev prop-types

!0W/`/0.0`3%0$``2!.5`/%),(!`!4),(!M
LPSRUW PropTypes IURP 'prop-types';
FRQVW Button = ({ text }) => EXWWRQ!{text}EXWWRQ!;
Button.SURS7\SHV = {
WH[W: PropTypes.VWULQJ
};

*`0$!`,.!2%+1/`/*%,,!0L`3!`.!0! ``/00!(!//`"1*0%+*(`+),+*!*0`0$0`.!!%2!/``0!40
,.+,`+"`0$!`string`05,!K

.!0`–`*+3`!2!.5` !2!(+,!.`0$0`+)!/`.+//`+1.`+),+*!*0`'*+3/`$+3`0+`1/!`%0`%*`0$!
.%#$0`35K

+3!2!.L` %*#`0$!`,.+,!.05`+*(5`/+)!0%)!/`%/`*+0`!*+1#$L`!1/!`%0` +!/`*+0`0!((`1/`%"

0$!`+),+*!*0`3+.'/`3%0$+10`0$!`propK

$!`100+*L`"+.`!4),(!L` +!/`*+0`+,!.0!`,.+,!.(5`3%0$+10`0!40L`* `0$!`/+(10%+*`%/`0+`).'

0$!`prop`/`.!-1%.! M
Button.SURS7\SHV = {
WH[W: PropTypes.VWULQJ.LV5HTXLUHG
};

"`` !2!(+,!.`1/!/`0$!`100+*`%*/% !`*+0$!.`+),+*!*0`3%0$+10`/!00%*#`0$!`0!40`,.+,!.05L

0$!5`.!!%2!`0$!`"+((+3%*#`3.*%*#`%*`0$!`.+3/!.`+*/+(!M

%(! `,.+,`05,!M`!-1%.! `,.+,`a0!40a`3/`*+0`/,!%"%! `%*`a100+*aK

0`%/`%),+.0*0`0+`/5`0$0`0$!`3.*%*#`%/`!)%00! `+*(5`%*` !2!(+,)!*0`)+ !K` *`0$!

,.+ 10%+*`2!./%+*`+"`!0L`0$!`propTypes`2(% 0%+*`%/` %/(! `"+.`,!."+.)*!`.!/+*/K

S`>?`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

!0`,.+2% !/`.! 5_0+_1/!`2(% 0+./`"+.`2.%+1/`*1)!./`+"`05,!/M`".+)`..5/L`0+

*1)!./L`0+`+),+*!*0/K

0`#%2!/`1/`(/+`/+)!`10%(%0%!/L`/1$`/`oneOfL`3$%$`!,0`*`..5`+"`05,!/`0$0`.!`2(%
"+.``,.0%1(.`,.+,!.05K

0`%/`%),+.0*0`0+`'!!,`%*`)%* `0$0`3!`/$+1( `(35/`0.5`0+`,//`,.%)%0%2!`,.+,/`0+

+),+*!*0/L`!1/!`0$!5`.!`/%),(!.`0+`2(% 0!`* `0+`+),.!`Q3!`3%((`/!!`0$!`!*!"%0/
%*`Chapter 10L`+10`!/0%*#`* `!1##%*#RK

//%*#`/%*#(!`,.%)%0%2!`,.+,/`$!(,/`1/`0+`"%* `3$!0$!.``+),+*!*0`/1."!`%/`0++`3% !
* `3$!0$!.`+.`*+0`%0`/$+1( `!`/,(%0`%*0+`/)((!.`/1."!/K

"`3!`.!(%6!`0$0`3!`.!` !(.%*#`0++`)*5`,.+,/`"+.``/%*#(!`+),+*!*0L`* `0$!5`.!`*+0

.!(0! `0+`!$`+0$!.L`%0`)5`!`!00!.`0+`.!0!`)1(0%,(!`2!.0%(`+),+*!*0/L`!$`+*!`3%0$
"!3!.`,.+,/`* `.!/,+*/%%(%0%!/K

+3!2!.L`%*`/+)!`/!/`%0`%/`1*2+% (!`0+`,//`+&!0/L`* `%*`0$+/!`/!/L`3!`/$+1(

!(.!`+1.`propType`+&!0`1/%*#`/$,!/K

$!`shape`"1*0%+*`(!0/`1/` !(.!`+&!0/`3%0$`*!/0! `,.+,!.0%!/`* L`"+.`!$`+*!`+"`0$+/!L

3!`*` !"%*!`0$!%.`05,!/K

+.`!4),(!L`%"`3!`.!`.!0%*#``Profile`+),+*!*0`0$0`*!! /``1/!.`+&!0`3%0$`
.!-1%.! `*)!`* `*`+,0%+*(`/1.*)!L`3!`*` !"%*!`%0`/`"+((+3/M
LPSRUW { shape, string } IURP 'prop-types';
FRQVW Profile = ({ user }) => (
GLY!{user.name} {user.surname}GLY!
);

Profile.SURS7\SHV = {
XVHU: VKDSH({
QDPH: string.LV5HTXLUHG,
VXUQDPH: string
}).LV5HTXLUHG
};

"`*+*!`+"`0$!`!4%/0%*#`!0`propTypes`/0%/"%!/`+1.`*!! /L`3!`*`.!0!``1/0+)
"1*0%+*`0+`2(% 0!``,.+,!.05M
XVHU: VKDSH({
DJH: (props, propName) => {
LI (!(props[SURS1DPH] > 0 && props[SURS1DPH] < 100)) {
UHWXUQ QHZ Error(`^SURS1DPH` must be between 1 and 99`);
}

S`>@`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

UHWXUQ null;
}
})

+.`!4),(!L`%*`0$!`,.!! %*#`/*%,,!0L`3!`2!.%"5`3$!0$!.`0$!`age`"%!( `"%0/`%*/% !``!.0%*

.*#!N`* `%"`%0` +!/*W0L`*`!..+.`%/`.!01.*! K

5HDFW'RFJHQ
+3`0$0`0$!`+1* .%!/`+"`+1.`+),+*!*0`.!`3!((_ !"%*! `0$*'/`0+`0$!`,.+,`05,!/L`0$!.!
%/`*+0$!.`+,!.0%+*`0$0`3!`*` +`0+`)'!`0$!)`!/5`0+`1/!`* `/$.!K

!`*`10+)0%((5`.!0!` +1)!*00%+*`"+.`+1.`+),+*!*0/`/0.0%*#`".+)`0$!
!"%*%0%+*`+"`0$!`,.+,`05,!/K

+` +`0$%/L`0$!.!`%/``(%..5`((! `react-docgen`0$0`3!`*`%*/0((`3%0$`0$!`"+((+3%*#

+))* M
QSPLQVWDOOJUHDFWGRFJHQ

!0`+#!*`.! /`0$!`/+1.!`+ !`+"`+1.`+),+*!*0`* `!40.0/`0$!`.!(!2*0`%*"+.)0%+*

".+)`0$!`,.+,`05,!/`* `0$!%.`+))!*0/K

+.`!4),(!L`%"`3!`#+`'`0+`0$!`"%./0`100+*`3!`.!0! M
LPSRUW { string } IURP 'prop-types';

FRQVW Button = ({ text }) => EXWWRQ!{text}EXWWRQ!;

Button.SURS7\SHV = {
WH[W: string
};

* `0$!*`.1*`0$!`"+((+3%*#`+))* M
UHDFWGRFJHQEXWWRQMV

!`#!0`0$!`"+((+3%*#`+&!0`%*`.!01.*L`/`"+((+3/M
{
"GHVFULSWLRQ": "",
"PHWKRGV": [],
"SURSV": {
"WH[W": {
"W\SH": {
"QDPH": "string"
},

S`?7`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

"UHTXLUHG": false,
"GHVFULSWLRQ": ""
}
}
}

$%/`%/`` `+&!0`0$0`.!,.!/!*0/`0$!`%*0!."!`+"`+1.`+),+*!*0/K`/`5+1`*`/!!L`0$!.!
%/``props`00.%10!`0$0`$/`+1.`0!40`,.+,!.05`+"`05,!`/0.%*#` !"%*! `%*/% !`%0K

!0W/`/!!`3$!0$!.`3!`*` +`!2!*`!00!.`5` %*#`+))!*0/M


 $JHQHULFEXWWRQZLWKWH[W
 
FRQVW Button = ({ text }) => EXWWRQ!{text}EXWWRQ!;
Button.SURS7\SHV = {

 7KHWH[WRIWKHEXWWRQ
 
WH[W: string
};

"`3!`.1*`0$!`+))* `#%*L`0$!`.!/1(0`%/`/`"+((+3/M
{
"GHVFULSWLRQ": "A generic button with text.",
"PHWKRGV": [],
"SURSV": {
"WH[W": {
"W\SH": {
"QDPH": "string"
},
"UHTXLUHG": false,
"GHVFULSWLRQ": "The text of the button."
}
}
}

!`*`*+3`1/!`0$!`.!01.*! `+&!0`0+`.!0!`0$!` +1)!*00%+*`* `/$.!`%0`.+//`+1.

0!)`+.`,1(%/$`%0`+*` %0 1K

$!`"0`0$0`0$!`+10,10`%/`%*` `)'!/`0$!`0++(`2!.5`"(!4%(!L`!1/!`%0`%/`2!.5`!/5`0+
#!*!.0!`3!`,#!/`,,(5%*#` `+&!0/`0+`0!),(0!/K

`.!(_3+.( `!4),(!`+"`+),+*!*0/` +1)!*0! `1/%*#`docgen`%/`0$!`0!.%(` `(%..5L

3$!.!`((`0$!` +/`.!`10+)0%((5`#!*!.0! `".+)`0$!`/+1.!`+ !K

S`?8`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

5HXVDEOHFRPSRQHQWV
!`$2!`/!!*`3$0`0$!`!/0`35/`0+`.!0!`+),+*!*0/`.!L`* `0$!`/!*.%+/`3$!.!`%0
)'!/`/!*/!`0+`1/!``(+(`/00!K`!`$2!`(/+`/!!*`$+3`3!`*`)'!`+1.`+),+*!*0/
.!1/(!` !"%*%*#``(!.`%*0!."!`3%0$`0$!`prop`05,!/K

!0W/`*+3` %2!`%*0+``.!(_3+.( `!4),(!`* `0'!``(++'`0`$+3`3!`*`0.*/"+.)``*+*_

.!1/(!`+),+*!*0`%*0+``.!1/(!`+*!`3%0$``#!*!.%L`* `(!*!.L`%*0!."!K

1,,+/!`3!`$2!``+),+*!*0`0$0`(+ /``+((!0%+*`+"`,+/0/`".+)`*` `!* ,+%*0L`* `%0

/$+3/`0$!`(%/0`+*`0$!`/.!!*K

0`%/``/%),(%"%! `!4),(!L`10`%0`%/`1/!"1(`"+.`1* !./0* %*#`0$!`*!!//.5`/0!,/`3!`*!! `0+

0'!`0+`)'!`+),+*!*0/`.!1/(!K

$!`+),+*!*0`%/` !"%*! `/`"+((+3/M

FODVV PostList H[WHQGV React.Component

%0$`0$!`constructor`* ``(%"!`5(!`)!0$+ L`*`!),05`..5`#!0/`//%#*! `0+`,+/0/`0+

.!,.!/!*0`0$!`%*%0%(`/00!M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
SRVWV: []
};
}
FRPSRQHQW'LG0RXQW() {
Posts.IHWFK().WKHQ(posts => {
this.VHW6WDWH({ posts });
});
}

1.%*#`componentDidMountL`0$!` `((`#!0/`"%.! L`* `/`/++*`/`0$!` 0`%/`2%((!L

0$!`,+/0/`.!`/0+.! `%*`0$!`/00!K

$%/`%/``2!.5`+))+*` 0`"!0$%*#`,00!.*L`* `3!`3%((`/!!`0$!`+0$!.`,+//%(!`,,.+$!/

%*`Chapter 5L`.+,!.`0`!0$%*#K

+/0/`%/``$!(,!.`(//`0$0`3!`1/!`0+`+))1*%0!`3%0$`0$!` L`* `%0`$/``fetch`)!0$+

0$0`.!01.*/``,.+)%/!`0$0`#!0/`.!/+(2! `3%0$``(%/0`+"`,+/0/K

S`?9`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

!`*`*+3`)+2!`%*0+`0$!`,.0`3$!.!`0$!`,+/0/`.!` %/,(5! M
UHQGHU() {
UHWXUQ (
XO!
{this.state.posts.PDS(post => (
OL NH\={post.LG}!
K!{post.WLWOH}K!
{post.H[FHUSW && S!{post.H[FHUSW}S!}
OL!
))}
XO!
);
}

*/% !`0$!`render`)!0$+ L`3!`(++,`0$.+1#$`0$!`,+/0/L`* `3!`),`!$`+*!`+"`0$!)`%*0+

`<li>`!(!)!*0K

!`//1)!`0$0`0$!`0%0(!`"%!( `%/`(35/`,.!/!*0L`* `3!`/$+3`%0`%*/% !

*`<h1>`!(!)!*0`3$%(!`0$!`!4!.,0`%/`+,0%+*(L`* `3!`/$+3`%0`%*/% !``,.#.,$`+*(5`%"`%0
!4%/0/K

$!`,.!! %*#`+),+*!*0`3+.'/`"%*!L`* `%0`$/`*+`,.+(!)/K

+3L`/1,,+/!`0$0`3!`*!! `0+`.!* !.``/%)%(.`(%/0L`10`0$%/`0%)!L`3!`3*0`0+` %/,(5``(%/0

+"`1/!./`.!!%2! `".+)`0$!`props`05,!`.0$!.`0$*`0$!`/00!`Q0+`)'!`(!.`0$0`3!`*`/!.2!
%""!.!*0`/!*.%+/RM
FRQVW UserList = ({ users }) => (
XO!
{users.PDS(user => (
OLNH\={user.LG}!
K!{user.XVHUQDPH}K!
{user.ELR && S!{user.ELR}S!}
OL!
))}
XO!
);

%2!*``+((!0%+*`+"`1/!./L`0$!`,.!! %*#`+ !`.!* !./`*`1*+. !.! `(%/0`2!.5`/%)%(.`0+`0$!

,+/0/`+*!K

$!` %""!.!*!/`.!`0$0`0$!`$! %*#L`%*`0$%/`/!L`%/`0$!`1/!.*)!`.0$!.`0$*`0%0(!`* `0$!

+,0%+*(`"%!( L`0$0`$/`0+`!`/$+3*`+*(5`%"`,.!/!*0L`%/`0$!`%+`+"`0$!`1/!.K

S`?:`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

1,(%0%*#`0$!`+ !`%/`1/1((5`*+0`0$!`!/0`/+(10%+*L`/+`(!0W/`/!!`$+3`!0`*`$!(,`1/`0+
'!!,`+1.`+ !`3%0$`+*W0`!,!0`+1./!("`QRK`$!`"%./0`/0!,`0+`.!0%*#``.!1/(!`List
+),+*!*0`%/`0+`/0.0`%0``(%00(!`* ` !+1,(!`%0`".+)`0$!` 0`%0`$/`0+` %/,(5L`* `3!` +
0$0`5` !"%*%*#``#!*!.%`+((!0%+*`,.+,!.05K`$!`)%*`.!-1%.!)!*0`%/`0$0L`"+.`0$!`,+/0/L
3!`3*0`0+` %/,(5`0$!`0%0(!`* `0$!`!4!.,0L`3$%(!L`"+.`0$!`1/!./L`3!`$2!`0+`/$+3`0$!
1/!.*)!`* `0$!`%+K

+` +`0$%/L`3!`.!0!`03+`,.+,/M`+*!`((! `titleKeyL`3$!.!`3!`/,!%"5`0$!`*)!`+"`0$!

00.%10!`0+`!` %/,(5! L`* `+*!`((! `textKey`0$0`3!`1/!`0+`/,!%"5`0$!`+,0%+*(`"%!( K

$!`,.+,/`+"`0$!`*!3`.!1/(!`List`+),+*!*0`.!`0$!`"+((+3%*#M
LPSRUW { array, string } IURP 'prop-types';
...
List.SURS7\SHV = {
FROOHFWLRQ: array,
WH[W.H\: string,
WLWOH.H\: string,
}

%*!`0$!`List`+),+*!*0`%/`*+0`#+%*#`0+`$2!`*5`/00!`+.`"1*0%+*L`3!`*`3.%0!`%0`/`
/00!(!//`"1*0%+*(`+),+*!*0M
FRQVW List = ({ collection, textKey, titleKey }) => (
XO!
{collection.PDS(item =>
,WHP
NH\={item.id}
WH[W={item[textKey]}
WLWOH={item[titleKey]}
!
)}
XO!
);

$!`List`+),+*!*0`.!!%2!/`0$!`,.+,/L`* `%0!.0!/`+2!.`0$!`+((!0%+*L`),,%*#`((`0$!
%0!)/`%*0+`*+0$!.`+),+*!*0`Q0$0`3!`.!`#+%*#`0+`.!0!`*!40RK`/`5+1`*`/!!L`3!`.!
,//%*#`0+`0$!`$%( .!*`0%0(!/`* `0!40`props`0$0`.!,.!/!*0`0$!`2(1!/`+"`0$!`)%*`00.%10!
* `0$!`+,0%+*(`+*!L`.!/,!0%2!(5K

$!`Item`+),+*!*0`%/`2!.5`/%),(!`* `(!*M
LPSRUW { string } IURP 'prop-types';

FRQVW Item = ({ text, title }) => (

OL!

S`?;`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

K!{title}K!
{text && S!{text}S!}
OL!
);
Item.SURS7\SHV = {
text: string,
title: string
};

+L`3!W2!`.!0! `03+`+),+*!*0/`3%0$``3!((_ !"%*! `/1."!`.!`0$0`*`3!`1/!

0+#!0$!.`0+` %/,(5`,+/0/L`1/!./`+.`*5`+0$!.`'%* /`+"`(%/0/K`)((!.`+),+*!*0/`.!`!00!.
"+.`/!2!.(`.!/+*/M`"+.`!4),(!L`0$!5`.!`)+.!`)%*0%*(!`* `0!/0(!L`3$%$`)'!/`%0
!/%!.`0+`"%* `* `"%4`1#/K

.!0`–`3!`*`*+3`.!3.%0!`+1.`03+`+),+*!*0/L`PostsListL`* `UsersListL`0+`)'!
0$!)`1/!`0$!`#!*!.%`.!1/(!`(%/0`* `2+% ` 1,(%0%*#`+ !K

!0W/`)+ %"5`0$!`render`)!0$+ `+"`PostsLists`/`"+((+3/M

UHQGHU() {
UHWXUQ (
/LVW
FROOHFWLRQ={this.state.SRVWV}
WH[W.H\="excerpt"
WLWOH.H\="title"
!
);
}

$!*L`3!`3%((`)+ %"5`0$!`UserList`"1*0%+*`/`"+((+3/M
FRQVW UserList = ({ users }) => (
/LVW
FROOHFWLRQ={users}
WH[W.H\="bio"
WLWOH.H\="username"
!
);

!`3!*0`".+)``/%*#(!_,1.,+/!`+),+*!*0`0+``.!1/(!`+*!`1/%*#`0$!`,.+,/`0+`.!0!`
#!*!.%`* `3!((_ !"%*! `%*0!."!K

0`%/`*+3`,+//%(!`0+`.!1/!`0$%/`+),+*!*0`/`)*5`0%)!/`/`3!`*!! `%*`+1.`,,(%0%+*L
* `!2!.5` !2!(+,!.`*`!/%(5`1* !./0* `$+3`0+`%),(!)!*0`%0`0$*'/`0+`0$!`,.+,`05,!/K

!`+1( `(/+`#+``/0!,`"1.0$!.`1/%*#`react-docgen`0+` +1)!*0`+1.`.!1/(!`(%/0L`/`3!

$2!`/!!*`%*`0$!`,.!2%+1/`/!0%+*K

S`?<`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

$!`!*!"%0/`+"`1/%*#``.!1/(!`+),+*!*0`+2!.``+),+*!*0`0$0`%/`+1,(! `3%0$`0$!` 0

%0`$* (!/`.!`)*5K

1,,+/!L`"+.`!4),(!L`0$0`3!`3*0`0+` `(+#%`0+`$% !`* `/$+3`0$!`+,0%+*(`"%!( `+*(5

3$!*``100+*`%/`(%'! K

(0!.*0%2!(5L`,!.$,/`0$!.!`%/``*!3`.!-1%.!)!*0`0+` ``$!'`* L`%"`0$!`0%0(!`00.%10!`%/

(+*#!.`0$*`03!*05_"%2!`$.0!./L`%0`#!0/`10`* `$5,$!*0! K

!`*`*+3`)'!`0$!`$*#!`0`+*!`/%*#(!`,+%*0L`* `((`0$!`+),+*!*0/`0$0`.!`1/%*#`%0
3%((`!*!"%0`".+)`0$!`)+ %"%0%+*K

)UDJPHQWV
%*!`2!./%+*`!0`8=K9K7`3!`.!`(!`0+`.!01.*`..5/`* `/0.%*#/`".+)`0$!`.!* !.`)!0$+ K
!"+.!L`!0`"+.! `1/`0+`.!01.*`*`!(!)!*0`3.,,! `3%0$`<div>`+.`*5`+0$!.`0#N`%0`3/
*+0`,+//%(!`0+`.!01.*`*`..5`+.`/0.%*#` %.!0(5M
([DPSOH5HWXUQLQJDQDUUD\RIHOHPHQWV

UHQGHU() {
1RZ\RXGRQ WQHHGWRZUDSOLVWLWHPVLQDQH[WUDHOHPHQW
UHWXUQ [
OLNH\="1"!First itemOL!,
OLNH\="2"!Second itemOL!,
OLNH\="3"!Third itemOL!
];
}

([DPSOH5HWXUQLQJDVWULQJ

UHQGHU() {
UHWXUQ 'Hello World!';
}

S`?=`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

(/+L`!0`$/`%),(!)!*0! ``*!3`"!01.!`((! `.#)!*0L`3$%$`(/+`3+.'/`/``/,!%(

3.,,!.`"+.`!(!)!*0/K` 0`*`!`/,!%"%! `3%0$`!),05`0#/`Q<></>R`+.` %.!0(5`5`1/%*#
React.FragmentM

([DPSOH8VLQJHPSW\WDJV!!
UHQGHU() {
UHWXUQ (
!
<ComponentA />
<ComponentB />
<ComponentC />
!
);
}

([DPSOH8VLQJ5HDFW)UDJPHQW
UHQGHU() {
UHWXUQ (
5HDFW)UDJPHQW!
<h1>An h1 heading</h1>
Some text here.
<h2>An h2 heading</h2>
More text here.
Even more text here.
5HDFW)UDJPHQW!
);
}

([DPSOH,PSRUWLQJWKH)UDJPHQW
LPSRUW React, { )UDJPHQW } IURP 'react';

UHQGHU() {
UHWXUQ (
)UDJPHQW!
<h1>An h1 heading</h1>
Some text here.
<h2>An h2 heading</h2>
More text here.
Even more text here.
)UDJPHQW!
);
}

S`?>`T
.!0%*#`.1(5`!1/(!`+),+*!*0/ $,0!.`:

6XPPDU\
$!`&+1.*!5`0+`(!.*`$+3`0+`)'!`.!1/(!`+),+*!*0/`$/`+)!`0+`0$!`!* K

!`/0.0! `".+)`` !!,`/01 5`+"`0$!`/%/`* `(++'%*#`0`0$!` %""!.!*!/`!03!!*`/00!"1(

* `/00!(!//`+),+*!*0/L`* `3!`/3`*`!4),(!`+"`$+3`0+`)'!``0%#$0(5`+1,(!
+),+*!*0`.!1/(!K`!W2!`(++'! `0`0$!`%*0!.*(`/00!`+"``+),+*!*0L`* `0`3$0`,+%*0`%0
%/`!00!.`0+`2+% `1/%*#`%0K`!`(!.*! `0$!`/%/`+"`,.+,`05,!/`* `,,(%! `0$+/!`+*!,0/`0+
0$!`.!1/(!`+),+*!*0/`3!`.!0! K

%*((5L`3!`(++'! `0`$+3`(%2%*#`/05(!`#1% !/`*`$!(,`1/`0+`+))1*%0!`!00!.`3%0$`+0$!.

)!)!./`+"`+1.`0!)L`0+`2+% `.!0%*#` 1,(%0! `+),+*!*0/`* `0+`!*"+.!`+*/%/0!*5
3%0$%*`0$!`,,(%0%+*K

!`.!`*+3`.! 5`0+`(!.*`0$!`2.%+1/`0!$*%-1!/`3!`*`,10`%*`,(!`0+`+),+/!`+1.
+),+*!*0/K

*`0$!`*!40`$,0!.L`3!`3%((`0('`+10`0$!`+))1*%0%+*`!03!!*`+),+*!*0/`* ` +K

S`??`T
 
&RPSRVH$OOWKH7KLQJV
*`0$!`,.!2%+1/`$,0!.`QChapter 3L`.!0!`.1(5`!1/(!`+),+*!*0/RL`3!`/3`$+3`0+
.!0!`.!1/(!`+),+*!*0/`3%0$``(!*`%*0!."!K`+3L`%0W/`0%)!`0+`(!.*`$+3`0+`)'!
0$+/!`+),+*!*0/`+))1*%0!`3%0$`!$`+0$!.`!""!0%2!(5K

!0`%/`,+3!."1(`!1/!`%0`(!0/`5+1`1%( `+),(!4`,,(%0%+*/`+),+/%*#`/)((L`0!/0(!L
* `)%*0%*(!`+),+*!*0/K`,,(5%*#`0$%/`,. %#)L`5+1`*`0'!`+*0.+(`+"`!2!.5
/%*#(!`,.0`+"`0$!`,,(%0%+*K

*`0$%/`$,0!.L`3!`3%((`#+`0$.+1#$`/+)!`+"`0$!`)+/0`,+,1(.`+),+/%0%+*`,00!.*/`*
0++(/K

!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M

+3`+),+*!*0/`+))1*%0!`3%0$`!$`+0$!.`1/%*#`,.+,/`* `$%( .!*

$!`+*0%*!.`* `,.!/!*00%+*(`,00!.*`* `$+3`%0`*`)'!`+1.`+ !`)+.!
)%*0%*(!
$!`,.+(!)`)%4%*/`0.%! `0+`/+(2!`* `3$5`0$!5`"%(!
$0` /`.!`* `$+3`3!`*`/0.101.!`+1.`,,(%0%+*/`%*``!00!.`35L
0$*'/`0+`0$!)
$!`recompose`(%..5`3%0$`%0/`.! 5_) !`"1*0%+*/
+3`3!`*`%*0!.0`3%0$`0$!`+*0!40`* `2+% `+1,(%*#`+1.`+),+*!*0/`0+`%0
$0`0$!`"1*0%+*`+"`0$!`$%( `+),+*!*0`,00!.*`%/`* `3$0`%0/`!*!"%0/`.!
+),+/!`((`0$!`$%*#/ $,0!.`;

&RPPXQLFDWLRQEHWZHHQFRPSRQHQWV
!1/%*#`"1*0%+*/`%/`+*!`+"`+1.`#+(/`/` !2!(+,!./L`* `3!`$2!`/!!*`$+3`!0`)'!/`%0
!/5`0+`.!0!`.!1/(!`+),+*!*0/K`!1/(!`+),+*!*0/`*`!`/$.! `.+//`)1(0%,(!
+)%*/`+"`5+1.`,,(%0%+*`0+`2+% ` 1,(%0%+*K

)((`+),+*!*0/`3%0$``(!*`%*0!."!`*`!`+),+/! `0+#!0$!.`0+`.!0!`+),(!4
,,(%0%+*/`0$0`.!`,+3!."1(`* `)%*0%*(!`0`0$!`/)!`0%)!K

+),+/%*#`!0`+),+*!*0/`%/`,.!005`/0.%#$0"+.3. N`5+1`&1/0`$2!`0+`%*(1 !`0$!)`%*

0$!`render`)!0$+ M
LPSRUW { object } IURP 'prop-types';
FRQVW Profile = ({ user }) => (
GLY!
3LFWXUHSURILOH,PDJH8UO={user.SURILOH,PDJH8UO} !
8VHU1DPHQDPH={user.QDPH} VFUHHQ1DPH={user.VFUHHQ1DPH} !
GLY!
);
Profile.SURS7\SHV = {
XVHU: object
};

+.`!4),(!L`5+1`*`.!0!``Profile`+),+*!*0`5`/%),(5`+),+/%*#
`Picture`+),+*!*0`0+` %/,(5`0$!`,.+"%(!`%)#!`* ``UserName`+),+*!*0`0+` %/,(5
0$!`*)!`* `0$!`/.!!*`*)!`+"`0$!`1/!.K

*`0$%/`35L`5+1`*`,.+ 1!`*!3`,.0/`+"`0$!`1/!.`%*0!."!`2!.5`-1%'(5L`3.%0%*#`+*(5`
"!3`(%*!/`+"`+ !K`$!*!2!.`5+1`+),+/!`+),+*!*0/L`/`%*`0$!`,.!! %*#`!4),(!L`5+1
/$.!` 0`!03!!*`0$!)`1/%*#`,.+,/K`.+,/`.!`0$!`35``,.!*0`+),+*!*0`*`,//`%0/
0` +3*`0$!`0.!!`0+`!2!.5`+),+*!*0`0$0`*!! /`%0`Q+.`,.0`+"`%0RK

$!*``+),+*!*0`,//!/`/+)!`,.+,/`0+`*+0$!.`+),+*!*0L`%0`%/`((! `0$!`+3*!.L
%..!/,!0%2!`+"`0$!`,.!*0_$%( `.!(0%+*/$%,`!03!!*`0$!)K

+.`!4),(!L`%*`0$!`,.!! %*#`/*%,,!0L`Profile`%/`*+0`0$!` %.!0`,.!*0

+"`Picture`Q0$!`div`0#`%/RL`10`Profile`+3*/`Picture`!1/!`%0`,//!/` +3*`0$!`,.+,/
0+`%0K

S`@7`T
+),+/!`((`0$!`$%*#/ $,0!.`;

&KLOGUHQ
$!.!`%/``/,!%(`,.+,`0$0`*`!`,//! `".+)`0$!`+3*!./`0+`0$!`+),+*!*0/` !"%*!
%*/% !`0$!%.`render`)!0$+ —$%( .!*K

*`0$!`!0` +1)!*00%+*L`%0`%/` !/.%! `/`+,-1!`!1/!`%0`%/``,.+,!.05`0$0` +!/`*+0

0!((`5+1`*50$%*#`+10`0$!`2(1!`%0`+*0%*/K`1+),+*!*0/` !"%*! `%*/% !`0$!`render
)!0$+ `+"``,.!*0`+),+*!*0`1/1((5`.!!%2!`,.+,/`0$0`.!`,//! `/`00.%10!/`+"`0$!
+),+*!*0`%0/!("`%*` L`+.`/``/!+* `,.)!0!.`+"`0$!`createElement`"1*0%+*K
+),+*!*0/`*`(/+`!` !"%*! `3%0$`*!/0! `+),+*!*0/`%*/% !`0$!)L`* `0$!5`*`!//
0$+/!`$%( .!*`1/%*#`0$!`$%( .!*`propK

+*/% !.`0$0`3!`$2!``Button`+),+*!*0`0$0`$/``0!40`,.+,!.05`.!,.!/!*0%*#`0$!`0!40
+"`0$!`100+*M
LPSRUW { string } IURP 'prop-types';

FRQVW Button = ({ text }) => (

EXWWRQFODVV1DPH="btn"!{text}EXWWRQ!
);
Button.SURS7\SHV = {
WH[W: VWULQJ
};

0`*`!`1/! `%*`0$!`"+((+3%*#`35M
%XWWRQ WH[W="Click me!" !

0`*`.!* !.`0$!`"+((+3%*#`+ !M
EXWWRQ FODVV="btn"!Click me!EXWWRQ!

+3L`/1,,+/!`3!`3*0`0+`1/!`0$!`/)!`100+*`3%0$`0$!`/)!`(//`*)!`%*`)1(0%,(!`,.0/
+"`+1.`,,(%0%+*L`* `3!`(/+`3*0`0+`!`(!`0+` %/,(5`)+.!`0$*``/%),(!`/0.%*#K`1.`
+*/%/0/`+"`100+*/`3%0$`0!40L`100+*/`3%0$`0!40`* `%+*/L`* `100+*/`3%0$`0!40`* `(!(/K

*`)+/0`/!/L``#++ `/+(10%+*`3+1( `!`0+` `)1(0%,(!`,.)!0!./`0+`0$!`Button`+.`0+

.!0!` %""!.!*0`2!./%+*/`+"`0$!`ButtonL`!$`+*!`3%0$`%0/`/%*#(!`/,!%(%60%+*L`"+.
!4),(!L`IconButtonK

+3!2!.L`%"`3!`.!(%6!`0$0`+1.`Button`+1( `!`&1/0``3.,,!.L`* `3!`3*0`0+`!`(!`0+

.!* !.`*5`!(!)!*0`%*/% !`%0L`3!`*`1/!`0$!`children`,.+,!.05K

S`@8`T
+),+/!`((`0$!`$%*#/ $,0!.`;

!`*` +`0$0`!/%(5`5`$*#%*#`0$!`Button`+),+*!*0`".+)`0$!`,.!! %*#`!4),(!`0+

!`/%)%(.`0+`0$!`"+((+3%*#`/*%,,!0M
LPSRUW { array } IURP 'prop-types';

FRQVW Button = ({ children }) => (

EXWWRQ FODVV1DPH="btn"!{children}EXWWRQ!
);
Button.SURS7\SHV = {
FKLOGUHQ: array
};

,,(5%*#`0$%/`$*#!L`3!`.!`*+0`(%)%0! `0+``/%),(!`/%*#(!`0!40`,.+,!.05L`10`3!`*`,//
*5`!(!)!*0`0+`ButtonL`* `%0`%/`.!* !.! `%*`,(!`+"`0$!`children`,.+,!.05K

*`0$%/`/!L`*5`!(!)!*0`0$0`3!`3.,`%*/% !`0$!`Button`+),+*!*0`3%((`!`.!* !.! `/`

$%( `+"`0$!`100+*`!(!)!*0`3%0$`0$!`btn`(//`*)!K

+.`!4),(!L`%"`3!`3*0`0+`.!* !.`*`%)#!`%*/% !`0$!`100+*`* `/+)!`0!40`3.,,! `%*0+`

/,*L`3!`*` +`0$%/M
%XWWRQ!
LPJ VUF="..." DOW="..."!
VSDQ!Click me!VSDQ!
%XWWRQ!

$!`,.!! %*#`/*%,,!0`#!0/`.!* !.! `%*`0$!`.+3/!.`/`"+((+3/M

EXWWRQ FODVV1DPH="btn"!
LPJ VUF="..." DOW="..." !
VSDQ!Click me!VSDQ!
EXWWRQ!

$%/`%/``,.!005`+*2!*%!*0`35`0+`((+3`+),+*!*0/`0+`!,0`*5`children`!(!)!*0/`*
3.,`0$+/!`!(!)!*0/`%*/% !``,.! !"%*! `,.!*0K

+3L`3!`*`,//`%)#!/L`(!(/L`* `!2!*`+0$!.`!0`+),+*!*0/`%*/% !`0$!`ButtonL`*

0$!5`3%((`!`.!* !.! `/`%0/`$%( .!*K

/`5+1`*`/!!`%*`0$!`,.!! %*#`!4),(!L`3!` !"%*! `0$!`children`,.+,!.05`/`*`..5L

3$%$`)!*/`0$0`3!`*`,//`*5`*1)!.`+.`!(!)!*0/`/`0$!`+),+*!*0W/`$%( .!*K

!`*`,//``/%*#(!`$%( L`/`/$+3*`%*`0$!`"+((+3%*#`+ !M
%XWWRQ!
VSDQ!Click me!VSDQ!
%XWWRQ!

S`@9`T
+),+/!`((`0$!`$%*#/ $,0!.`;

"`3!`,//``/%*#(!`$%( L`3!`#!0`0$!`"+((+3%*#`+10,10M
Failed prop type: Invalid prop `children` of type `object` supplied to
`Button`, expected `array`.

$%/`%/`!1/!L`3$!*``+),+*!*0`$/``/%*#(!`$%( L`!0`+,0%)%6!/`0$!`.!0%+*`+"`0$!
!(!)!*0/`* `2+% /`((+0%*#`*`..5`"+.`,!."+.)*!`.!/+*/K

!`*`!/%(5`"%4`0$%/`3.*%*#`5`/!00%*#`0$!`children`,.+,`0+`!,0`0$!`"+((+3%*#`prop
05,!/M
LPSRUW { oneOfType, array, element } IURP 'prop-types';

Button.SURS7\SHV = {
FKLOGUHQ: RQH2I7\SH([
DUUD\,
HOHPHQW
])
};

7KHFRQWDLQHUDQGSUHVHQWDWLRQDOSDWWHUQ
*`0$!`(/0`$,0!.L`3!`/3`$+3`0+`0'!``+1,(! `+),+*!*0`* `)'!`%0`.!1/(!`/0!,`5
/0!,K` *`0$%/`/!0%+*L`3!`3%((`/!!`$+3`0+`,,(5``/%)%(.`,00!.*`0+`+1.`+),+*!*0/`0+`)'!
0$!)`(!*!.`* `)+.!`)%*0%*(!K

!0`+),+*!*0/`05,%((5`+*0%*``)%4`+"`(+#%`* `,.!/!*00%+*K`5`(+#%L`3!`.!"!.`0+
*50$%*#`0$0`%/`1*.!(0! `0+`0$!` L`/1$`/` `((/L` 0`)*%,1(0%+*L`* `!2!*0
$* (!./K`$!`,.!/!*00%+*`%/L`%*/0! L`0$!`,.0`%*/% !`0$!`render`)!0$+ `3$!.!`3!`.!0!
0$!`!(!)!*0/`0+`!` %/,(5! `+*`0$!` K

*`!0L`0$!.!`%/``/%),(!`* `,+3!."1(`,00!.*L`'*+3*`/`+*0%*!.`* `,.!/!*00%+*(L

3$%$`3!`*`,,(5`3$!*`.!0%*#`+),+*!*0/`0$0`$!(,`1/`0+`/!,.0!`0$+/!`03+`+*!.*/K

.!0%*#`3!((_ !"%*! `+1* .%!/`!03!!*`(+#%`* `,.!/!*00%+*`*+0`+*(5`)'!/

+),+*!*0/`)+.!`.!1/(!L`10`%0`,.+2% !/`)*5`+0$!.`!*!"%0/L`3$%$`5+1`3%((`(!.*`+10
%*`0$%/`/!0%+*K`#%*L`+*!`+"`0$!`!/0`35/`0+`(!.*`*!3`+*!,0/`%/`5`/!!%*#`,.0%(
!4),(!/L`/+`(!0W/` !(2!`%*0+`/+)!`+ !K

1,,+/!`3!`$2!``+),+*!*0`0$0`1/!/`#!+(+0%+*` /`0+`#!0`0$!`,+/%0%+*`+"`0$!`1/!.L
* `%0` %/,(5/`0$!`(0%01 !`* `(+*#%01 !`+*`0$!`,#!`%*`0$!`.+3/!.K

S`@:`T
+),+/!`((`0$!`$%*#/ $,0!.`;

%./0L`3!`.!0!``Geolocation.js`"%(!`%*`+1.`+),+*!*0/`"+( !.
Qcomponents/Geolocation/index.jsxR`* ` !"%*!`0$!`Geolocation`+),+*!*0`1/%*#
`class`+),+*!*0M
FODVV Geolocation H[WHQGV Component

!`0$!*` !"%*!``constructorL`3$!.!`3!`%*%0%(%6!`0$!`%*0!.*(`/00!`* `%* `0$!`!2!*0

$* (!./M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
ODWLWXGH: null,
ORQJLWXGH: null
};
this.KDQGOH6XFFHVV = this.handleSuccess.ELQG(this);
}

+3L`3!`*`1/!`0$!`componentDidMount`(('`0+`"%.!`0$!`.!-1!/0`0+`0$!` /M
FRPSRQHQW'LG0RXQW() {
LI (navigator.geolocation) {
navigator.geolocation.JHW&XUUHQW3RVLWLRQ(this.KDQGOH6XFFHVV);
}
}

$!*`0$!`.+3/!.`.!01.*/`0$!` 0L`3!`/0+.!`0$!`.!/1(0`%*0+`0$!`/00!`1/%*#`0$!`"+((+3%*#
"1*0%+*M
KDQGOH6XFFHVV({ coords: { latitude, longitude } }) {
this.VHW6WDWH({
ODWLWXGH,
ORQJLWXGH
});
}

%*((5L`3!`/$+3`0$!`latitude`* `longitude`1/%*#`0$!`render`)!0$+ M
UHQGHU() {
UHWXUQ (
GLY!
K!Geolocation:K!
GLY!Latitude: {this.state.ODWLWXGH}GLY!
GLY!Longitude: {this.state.ORQJLWXGH}GLY!
GLY!
);
}

S`@;`T
+),+/!`((`0$!`$%*#/ $,0!.`;

0`%/`%),+.0*0`0+`*+0!`0$0L` 1.%*#`0$!`"%./0`.!* !.L`latitude`* `longitude

.!`null`!1/!`3!`/'`0$!`.+3/!.`"+.`0$!`++. %*0!/`3$!*`0$!`+),+*!*0`%/`)+1*0! K
*``.!(_3+.( `+),+*!*0L`5+1`)%#$0`3*0`0+` %/,(5``/,%**!.`1*0%(`0$!` 0`#!0/
.!01.*! N`0+` +`0$0L`5+1`*`1/!`+*!`+"`0$!`+* %0%+*(`0!$*%-1!/`3!`/3`%*`Chapter
2L`(!*`,`+1.`+ !K

+3L`0$%/`+),+*!*0` +!/`*+0`$2!`*5`,.+(!)/L`* `%0`3+.'/`/`!4,!0! K`+1( *W0`%0`!

*%!`0+`/!,.0!`%0`".+)`0$!`,.0`3$!.!`0$!`,+/%0%+*`#!0/`.!-1!/0! `* `(+ ! `0+`%0!.0!
"/0!.`+*`%0O

!`3%((`%/+(0!`0$!`,.!/!*00%+*(`,.0`+"`0$!`)%*`+),+*!*0`5`3$!*`"+((+3%*#`0$!
+*0%*!.`* `,.!/!*00%+*(`,00!.*K

*`0$%/`,00!.*L`!2!.5`+),+*!*0`%/`/,(%0`%*0+`03+`/)((!.`+*!/L`!$`+*!`3%0$`%0/`(!.
.!/,+*/%%(%0%!/K

$!`+*0%*!.`'*+3/`!2!.50$%*#`+10`0$!`(+#%`+"`0$!`+),+*!*0L`* `%0W/`3$!.!`0$!` /
.!`((! K` 0`(/+` !(/`3%0$` 0`)*%,1(0%+*`* `!2!*0`$* (%*#K

$!`,.!/!*00%+*(`+),+*!*0`%/`3$!.!`0$!` `%/` !"%*! L`* `%0`.!!%2!/` 0`%*`0$!`"+.)`+"

,.+,/`".+)`0$!`+*0%*!.K`%*!`0$!`,.!/!*00%+*(`+),+*!*0`%/`1/1((5`(+#%_".!!L`3!`*
.!0!`%0`/``"1*0%+*(L`/00!(!//`+),+*!*0K

$!.!`.!`*+`.1(!/`0$0`/5`0$0`0$!`,.!/!*00%+*(`+),+*!*0`)1/0`*+0`$2!``/00!K`+.
!4),(!L`%0`+1( `'!!,`` `/00!`%*/% !`%0K` *`0$%/`/!L`3!`*!! ``+),+*!*0`0+` %/,(5`0$!
(0%01 !`* `(+*#%01 !L`/+`3!`.!`#+%*#`0+`1/!``/%),(!`"1*0%+*K

%./0`+"`((L`3!`/$+1( `.!*)!`+1.`Geolocation`+),+*!*0`0+`GeolocationContainerM
FODVV GeolocationContainer H[WHQGV Component

!`3%((`(/+`$*#!`0$!`"%(!*)!`".+)`Geolocation.js`0+`GeolocationContainer.jsxK

$%/`.1(!`%/`*+0`/0.%0L`10`%0`%/``!/0`,.0%!`0$0W/`3% !(5`1/! `%*`0$!`!0`+))1*%05`0+

,,!* `Container`0+`0$!`!* `+"`0$!`Container`+),+*!*0`*)!`* `#%2!`0$!`+.%#%*(
*)!`0+`0$!`,.!/!*00%+*(`+*!K

!`(/+`$2!`0+`$*#!`0$!`%),(!)!*00%+*`+"`0$!`render`)!0$+ `* `.!)+2!`((`0$!`

,.0/`+"`%0L`/`"+((+3/M
UHQGHU() {
UHWXUQ (
*HRORFDWLRQ {...this.VWDWH} !
);
}

S`@<`T
+),+/!`((`0$!`$%*#/ $,0!.`;

/`5+1`*`/!!`%*`0$!`,.!! %*#`/*%,,!0L`%*/0! `+"`.!0%*#`0$!` `!(!)!*0/`%*/% !`0$!

render`)!0$+ `+"`0$!`+*0%*!.L`3!`&1/0`1/!`0$!`,.!/!*00%+*(`+*!`Q3$%$`3!`3%((`.!0!
*!40RL`* `3!`,//`0$!`/00!`0+`%0K

$!`state`$/`0$!`(0%01 !`* `(+*#%01 !`,.+,!.0%!/L`3$%$`.!`null`5` !"1(0L`* `0$!5

+*0%*`0$!`.!(`,+/%0%+*`+"`0$!`1/!.`3$!*`0$!`.+3/!.`"%.!/`0$!`(('K

!`.!`1/%*#`0$!`/,.! `00.%10!`+,!.0+.L`3$%$`3!`/3`%*`Chapter 2L`(!*`,`+1.

+ !N`%0`%/``+*2!*%!*0`35`0+`,//`0$!`00.%10!/`+"`0$!`stateL`3$%$`(!0/`1/`2+% `3.%0%*#
prop`5`prop`)*1((5K

!0W/`.!0!``*!3`"%(!L`((! `Geolocation.jsL`3$!.!`3!` !"%*!`0$!`/00!(!//`"1*0%+*(

+),+*!*0L`/`"+((+3/M
LPSRUW React IURP 'react';
LPSRUW { number } IURP 'prop-types';
FRQVW Geolocation = ({ latitude, longitude }) => (
GLY!
K!Geolocation:K!
GLY!Latitude: {ODWLWXGH}GLY!
GLY!Longitude: {ORQJLWXGH}GLY!
GLY!
);

H[SRUWGHIDXOW Geolocation;

00!(!//`"1*0%+*(`+),+*!*0/`.!`*`%*.! %(5`!(!#*0`35`0+` !"%*!` /K`$!5`.!`,1.!

"1*0%+*/`0$0L`#%2!*``stateL`.!01.*`0$!`!(!)!*0/`+"`%0K

*`0$%/`/!L`+1.`"1*0%+*`.!!%2!/`0$!`latitude`* `longitude`".+)`0$!`+3*!.L`* `%0

.!01.*/`0$!`).'1,`/0.101.!`0+` %/,(5`%0K

!`/1.!(5`3*0`0+`"+((+3`0$!`!/0`,.0%!/`* ` !"%*!``(!.`%*0!."!`"+.`+1.`+),+*!*0L
/+`3!`1/!`propTypes`0+` !(.!`0$!`,.+,!.0%!/`0$0`0$!`+),+*!*0`*!! /M
Geolocation.SURS7\SHV = {
ODWLWXGH: number,
ORQJLWXGH: number
};

"`5+1`.1*`0$!`+),+*!*0/`%*`0$!`.+3/!.`0$!`"%./0`0%)!L`0$!`.+3/!.`3%((`.!-1%.!`5+1.
,!.)%//%+*`0+`((+3`%0`0+`'*+3`+10`5+1.`(+0%+*M

S`@=`T
+),+/!`((`0$!`$%*#/ $,0!.`;

"0!.`5+1`((+3`0$!`.+3/!.`0+`'*+3`5+1.`(+0%+*L`5+1`3%((`/!!`/+)!0$%*#`(%'!`0$%/M

+((+3%*#`0$!`+*0%*!.`* `,.!/!*00%+*(`,00!.*L`3!`.!0! `` 1)`.!1/(!

+),+*!*0`0$0`3!`*`,10`%*`+1.`05(!` 1% !`/+`0$0`3!`*`,//`"'!`++. %*0!/`0+`%0K

"`%*`/+)!`+0$!.`,.0/`+"`0$!`,,(%0%+*`3!`*!! `0+` %/,(5`0$!`/)!` 0`/0.101.!L`3!` +

*+0`$2!`0+`.!0!``*!3`+),+*!*0N`3!`&1/0`3.,`0$%/`+*!`%*0+``*!3`+*0%*!.`0$0L`"+.
!4),(!L`+1( `(+ `0$!`(0%01 !`* `(+*#%01 !`".+)`` %""!.!*0`!* ,+%*0K

0`0$!`/)!`0%)!L`+0$!.` !2!(+,!./`%*`+1.`0!)`*`%),.+2!`0$!`+*0%*!.`0$0`1/!/
#!+(+0%+*`5` %*#`/+)!`!..+._$* (%*#`(+#%L`3%0$+10`""!0%*#`%0/`,.!/!*00%+*K

$!5`*`!2!*`1%( ``0!),+..5`,.!/!*00%+*(`+),+*!*0`&1/0`0+` %/,(5`* ` !1#` 0

* `0$!*`.!,(!`%0`3%0$`0$!`.!(`,.!/!*00%+*(`+),+*!*0`3$!*`%0`%/`.! 5K

!%*#`(!`0+`3+.'`%*`,.((!(`+*`0$!`/)!`+),+*!*0`%/``%#`3%*`"+.`0!)/L`!/,!%((5`"+.
0$+/!`+),*%!/`3$!.!`1%( %*#`%*0!."!/`%/`*`%0!.0%2!`,.+!//K

S`@>`T
+),+/!`((`0$!`$%*#/ $,0!.`;

$%/`,00!.*`%/`/%),(!`10`2!.5`,+3!."1(L`* `3$!*`,,(%! `0+`%#`,,(%0%+*/L`%0`*`)'!

` %""!.!*!`3$!*`%0`+)!/`0+`0$!`/,!! `+"` !2!(+,)!*0`* `)%*0%*%(%05`+"`0$!`,.+&!0K

*`0$!`+0$!.`$* L`,,(5%*#`0$%/`,00!.*`3%0$+10``.!(`.!/+*`*`#%2!`1/`0$!`+,,+/%0!
,.+(!)`* `)'!`0$!`+ !/!`(!//`1/!"1(`/`%0`%*2+(2!/`0$!`.!0%+*`+"`)+.!`"%(!/`*
+),+*!*0/K

+L`3!`/$+1( `0$%*'`.!"1((5`3$!*`3!` !% !`0$0``+),+*!*0`$/`0+`!`.!"0+.!

"+((+3%*#`0$!`+*0%*!.`* `,.!/!*00%+*(`,00!.*K

*`#!*!.(L`0$!`.%#$0`,0$`0+`"+((+3`%/`/0.0%*#`3%0$``/%*#(!`+),+*!*0`* `/,(%00%*#`%0`+*(5
3$!*`0$!`(+#%`* `0$!`,.!/!*00%+*`!+)!`0++`+1,(! `3$!.!`0$!5`/$+1( *W0`!K

*`+1.`!4),(!L`3!`!#*`".+)``/%*#(!`+),+*!*0L`* `3!`.!(%6! `0$0`3!`+1( `/!,.0!

0$!` `((`".+)`0$!`).'1,K

!% %*#`3$0`0+`,10`%*`0$!`+*0%*!.`* `3$0`#+!/`%*0+`0$!`,.!/!*00%+*`%/`*+0`(35/

/0.%#$0"+.3. N`0$!`"+((+3%*#`,+%*0/`/$+1( `$!(,`5+1`)'!`0$0` !%/%+*M

+*0%*!.`+),+*!*0/M

$!5`.!`)+.!`+*!.*! `3%0$`!$2%+.
$!5`.!* !.`0$!%.`,.!/!*00%+*(`+),+*!*0/
$!5`)'!` `((/`* `)*%,1(0!` 0
$!5` !"%*!`!2!*0`$* (!./
$!5`.!`3.%00!*`/`(//!/

.!/!*00%+*(`+),+*!*0/M

$!5`.!`)+.!`+*!.*! `3%0$`2%/1(`.!,.!/!*00%+*
$!5`.!* !.`0$!` `).'1,`Q+.`+0$!.`+),+*!*0/R
$!5`.!!%2!` 0`".+)`0$!`,.!*0/`%*`0$!`"+.)`+"`,.+,/
$!5`.!`+"0!*`3.%00!*`/`/00!(!//`"1*0%+*(`+),+*!*0/

0L[LQV
+),+*!*0/`.!`#.!0`0+`$%!2!`.!1/%(%05L`10`3$0`%"` %""!.!*0`+),+*!*0/`%*` %""!.!*0
+)%*/`/$.!`0$!`/)!`!$2%+.O

!` +`*+0`3*0` 1,(%0! `+ !`%*`+1.`,,(%0%+*/`* `!0`#%2!`1/``0++(`0$0`3!`*

1/!`3$!*`3!`3*0`0+`/$.!`"1*0%+*(%0%!/`.+//`2.%+1/`+),+*!*0/—)%4%*/K

S`@?`T
+),+/!`((`0$!`$%*#/ $,0!.`;

/%*#`)%4%*/`%/` !,.!0! L`10`%0`%/`3+.0$`1* !./0* %*#`0$!`,.+(!)/

0$!5`0.5`0+`/+(2!`* `/!!`3$0`0$!`,+//%(!`(0!.*0%2!`/+(10%+*/`.!K`(/+L
%0`+1( `$,,!*`0$0`5+1`)%#$0`$2!`0+`3+.'`+*``(!#5`,.+&!0`0$0`1/!/
*`+( !.`2!./%+*`+"`!0L`* `%0`)'!/`/!*/!`0+`'*+3`3$0`)%4%*/`.!`*
$+3`0+` !(`3%0$`0$!)K

%./0`+"`((L`)%4%*/`3+.'`+*(5`3%0$`0$!`createClass`"0+.5L`/+`%"`5+1`.!`1/%*#`(//!/L`5+1
**+0`1/!`)%4%*/L`* `0$0`%/`+*!`+"`0$!`.!/+*/`3$5`0$!%.`1/!`%/` %/+1.#! K

1,,+/!`5+1`.!`1/%*#`createClass`%*`5+1.`,,(%0%+*`* `5+1`"%* `5+1./!("`*!! %*#`0+

3.%0!`0$!`/)!`+ !`%*0+` %""!.!*0`+),+*!*0/K`+.`!4),(!L`5+1`*!! `0+`(%/0!*`0+`0$!
3%* +3`.!/%6!`!2!*0`0+`#!0`0$!`/%6!`+"`0$!`3%* +3`* ` +`/+)!`+,!.0%+*/`+. %*#(5K

*!`35`+"`1/%*#``)%4%*`%/`0+`3.%0!`%0`+*!`* `/$.!`%0`.+//`0$!` %""!.!*0`+),+*!*0/K

!0W/` !(2!`%*0+`0$!`+ !K

`)%4%*`*`!` !"%*! `/`*`+&!0`(%0!.(`0$0`$/`0$!`/)!`"1*0%+*/`* `00.%10!/`+"`

+),+*!*0M
FRQVW WindowResize = {...};

+`+))1*%0!`3%0$`0$!`+),+*!*0L`)%4%*/`1/1((5`1/!`0$!`/00!K
%0$`getInitialStateL`0$!`/00!`#!0/`%*%0%(%6! `3%0$`0$!`%*%0%(`innerWidth`+"`
3%* +3M
JHW,QLWLDO6WDWH() {
UHWXUQ {
LQQHU:LGWK: window.LQQHU:LGWK
};
}

+3L`3!`3*0`0+`'!!,`0.'`+"`0$!`$*#!/L`/+`3$!*`0$!`+),+*!*0`)+1*0/L`3!`/0.0
(%/0!*%*#`0+`0$!`3%* +3`.!/%6!`!2!*0M
FRPSRQHQW'LG0RXQW() {
window.DGG(YHQW/LVWHQHU('resize', this.KDQGOH5HVL]H);
}

!`(/+`3*0`0+`.!)+2!`0$!`!2!*0`(%/0!*!.`/`/++*`/`0$!`+),+*!*0`1*)+1*0/L`3$%$`%/
.%0%(L`0$1/`".!!%*#`0$!`)!)+.5`* `*+0`(!2%*#`1*1/! `(%/0!*!./`00$! `0+`0$!`3%* +3M
FRPSRQHQW:LOO8QPRXQW() {
window.UHPRYH(YHQW/LVWHQHU('resize', this.KDQGOH5HVL]H);
}

S`@@`T
+),+/!`((`0$!`$%*#/ $,0!.`;

%*((5L`3!` !"%*!`0$!`(('`0+`!`((! `!2!.5`0%)!`0$!`3%* +3`.!/%6!`!2!*0`%/`"%.! K

$!`(('`"1*0%+*`%/`%),(!)!*0! `0+`1, 0!`0$!`/00!`3%0$`0$!`*!3`innerWidth

+),+*!*0`/+`0$0`0$!`+),+*!*0`0$0`%/`1/%*#`0$!`)%4%*`.!_.!* !./`%0/!("`3%0$`0$!`".!/$
2(1!`0$0W/`2%((!M
KDQGOH5HVL]H() {
this.VHW6WDWH({
LQQHU:LGWK: window.LQQHU:LGWK
});
}

/`5+1`*`/!!`".+)`0$!`,.!! %*#`/*%,,!0L`.!0%*#``)%4%*`%/`2!.5`/%)%(.`0+`.!0%*#`
+),+*!*0K

+3L`%"`3!`3*0`0+`1/!`0$!`)%4%*`%*`+1.`+),+*!*0L`3!`&1/0`$2!`0+`//%#*`%0`0+`0$!`..5`+"
)%4%*/L`3$%$`%/``,.+,!.05`+"`0$!`+&!0M
FRQVW MyComponent = React.FUHDWH&ODVV({
PL[LQV: [WindowResize],
UHQGHU() {
console.ORJ('window.innerWidth', this.state.LQQHU:LGWK);
...
}
});

.+)`0$%/`,+%*0`+*L`0$!`2(1!`+"`innerWidth`+"`0$!`3%* +3`3%((`!`2%((!`%*`0$!`/00!`+"
+1.`+),+*!*0L`* `0$!`+),+*!*0`3%((`.!_.!* !.`3%0$`0$!`1, 0! `2(1!`*5`0%)!
`innerWidth`$*#!/K

!`*`1/!`0$!`)%4%*`%*`)*5`+),+*!*0/`0``0%)!`* `(/+`1/!`)1(0%,(!`)%4%*/`"+.`!$
+),+*!*0K``*%!`"!01.!`+"`)%4%*/`%/`0$0`0$!5`*`)!.#!`(%"!`5(!`)!0$+ /`* `0$!`%*%0%(
/00!K

+.`!4),(!L`%"`3!`1/!`+1.`WindowResize`)%4%*`%*``+),+*!*0`3$!.!`3!`(/+` !"%*!
`componentDidMount`$++'L`+0$`3%((`!`!4!10! `%*`+. !.K

$!`/)!`$,,!*/`%*`0$!`/!`+"`)1(0%,(!`)%4%*/`0$0`1/!`0$!`/)!`(%"!`5(!`$++'/K

+3L`(!0W/`#+`0$.+1#$`0$!`,.+(!)/`+"`)%4%*/K` *`0$!`*!40`/!0%+*L`3!`3%((`/!!`3$0`0$!`!/0
0!$*%-1!`%/`0+`$%!2!`0$!`/)!`.!/1(0`3%0$+10`((`0$!`%//1!/`%0`1/1((5`.%*#/K

%./0`+"`((L`)%4%*/`/+)!0%)!/`1/!`%*0!.*(`"1*0%+*/`0+`+))1*%0!`3%0$`0$!`+),+*!*0K

S`877`T
+),+/!`((`0$!`$%*#/ $,0!.`;

+.`!4),(!L`+1.`WindowResize`)%4%*`+1( `!4,!0`0$!`+),+*!*0`0+`%),(!)!*0
`handleResize`"1*0%+*`* `#%2!` !2!(+,!./`0$!`".!! +)`+"` +%*#`/+)!`+,!.0%+*/`3$!*
0$!`/%6!`$*#!/L`%*/0! `+"`1/%*#`0$!`/00!`0+`0.%##!.`0$!`1, 0!K

(0!.*0%2!(5L`%*/0! `+"`/!00%*#`0$!`*!3`2(1!`%*0+`0$!`/00!L`0$!`)%4%*`+1( `.!-1%.!`0$!

+),+*!*0`0+`((``"1*0%+*—/+)!0$%*#`(%'!`getInnerWidthL`%*`+1.`!4),(!—0+`#!0`0$!
01(`2(1!K

*"+.01*0!(5L`0$!.!`%/`*+`35`"+.`1/`0+`'*+3`+"`0$!`(%/0`+"`)!0$+ /`0$0`$2!`0+`!
%),(!)!*0! K

$%/`%/`,.0%1(.(5` `"+.`)%*0%*%(%05`!1/!L`%"``+),+*!*0`1/!/`)1(0%,(!`)%4%*/L`%0
!* /`1,`%),(!)!*0%*#` %""!.!*0`)!0$+ /L`3$%$`)'!/`%0` %""%1(0`0+`!(%)%*0!`0$!`+ !
3$!*`/+)!`)%4%*/`.!`.!)+2! L`+.`0$!5`$*#!`0$!%.`!$2%+.K

`2!.5`+))+*`,.+(!)`3%0$`)%4%*/`%/`(/$%*#K`$+1#$`%0`%/`0.1!`0$0`!0`%/`/).0
!*+1#$`0+`)!.#!`(%"!`5(!`(('/L`%0`**+0` +`*50$%*#`%"`03+`)%4%*/` !"%*!`+.`.!-1%.!
0$!`/)!`"1*0%+*`*)!`+.`1/!`0$!`/)!`00.%10!`%*`0$!`/00!K

$%/`%/`,.!005` `%*`%#`+ !/!/`!1/!`%0`*`#%2!`1/`1*!4,!0! `!$2%+./`* `%0

)'!/`%0`2!.5`$. `0+` !1#`%//1!/K

/`3!`/3`%*`0$!`WindowResize`!4),(!L`)%4%*/`0!* `0+`+))1*%0!`3%0$`0$!
+),+*!*0`1/%*#`0$!`/00!K`+L`"+.`!4),(!L``)%4%*`*`1, 0!``/,!%(`00.%10!`%*`0$!
/00!`+"``+),+*!*0L`* `0$!*`0$!`+),+*!*0`.!_.!* !./L`0'%*#`%*0+`+1*0`0$!`*!3
00.%10!K

$%/`)'!/`+),+*!*0/`1/!`0$!`/00!`!2!*`%"`%0`%/`*+0`*!! ! L`3$%$`%/` `!1/!`3!`$2!

/!!*`0$0`3!`/$+1( `2+% `1/%*#`%0`/`)1$`/`3!`*`0+`%),.+2!`.!1/%(%05`*
)%*0%*%(%05K

/0`10`*+0`(!/0L`/+)!0%)!/`%0`*`$,,!*`0$0`/+)!`)%4%*/` !,!* `+*`+0$!.`)%4%*/K`+.

!4),(!L`3!`+1( `.!0!`!/,+*/%2!%4%*L`3$%$`$*#!/`0$!`2%/%%(%05`+"`/+)!
+),+*!*0/`+. %*#`0+`0$!`/%6!`+"`0$!`3%* +3L`3$%$`%/`,.+2% ! `%*
0$!`WindowResize`)%4%*K

$%/`+1,(%*#`!03!!*`)%4%*/`)'!/`%0`2!.5`$. `0+`.!"0+.`0$!`+),+*!*0/`* `/(!`0$!

,,(%0%+*K

S`878`T
+),+/!`((`0$!`$%*#/ $,0!.`;

+LJKHURUGHUFRPSRQHQWV
*`0$!`,.!2%+1/`/!0%+*L`3!`/3`$+3`)%4%*/`.!`1/!"1(`"+.`/$.%*#`"1*0%+*(%0%!/`!03!!*
+),+*!*0/`* `0$!`,.+(!)/`0$0`0$!5`.%*#`0+`+1.`,,(%0%+*/K

*`0$!`1*0%+*(`.+#.))%*#`/!0%+*`+"`Chapter 2L`(!*`,`+1.`+ !L`3!`)!*0%+*! `0$!

+*!,0`+"`$%#$!.`+. !.`"1*0%+*/`Q +/RL`3$%$`.!`"1*0%+*/`0$0L`#%2!*``"1*0%+*L
!*$*!`%0`3%0$`/+)!`!40.`!$2%+./L`.!01.*%*#``*!3`+*!K

!0W/`/!!`%"`3!`*`,,(5`0$!`/)!`+*!,0`0+`!0`+),+*!*0/`* `$%!2!`+1.`#+(`+"
/$.%*#`"1*0%+*(%0%!/`!03!!*`+),+*!*0/`3$%(!`2+% %*#`0$!` +3*/% !/`+"`)%4%*/K

$!*`3!`,,(5`0$!`% !`+"` +/`0+`+),+*!*0/L`3!`((`0$%/`$%#$!.`+. !.

+),+*!*0/`Q +/R`"+.`.!2%05K

%./0`+"`((L`(!0W/`/!!`3$0`*`HoC`(++'/`(%'!M
FRQVW HoC = Component => EnhancedComponent;

+/`.!`"1*0%+*/`0$0`0'!``+),+*!*0`/`%*,10`* `.!01.*`*`!*$*! `+*!`/`0$!

+10,10K

!0W/`/0.0`3%0$``2!.5`/%),(!`!4),(!`0+`1* !./0* `3$0`*`!*$*! `+),+*!*0`(++'/

(%'!K

1,,+/!`5+1`*!! `0+`00$`0$!`/)!`className`,.+,!.05`0+`!2!.5`+),+*!*0`"+.`/+)!
.!/+*K`+1`+1( `#+`* `$*#!`((`0$!`.!* !.`)!0$+ /` %*#`0$!`className`,.+,!.05
0+`!$`+"`0$!)L`+.`5+1`+1( `3.%0!`*` +`/1$`/`0$!`"+((+3%*#`+*!M
FRQVW withClassName = Component => props => (
&RPSRQHQW {...props} FODVV1DPH="my-class" !
);

$!`,.!! %*#`+ !`*`!``(%00(!` %""%1(0`0+`1* !./0* `%*%0%((5N`(!0W/`0.5`0+`1* !./0* `%0K

!` !(.!``withClassName`"1*0%+*`0$0`0'!/``Component`* `.!01.*/`*+0$!.

"1*0%+*K

$!`.!01.*! `"1*0%+*`%/``/00!(!//`"1*0%+*(`+),+*!*0`0$0`.!!%2!/`/+)!`,.+,/`*
.!* !./`0$!`+.%#%*(`+),+*!*0K`$!`+((!0! `,.+,/`.!`/,.! L`* ``className`,.+,!.05
3%0$`0$!`"my-class"`2(1!`%/`,//! `0+`%0K

$!`.!/+*`3$5` +/`1/1((5`/,.! `0$!`,.+,/`0$!5`.!!%2!`+*`0$!`+),+*!*0`%/`!1/!

0$!5`0!* `0+`!`0.*/,.!*0`* `+*(5` `0$!`*!3`!$2%+.K

S`879`T
+),+/!`((`0$!`$%*#/ $,0!.`;

$%/`%/`,.!005`/%),(!`* `*+0`2!.5`1/!"1(L`10`%0`/$+1( `#%2!`5+1``!00!.`1* !./0* %*#`+"

3$0` +/`.!`* `3$0`0$!5`(++'`(%'!K

!0W/`*+3`/!!`$+3`3!`*`1/!`0$!`withClassName` +`%*`+1.`+),+*!*0/K

%./0`+"`((L`3!`.!0!``/00!(!//`"1*0%+*(`+),+*!*0`0$0`.!!%2!/`0$!`(//`*)!`*
,,(%!/`%0`0+``div`0#M
LPSRUW { string } IURP 'prop-types';

FRQVW MyComponent = ({ className }) => (

GLYFODVV1DPH={className} !
);
MyComponent.SURS7\SHV = {
FODVV1DPH: string
};

*/0! `+"`1/%*#`%0` %.!0(5L`3!`,//`%0`0+`*` +L`/`"+((+3/M

FRQVW MyComponentWithClassName = ZLWK&ODVV1DPH(MyComponent);

.,,%*#`+1.`+),+*!*0/`%*0+`0$!`withClassName`"1*0%+*L`3!`!*/1.!`0$0`%0`.!!%2!/
0$!`className`,.+,!.05K

+3L`(!0W/`)+2!`+*`0+`/+)!0$%*#`)+.!`!4%0%*#`* `(!0W/`0.5`0+`0.*/"+.)
0$!`WindowResize`)%4%*`3!`/3`%*`0$!`,.!2%+1/`/!0%+*`%*0+`*` +`"1*0%+*`0$0`3!`*
.!1/!`.+//`+1.`,,(%0%+*K

$!`)%4%*`3/`/%),(5`(%/0!*%*#`0+`0$!`3%* +3`.!/%6!`!2!*0`* `)'%*#`0$!

1, 0! `innerWidth`,.+,!.05`+"`0$!`3%* +3`2%((!`%*0+`0$!`/00!K

*!`+"`0$!`%##!/0`,.+(!)/`3%0$`0$0`)%4%*`3/L`0$0`%0`3/`1/%*#`0$!`/00!`+"`0$!`
+),+*!*0`0+`,.+2% !`0$!`innerWidth`2(1!K

+%*#`0$0`%/` `!1/!`%0`,+((10!/`0$!`/00!`3%0$` %0%+*(`00.%10!/L`* `0$+/!

00.%10!/`)5`(/+`(/$`3%0$`0$!`00.%10!/`0$0`.!`1/! `%*`0$!`+),+*!*0/`%0/!("K

%./0`+"`((L`3!`$2!`0+`.!0!``"1*0%+*`0$0`.!!%2!/``ComponentM
FRQVW withInnerWidth = Component => (
FODVV H[WHQGV React.&RPSRQHQW { ... }
);

+1`)5`$2!`/,+00! ``,00!.*`%*`0$!`35` +/`.!`*)! K` 0`%/``+))+*`,.0%!`0+

,.!"%4` +/`0$0`,.+2% !`/+)!`%*"+.)0%+*`0+`0$!`+),+*!*0/`0$!5`!*$*!`1/%*#
0$!`3%0$`,00!.*K

S`87:`T
+),+/!`((`0$!`$%*#/ $,0!.`;

1.`withInnerWidth`"1*0%+*`3%((`.!01.*``(//`+),+*!*0`%*/0! `+"
`"1*0%+*(`/00!(!//`+),+*!*0`!1/!L`/`3!`/3`%*`0$!`,.!2%+1/`!4),(!L`3!`*!!
 %0%+*(`"1*0%+*/`* `/00!K

!0W/`/!!`3$0`0$!`.!01.*! `(//`(++'/`(%'!K

*`0$!`+*/0.10+.L`0$!`%*%0%(`/00!`#!0/` !"%*! L`* `0$!`handleResize`(('`%/`+1* `0+

0$!`1..!*0`(//M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
LQQHU:LGWK: window.LQQHU:LGWK
};
this.KDQGOH5HVL]H = this.handleResize.ELQG(this);
}

$!`(%"!`5(!`$++'/`* `0$!`!2!*0`$* (!.`.!`% !*0%(`0+`0$!`)%4%*W/M

FRPSRQHQW'LG0RXQW() {
window.DGG(YHQW/LVWHQHU('resize', this.KDQGOH5HVL]H);
}
FRPSRQHQW:LOO8QPRXQW() {
window.UHPRYH(YHQW/LVWHQHU('resize', this.KDQGOH5HVL]H);
}
KDQGOH5HVL]H() {
this.VHW6WDWH({
LQQHU:LGWK: window.LQQHU:LGWK
});
}

%*((5L`0$!`+.%#%*(`+),+*!*0`#!0/`.!* !.! `%*`0$!`"+((+3%*#`35M

UHQGHU() {
UHWXUQ &RPSRQHQW {...this.SURSV} {...this.VWDWH} !
}

/`5+1`)5`*+0!`$!.!L`3!`.!`/,.! %*#`0$!`,.+,/`/`3!`/3`!"+.!L`10`3!`.!`(/+
/,.! %*#`0$!`stateK

!`.!`/0+.%*#`0$!`innerWidth`2(1!`%*/% !`0$!`/00!`0+`$%!2!`0$!`+.%#%*(`!$2%+.L`10
3!` +`*+0`,+((10!`0$!`/00!`+"`0$!`+),+*!*0N`3!`1/!`,.+,/`%*/0! K

/`5+1`(!.*! `%*`Chapter 3L`.!0!`.1(5`!1/(!`+),+*!*0/L`1/%*#`,.+,/`%/`(35/`

#++ `/+(10%+*`0+`!*"+.!`.!1/%(%05K

+3L`1/%*#`*` +`* `#!00%*#`0$!`innerWidth`2(1!`%/`,.!005`/0.%#$0"+.3. K

S`87;`T
+),+/!`((`0$!`$%*#/ $,0!.`;

!`.!0!``/00!(!//`"1*0%+*(`+),+*!*0`0$0`!4,!0/`innerWidth`/``,.+,!.05M
FRQVW MyComponent = ({ innerWidth }) => {
console.ORJ('window.innerWidth', LQQHU:LGWK);
...
};
MyComponent.SURS7\SHV = {
LQQHU:LGWK: number
};

!`!*$*!`%0`/`"+((+3/M
FRQVW MyComponentWithInnerWidth = ZLWK,QQHU:LGWK(MyComponent);

$!.!`.!`2.%+1/` 2*0#!/`+"` +%*#`0$%/`.0$!.`0$*`1/%*#``)%4%*K`%./0`+"`((L`3!` +`*+0

,+((10!`*5`/00!L`* `3!` +`*+0`.!-1%.!`0$!`+),+*!*0`0+`%),(!)!*0`*5`"1*0%+*K

$%/`)!*/`0$0`0$!`+),+*!*0`* `0$!` +`.!`*+0`+1,(! L`* `0$!5`*`+0$`!`.!1/!

.+//`0$!`,,(%0%+*K

#%*L`1/%*#`,.+,/`%*/0! `+"`/00!`(!0/`1/`)'!`+1.`+),+*!*0` 1)`/+`0$0`3!`*`1/!`%0

%*`+1.`/05(!`#1% !L`%#*+.%*#`*5`+),(!4`(+#%`* `&1/0`,//%*#` +3*`0$!`,.+,/K

*`0$%/`,.0%1(.`/!L`3!`+1( `.!0!``+),+*!*0`"+.`!$`+"`0$!
%""!.!*0`innerWidth`/%6!/`3!`/1,,+.0K

+*/% !.`0$!`"+((+3%*#`!4),(!M
0\&RPSRQHQW LQQHU:LGWK={320} !

.`+*/% !.`0$!`"+((+3%*#M
0\&RPSRQHQW LQQHU:LGWK={960} !

5HFRPSRVH
/`/++*`/`3!`!+)!`")%(%.`3%0$` +/L`3!`.!(%6!`$+3`,+3!."1(`0$!5`.!`* `$+3`3!
*`#!0`0$!`)+/0`+10`+"`0$!)K

$!.!`%/``,+,1(.`(%..5`((! `recompose`3$%$`,.+2% !/`)*5`1/!"1(` +/`* `(/+`

35`0+`+),+/!`0$!)`*%!(5K

$!` +/`0$0`0$!`(%..5`+""!./`.!`/)((`10%(%0%!/`0$0`3!`*`1/!`0+`3.,`+1.`+),+*!*0/L
)+2%*#`35`".+)`/+)!`+"`0$!%.`(+#%`* `)'%*#`0$!)` 1)!.`* `)+.!`.!1/(!K

S`87<`T
+),+/!`((`0$!`$%*#/ $,0!.`;

+*/% !.`0$0`5+1.`+),+*!*0`%/`.!!%2%*#``1/!.`+&!0`".+)`*` `* `0$0`0$%/`1/!.

+&!0`$/`)*5`00.%10!/K

!00%*#`+),+*!*0/`.!!%2!`.%0..5`+&!0/`%/`*+0``#++ `,.0%!`!1/!`%0`.!(%!/`+*`0$!
"0`0$0`0$!`+),+*!*0`'*+3/`0$!`/$,!`+"`0$!`+&!0`* L`)+/0`%),+.0*0(5L`%"`0$!`+&!0
$*#!/L`0$!`+),+*!*0`.!'/K

`!00!.`35`"+.``+),+*!*0`0+`.!!%2!`,.+,/`".+)`0$!`,.!*0`%/`0+` !"%*!`!$`/%*#(!
,.+,!.05`1/%*#`,.%)%0%2!/K

!`$2!``Profile`+),+*!*0`0+` %/,(5`username`* `ageL`/`"+((+3/M

FRQVW Profile = ({ XVHU: { XVHUQDPH, DJH } }) => (
GLY!
GLY!Username: {XVHUQDPH}GLY!
GLY!Age: {DJH}GLY!
GLY!
);
Profile.SURS7\SHV = {
XVHU: object
};

"`5+1`3*0`0+`$*#!`%0/`%*0!."!`0+`.!!%2!`/%*#(!`,.+,/`%*/0! `+"`0$!`"1((`1/!.`+&!0L`3!
*` +`/+`3%0$`0$!`flattenProp` +`,.+2% ! `5`.!+),+/!K

!0W/`/!!`$+3`%0`3+.'/K

!`"%./0`$*#!`0$!`+),+*!*0`0+` !(.!`/%*#(!`,.+,!.0%!/L`/`"+((+3/M
FRQVW Profile = ({ XVHUQDPH, DJH }) => (
GLY!
GLY!Username: {XVHUQDPH}GLY!
GLY!Age: {DJH}GLY!
GLY!
);
Profile.SURS7\SHV = {
XVHUQDPH: string,
DJH: number
};

$!*L`3!`!*$*!`%0`3%0$`0$!` +M
FRQVW ProfileWithFlattenUser = IODWWHQ3URS('user')(3URILOH);

+1`)5`$2!`*+0! `$!.!`0$0`3!`.!`1/%*#`0$!` +`%*``/(%#$0(5` %""!.!*0`35K`+)!`+"

0$!)L`%*`"0L`1/!`0$!`,.0%(`,,(%0%+*`0+`.!!%2!`0$!`,.)!0!./`"%./0L`3$%$`%/``"1*0%+*(
,,.+$K

S`87=`T
+),+/!`((`0$!`$%*#/ $,0!.`;

$!%.`/%#*01.!`%/`/+)!0$%*#`/%)%(.`0+`0$!`"+((+3%*#M
FRQVW HoC = DUJV => &RPSRQHQW => (QKDQFHG&RPSRQHQW;

$0`3!`*` +`%/`.!0!``"1*0%+*`1/%*#`0$!`"%./0`((`* `3.,`+1.`+),+*!*0`%*0+`%0M

FRQVW withFlattenUser = IODWWHQ3URS('user');
FRQVW ProfileWithFlattenUser = ZLWK)ODWWHQ8VHU(Profile);

.!0P`+3L`/1,,+/!`"+.`/+)!`.!/+*`0$0`3!`3*0`0+`$*#!`0$!`00.%10!`1/!.*)!`0+
)'!`0$%/`+),+*!*0`)+.!`#!*!.%`* `.!1/(!K

!`*`1/!`renamePropL`3$%$`0$!`recompose`(%..5`#%2!/`1/L`* `1, 0!`+1.

+),+*!*0`(%'!`0$%/M
FRQVW Profile = ({ QDPH, DJH }) => (
GLY!
GLY!Name: {QDPH}GLY!
GLY!Age: {age}GLY!
GLY!
);
Profile.SURS7\SHV = {
QDPH: string,
DJH: number
};

+3L`3!`3*0`0+`,,(5`)1(0%,(!` +`+),+*!*0/M`+*!`"+.`"(00!*%*#`0$!`1/!.`,.+,`* `+*!

0+`.!*)!``/%*#(!`,.+,`".+)`0$!`1/!.`+&!0L`10`+*0!*0%*#`"1*0%+*/` +!/`*+0`/!!)
(%'!``#++ `% !K

!.!`%/`3$!.!`0$!`compose`"1*0%+*`+"`.!+),+/!`+)!/`%*`$* 5K

!`*`,//`)1(0%,(!` +/`0+`%0`* `#!0``/%*#(!`!*$*! ` +M

FRQVW enhance = FRPSRVH(
IODWWHQ3URS('user'),
UHQDPH3URS('username', 'name')
);

$!*L`3!`*`,,(5`%0`0+`+1.`+),+*!*0`%*`0$!`"+((+3%*#`35M
FRQVW EnhancedProfile = HQKDQFH(Profile);

$%/`%/`)+.!`+*2!*%!*0`* `!(!#*0K

S`87>`T
+),+/!`((`0$!`$%*#/ $,0!.`;

%0$`.!+),+/!L`3!`.!`*+0`(%)%0! `0+`1/%*#`+*(5`0$!` +/`,.+2% ! `5`0$!`(%..5—3!

*`+),+/!`+1.` +`%*`0$!`/)!`35`+.`!2!*`1/!`0$!)`((`0+#!0$!.M
FRQVW enhance = FRPSRVH(
IODWWHQ3URS('user'),
UHQDPH3URS('username', 'name'),
ZLWK,QQHU:LGWK
);

/`5+1`*`/!!`$!.!L`0$!`compose`"1*0%+*`%/`2!.5`,+3!."1(L`* `%0`)'!/`0$!`+ !`)+.!

.! (!K

!`*`+*0!*0!`)1(0%,(!` +/`0+`'!!,`+1.`+),+*!*0/`/`/%),(!`/`,+//%(!K

0`%/`%),+.0*0`*+0`0+`1/!` +/`!1/!`3%0$`!2!.5`/0.0%+*`+)!/`,.+(!)/N`%*`0$%/
/!L`0$!`0. !_+""`%/`.!(0! `0+`,!."+.)*!K

+1`$2!`0+`0$%*'`0$0`!2!.5`0%)!`5+1`3.,``+),+*!*0`%*0+``$%#$!.`+. !.`+*!L`5+1`.!
 %*#``*!3`.!* !.`"1*0%+*L``*!3`(%"!`5(!`)!0$+ `((L`* `)!)+.5`((+0%+*K

+.`0$0`.!/+*L`%0`%/`%),+.0*0`0+`0$%*'`.!"1((5`+10`3$!*`%0`)'!/`/!*/!`0+`1/!`*` +
* `3$!*`%0`%/`!00!.`0+`.!0$%*'`5+1.`/0.101.!K

&RQWH[W
+/`+)!`%*`2!.5`$* 5`3$!*`3!`$2!`0+` !(`3%0$`+*0!40K

+*0!40`%/``"!01.!`0$0`$/`(35/`!!*`,.!/!*0`%*`!0L`* `%0`%/`1/! `%*`)*5`(%..%!/L

!2!*`%"`%0`$/*W0`!!*` +1)!*0! `)1$K

$!` +1)!*00%+*`/0%((` 2%/!/`0$0`%0`!`1/! `2!.5`/,.%*#(5`!1/!`%0`%/`!4,!.%)!*0(

* `(%'!(5`0+`$*#!`%*`0$!`"101.!K

+3!2!.L`%*`/+)!`/!*.%+/L`%0`%/``2!.5`,+3!."1(`0++(`0$0`*`$!(,`1/`,//`%*"+.)0%+*
+3*`0+`0$!`0.!!`3%0$+10`1/%*#`,.+,/`0`!2!.5`(!2!(K

+`#!0`0$!`!*!"%0/`+"`+*0!40`3%0$+10`+1,(%*#`+1.`+),+*!*0/`0+`%0/` /L`3!`*`1/!`*
+K

*` +`*`#!0`0$!` 0`".+)`0$!`+*0!40L`0.*/"+.)`%0`%*0+`,.+,/L`* `,//`0$!`,.+,/

+3*`0+`0$!`+),+*!*0K` *`0$%/`35L`0$!`+),+*!*0`%/`1*3.!`+"`0$!`+*0!40L`* `%0`*`!
.!1/! `!/%(5`%*` %""!.!*0`,.0/`+"`0$!`,,(%0%+*K

S`87?`T
+),+/!`((`0$!`$%*#/ $,0!.`;

(/+L`%"`0$!` /`+"`0$!`+*0!40`$*#!`%*`0$!`"101.!L`0$!`+*(5`,.0`+"`0$!`,,(%0%+*`0$0`$/
0+`!`$*#! `%/`0$!` +`!1/!`0$!`+),+*!*0/`.!` !+1,(! `".+)`%0L`3$%$`%/``%#
3%*K

$!.!`%/``"1*0%+*`0$0W/`,.+2% ! `5`.!+),+/!`0$0`)'!/`1/%*#`+*0!40`%*``0.*/,.!*0
35`* `.!!%2%*#`,.+,/`2!.5`!/5`* `/0.%#$0"+.3. N`(!0W/`/!!`$+3`%0`3+.'/K

1,,+/!`5+1`$2!``Price`+),+*!*0`0$0`5+1`1/!`0+` %/,(5`0$!`1..!*5`* `0$!`2(1!K

$!`+*0!40`%/`3% !(5`1/! `0+`,//` +3*`+))+*`+*"%#1.0%+*`".+)`0$!`.++0`0+`0$!`(!2!/L
* `1..!*5`%/`+*!`+"`0$+/!`2(1!/K

!0W/`/0.0`3%0$``+*0!40_3.!`+),+*!*0`* `(!0W/`0.*/"+.)`%0`/0!,`5`/0!,`%*0+`
.!1/(!`+*!L`0$*'/`0+` +/M
FRQVW Price = ({ value }, { currency }) => (
GLY!{FXUUHQF\}{YDOXH}GLY!
);
Price.SURS7\SHV = {
YDOXH: number
};
Price.FRQWH[W7\SHV = {
FXUUHQF\: string
};

!`$2!``/00!(!//`"1*0%+*(`+),+*!*0`0$0`.!!%2!/`0$!`2(1!`/``,.+,!.05`* `0$!
1..!*5`/`0$!`/!+* `,.)!0!.`".+)`0$!`+*0!40K

!`(/+` !"%*!`0$!`,.+,`05,!/`* `0$!`+*0!40`05,!/`"+.`+0$`2(1!/K`/`5+1`*`/!!L`0$%/

+),+*!*0`%/`*+0`0.1(5`.!1/(!`!1/!`%0`*!! /``,.!*0`3%0$`0$!`1..!*5`/`$%( `+*0!40
05,!/`0+`3+.'K`+.`!4),(!L`3!`**+0`1/!`%0`!/%(5`%*`+1.`/05(!`#1% !`* `,//``"'!
1..!*5`/``,.+,K

%./0`+"`((L`(!0W/`$*#!`0$!`+),+*!*0`0+`#!0`+0$`2(1!/`".+)`0$!`,.+,/M
FRQVW Price = ({ currency, value }) => (
GLY!{currency}{value}GLY!
);
Price.SURS7\SHV = {
FXUUHQF\: string,
YDOXH: number
};

S`87@`T
+),+/!`((`0$!`$%*#/ $,0!.`;

"`+1./!L`3!`**+0`/1/0%010!`%0`3%0$`0$!`,.!2%+1/`+*!`/0.%#$035`!1/!`*+`,.!*0/
.!`/!00%*#`%0/`1..!*5`,.+,K`$0`3!`*` +`%/`3.,`%0`%*0+`*` +`0$0`*`0.*/"+.)`0$!
2(1!/``0$0`.!`.!!%2! `".+)`0$!`+*0!40`%*0+`,.+,/K`!`.!`1/%*#`0$!
getContext`"1*0%+*`".+)`.!+),+/!L`10`5+1`*`!/%(5`3.%0!``1/0+)`3.,,!.`".+)
/.0$K

#%*L`3!`1/!`0$!`,.0%(`,,(%0%+*`0+`/,!%(%6!`0$!` +`* `.!1/!`%0`)1(0%,(!`0%)!/M

FRQVW withCurrency = JHW&RQWH[W({
FXUUHQF\: string
});

$!*L`3!`,,(5`%0`0+`0$!`+),+*!*0M
FRQVW PriceWithCurrency = ZLWK&XUUHQF\(Price);

+3L`3!`*`.!,(!`0$!`+( `Price`+),+*!*0`3%0$`0$!`.!/1(0%*#`+*!L`* `%0`3%((`/0%((`3+.'

3%0$+10`!%*#`+1,(! `3%0$`0$!`+*0!40K

$%/`%/``%#`3%*`!1/!`3!` % `*+0`$2!`0+`$*#!`0$!`,.!*0L`3!`*`1/!`0$!`+*0!40
3%0$+10`3+..5%*#`+10`"101.!` `$*#!/L`* `0$!`Price`+),+*!*0`%/`*+3`.!1/(!K

!`*`,//`.%0..5`1..!*%!/`* `2(1!/`0+`0$!`+),+*!*0`3%0$+10`*!! %*#``1/0+)

,.!*0`0+`,.+2% !`0$!`2(1!/K

)XQFWLRQ$V&KLOG
$!.!`%/``,00!.*`0$0`%/`#%*%*#`+*/!*/1/`3%0$%*`0$!`!0`+))1*%05L`* `%0`%/`'*+3*
/`FunctionAsChildK` 0`%/`3% !(5`1/! `%*`0$!`,+,1(.`(%..5`react-motionL`3$%$`3!
3%((`/!!`%*`Chapter 6L`.%0!`+ !`"+.`0$!`.+3/!.K

$!`)%*`+*!,0`%/`0$0L`%*/0! `+"`,//%*#``$%( `%*`0$!`"+.)`+"``+),+*!*0L`3!` !"%*!`

"1*0%+*`0$0`*`.!!%2!`,.)!0!./`".+)`0$!`,.!*0K

!0W/`/!!`3$0`%0`(++'/`(%'!M
FRQVW FunctionAsChild = ({ children }) => FKLOGUHQ();
FunctionAsChild.SURS7\SHV = {
FKLOGUHQ: func.LV5HTXLUHG
};

/`5+1`*`/!!L`FunctionAsChild`%/``+),+*!*0`0$0`$/``children`,.+,!.05` !"%*!
/``"1*0%+*`* L`%*/0! `+"`!%*#`1/! `/`` `!4,.!//%+*L`%0`#!0/`((! K

S`887`T
+),+/!`((`0$!`$%*#/ $,0!.`;

$!`,.!! %*#`+),+*!*0`*`!`1/! `%*`0$!`"+((+3%*#`35M

)XQFWLRQ$V&KLOG!
{ => GLY!Hello, World!GLY!}
)XQFWLRQ$V&KLOG!

0`%/`/`/%),(!`/`%0`(++'/M`0$!`$%( .!*`"1*0%+*`%/`"%.! `%*`0$!`.!* !.`)!0$+ `+"`0$!`,.!*0L

* `%0`.!01.*/`0$!`Hello, World!`0!40`3.,,! `%*``divL`3$%$`%/` %/,(5! `+*`0$!`/.!!*K

!0W/` !(2!`%*0+``)+.!`)!*%*#"1(`!4),(!`3$!.!`0$!`,.!*0`+),+*!*0`,//!/`/+)!
,.)!0!./`0+`0$!`children`"1*0%+*K

.!0!``Name`+),+*!*0`0$0`!4,!0/``"1*0%+*`/`children`* `,//!/`%0`0$!
/0.%*#`WorldM
FRQVW Name = ({ children }) => FKLOGUHQ('World');
Name.SURS7\SHV = {
FKLOGUHQ: func.LV5HTXLUHG
};

$!`,.!! %*#`+),+*!*0`*`!`1/! `%*`0$!`"+((+3%*#`35M

1DPH!
{QDPH => GLY!Hello, {QDPH}!GLY!}
1DPH!

$!`/*%,,!0`.!* !./`Hello, World!`#%*L`10`0$%/`0%)!`0$!`*)!`$/`!!*`,//! `5`0$!

,.!*0K` 0`/$+1( `!`(!.`$+3`0$%/`,00!.*`3+.'/L`/+`(!0W/`(++'`0`0$!` 2*0#!/`+"`0$%/
,,.+$K

$!`"%./0`!*!"%0`%/`0$0`3!`*`3.,`+),+*!*0/L`,//%*#`0$!)`2.%(!/`0`.1*0%)!`.0$!.
0$*`"%4! `,.+,!.0%!/L`/`3!` +`3%0$` +/K

`#++ `!4),(!`%/``Fetch`+),+*!*0`0$0`(+ /`/+)!` 0`".+)`*` `!* ,+%*0`*

.!01.*/`%0`0+`0$!`children`"1*0%+*M
)HWFK XUO="..."!
{GDWD => /LVW GDWD={GDWD} !}
)HWFK!

!+* (5L`+),+/%*#`+),+*!*0/`3%0$`0$%/`,,.+$` +!/`*+0`"+.!`0$!`children`0+`1/!

/+)!`,.! !"%*! `,.+,`*)!/K`%*!`0$!`"1*0%+*`.!!%2!/`2.%(!/L`0$!%.`*)!/`*`!
!% ! `5`0$!` !2!(+,!./`3$+`1/!`0$!`+),+*!*0K`$0`)'!/`0$!`FunctionAsChild
/+(10%+*`)+.!`"(!4%(!K

S`888`T
+),+/!`((`0$!`$%*#/ $,0!.`;

/0`10`*+0`(!/0L`0$!`3.,,!.`%/`$%#$(5`.!1/(!`!1/!`%0` +!/`*+0`)'!`*5`//1),0%+*/
+10`0$!`$%( .!*`%0`.!!%2!/—%0`&1/0`!4,!0/``"1*0%+*K

1!`0+`0$%/L`0$!`/)!`FunctionAsChild`+),+*!*0`*`!`1/! `%*` %""!.!*0`,.0/`+"`0$!

,,(%0%+*L`/!.2%*#`2.%+1/`children`+),+*!*0/K

6XPPDU\
*`0$%/`$,0!.L`3!`(!.*! `$+3`0+`+),+/!`+1.`.!1/(!`+),+*!*0/`* `)'!`0$!)
+))1*%0!`!""!0%2!(5K`.+,/`.!``35`0+` !+1,(!`+),+*!*0/`".+)`!$`+0$!.`*
.!0!``(!*`* `3!((_ !"%*! `%*0!."!K

$!*L`3!`3!*0`0$.+1#$`/+)!`+"`0$!`)+/0`%*0!.!/0%*#`+),+/%0%+*`,00!.*/`%*`!0K`$!
"%./0`+*!`3/`0$!`/+_((! `+*0%*!.`* `,.!/!*00%+*(`,00!.*L`3$%$`$!(,/`1/`/!,.0!`0$!
(+#%`".+)`0$!`,.!/!*00%+*`* `.!0!`)+.!`/,!%(%6! `+),+*!*0/`3%0$``/%*#(!
.!/,+*/%%(%05K

!`/3`$+3`!0`0.%! `0+`/+(2!`0$!`,.+(!)`+"`/$.%*#`"1*0%+*(%0%!/`!03!!*
+),+*!*0/`3%0$`)%4%*/K`*"+.01*0!(5L`)%4%*/`/+(2!`0$+/!`,.+(!)/`5` %*#`/!2!.(
+0$!.`+*!/L`* `0$!5`""!0`0$!`)%*0%*%(%05`+"`+1.`,,(%0%+*/K`*!`35`0+`$%!2!`0$!
/)!`#+(`3%0$+10` %*#`+),(!4%05`%/`5`1/%*#` +/L`3$%$`.!`"1*0%+*/`0$0`0'!`
+),+*!*0`* `.!01.*`*`!*$*! `+*!K

$!`recompose`(%..5`,.+2% !/`/+)!`1/!"1(` +/`0$0`*`!`1/! `(+*#`3%0$`+1.`1/0+)

+*!/`/+`0$0`+1.`+),+*!*0/`$2!`/`(%00(!`(+#%`/`,+//%(!`%*`0$!%.`%),(!)!*00%+*K

!`(!.*! `$+3`0+` !(`3%0$`+*0!40`3%0$+10`*!! %*#`0+`+1,(!`+1.`+),+*!*0/`0+`%0L

0$*'/`0+` +/K`%*((5L`3!`/3`$+3`3!`+1( `+),+/!`+),+*!*0/` 5*)%((5`5
"+((+3%*#`0$!`FunctionAsChild`,00!.*K

0`%/`*+3`0%)!`0+`0('`+10` 0`"!0$%*#`* `+*!_35` 0`"(+3L`3$%$`%/`3$0`3!`3%((

(++'`0`%*`0$!`*!40`$,0!.K

S`889`T
 
3URSHU'DWD)HWFKLQJ
$!`#+(`+"`0$%/`$,0!.`%/`0+`/$+3`0$!` %""!.!*0` 0`"!0$%*#`,00!.*/`0$0`3!`*`,10`%*
,(!`%*``!0`,,(%0%+*K`+`"%* `0$!`!/0`/0.0!#5L`3!`$2!`0+`1* !./0* `$+3`0$!` 0
"(+3/`3%0$%*``0.!!`+"`+),+*!*0/`%*`!0K

0`%/`%),+.0*0`0+`'*+3`$+3`0$!`,.!*0`*`+))1*%0!`3%0$`%0/`$%( .!*`* `2%!`2!./K` 0

%/`(/+`.1%(`0+`1* !./0* `$+3`1*+**!0! `/%(%*#/`*`/$.!`0$!%.` 0K`!`3%((`(++'`0
/+)!`.!(_3+.( `!4),(!/`+"` 0`"!0$%*#L`* `0.*/"+.)``/!`+),+*!*0`%*0+``3!((_
/0.101.! `+*!`1/%*#` +/K

%*((5L`3!`3%((`/!!`$+3`!4%/0%*#`(%..%!/`/1$`/`react-refetch.`*`/2!`1/``(+0`+"
0%)!`5`,.+2% %*#`0$!`+.!` 0`"!0$%*#`"1*0%+*(%0%!/`3!`*!! K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M

$!`1*% %.!0%+*(` 0`"(+3`+"`!0`* `$+3`%0`*`)'!`+1.`,,(%0%+*/

!/%!.`0+`.!/+*`+10
+3``$%( `*`+))1*%0!`3%0$`%0/`,.!*0`1/%*#`(('/
$!`35`03+`/%(%*#/`*`/$.!` 0`0$.+1#$`0$!%.`+))+*`,.!*0
+3`0+`.!0!``#!*!.%` +L`3$%$`*`"!0$` 0`".+)`*5` `!* ,+%*0/
+3`.!0_.!"!0$`3+.'/`* `3$5`%0`%/``1/!"1(`0++(`0$0`3!`*`%*0!#.0!`%*0+`+1.
,.+&!0/`0+`)'!` 0`"!0$%*#`!/%!.
+3`0+`1/!`0$!`*!3`+*0!40`
.+,!.`0`!0$%*# $,0!.`<

'DWDIORZ
*`0$!`(/0`03+`$,0!./L`3!`/3`$+3`0+`.!0!`/%*#(!`.!1/(!`+),+*!*0/`* `$+3`0+
+),+/!`0$!)`0+#!0$!.`!""!0%2!(5K`+3L`%0`%/`0%)!`0+`(!.*`$+3`0+`1%( ``,.+,!.` 0`"(+3
"+.`/$.%*#` 0`.+//`)1(0%,(!`+),+*!*0/`%*`+1.`,,(%0%+*K

!0`!*"+.!/``2!.5`%*0!.!/0%*#`,00!.*`0+`)'!` 0`#+`".+)`0$!`.++0`0+`0$!`(!2!/K`$%/
,00!.*`%/`1/1((5`((! `1*% %.!0%+*(` 0`"(+3L`* `3!`3%((`(++'`0`%0`%*` !0%(`%*`0$%/
/!0%+*K

/`0$!`*)!`/1##!/0/L`%*`!0L` 0`"(+3/`%*``/%*#(!` %.!0%+*`".+)`0$!`0+,`0+`0$!`+00+)

+"`0$!`0.!!K`$%/`,,.+$`$/`)*5`!*!"%0/`!1/!`%0`/%),(%"%!/`0$!`+),+*!*0/W`!$2%+.
* `0$!`.!(0%+*/$%,`!03!!*`+),+*!*0/L`)'%*#`0$!`+ !`)+.!`,.! %0(!`*
)%*0%*(!K

2!.5`+),+*!*0`.!!%2!/` 0`".+)`%0/`,.!*0`%*`0$!`"+.)`+"`,.+,/L`* `,.+,/`**+0`!

)+ %"%! K`$!*`0$!` 0`%/`.!!%2! L`%0`*`!`0.*/"+.)! `%*0+`*!3`%*"+.)0%+*`*
,//! `0+`0$!`+0$!.`$%( .!*` +3*`0$!`0.!!K`$`+"`0$!`$%( .!*`*`$+( ``(+(`/00!`*
1/!`%0`/``,.+,`"+.`%0/`*!/0! `+),+*!*0/K

+`".L`3!`$2!`+*(5`/!!*`!4),(!/`3$!.!`0$!` 0`%/`/$.! `".+)`,.!*0/`0+`$%( .!*

+),+*!*0/`1/%*#`,.+,/K` +3!2!.L`3$0`$,,!*/`%"``$%( `$/`0+`,1/$` 0`1,`0+`%0/
,.!*0O`.`3$0`%"``,.!*0`$/`0+`!`1, 0! `3$!*`%0/`$%( .!*W/`/00!`$*#!/O`(/+L`3$0
%"`03+`/%(%*#`+),+*!*0/`*!! `0+`/$.!` 0O`!`3%((`*/3!.`((`+"`0$!/!`-1!/0%+*/`3%0$`
.!(_3+.( `!4),(!K

!`3%((`/0.0`3%0$``/%),(!`+),+*!*0`0$0`$/`*+`$%( .!*L`* `3!`3%((`0.*/"+.)`%0`%*0+`

(!*!.`* `/0.101.! `+),+*!*0K

$%/`,,.+$`3%((`(!0`1/`/!!`0$!`!/0`,00!.*/`0+`,,(5`%*`!$`,$/!`0+`(!0`0$!` 0`"(+3
.+//`0$!`0.!!K

!0W/` !(2!`%*0+`0$!`+ !`"+.`.!0%*#``Counter`+),+*!*0L`3$%$`/0.0/`".+)`0`* `$/

03+`100+*/M`+*!`"+.`%*.!)!*0%*#`0$!`2(1!`* `+*!`"+.` !.!)!*0%*#`%0K

!`3%((`/0.0`5`.!0%*#``(//`0$0`!40!* /`0$!`Component`"1*0%+*`".+)`!0M
FODVV Counter H[WHQGV Component

$!`(//`$/``constructor`3$!.!`0$!`+1*0!.`%/`%*%0%(%6! `0+`0L`* `0$!`!2!*0`$* (!./

.!`+1* `0+`0$!`+),+*!*0`%0/!("M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {

S`88;`T
.+,!.`0`!0$%*# $,0!.`<

FRXQWHU: 0
};
this.KDQGOH'HFUHPHQW = this.handleDecrement.ELQG(this);
this.KDQGOH,QFUHPHQW = this.handleIncrement.ELQG(this);
}

$!`!2!*0`$* (!./`.!`/%),(!L`* `0$!5`$*#!`0$!`stateL` %*#`+.`.!)+2%*#``1*%0`".+)

0$!`1..!*0`counterM
KDQGOH'HFUHPHQW() {
this.VHW6WDWH({
FRXQWHU: this.state.FRXQWHU - 1
});
}
KDQGOH,QFUHPHQW() {
this.VHW6WDWH({
FRXQWHU: this.state.FRXQWHU + 1
});
}

%*((5L`%*/% !`0$!`.!* !.`)!0$+ L`0$!`1..!*0`2(1!`%/` %/,(5! L`* `0$!`100+*/`3%0$

0$!%.`onClick`$* (!./`.!` !"%*! M
UHQGHU() {
UHWXUQ (
GLY!
K!{this.state.FRXQWHU}K!
EXWWRQRQ&OLFN={this.KDQGOH'HFUHPHQW}!-EXWWRQ!
EXWWRQRQ&OLFN={this.KDQGOH,QFUHPHQW}!+EXWWRQ!
GLY!
);
}

&KLOGSDUHQWFRPPXQLFDWLRQ FDOOEDFNV
$!.!`.!`*+`)&+.`%//1!/`3%0$`0$%/`+),+*!*0L`,.0`".+)`0$!`"0`0$0`%0` +!/`)1(0%,(!
0$%*#/M

0`$+( /`0$!`+1*0!.`2(1!`%*/% !`0$!`/00!K

0`%/`.!/,+*/%(!`"+.`/$+3%*#`0$!` 0K
0`+*0%*/`0$!`(+#%`"+.`%*.!)!*0%*#`* ` !.!)!*0%*#`0$!`+1*0!.K

0`%/`(35/`#++ `,.0%!`0+`/,(%0`+),+*!*0/`%*0+`/)((!.`+*!/L`!$`3%0$``2!.5`/,!%"%
!$2%+.L`0+`%),.+2!`0$!`)%*0%*%(%05`+"`0$!`,,`* `)'!`%0`"(!4%(!`3$!*`.!-1%.!)!*0/
$*#!K

S`88<`T
.+,!.`0`!0$%*# $,0!.`<

+*/% !.`0$0`3!`*!! `0$!`/)!`,(1/`* `)%*1/`100+*/`%*`*+0$!.`,.0`+"`0$!`,,(%0%+*K

0`3+1( `!`#.!0`0+`.!1/!`0$!`100+*/`3!` !"%*! `%*/% !`0$!`CounterL`10`0$!`-1!/0%+*`%/M`%"

3!`)+2!`0$!`100+*/`35`".+)`0$!`+),+*!*0L`$+3` +`3!`'*+3`3$!*`0$!5`#!0`(%'!
+*`/+`0$0`0$!`+1*0!.`*`!`1, 0! O

*`!0L`3$!*`3!`*!! `0+`,1/$`%*"+.)0%+*`+.`/%),(5`0.%##!.`*`!2!*0`".+)`$%( .!*`0+`0$!

,.!*0L`3!`1/!`(('/K`!0W/`/!!`$+3`0$!5`3+.'K

!`.!0!``Buttons`+),+*!*0`0+` %/,(5`0$!`%*.!)!*0`* ` !.!)!*0`100+*/L`3$%$L

%*/0! `+"`"%.%*#`%*0!.*(`"1*0%+*/`3$!*`0$!5`.!`(%'! `+*L`1/!`0$!`"1*0%+*/`0$0`.!
.!!%2! `".+)`0$!`,.+,/M
FRQVW Buttons = ({ onDecrement, onIncrement }) => (
GLY!
EXWWRQRQ&OLFN={onDecrement}!-EXWWRQ!
EXWWRQRQ&OLFN={onIncrement}!+EXWWRQ!
GLY!
);
Buttons.SURS7\SHV = {
RQ'HFUHPHQW: func,
RQ,QFUHPHQW: func
};

0`%/``/%),(!L`/00!(!//`"1*0%+*(`+),+*!*0`3$!.!`0$!`onClick`!2!*0`$* (!./`"%.!`0$!
"1*0%+*/`.!!%2! `".+)`0$!`,.+,/K`+3L`%0`%/`0%)!`0+`/!!`$+3`0+`%*0!#.0!`0$%/`*!3
+),+*!*0`%*0+`0$!`CounterK

!`&1/0`.!,(!`0$!`+.%#%*(`).'1,`3%0$`0$!`+),+*!*0L`,//%*#`0$!`%*0!.*(`"1*0%+*/`0+
0$!`*!3`$%( L`/`"+((+3/M
UHQGHU() {
UHWXUQ (
GLY!
K!{this.state.FRXQWHU}K!
%XWWRQV
RQ'HFUHPHQW={this.KDQGOH'HFUHPHQW}
RQ,QFUHPHQW={this.KDQGOH,QFUHPHQW}
!
GLY!
);
}

S`88=`T
.+,!.`0`!0$%*# $,0!.`<

2!.50$%*#`!(/!`.!)%*/`0$!`/)!L`* `0$!`(+#%`%/`/0%((`%*`0$!`,.!*0`+),+*!*0K`$!
100+*/`.!`*+3` 1)L`* `0$!5`.!`+*(5`(!`0+`*+0%"5`0$!%.`+3*!.`3$!*`0$!5`.!`(%'!
+*K

+L`!2!.5`0%)!`3!`*!! `0$!`$%( .!*`0+`,1/$` 0`%*0+`0$!`,.!*0`+.`%*"+.)`0$!`,.!*0`0$0

/+)!0$%*#`$,,!*! L`3!`*`,//`(('/`* `%),(!)!*0`0$!`.!/0`+"`0$!`(+#%`%*/% !`0$!
,.!*0K

&RPPRQSDUHQW
+3L`0$!`Counter`(++'/``%0`!00!.L`* `0$!`Buttons`.!`.!1/(!K`$!`(/0`0$%*#`0+`!
+*!`0+`(!*`%0`1,`+),(!0!(5`%/`0+`.!)+2!`0$!` %/,(5`(+#%`".+)`%0K

+` +`0$0L`3!`*`.!0!``Display`+),+*!*0`0$0`.!!%2!/`0$!`2(1!`0+` %/,(5`*

/$+3/`%0`+*`0$!`/.!!*M
FRQVW Display = ({ counter }) => K!{FRXQWHU}K!;
Display.SURS7\SHV = {
FRXQWHU: number
};

#%*L`3!`*`1/!``/00!(!//`"1*0%+*(`+),+*!*0`!1/!`0$!.!`%/`*+`*!! `0+`'!!,`*5
/00!K`/`5+1`)5`*+0!`$!.!L`/,(%00%*#`0$%/`+),+*!*0`%/`*+0`*!! ! `!1/!`%0`&1/0
.!* !./`*`h1`!(!)!*0K` +3!2!.L`%*`5+1.`,,(%0%+*L`5+1`)5` ``(//!/L` %/,(5
(+#%`0+`$*#!`0$!`+(+.`+"`0$!`+1*0!.`+. %*#`0+`%0/`2(1!L`* `/+`+*K

*`#!*!.(L`+1.`#+(`%/`0+`)'!`+),+*!*0/`1*3.!`+"`0$!` 0`/+1.!`/+`0$0`3!`*`.!1/!
0$!)`3%0$` %""!.!*0`/+1.!/`%*`2.%+1/`,.0/`+"`0$!`,,(%0%+*K

/%*#`0$!`*!3`+),+*!*0`%*`0$!`Counter`%/`!/5K`!`&1/0`$2!`0+`.!,(!`0$!`+( `).'1,
3%0$`0$!`Display`+),+*!*0L`/`"+((+3/M
UHQGHU() {
UHWXUQ (
GLY!
'LVSOD\FRXQWHU={this.state.FRXQWHU} !
%XWWRQV
RQ'HFUHPHQW={this.KDQGOH'HFUHPHQW}
RQ,QFUHPHQW={this.KDQGOH,QFUHPHQW}
!
GLY!
);
}

S`88>`T
.+,!.`0`!0$%*# $,0!.`<

/`5+1`*`/!!`$!.!L`03+`/%(%*#`+),+*!*0/`.!`+))1*%0%*#`0$.+1#$`0$!%.`+))+*
,.!*0K

$!*`0$!`Buttons`#!0`(%'! `+*L`0$!5`*+0%"5`0$!`,.!*0L`3$%$`/!* /`0$!`1, 0! `2(1!`0+

0$!`Display`+),+*!*0K`$%/`%/``2!.5`+))+*`,00!.*`%*`!0L`* `%0`%/`*`!""!0%2!
/+(10%+*`0+`/$.!` 0`.+//`+),+*!*0/`0$0` +`*+0`$2!`` %.!0`.!(0%+*/$%,K

$!` 0`(35/`"(+3/`".+)`,.!*0/`0+`$%( .!*L`10`$%( .!*`*`*+0%"5`0$!`,.!*0`*

)'!`0$!`0.!!`.!_.!* !.`3%0$`0$!`*!3`%*"+.)0%+*K

2!.5`0%)!`3!`*!! `0+`)'!`03+`1*.!(0! `+),+*!*0/`+))1*%0!L`3!`$2!`0+`"%* `0$!

+))+*`,.!*0`!03!!*`0$!)`* `'!!,`0$!`/00!`0`0$0`(!2!(`/+`0$0L`3$!*`0$!`/00!`%/
1, 0! L`+0$`+),+*!*0/`.!!%2!`".!/$` 0`".+)`0$!`,.+,/K

'DWDIHWFKLQJ
*`0$!`,.!! %*#`/!0%+*L`3!`/3`0$!` %""!.!*0`,00!.*/`3!`*`,10`%*`,(!`0+`/$.!` 0
!03!!*`+),+*!*0/`%*`0$!`0.!!K` 0`%/`*+3`0%)!`0+`2%!3`$+3`0+`"!0$` 0`%*`!0`*
3$!.!`0$!` 0`"!0$%*#`(+#%`/$+1( `!`(+0! K`$!`!4),(!/`%*`0$%/`/!0%+*`1/!`0$!`fetch
"1*0%+*`0+`)'!`3!`.!-1!/0/L`3$%$`%/``)+ !.*`.!,(!)!*0`"+.`XMLHttpRequestK

0`0$!`0%)!`+"`3.%0%*#L`%0`%/`*0%2!(5`%),(!)!*0! `%*`$.+)!`* `%.!"+4L`* `%"`5+1`*!! `0+

/1,,+.0` %""!.!*0`.+3/!./L`5+1`)1/0`1/!`0$!`"!0$`,+(5"%((`5` %0 1M
https:/b/bgithub.bcom/bgithub/bfetchK

!`.!`(/+`#+%*#`0+`1/!`0$!`,1(%` %0 1` /`0+`(+ `/+)!` 0L`* `0$!`!* ,+%*0`3!

3%((`1/!`%/`0$!`+*!`0$0`.!01.*/``(%/0`+"`#%/0/L`#%2!*``1/!.*)!L`"+.`!4),(!L
https://api.github.com/users/:username/gistsK

%/0/`.!`/*%,,!0/`+"`+ !`0$0`*`!`/$.! `!/%(5`!03!!*` !2!(+,!./K`$!`"%./0

+),+*!*0`0$0`3!`3%((`1%( `%/``/%),(!`(%/0`+"`0$!`#%/0/`0$0`.!`.!0! `5`0$!`1/!.L
((! `#!.+*`Q*`.)+2RK`!0W/` !(2!`%*0+`/+)!`+ !`* `.!0!``(//K

!`1/!``(//`!1/!`3!`*!! `0+`/0+.!`*`%*0!.*(`/00!`* `1/!`(%"!`5(!`)!0$+ /M

LPSRUW React, { Component } IURP 'react';
FODVV Gists H[WHQGV Component {
...
}

S`88?`T
.+,!.`0`!0$%*# $,0!.`<

$!*L`3!` !"%*!``constructorL`3$!.!`3!`%*%0%(%6!`0$!`stateM
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
JLVWV: []
};
}

+3`+)!/`0$!`%*0!.!/0%*#`,.0M` 0`"!0$%*#K`$!.!`.!`03+`(%"!`5(!`$++'/`3$!.!
3!`*`,10`0$!` 0`"!0$%*#M`componentWillMount`* `componentDidMountK

$!`"%./0`%/`"%.! `!"+.!`0$!`+),+*!*0`#!0/`.!* !.! `"+.`0$!`"%./0`0%)!`* `0$!`/!+* `%/

"%.! `.%#$0`"0!.`0$!`+),+*!*0`%/`)+1*0! K

/%*#`0$!`"%./0`/!!)/`0+`!`0$!`.%#$0`)!0$+ `!1/!`3!`3*0`0+`(+ `0$!` 0`/`/++*`/`3!

*L`10`0$!.!`%/``2!0K`$!`componentWillMount`"1*0%+*`%/`"%.! `+*`+0$`/!.2!._`*
(%!*0_/% !`.!* !.%*#K

!`3%((`/!!`0$!`/!.2!._/% !`.!* !.%*#`%*` !0%(`%*`Chapter 8L`!.2!._% !`!* !.%*#`"+.`1*

* `.+"%0L`10`"+.`*+3L`5+1`&1/0`*!! `0+`'*+3`0$0`"%.%*#`*`/5*` `((`3$!*`0$!
+),+*!*0`#!0/`.!* !.! `+*`0$!`/!.2!.`*`#%2!`5+1`1*!4,!0! `.!/1(0/K

!`3%((`0$!*`1/!`0$!`componentDidMount`$++'`/+`0$0`3!`*`!`/1.!`0$0`0$!`
!* ,+%*0`%/`((! `+*`0$!`.+3/!.`+*(5K

$%/`(/+`)!*/`0$0L` 1.%*#`0$!`"%./0`.!* !.L`0$!`(%/0`+"`#%/0/`%/`!),05`* `3!`)%#$0`3*0`0+

/$+3``/,%**!.`5`,,(5%*#`+*!`+"`0$!`0!$*%-1!/`0$0`3!`/3`%*`Chapter 2L`(!*`,`+1.
+ !L`3$%$`%/`!5+* `0$!`/+,!`+"`0$!`1..!*0`/!0%+*K

/`3!`/% `!"+.!L`3!`.!`#+%*#`0+`1/!`0$!`fetch`"1*0%+*`* `$%0`0$!` %0 1` /`0+

.!0.%!2!`#!.+*W/`#%/0/M
FRPSRQHQW'LG0RXQW() {
IHWFK('https://api.github.com/users/gaearon/gists')
.WKHQ(response => response.MVRQ())
.WKHQ(gists => this.VHW6WDWH({ gists }));
}

$%/`+ !`*!! /``(%00(!`%0`+"`!4,(*0%+*K`$!*`0$!`componentDidMount`$++'`#!0/`"%.! L

3!`((`0$!`fetch`"1*0%+*`#%*/0`0$!` %0 1` /K

$!`fetch`"1*0%+*`.!01.*/``Promise`* L`3$!*`%0`#!0/`.!/+(2! L`3!`.!!%2!``.!/,+*/!

+&!0`3%0$`` `"1*0%+*`0$0`.!01.*/`0$!` `+*0!*0`+"`0$!`.!/,+*/!`%0/!("K

S`88@`T
.+,!.`0`!0$%*# $,0!.`<

$!*`0$!` `%/`,./! `* `.!01.*! L`3!`*`/2!`0$!`.3`#%/0/`%*/% !`0$!`%*0!.*(`/00!

+"`0$!`+),+*!*0`0+`)'!`0$!)`2%((!`%*`0$!`render`)!0$+ M
UHQGHU() {
UHWXUQ (
XO!
{this.state.gists.PDS(gist => (
OL NH\={gist.LG}!{gist.GHVFULSWLRQ}OL!
))}
XO!
);
}

$!`render`)!0$+ `%/`/%),(!—3!`&1/0`(++,`0$.+1#$`0$!`#%/0/`* `),`!$`+*!`+"`0$!)

%*0+`*`<li>`!(!)!*0`0$0`/$+3/`0$!%.` !/.%,0%+*K

+1`)%#$0`$2!`*+0! `0$!`'!5`00.%10!`+"`<li>K`!`1/!`%0`"+.`,!."+.)*!`.!/+*/`0$0`5+1
3%((`1* !./0* `5`0$!`!* `+"`0$%/`++'K` "`5+1`0.5`0+`.!)+2!`0$!`00.%10!L`5+1`3%((`#!0`
3.*%*#`".+)`!0`%*/% !`0$!`.+3/!.W/`+*/+(!K

$!`+),+*!*0`3+.'/`* `!2!.50$%*#`%/`"%*!L`10`/`3!`(!.*! `%*`0$!`,.!2%+1/`/!0%+*/L`3!

+1( L`"+.`!4),(!L`/!,.0!`0$!`.!* !.%*#`(+#%`%*0+``/1+),+*!*0`0+`)'!`%0`)+.!
/%),(!`* `0!/0(!K

+2%*#`0$!`+),+*!*0`35`%/`*+0``,.+(!)`!1/!`3!`$2!`/!!*`$+3`+),+*!*0/`%*
%""!.!*0`,.0/`+"`0$!`,,(%0%+*`*`.!!%2!`0$!` 0`0$!5`*!! `".+)`0$!%.`,.!*0/K

0`%/`2!.5`+))+*`0+`*!! `0+`"!0$` 0`".+)`0$!` /`%*` %""!.!*0`,.0/`+"`0$!`+ !/!L

* `3!` +`*+0`3*0`0+` 1,(%0!`0$!`+ !K``/+(10%+*`3!`*`,,(5`0+`.!)+2!`0$!` 0`(+#%
".+)`0$!`+),+*!*0`* `.!1/!`%0`.+//`0$!`,,(%0%+*`%/`0+`.!0!`*` +K

*`0$%/`/!L`0$!` +`3+1( `(+ `0$!` 0`+*`!$("`+"`0$!`!*$*! `+),+*!*0L`* `%0

3+1( `,.+2% !`0$!` 0`0+`0$!`$%( `%*`0$!`"+.)`+"`,.+,/K`!0W/`/!!`3$0`%0`(++'/`(%'!K

/`3!`'*+3L`*` +`%/``"1*0%+*`0$0`!,0/``+),+*!*0`* `/+)!`,.)!0!./`*

.!01.*/``*!3`+),+*!*0`0$0`$/`/+)!`/,!%(`!$2%+./`00$! `0+`%0K

!`.!`#+%*#`0+`1/!`0$!`,.0%(`,,(%0%+*`0+`.!!%2!`0$!`,.)!0!./`"%./0L`* `0$!*`0$!
01(`+),+*!*0`/`0$!`/!+* `,.)!0!.M
FRQVW withData = url => &RPSRQHQW => (...);

!`$2!`((! `0$!`withData`"1*0%+*L`"+((+3%*#`0$!`with*`,00!.*K

$!`"1*0%+*`!,0/`0$!``".+)`3$%$`0$!` 0`$/`0+`!`(+ ! `* `0$!`+),+*!*0`0$0

*!! /`0$!` 0`0+`3+.'K

S`897`T
.+,!.`0`!0$%*# $,0!.`<

$!`%),(!)!*00%+*`%/`,.!005`/%)%(.`0+`0$!`+),+*!*0`%*`0$!`,.!! %*#`!4),(!L`,.0
".+)`0$!`"0`0$0`0$!``%/`*+3``,.)!0!.`* L`%*/% !`0$!`.!* !.`)!0$+ L`3!`1/!`0$!
$%( `+),+*!*0K

$!`"1*0%+*`.!01.*/``(//`0$0W/` !"%*! `/`"+((+3/M

FODVV H[WHQGV Component

0`$/``+*/0.10+.`0+`/!0`0$!`%*%0%(`!),05`/00!K

$!`,.+,!.05`3!`1/!`0+`/0+.!`0$!` 0`%/`*+3`((! `data`!1/!`3!`.!`1%( %*#``#!*!.%`

+),+*!*0`* `3!` +`*+0`3*0`%0`0+`!`0%! `0+``,.0%1(.`+&!0`/$,!`+.`+((!0%+*M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
GDWD: []
};
}

*/% !`0$!`componentDidMount`$++'L`0$!`fetch`"1*0%+*`%/`"%.! `* `0$!` 0

0$0W/`.!01.*! `".+)`0$!`/!.2!.`%/`+*2!.0! `%*0+` `* `/0+.! `%*`0$!`/00!M
FRPSRQHQW'LG0RXQW() {
IHWFK(url)
.WKHQ(response => response.MVRQ())
.WKHQ(data => this.VHW6WDWH({ data }));
}

0`%/`%),+.0*0`0+`*+0!`0$0`0$!``%/`*+3`/!0`1/%*#`0$!`"%./0`,.)!0!.`0$0W/`.!!%2! `".+)
0$!` +K` *`0$%/`35L`3!`*`.!1/!`%0`0+`)'!`*5` `((`0+`*5`!* ,+%*0K

%*((5L`3!`.!* !.`0$!`#%2!*`+),+*!*0L`/,.! %*#`0$!`,.+,/`!1/!`3!`3*0`+1.` +`0+

!`0.*/,.!*0K

!`(/+`/,.! `0$!`/00!`0+`,//`0$!` ` 0`0+`0$!`$%( `+),+*!*0M

UHQGHU() {
UHWXUQ &RPSRQHQW {...this.SURSV} {...this.VWDWH} !;
}

.!0P`$!` +`%/`.! 5K`!`*`*+3`3.,`*5`+),+*!*0/`+"`+1.`,,(%0%+*`*

,.+2% !` 0`0+`0$!)`".+)`*5`K

!0W/`/!!`$+3`0+`3!`*`1/!`%0K

S`898`T
.+,!.`0`!0$%*# $,0!.`<

%./0`+"`((L`3!`$2!`0+`.!0!`` 1)`+),+*!*0`0$0`.!!%2!/`0$!` 0`* ` %/,(5/`%0L

1/%*#`0$!`).'1,`+"`0$!`%*%0%(`!4),(!M
LPSRUW React IURP 'react';
LPSRUW { array } IURP 'prop-types';
FRQVW List = ({ data: gists }) => (
XO!
{gists.PDS(gist => (
OL NH\={gist.LG}!{gist.GHVFULSWLRQ}OL!
))}
XO!
);
List.SURS7\SHV = {
GDWD: array
};

!`$2!`1/! ``/00!(!//`"1*0%+*(`+),+*!*0`!1/!`3!` +`*+0`*!! `0+`/0+.!`*5`/00!

*+.` !"%*!`$* (!./`%*/% !`%0L`3$%$`%/`1/1((5``%#`3%*K

$!`,.+,`+*0%*%*#`0$!`.!/,+*/!`".+)`0$!` `%/`((! `dataL`3$%$`%/`#!*!.%`* `*+0

1/!"1(L`10`3!`*`!/%(5`.!*)!`%0L`0$*'/`0+`=L`* `#%2!`%0``)+.!`)!*%*#"1(`*)!K

0`%/`*+3`0%)!`0+`/!!`$+3`0+`1/!`+1.`withData` +`* `)'!`%0`,//`0$!` 0` +3*`0+

0$!`List`+),+*!*0`3!`&1/0`.!0! K`$*'/`0+`0$!`,.0%(`,,(%0%+*L`3!`*`"%./0
/,!%(%6!`0$!` +`0+`)'!``/,!%"%`((`* `1/!`%0`)*5`0%)!/L`/`"+((+3/M
FRQVW withGists = ZLWK'DWD('https://api.github.com/users/gaearon/gists');

$%/`%/`#.!0`!1/!`3!`*`*+3`3.,`*5`+),+*!*0`3%0$`0$!`*!3`withGists`"1*0%+*
* `%0`3%((`.!!%2!`#!.+*W/`#%/0/`3%0$+10`/,!%"5%*#`0$!``)1(0%,(!`0%)!/K

%*((5L`3!`3.,`0$!`+),+*!*0`* `#!0``*!3`+*!M
FRQVW ListWithGists = ZLWK*LVWV(List);

!`*`*+3`,10`0$!`!*$*! `+),+*!*0`*53$!.!`3%0$%*`+1.`,,(%0%+*L`* `%0`&1/0

3+.'/K

1.`withData` +`%/`#.!0L`10`%0`%/`+*(5`(!`0+`(+ `/00%`/L`3$%(!`%*`0$!`.!(`3+.(

/`+"0!*` !,!* `+*`,.)!0!./`+.`,.+,/K

*"+.01*0!(5L`0$!`,.+,/`.!`1*'*+3*`0`0$!`)+)!*0`3!`,,(5`0$!` +L`/+`3!`*!! `
$++'`0$0`%/`((! `3$!*`0$!`,.+,/`.!`2%((!`* `!"+.!`)'%*#`0$!` `((K

S`899`T
.+,!.`0`!0$%*# $,0!.`<

$0`3!`*` +`%/`$*#!`0$!` +`0+`!,0`03+`05,!/`+"`/M``/0.%*#L`/`3!`$2!` +*!

1*0%(`*+3L`* ``"1*0%+*L`3$%$`.!!%2!/`0$!`+),+*!*0W/`,.+,/`* `.!01.*/```0$0
!,!* /`+*`0$!`.!!%2! `,.)!0!./K

$0`%/`,.!005`/0.%#$0"+.3. `0+` +N`3!`$2!`0+`$*#!`0$!`componentDidMount`$++'L`/

"+((+3/M
FRPSRQHQW'LG0RXQW() {
FRQVW endpoint = W\SHRI url === 'function'
 XUO(this.props)
: XUO
IHWFK(endpoint)
.WKHQ(response => response.MVRQ())
.WKHQ(data => this.VHW6WDWH({ data }))
}

"`0$!``%/``"1*0%+*L`3!`"%.!`%0`5`,//%*#`0$!`,.+,/`/`,.)!0!./L`3$%(!`%"`%0`%/``/0.%*#L
3!`1/!`%0` %.!0(5K

!`*`*+3`1/!`0$!` +`%*`0$!`"+((+3%*#`35M
FRQVW withGists = ZLWK'DWD(
SURSV => `https://api.github.com/users/${props.username}/gists`
);

!.!L`0$!`1/!.*)!`"+.`(+ %*#`0$!`#%/0/`*`!`/!0`%*`0$!`,.+,/`+"`0$!`+),+*!*0M
/LVW:LWK*LVWV XVHUQDPH="gaearon" !

5HDFWUHIHWFK
+3L`+1.` +`3+.'/`/`!4,!0! `* `3!`*`.!1/!`%0`.+//`0$!`+ !/!`3%0$+10`*5
,.+(!)/K`$!`-1!/0%+*`%/L`3$0`/$+1( `3!` +`%"`3!`*!! `)+.!`"!01.!/O

+.`!4),(!L`3!`)5`3*0`0+`,+/0`/+)!` 0`0+`0$!`/!.2!.`+.`"!0$`0$!` 0`#%*`3$!*`0$!

,.+,/`$*#!K`(/+L`3!`)5`*+0`3*0`0+`(+ `0$!` 0`+*`componentDidMount`10`,,(5
/+)!`(65`(+ %*#`,00!.*/`%*/0! K

!`+1( `3.%0!`((`0$!`"!01.!/`3!`*!! L`10`0$!.!`%/`*`!4%/0%*#`(%..5`0$0`$/``(+0`+"

1/!"1(`"1*0%+*(%0%!/L`* `%0`%/`.! 5`0+`!`1/! K

$!`(%..5`%/`((! `react-refetc$L`* `%0`%/`)%*0%*! `5` !2!(+,!./`".+)` !.+'1K

!0W/`/!!`$+3`3!`*`1/!`%0`!""!0%2!(5`0+`.!,(!`+1.` +K

S`89:`T
.+,!.`0`!0$%*# $,0!.`<

.+)`0$!`,.!2%+1/`/!0%+*L`3!`$2!``List`+),+*!*0L`3$%$`%/``/00!(!//`"1*0%+*(
+),+*!*0`0$0`*`.!!%2!``+((!0%+*`+"`#%/0/N`%0` %/,(5/`0$!` !/.%,0%+*`"+.`!$`+*!`+"
0$!)M
LPSRUW React IURP 'react';
LPSRUW { array } IURP 'prop-types';

FRQVW List = ({ GDWD: gists }) => (

XO!
{gists.PDS(gist => (
OLNH\={gist.LG}!{gist.GHVFULSWLRQ}OL!
))}
XO!
);

List.SURS7\SHV = {
GDWD: array
};

5`3.,,%*#`0$%/`+),+*!*0`%*/% !`0$!`withData` +L`3!`*`,.+2% !` 0`0+`%0`%*`

0.*/,.!*0`35`0$.+1#$`,.+,/K`!`*`!*$*!`%0`5`,//%*#`0$!``+"`0$!`!* ,+%*0K

%0$`react-refetchL`3!`*` +`0$!`/)!`0$%*#K`%./0`+"`((L`3!`*!! `0+`%*/0((`0$!`(%..5M

QSPLQVWDOOUHDFWUHIHWFKVDYH

$!*L`3!`%),+.0`0$!`connect`"1*0%+*`%*/% !`+1.`)+ 1(!M

LPSRUW { connect } IURP 'react-refetch';

%*((5L`3!` !+.0!`+1.`+),+*!*0`1/%*#`0$!`connect` +K`!`1/!`0$!`,.0%(`,,(%0%+*

0!$*%-1!`0+`/,!%(%6!`0$!`"1*0%+*`* `.!1/!`%0M
FRQVW connectWithGists = FRQQHFW(({ username }) => ({
JLVWV: `https://api.github.com/users/${XVHUQDPH}/gists`
}));

$!`,.!! %*#`+ !`*!! /``%0`+"`*`!4,(*0%+*K

!`1/!`0$!`connect`"1*0%+*L`,//%*#``"1*0%+*`0+`%0`/``,.)!0!.K`$!`,.)!0!.
"1*0%+*`.!!%2!/`0$!`,.+,/`Q* `0$!`+*0!40R`/`,.)!0!./`/+`0$0`3!`*`.!0!` 5*)%
/`/! `+*`0$!`1..!*0`,.+,!.0%!/`+"`0$!`+),+*!*0K

1.`(('`"1*0%+*`.!01.*/`*`+&!0`3$!.!`0$!`'!5/`.!`0$!`% !*0%"%!./`+"`0$!`.!-1!/0L`*
0$!`2(1!/`.!`0$!`/K`$!``%/`*+0`(%)%0! `0+`!%*#``/0.%*#N`3!W((`/!!`$+3`3!`*`
)1(0%,(!`,.)!0!./`0+`0$!`.!-1!/0`(0!.K

S`89;`T
.+,!.`0`!0$%*# $,0!.`<

0`0$%/`,+%*0L`3!`!*$*!`+1.`+),+*!*0`3%0$`0$!`"1*0%+*`3!`&1/0`.!0! L`/`"+((+3/M
FRQVW ListWithGists = FRQQHFW:LWK*LVWV(List);

!`*+3`$2!`0+`)'!`/)((`$*#!/`0+`0$!`%*%0%(`+),+*!*0`0+`)'!`%0`3+.'`3!((`3%0$`0$!
*!3` +K

%./0`+"`((L`0$!`,.)!0!.`%/`*+0`((! `data`*5)+.!N`%0`%/`((! `gistsK`!0_.!"!0$`3%((

%*&!0``,.+,!.05`3%0$`0$!`/)!`*)!`+"`0$!`'!5`0$0`3!`/,!%"%! `%*`0$!`connect`"1*0%+*K

$!`gists`,.+,`%/`*+0`0$!`01(` 0—%0`%/``,.0%1(.`05,!`+"`+&!0L
((! `PromiseStateK

`PromiseState`+&!0`%/``/5*$.+*+1/`.!,.!/!*00%+*`+"``PromiseL`* `%0`$/`/+)!
1/!"1(`00.%10!/`/1$`/`,!* %*#`+.`"1("%((! `0$0`3!`*`1/!`0+`/$+3``/,%**!.`+.``(%/0`+"
0K

$!.!`%/`(/+``rejected`,.+,!.05`0$0`3!`*`1/!`%*`/!`+"`!..+./K

$!*`0$!`.!-1!/0`%/`"1("%((! L`3!`*`!//`0$!` 0`3!`3*0! `0+`(+ `1/%*#

0$!`value`,.+,!.05`* `(++,`0$.+1#$`%0`0+` %/,(5`0$!`#%/0/M
FRQVW List = ({ gists }) => (
gists.IXOILOOHG && (
XO!
{gists.value.PDS(gist => (
OLNH\={gist.LG}!{gist.GHVFULSWLRQ}OL!
))}
XO!
)
);

/`/++*`/`0$!`/00!(!//`"1*0%+*(`+),+*!*0`%/`.!* !.! L`3!`*`$!'`0+`2(% 0!`%"`0$!

.!-1!/0`%/`"1("%((! N`%"`%0`%/L`3!`/$+3`0$!`(%/0`1/%*#`0$!`gists.value`,.+,!.05K

2!.50$%*#`!(/!`.!)%*/`0$!`/)!K

!`(/+`$2!`0+`1, 0!`0$!`propTypes`* `$*#!`0$!`*)!`+"`0$!`.!!%2! `,.+,`* `%0/

05,!M
LPSRUW { object } IURP 'prop-types';
...
List.SURS7\SHV = {
JLVWV: object
};

S`89<`T
.+,!.`0`!0$%*# $,0!.`<

+3`0$0`3!`$2!`0$%/`(%..5`%*`+1.`,.+&!0L`3!`*` `)+.!`"1*0%+*(%0%!/`0+
+1.`List`+),+*!*0K

+.`!4),(!L`3!`*` ``100+*`0+`/0.0`0$!`#%/0/K

!0W/`/0.0`3%0$`0$!` `* `0$!*` `0$!`.!(` `((L`0$*'/`0+`react-refetchK

!` +`*+0`3*0`0+` `0++`)*5`.!/,+*/%%(%0%!/`0+`0$!`List`+),+*!*0`/`%0/`.+(!`%/`0+

%/,(5`0$!`(%/0N`/+L`3!`$*#!`%0`0+`1/!``/1+),+*!*0`"+.`!$`.+3K

!`((`0$!`*!3`+),+*!*0`GistL`* `3!`.!`#+%*#`0+`1/!`%0`%*/% !`0$!`(++,`%*`0$!

"+((+3%*#`35M
FRQVW List = ({ gists }) => (
gists.IXOILOOHG && (
XO!
{gists.value.PDS(gist => (
*LVWNH\={gist.LG} {...gist}!
))}
XO!
)
);

!`&1/0`.!,(! `0$!`<li>`!(!)!*0`3%0$`0$!`Gist`+),+*!*0L`* `3!`/,.! `0$!`gist

+&!0`0+`%0`/+`0$0`%0`.!!%2!/`/%*#(!`,.+,!.0%!/`* `!+)!/`!/%!.`0+`0!/0`* `)%*0%*K

$!`Gist`+),+*!*0`%/``/00!(!//`"1*0%+*(`+),+*!*0`!1/!`0$!`/0..%*#`(+#%`%/
$* (! `5`react-refetch`* `3!` +`*+0`*!! `*5`/00!`+.`!2!*0`$* (!./K

$!`+),+*!*0`.!!%2!/`0$!` !/.%,0%+*`* L`"+.`*+3L`0$!`+*(5` %""!.!*!`".+)`0$!`,.!2%+1/

).'1,`%/`0$0`%0`$/``+1`100+*L`0+`3$%$`3!`3%((` `/+)!`"1*0%+*(%0%!/`/++*M
FRQVW Gist = ({ description }) => (
OL!
{GHVFULSWLRQ}
EXWWRQ!+1EXWWRQ!
OL!
);
Gist.SURS7\SHV = {
GHVFULSWLRQ: string
};

$!``+"`0$!`!* ,+%*0`0+`/0.``#%/0`%/`/`"+((+3/M
https:/b/bapi.bgithub.bcom/bgists/b:id/bstarbaccess_btoken=b:access_btokenK

S`89=`T
.+,!.`0`!0$%*# $,0!.`<

!.!L`:id`%/`0$!` `+"`0$!`#%/0`0$0`3!`3*0`0+`/0.L`* `0$!`!//`0+'!*`%/`0$!

10$!*0%0%+*`0+'!*`0$0W/`.!-1%.! `0+`.1*`0$!`0%+*K`$!.!`.!` %""!.!*0`35/`+"`#!00%*#`*
!//`0+'!*L`* `0$!5`.!`3!((`!4,(%*! `%*`0$!` %0 1` +1)!*00%+*K

$!5`.!`(/+`+10/% !`0$!`/+,!`+"`0$%/`++'L`/+`3!`.!`*+0`#+%*#`0+`+2!.`0$!)`%*`0$%/
/!0%+*K`$!`*!40`/0!,`%/`0+` ``"1*0%+*`0+`0$!`onClick`!2!*0`+"`0$!`100+*`0+`)'!`*
 `((`3%0$`0$!` `+"`0$!`#%/0K

$!`+**!0`"1*0%+*`+"`react-refetch`!,0/``"1*0%+*`/`0$!`"%./0`.#1)!*0L`* `0$!
"1*0%+*`$/`0+`.!01.*`*`+&!0`+"`.!-1!/0/L`/`3!`$2!`,.!2%+1/(5`/!!*K` "`0$!`2(1!/`+"`0$!
.!-1!/0/`.!`/0.%*#/L`0$!*`0$!` 0`%/`"!0$! `/`/++*`/`0$!`,.+,/`.!`2%((!K

"`0$!`2(1!`+"``.!-1!/0`'!5`%/``"1*0%+*`%*/0! L`%0`#!0/`,//! `%*0+`0$!`+),+*!*0L`* `%0

*`!`"%.! `(6%(5K`+.`!4),(!L`%0`*`!`0.%##!.! `3$!*``,.0%1(.`!2!*0`+1./K

!0W/` !(2!`%*0+`0$!`+ !M
FRQVW token = 'access_token=123';

FRQVW connectWithStar = FRQQHFW(({ id }) => ({

star: () => ({
VWDU5HVSRQVH: {
XUO: `https://api.github.com/gists/${LG}/star${WRNHQ}`,
PHWKRG: 'PUT'
}
})
}));

%./0L`3!`,.0%((5`,,(5`0$!`+((!0%+*`"1*0%+*L`* `3!`1/!`0$!`id`,.+,`0+`+),+/!`0$!
K

!`0$!*` !"%*!`*`+&!0`+"`.!-1!/0/L`3$!.!`0$!`'!5`%/`star`* `0$!`2(1!`%/``"1*0%+*`0$0L

#%*L`.!01.*/`*`+&!0`+"`.!-1!/0/K` *`0$%/`/!L`0$!`2(1!`+"`0$!`starResponse`'!5`%/`*+0`
/%),(!`/0.%*#L`10`*`+&!0`3%0$`03+`,.)!0!./M``* `)!0$+ K

$%/`%/`!1/!L`5` !"1(0L`0$!`(%..5`"%.!/`*` ` L`10`%*`0$%/`/!L`3!`.!`.!-1%.!

0+`1/!```0+`/0.``#%/0K

0`%/`*+3`0%)!`0+`!*$*!`+1.`+),+*!*0M
FRQVW GistWithStar = FRQQHFW:LWK6WDU(Gist);

(/+L`%0`%/`0%)!`0+`1/!`0$!`star`"1*0%+*`%*/% !`%0`0+`"%.!`0$!`.!-1!/0M
FRQVW Gist = ({ description, star }) => (
OL!

S`89>`T
.+,!.`0`!0$%*# $,0!.`<

{GHVFULSWLRQ}
EXWWRQRQ&OLFN={star}!+1EXWWRQ!
OL!
);
Gist.SURS7\SHV = {
GHVFULSWLRQ: string,
VWDU: func
};

/`5+1`*`/!!L`%0`%/`2!.5`/%),(!N`0$!`+),+*!*0`.!!%2!/`0$!`star`"1*0%+*L`3$!.!`0$!
/0.`%/`0$!`*)!`+"`0$!`.!-1!/0`0$0`3!` !"%*! `%*`0$!`+**!0`"1*0%+*K`$!`"1*0%+*`#!0/
"%.! `3$!*`0$!`100+*`%/`(%'! `+*K

$%/`%/`0$!`"%*(`.!/1(0`%*`0$!`.+3/!.`3%* +3M

S`89?`T
.+,!.`0`!0$%*# $,0!.`<

+1`)5`$2!`*+0! `0$0`0$*'/`0+`react-refetchL`3!`*`'!!,`+1.`+),+*!*0/`/00!(!//
* `1*3.!`+"`0$!`0%+*/`0$0`0$!5`.!`"%.%*#K

$%/`)'!/`0!/0/`!/%!.L`* `)!*/`0$0`3!`*`(/+`$*#!`0$!`%),(!)!*00%+*`+"`0$!
+`3%0$+10`)+ %"5%*#`0$!`/1+),+*!*0K

&RQWH[W$3,
$!`*!3`* `+""%%(`+*0!40` `3/`%*0.+ 1! `%*`!0`8=K:K7K`!"+.!L`!0`+""!.! `*
!4,!.%)!*0(` `"+.`+*0!40K`(0$+1#$`%0`3/``,+3!."1(`0++(L`%0/`1/!`3/` %/+1.#!
!1/!`+"`%*$!.!*0`,.+(!)/`%*`0$!` K`

!0`8=K:`%*0.+ 1!/``*!3`+*0!40` `0$0`%/`)+.!`!""%%!*0`* `/1,,+.0/`+0$`/00%`05,!

$!'%*#`* ` !!,`1, 0!/K

$!`+*0!40` `%),(!)!*00%+*`%/`.!((5`!/5K`%./0L`5+1`*!! `0+`.!0!`5+1.`+*0!40

Q1/%*#`createContextR`* `5+1.`.+2% !.L`3$%$`%/``!0`class`+),+*!*0K`!0W/`.!0!
`+*0!40`"+.`+1.`List`+),+*!*0`0+`"!0$`0$!`#%/0/K`$%/`"%(!`*!! /`0+`!`((!
ListContext.jsxM

'HSHQGHQFLHV
LPSRUW React, { Component, createContext } IURP 'react';
LPSRUW { element } IURP 'prop-types';

&RQWH[W
H[SRUWFRQVW ListContext = FUHDWH&RQWH[W();

H[SRUWFODVV ListProvider H[WHQGV Component {

VWDWLF propTypes = {
FKLOGUHQ: element
};

VWDWH = {
JLVWV: [],
VWDWXV: 'initial'
}

FRPSRQHQW'LG0RXQW() {
)HWFKLQJWKHJLVWVZKHQWKHFRPSRQHQWLVPRXQWHG
this.IHWFK*LVWV();
}

IHWFK*LVWV = DV\QF () => {

this.VHW6WDWH({

S`89@`T
.+,!.`0`!0$%*# $,0!.`<

JLVWV: [],
VWDWXV: 'fetching'
});

WU\ {
FRQVW data = DZDLW
IHWFK('https://api.github.com/users/gaearon/gists')
.WKHQ(response => response.MVRQ());

this.VHW6WDWH({
JLVWV: data,
VWDWXV: 'done'
});
} FDWFK (error) {
this.VHW6WDWH({
VWDWXV: 'error'
});
}
}

UHQGHU() {
FRQVW { children } = this.SURSV;

UHWXUQ (
/LVW&RQWH[W3URYLGHU
YDOXH={{
...this.VWDWH
(YHU\WKLQJ\RXSDVVLQKHUHZLOOEHDYDLODEOHLQWKH
&RQVXPHU
``
!
{children}
/LVW&RQWH[W3URYLGHU!
);
}
}

"0!.`3!`$2!`.!0! `+1.`Context`* `ProviderL`3!`*!! `0+`%),+.0`%0`%*`0$!`+),+*!*0

3!`3*0`0+`+*/1)!`%0`3%0$L`(%'!`0$%/M
'HSHQGHQFLHV
LPSRUW React IURP 'react';
LPSRUW { array } IURP 'prop-types';

3URYLGHUV
LPSRUW { ListProvider, ListContext } IURP './ListContext';

FRQVW List = () => (

S`8:7`T
.+,!.`0`!0$%*# $,0!.`<

/LVW3URYLGHU!
/LVW&RQWH[W&RQVXPHU!
^ 7KHVHSURSVDUHFRPPLQJIURPWKH3URYLGHU VYDOXH `
{({ JLVWV }) => (
XO!
{gists.PDS(gist => (
OLNH\={gist.iG}!{gist.GHVFULSWLRQ}OL!
))}
XO!
)}
/LVW&RQWH[W&RQVXPHU!
/LVW3URYLGHU!
);

List.SURS7\SHV = {
GDWD: array
};

H[SRUWGHIDXOW List;

/`5+1`*`/!!L`!2!.50$%*#`5+1` `0+`5+1.`.+2% !.W/`2(1!`3%((`!`2%((!`%*`5+1.

+*/1)!.K` "`5+1`$2!`1/! `! 14L`0$%/`%/`2!.5`/%)%(.`0+`#!00%*#`5+1.`! 14`/00!`5`1/%*#
0$!`connect` +K` 0`%/`(/+`,+//%(!`0+` `"1*0%+*/`Q/%)%(.`0+`! 14`0%+*/R`* `0$!*`
!4!10!`0$+/!`%*`5+1.`+*/1)!.K`!0W/`0.5``/%`!4),(!`* `.!0!``"1*0%+*`0$0`3%((` +
`/%),(!`console.logM
P\/RJ$FWLRQ = () => {
console.ORJ('This is similar to a Redux action');
}

UHQGHU() {
FRQVW { children } = this.SURSV;

UHWXUQ (
/LVW&RQWH[W3URYLGHU
YDOXH={{
P\/RJ$FWLRQ: this.P\/RJ$FWLRQ, // Here you can pass your actions
...this.VWDWH
}}
>
{children}
/LVW&RQWH[W3URYLGHU!
);
}

S`8:8`T
.+,!.`0`!0$%*# $,0!.`<

$!*L`%*`5+1.`+*/1)!.L`5+1`*` +`/+)!0$%*#`(%'!`0$%/M
FRQVW List = () => (
/LVW3URYLGHU!
/LVW&RQWH[W&RQVXPHU!
{/* These props are comming from the Provider's value*/}
{({ gists, P\/RJ$FWLRQ }) => (
XO!
{P\/RJ$FWLRQ()}
{gists.PDS(gist => (
<li key={gist.id}>{gist.description}</li>
))}
</ul>
)}
/LVW&RQWH[W&RQVXPHU!
/LVW3URYLGHU!
);

$!*L`%*`5+1.`.+3/!.`+*/+(!L`5+1`3%((`/!!`0$!`"+((+3%*#M

6XPPDU\
$!`&+1.*!5`0$.+1#$` 0`"!0$%*#`%*`!0`$/`+)!`0+`*`!* L`* `5+1`*+3`'*+3`$+3`0+
/!* `* `.!0.%!2!` 0`0+`* `".+)` `!* ,+%*0/K`!`/3`$+3` 0`"(+3`3+.'/`%*`!0
* `3$5`0$!`,,.+$`%0`!*"+.!/`*`)'!`+1.`,,(%0%+*/`/%),(!`* `(!*K

!`3!*0`0$.+1#$`/+)!`+"`0$!`)+/0`+))+*`,00!.*/`0+`)'!`$%( .!*`* `,.!*0/

+))1*%0!`1/%*#`(('/K`!`(!.*! `$+3`3!`+1( `1/!``+))+*`,.!*0`0+`/$.!
0`.+//`+),+*!*0/`0$0`.!`*+0` %.!0(5`+**!0! K

S`8:9`T
.+,!.`0`!0$%*# $,0!.`<

*`0$!`/!+* `/!0%+*L`3!`/0.0! `3%0$``/%),(!`+),+*!*0L`3$%$`3/`(!`0+`(+ ` 0

".+)` %0 1L`* `3!`) !`%0`.!1/(!L`0$*'/`0+` +/K`!`$2!`*+3`)/0!.! `0$!
0!$*%-1!/`0$0`(!0`1/`/0.0`0$!`(+#%`35`".+)`+),+*!*0/`/+`0$0`3!`*`)'!
0$!)`/` 1)`/`,+//%(!L`0$1/`%),.+2%*#`0$!%.`0!/0%(%05K

!`(!.*! `$+3`3!`+1( `1/!`react-refetch`0+`,,(5` 0`"!0$%*#`,00!.*/`0+`+1.

+),+*!*0/`* `2+% `.!%*2!*0%*#`0$!`3$!!(K

%*((5L`3!`(!.*! `$+3`0+`1/!`0$!`*!3`+*0!40` K

*`0$!`*!40`$,0!.L`3!`3%((`/!!`$+3`3!`*`3+.'`!""!0%2!(5`3%0$`!0`%*`0$!`.+3/!.K

S`8::`T
 
:ULWH&RGHIRUWKH%URZVHU
$!.!`.!`/+)!`/,!%"%`+,!.0%+*/`3!`*` +`3$!*`3!`3+.'`3%0$`!0`* `0$!`.+3/!.K
+.`!4),(!L`3!`*`/'`+1.`1/!./`0+`!*0!.`/+)!`%*"+.)0%+*`1/%*#`"+.)/L`* `3!`3%((`(++'
0`$+3L`%*`!0L`3!`*`,,(5` %""!.!*0`0!$*%-1!/`0+` !(`3%0$`0$!)K

!`*`%),(!)!*0`1*+*0.+((! `+),+*!*0/`* `(!0`0$!`"%!( /`'!!,`0$!%.`%*0!.*(`/00!/L`+.

3!`*`1/!`+*0.+((! `+*!/L`3$!.!`3!`$2!`"1((`+*0.+(`+2!.`0$!`/00!`+"`0$!`"%!( /K

*`0$%/`$,0!.L`3!`3%((`(/+`(++'`0`$+3`!2!*0/`%*`!0`3+.'`* `$+3`0$!`(%..5
%),(!)!*0/`/+)!` 2*! `0!$*%-1!/`0+`#%2!`1/``+*/%/0!*0`%*0!."!`.+//` %""!.!*0
.+3/!./K`!`3%((`(/+`(++'`0`/+)!`%*0!.!/0%*#`/+(10%+*/`0$0`0$!`!0`0!)`$/
%),(!)!*0! `0+`)'!`0$!`!2!*0`/5/0!)`2!.5`,!."+.)*0K

"0!.`0$!`!2!*0/L`3!`3%((`&1),`%*0+`.!"/`0+`(++'`0`$+3`3!`*`!//`0$!`1* !.(5%*#`
*+ !/`%*`+1.`!0`+),+*!*0/K`$%/`.!,.!/!*0/``,+3!."1(`"!01.!L`10`%0`/$+1( `!`1/!
.!"1((5`!1/!`%0`.!'/`/+)!`+"`0$!`+*2!*0%+*/`0$0`)'!`!0`!/5`0+`3+.'`3%0$K

"0!.`0$!`.!"/L`3!`3%((`(++'`0`$+3`3!`*`%),(!)!*0`*%)0%+*/`!/%(5`3%0$`0$!`!0` _
+*/`* `0$%. _,.05`(%..%!/`/1$`/`.!0_)+0%+*K`%*((5L`3!`3%((`(!.*`$+3`!/5`%0`%/`0+
3+.'`3%0$` /`%*`!0L`* `$+3`3!`*`.!0!` 5*)%((5`+*"%#1.(!`%+*/`"+.`+1.
,,(%0%+*/K

*`0$%/`$,0!.L`3!`3%((`#+`0$.+1#$`0$!`"+((+3%*#`0+,%/M

/%*#` %""!.!*0`0!$*%-1!/`0+`.!0!`"+.)/`3%0$`!0
%/0!*%*#`0+``!2!*0/`* `%),(!)!*0%*#`1/0+)`$* (!./
`35`+"`,!."+.)%*#`%),!.0%2!`+,!.0%+*/`+*``*+ !/`1/%*#`.!"/
.!0%*#`/%),(!`*%)0%+*/`0$0`3+.'`.+//`0$!` %""!.!*0`.+3/!./
$!`!0`35`+"`#!*!.0%*#` /
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

)RUPV
/`/++*`/`3!`/0.0`1%( %*#``.!(`,,(%0%+*`3%0$`!0L`3!`*!! `0+`%*0!.0`3%0$`0$!
1/!./K` "`3!`3*0`0+`/'`"+.`%*"+.)0%+*`".+)`+1.`1/!./`3%0$%*`0$!`.+3/!.L`"+.)/`.!`0$!
)+/0`+))+*`/+(10%+*K`1!`0+`0$!`35`0$!`(%..5`3+.'/`* `%0/` !(.0%2!`*01.!L` !(%*#
3%0$`%*,10`"%!( /`* `+0$!.`"+.)`!(!)!*0/`%/`*+*_0.%2%(`3%0$`!0L`10`/`/++*`/`3!
1* !./0* `%0/`(+#%L`%0`!+)!/`(!.K

8QFRQWUROOHGFRPSRQHQWV
!0W/`/0.0`3%0$``/%`!4),(!— %/,(5%*#``"+.)`3%0$`*`%*,10`"%!( `* ``1)%0
100+*K

$!`+ !`%/`,.!005`/0.%#$0"+.3. M
FRQVW Uncontrolled = () => (
IRUP!
LQSXWW\SH="text" !
EXWWRQ!SubmitEXWWRQ!
IRUP!
);

"`3!`.1*`0$!`,.!! %*#`/*%,,!0`%*`0$!`.+3/!.L`3!`*`/!!`!40(5`3$0`3!`!4,!0—*
%*,10`"%!( `%*`3$%$`3!`*`3.%0!`/+)!0$%*#`* ``(%'(!`100+*K`$%/`%/`*`!4),(!`+"
*`1*+*0.+((! `+),+*!*0L`3$!.!`3!` +`*+0`/!0`0$!`2(1!`+"`0$!`%*,10`"%!( L`10`3!`(!0`0$!
+),+*!*0`)*#!`%0/`+3*`%*0!.*(`/00!K

+/0`(%'!(5L`3!`3*0`0+` +`/+)!0$%*#`3%0$`0$!`2(1!`+"`0$!`!(!)!*0`3$!*`0$!`1)%0
100+*`%/`(%'! K`+.`!4),(!L`3!`)5`3*0`0+`/!* `0$!` 0`0+`*` `!* ,+%*0K

!`*` +`0$%/`!/%(5`5` %*#`*`onChange`(%/0!*!.`Q3!`3%((`0('`)+.!`+10`!2!*0

(%/0!*!./`(0!.`%*`0$%/`$,0!.RK`!0W/`(++'`0`3$0`%0`)!*/`0+` ``(%/0!*!.K

%./0L`3!`$2!`0+`$*#!`0$!`+),+*!*0`".+)`/00!(!//`0+``class`!1/!`3!`*!! `0+
!"%*!`/+)!`"1*0%+*/`* ``/00!M
FODVV Uncontrolled H[WHQGV Component

$!`(//`$/``constructor`3$!.!`3!`%* `0$!`!2!*0`(%/0!*!.M
FRQVWUXFWRU(props) {
VXSHU(props);
this.KDQGOH&KDQJH = this.handleChange.ELQG(this);
}

S`8:<`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

$!*L`3!` !"%*!`0$!`!2!*0`(%/0!*!.`%0/!("M
KDQGOH&KDQJH({ target: { value } }) {
console.ORJ(YDOXH);
}

$!`!2!*0`(%/0!*!.`%/`.!!%2%*#`*`!2!*0`+&!0L`3$!.!`0$!`0.#!0`.!,.!/!*0/`0$!`"%!( `0$0
#!*!.0! `0$!`!2!*0L`* `3!`.!`%*0!.!/0! `%*`%0/`2(1!K`!`/0.0`5`&1/0`(+##%*#`%0`!1/!`%0
%/`%),+.0*0`0+`,.+!! `3%0$`/)((`/0!,/L`10`3!`3%((`/0+.!`0$!`2(1!`%*0+`0$!`/00!`/++*K

%*((5L`3!`.!* !.`0$!`"+.)M
UHQGHU() {
UHWXUQ (
IRUP!
LQSXWW\SH="text" RQ&KDQJH={this.KDQGOH&KDQJH}!
EXWWRQ!SubmitEXWWRQ!
IRUP!
);
}

"`3!`.!* !.`0$!`+),+*!*0`%*/% !`0$!`.+3/!.`* `05,!`0$!`3+. `React`%*0+`0$!`"+.)

"%!( L`3!`3%((`/!!`/+)!0$%*#`(%'!`0$!`"+((+3%*#`%*/% !`0$!`+*/+(!M
5
5H
5HD
5HDF
5HDFW

$!`handleChange`(%/0!*!.`%/`"%.! `!2!.5`0%)!`0$!`2(1!`+"`0$!`%*,10`$*#!/K`$!.!"+.!L
+1.`"1*0%+*`%/`((! `+*!`"+.`!$`05,! `$.0!.K`$!`*!40`/0!,`%/`0+`/0+.!`0$!`2(1!`0$0W/
!*0!.! `5`0$!`1/!.`* `)'!`%0`2%((!`3$!*`0$!`1/!.`(%'/`0$!`1)%0`100+*K

!`&1/0`$2!`0+`$*#!`0$!`%),(!)!*00%+*`+"`0$!`$* (!.`0+`/0+.!`%0`%*`0$!`/00!`%*/0! `+"

(+##%*#`%0L`/`"+((+3/M
KDQGOH&KDQJH({ WDUJHW: { YDOXH } }) {
this.VHW6WDWH({
YDOXH
});
}

!00%*#`*+0%"%! `+"`3$!*`0$!`"+.)`%/`/1)%00! `%/`2!.5`/%)%(.`0+`(%/0!*%*#`0+`0$!`$*#!

!2!*0`+"`0$!`%*,10`"%!( N`0$!5`.!`+0$`!2!*0/`0$0`.!`((! `5`0$!`.+3/!.`3$!*`/+)!0$%*#
$,,!*/K

S`8:=`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

+L`(!0W/`/5`3!` ``/!+* `!2!*0`$* (!.`%*/% !`0$!`constructorL`/`"+((+3/M

FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
YDOXH: ''
};
this.KDQGOH&KDQJH = this.handleChange.ELQG(this);
this.KDQGOH6XEPLW = this.handleSubmit.ELQG(this);
}

!`)5`(/+`3*0`0+`%*%0%(%6!`0$!`2(1!`,.+,!.05`+"`0$!`/00!`/`*`!),05`/0.%*#L`%*`/!`0$!
100+*`#!0/`(%'! `!"+.!`*5`$*#!`!2!*0`%/`0.%##!.! K

!0W/` !"%*!`0$!`handleSubmit`"1*0%+*L`3$!.!`3!`&1/0`(+#`0$!`2(1!K` *``.!(_3+.(

/!*.%+L`5+1`+1( `/!* `0$!` 0`0+`*` `!* ,+%*0`+.`,//`%0`0+`*+0$!.`+),+*!*0M
KDQGOH6XEPLW(e) {
e.SUHYHQW'HIDXOW();
console.ORJ(this.state.YDOXH);
}

$%/`$* (!.`%/`,.!005`/0.%#$0"+.3. —3!`&1/0`(+#`0$!`2(1!`1..!*0(5`/0+.! `%*`0$!`/00!K

!`(/+`3*0`0+`+2!.+)!`0$!` !"1(0`!$2%+.`+"`0$!`.+3/!.`3$!*`0$!`"+.)`%/`/1)%00! L
0+`,!."+.)``1/0+)`0%+*K

$%/`/!!)/`.!/+*(!L`* `%0`3+.'/`2!.5`3!((`"+.``/%*#(!`"%!( K`$!`-1!/0%+*`*+3`%/L`3$0

%"`3!`$2!`)1(0%,(!`"%!( /O`1,,+/!`3!`$2!`0!*/`+"` %""!.!*0`"%!( /O

!0W/`/0.0`3%0$``/%`!4),(!L`3$!.!`3!`.!0!`!$`"%!( `* `$* (!.`)*1((5`* `(++'

0`$+3`3!`*`%),.+2!`%0`5`,,(5%*#` %""!.!*0`(!2!(/`+"`+,0%)%60%+*K

!0W/`.!0!``*!3`"+.)`3%0$`"%./0`* `(/0`*)!`"%!( /K`!`*`.!1/!`0$!`Uncontrolled

(//`3!`&1/0`.!0! `* `$*#!`0$!`constructorL`/`"+((+3/M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
ILUVW1DPH: '',
ODVW1DPH: ''
};
this.KDQGOH&KDQJH)LUVW1DPH = this.handleChangeFirstName.ELQG(this);
this.KDQGOH&KDQJH/DVW1DPH = this.handleChangeLastName.ELQG(this);
this.KDQGOH6XEPLW = this.handleSubmit.ELQG(this);
}

S`8:>`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

!`%*%0%(%6!`0$!`03+`"%!( /`%*/% !`0$!`/00!`* `3!` !"%*!`*`!2!*0`$* (!.`"+.`!$`+*!`+"

0$!`"%!( /`/`3!((K`/`5+1`)5`$2!`*+0%! L`0$%/` +!/`*+0`/(!`2!.5`3!((`3$!*`0$!.!`.!
(+0/`+"`"%!( /L`10`%0`%/`%),+.0*0`0+`1* !./0* `0$!`,.+(!)`(!.(5`!"+.!`)+2%*#`0+``)+.!
"(!4%(!`/+(10%+*K

+3L`3!`%),(!)!*0`0$!`*!3`$* (!./M
KDQGOH&KDQJH)LUVW1DPH({ WDUJHW: { YDOXH } }) {
this.VHW6WDWH({
ILUVW1DPH: value
})
}
KDQGOH&KDQJH/DVW1DPH({ WDUJHW: { YDOXH } }) {
this.VHW6WDWH({
ODVW1DPH: value
})
}

!`(/+`$2!`0+`$*#!`0$!`/1)%0`$* (!.``(%00(!`%0`/+`0$0`%0` %/,(5/`0$!`"%./0`* `0$!`(/0

*)!`3$!*`%0`#!0/`(%'! M
KDQGOH6XEPLW(e) {
e.SUHYHQW'HIDXOW();
console.ORJ(`^this.state.ILUVW1DPH` ^this.state.ODVW1DPH``);
}

%*((5L`3!` !/.%!`+1.`!(!)!*0/L`/0.101.!`%*/% !`0$!`render`)!0$+ M

UHQGHU() {
UHWXUQ (
IRUPRQ6XEPLW={this.KDQGOH6XEPLW}!
LQSXWW\SH="text" RQ&KDQJH={this.KDQGOH&KDQJH)LUVW1DPH}!
LQSXWW\SH="text" RQ&KDQJH={this.KDQGOH&KDQJH/DVW1DPH} !
EXWWRQ!SubmitEXWWRQ!
IRUP!
);
}

!`.!`.! 5`0+`#+—%"`3!`.1*`0$!`,.!! %*#`+),+*!*0`%*`0$!`.+3/!.L`3!`3%((`/!!`03+

"%!( /L`* `%"`3!`05,!`Dan`%*0+`0$!`"%./0`+*!`* `Abramov`%*0+`0$!`/!+* `+*!L`3!`3%((`/!!
0$!`"1((`*)!` %/,(5! `%*`0$!`.+3/!.`+*/+(!`3$!*`0$!`"+.)`%/`/1)%00! K

#%*L`0$%/`3+.'/`"%*!L`* `3!`*` +`/+)!`%*0!.!/0%*#`0$%*#/`%*`0$%/`35L`10`%0` +!/`*+0

$* (!`+),(!4`/!*.%+/`3%0$+10`.!-1%.%*#`1/`0+`3.%0!``(+0`+"`+%(!.,(0!`+ !K

S`8:?`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

!0W/`(++'`0`$+3`3!`*`+,0%)%6!`%0``(%00(!`%0K`1.`#+(`%/`0+`1/!``/%*#(!`$*#!`$* (!.`/+
0$0`3!`*` `*`.%0..5`*1)!.`+"`"%!( /`3%0$+10`.!0%*#`*!3`(%/0!*!./K

!0W/`#+`'`0+`0$!`constructor`* ` !"%*!``/%*#(!`$*#!`$* (!.M

FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
ILUVW1DPH: '',
ODVW1DPH: ''
}
this.KDQGOH&KDQJH = this.handleChange.ELQG(this);
this.KDQGOH6XEPLW = this.handleSubmit.ELQG(this);
}

!`)5`/0%((`3*0`0+`%*%0%(%6!`0$!`2(1!/L`* `(0!.`%*`0$%/`/!0%+*L`3!`3%((`(++'`0`$+3`0+
,.+2% !`,.!"%((! `2(1!/`"+.`0$!`"+.)K

+3L`0$!`%*0!.!/0%*#`%0`%/`0$!`35`%*`3$%$`3!`*`)+ %"5`0$!`onChange`$* (!.

%),(!)!*00%+*`0+`)'!`%0`3+.'`%*` %""!.!*0`"%!( /M
KDQGOH&KDQJH({ WDUJHW: { QDPH, YDOXH } }) {
this.VHW6WDWH({
[QDPH]: value
});
}

/`3!`$2!`/!!*`,.!2%+1/(5L`0$!`target`,.+,!.05`+"`0$!`!2!*0`3!`.!!%2!`.!,.!/!*0/`0$!
%*,10`"%!( `0$0`$/`"%.! `0$!`!2!*0L`/+`3!`*`1/!`0$!`*)!`+"`0$!`"%!( `* `%0/`2(1!`/
2.%(!/K

!`0$!*`$2!`0+`/!0`0$!`*)!`"+.`!$`"%!( L`3$%$`3!`.!`#+%*#`0+` +`1/%*#`0$!`render

)!0$+ M
UHQGHU() {
UHWXUQ (
IRUPRQ6XEPLW={this.KDQGOH6XEPLW}!
LQSXW
W\SH="text"
QDPH="firstName"
RQ&KDQJH={this.KDQGOH&KDQJH}
!
LQSXW
W\SH="text"
QDPH="lastName"
RQ&KDQJH={this.KDQGOH&KDQJH}
!

S`8:@`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

EXWWRQ!SubmitEXWWRQ!
IRUP!
);
}

$0W/`%0N`3!`*`*+3` `/`)*5`"%!( /`/`3!`3*0`3%0$+10`.!0%*#` %0%+*(`$* (!./K

&RQWUROOHGFRPSRQHQWV
$!`*!40`0$%*#`3!`.!`#+%*#`0+`(++'`0`%/`$+3`3!`*`,.!"%((`0$!`"+.)`"%!( /`3%0$`/+)!
2(1!/L`3$%$`3!`)5`.!!%2!`".+)`0$!`/!.2!.`+.`/`,.+,/`".+)`0$!`,.!*0K

+`1* !./0* `0$%/`+*!,0`"1((5L`3!`3%((`/0.0`#%*`".+)``2!.5`/%),(!`/00!(!//`"1*0%+*

+),+*!*0L`* `3!`3%((`%),.+2!`%0`/0!,`5`/0!,K

$!`"%./0`!4),(!`/$+3/``,.! !"%*! `2(1!`%*/% !`0$!`%*,10`"%!( M

FRQVW Controlled = () => (
IRUP!
LQSXWW\SH="text" YDOXH="Hello React" !
EXWWRQ!SubmitEXWWRQ!
IRUP!
);

"`3!`.1*`0$%/`+),+*!*0`%*/% !`0$!`.+3/!.L`3!`.!(%6!`0$0`%0`/$+3/`0$!` !"1(0`2(1!`/

!4,!0! L`10`%0` +!/`*+0`(!0`1/`$*#!`0$!`2(1!`+.`05,!`*50$%*#`!(/!`%*/% !`%0K

$!`.!/+*`%0` +!/`0$0`%/`!1/!L`%*`!0L`3!` !(.!`3$0`3!`3*0`0+`/!!`+*`0$!`/.!!*L

* `/!00%*#``"%4! `2(1!`00.%10!`!* /`1,`(35/`.!* !.%*#`0$0`2(1!L`*+`)00!.`3$0
+0$!.`0%+*/`.!`0'!*K`$%/`%/`1*(%'!(5`0+`!``!$2%+.`3!`3*0`%*``.!(_3+.(
,,(%0%+*K

"`3!`+,!*`0$!`+*/+(!L`!0`%0/!("`%/`0!((%*#`1/`0$0`3!`.!` +%*#`/+)!0$%*#`3.+*#M
You provided a `value` prop to a form field without an `onChange` handler.
This will render a read-only field.

* `0$0`%/`!40(5`3$0`$,,!*! K

+3L`%"`3!`&1/0`3*0`0$!`%*,10`"%!( `0+`$2!`` !"1(0`2(1!`* `3!`3*0`0+`!`(!`0+`

$*#!`%0`5`05,%*#L`3!`*`1/!`0$!`defaultValue`,.+,!.05M
FRQVW Controlled = () => (
IRUP!
LQSXWW\SH="text" GHIDXOW9DOXH="Hello React" !
EXWWRQ!SubmitEXWWRQ!

S`8;7`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

IRUP!
);

*`0$%/`35L`0$!`"%!( `%/`#+%*#`0+`/$+3`Hello React`3$!*`%0`%/`.!* !.! L`10`0$!*`0$!`1/!.

*`05,!`*50$%*#`%*/% !`%0`* `$*#!`%0/`2(1!K`$%/`%/` L`* `%0`3+.'/L`10`3!`3*0`0+
+*0.+(`0$!`2(1!`+"`0$!`+),+*!*0`"1((5L`* `0+` +`/+`3!`/$+1( `0.*/"+.)`0$!`+),+*!*0
".+)``/00!(!//`"1*0%+*(`+*!`%*0+``classM
FODVV Controlled H[WHQGV Component

/`1/1(L`3!`/0.0` !"%*%*#``+*/0.10+.`3$!.!`3!`%*%0%(%6!`0$!`/00!L`0$%/`0%)!`3%0$`0$!
!"1(0`2(1!/`+"`0$!`"%!( /K`!`(/+`%* `0$!`!2!*0`$* (!./`0$0`3!`*!! `0+`)'!`0$!`"+.)
3+.'K

!`3%((`1/!``/%*#(!`$* (!.L`3$%$`3%((`1, 0!`0$!`/00!`1/%*#`0$!`*)!`00.%10!L`/`3!

$2!`/!!*`%*`0$!`+,0%)%6! `2!./%+*`+"`0$!`1*+*0.+((! `+),+*!*0/`!4),(!M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
ILUVW1DPH: 'Dan',
ODVW1DPH: 'Abramov'
};
this.KDQGOH&KDQJH = this.handleChange.ELQG(this);
this.KDQGOH6XEPLW = this.handleSubmit.ELQG(this);
}

$!`$* (!./`.!`0$!`/)!`/`0$!`,.!2%+1/`+*!/M
KDQGOH&KDQJH({ WDUJHW: { QDPH, YDOXH } }) {
this.VHW6WDWH({
[QDPH]: value
});
}
KDQGOH6XEPLW(e) {
e.SUHYHQW'HIDXOW();
console.ORJ(`^this.state.ILUVW1DPH` ^this.state.ODVW1DPH``);
}

$!`%),+.0*0`0$%*#`0+`$*#!`%/`%*/% !`0$!`render`)!0$+ K` *`"0L`3!`3%((`1/!`0$!`2(1!

00.%10!/`+"`0$!`%*,10`"%!( /`0+`/!0`0$!%.`%*%0%(`2(1!/L`/`3!((`/`0$!`1, 0! `+*!M
UHQGHU() {
UHWXUQ (
IRUPRQ6XEPLW={this.KDQGOH6XEPLW}!
LQSXW
W\SH="text"

S`8;8`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

QDPH="firstName"
YDOXH={this.state.ILUVW1DPH}
RQ&KDQJH={this.KDQGOH&KDQJH}
!
LQSXW
W\SH="text"
QDPH="lastName"
YDOXH={this.state.ODVW1DPH}
RQ&KDQJH={this.KDQGOH&KDQJH}
!
EXWWRQ!SubmitEXWWRQ!
IRUP!
);
}

$!`"%./0`0%)!`0$!`"+.)`%/`.!* !.! L`!0`1/!/`0$!`%*%0%(`2(1!/`".+)`0$!`/00!`/`0$!`2(1!

+"`0$!`%*,10`"%!( /K`$!*`0$!`1/!.`05,!/`/+)!0$%*#`%*0+`0$!`"%!( L`0$!`handleChange
"1*0%+*`%/`((! `* `0$!`*!3`2(1!`"+.`0$!`"%!( `%/`/0+.! `%*`0$!`/00!K

$!*`0$!`/00!`$*#!/L`!0`.!_.!* !./`0$!`+),+*!*0`* `1/!/`%0`#%*`0+`.!"(!0`0$!

1..!*0`2(1!`+"`0$!`%*,10`"%!( /K

!`*+3`$2!`"1((`+*0.+(`+2!.`0$!`2(1!`+"`0$!`"%!( /L`* `3!`((`0$%/`,00!.*`+*0.+((!

+),+*!*0/K

-621VFKHPD
+3`0$0`3!`'*+3`$+3`"+.)/`3+.'`%*`!0L`3!`*`)+2!`%*`0+`/+)!0$%*#`0$0`$!(,/`1/
10+)0!`"+.)`.!0%+*L`2+% `3.%0%*#``(+0`+"`+%(!.,(0!L`* `'!!,`+1.`+ !`)1$`(!*!.K

`,+,1(.`/+(10%+*`%/`react-jsonschema-formL`3$%$`%/`)%*0%*! `5`+6%((`/!.2%!/K
%./0L`3!`)1/0`%*/0((`%0`1/%*#`npmM
QSPLQVWDOOVDYHUHDFWMVRQVFKHPDIRUP

*!`0$!`(%..5`%/`%*/0((! L`3!`%),+.0`%0`%*/% !`+1.`+),+*!*0M

LPSRUW Form IURP 'react-jsonschema-form';

!` !"%*!``/$!)L`/`"+((+3/M
FRQVW schema = {
W\SH: 'object',
SURSHUWLHV: {
ILUVW1DPH: { W\SH: 'string', GHIDXOW: 'Dan' },
ODVW1DPH: { W\SH: 'string', GHIDXOW: 'Abramov' },

S`8;9`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

}
};

!`3%((`*+0`#+`%*0+`0$!` !0%(/`+"`0$!` `/$!)`"+.)0`%*`0$%/`++'M`0$!`%),+.0*0`%0

$!.!`%/`0$0`3!`*` !/.%!`0$!`"%!( /`+"`+1.`"+.)/`1/%*#``+*"%#1.0%+*`+&!0`%*/0! `+"
.!0%*#`)1(0%,(!` `!(!)!*0/K

/`5+1`*`/!!`%*`0$!`,.!! %*#`!4),(!L`3!`/!0`0$!`05,!`+"`0$!`/$!)`0+`object`* `0$!*

3!` !(.!`0$!`,.+,!.0%!/`+"`0$!`"+.)L`firstNameL`* `lastNameL`!$`+*!`3%0$``/0.%*#
05,!`* `%0/` !"1(0`2(1!K

"`3!`0$!*`,//`0$!`/$!)`0+`0$!`Form`+),+*!*0`3!`%),+.0! `".+)`0$!`(%..5L``"+.)
3%((`!`#!*!.0! `"+.`1/`10+)0%((5K

*!`)+.!L`(!0W/`/0.0`3%0$``/%),(!`/00!(!//`"1*0%+*(`+),+*!*0`/+`0$0`3!`*`
"!01.!/`0+`%0`%0!.0%2!(5M
FRQVW JSONSchemaForm = () => (
)RUPVFKHPD={schema} !
);

+3L`%"`3!`.!* !.`0$%/`+),+*!*0`%*/% !`0$!`,#!L`3!`3%((`/!!``"+.)`3%0$`0$!`"%!( /`3!

!(.! `%*`0$!`/$!)`* ``1)%0`100+*K`!`*+3`3*0`0+`!`*+0%"%! `3$!*`0$!`"+.)`%/
/1)%00! L`/+`0$0`3!`*` +`/+)!0$%*#`3%0$`0$!`"+.)` 0K

$!`"%./0`0$%*#`3!`$2!`0+` +`%/`.!0!`*`!2!*0`$* (!.`0$0`0.*/"+.)/`0$!`/00!(!//

"1*0%+*(`+),+*!*0`%*0+``classM
FODVV JSONSchemaForm H[WHQGV Component

*/% !`0$!`constructorL`3!`%* `0$!`!2!*0`$* (!.M

FRQVWUXFWRU(props) {
VXSHU(props);
this.KDQGOH6XEPLW = this.handleSubmit.ELQG(this);
}

*`0$!`,.!! %*#`!4),(!L`3!`&1/0`(+#`0$!`"+.)` 0`%*0+`0$!`+*/+(!L`10`%*``.!(_

3+.( `,,(%0%+*L`5+1`)5`3*0`0+`,+/0`0$!`"%!( /`0+`*`!* ,+%*0K

$!`handleSubmit`$* (!.`%/`.!!%2%*#`*`+&!0L`3$%$`$/``formData`00.%10!`0$0
+*0%*/`0$!`*)!/`* `0$!`2(1!/`+"`0$!`"+.)`"%!( /M
KDQGOH6XEPLW({ formData }) {
console.ORJ(formData);
}

S`8;:`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

%*((5L`+1.`render`)!0$+ `(++'/`/`"+((+3/M
UHQGHU() {
UHWXUQ (
)RUPVFKHPD={schema} RQ6XEPLW={this.KDQGOH6XEPLW} !
);
}

!.!L`0$!`/$!)`,.+,`%/`0$!`/$!)`+&!0`3!`,.!2%+1/(5` !"%*! K` 0`*`!` !"%*!

/00%((5L`/`%*`0$!`1..!*0`!4),(!L`+.`%0`*`!`.!!%2! `".+)`0$!`/!.2!.L`+.`+),+/!
1/%*#`,.+,/K

!`&1/0`00$`+1.`$* (!.`0+`0$!`onSubmit`(('`+"`0$!`Form`+),+*!*0`,.+2% ! `5

0$!`(%..5`* ``0$!*`3!`$2!`.!0! ``3+.'%*#`"+.)`!/%(5K

$!.!`.!`(/+` %""!.!*0`(('/L`/1$`/`onChangeL`3$%$`%/`"%.! `!2!.5`0%)!`0$!`2(1!`+"

`"%!( `$*#!/L`* `onErrorL`3$%$`%/`"%.! `3$!*!2!.`0$!`"+.)`%/`/1)%00! `1/%*#`%*2(%
0K

+DQGOLQJHYHQWV
2!*0/`3+.'`%*``/(%#$0(5` %""!.!*0`35`.+//`0$!`2.%+1/`.+3/!./K`!0`0.%!/`0+`/0.0
0$!`35`!2!*0/`3+.'`* `#%2!` !2!(+,!./``+*/%/0!*0`%*0!."!`0+` !(`3%0$K`$%/`%/``#.!0
"!01.!`+"`!0`!1/!`3!`*`"+.#!0`+10`0$!`.+3/!./`3!`.!`0.#!0%*#`* `3.%0!`!2!*0
$* (!./`* `"1*0%+*/`0$0`.!`2!* +._#*+/0%K

+`+""!.`0$%/`"!01.!L`!0`%*0.+ 1! `0$!`+*!,0`+"`0$!`/5*0$!0%`!2!*0K``/5*0$!0%`!2!*0

%/`*`+&!0`0$0`3.,/`0$!`+.%#%*(`!2!*0`+&!0`,.+2% ! `5`0$!`.+3/!.L`* `%0`$/`0$!
/)!`,.+,!.0%!/L`*+`)00!.``3$!.!`%0`%/`.!0! K

+`00$`*`!2!*0`(%/0!*!.`0+``*+ !`* `#!0`0$!`!2!*0`+&!0`3$!*`0$!`!2!*0`%/`"%.! L`3!`*

1/!``/%),(!`+*2!*0%+*`3$%$`.!((/`0$!`35`!2!*0/`.!`00$! `0+`0$!``*+ !/K` *
"0L`3!`*`1/!`0$!`3+. `on`,(1/`0$!`)!(/! `!2!*0`*)!`Q"+.`!4),(!L`onKeyDownR`0+
!"%*!`0$!`(('`0+`!`"%.! `3$!*`0$!`!2!*0/`$,,!*K``,+,1(.`+*2!*0%+*`%/`0+`*)!
0$!`!2!*0`$* (!.`"1*0%+*/`"0!.`0$!`!2!*0`*)!`* `,.!"%4`0$!)`1/%*#`handle`Q"+.
!4),(!L`handleKeyDownRK

!`$2!`/!!*`0$%/`,00!.*`%*`0%+*`%*`0$!`,.!2%+1/`!4),(!/L`3$!.!`3!`3!.!`(%/0!*%*#`0+
0$!`onChange`!2!*0`+"`0$!`"+.)`"%!( /K

!0W/`.!%0!.0!``/%`!2!*0`(%/0!*!.`!4),(!`0+`/!!`$+3`3!`*`+.#*%6!`)1(0%,(!`!2!*0/
%*/% !`0$!`/)!`+),+*!*0`%*``*%!.`35K

S`8;;`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

!`.!`#+%*#`0+`%),(!)!*0``/%),(!`100+*L`* `3!`/0.0L`/`1/1(L`5`.!0%*#``(//M
FODVV Button H[WHQGV Component

!` ``constructor`3$!.!`3!`%* `0$!`!2!*0`(%/0!*!.M

FRQVWUXFWRU(props) {
VXSHU(props);
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

!` !"%*!`0$!`!2!*0`$* (!.`%0/!("M

KDQGOH&OLFN(syntheticEvent) {
console.ORJ(syntheticEvent LQVWDQFHRI MouseEvent);
console.ORJ(syntheticEvent.QDWLYH(YHQW LQVWDQFHRI MouseEvent);
}

/`5+1`*`/!!`$!.!L`3!`.!` +%*#``2!.5`/%),(!`0$%*#M`3!`&1/0`$!'`0$!`05,!`+"`0$!`!2!*0
+&!0`3!`.!!%2!`".+)`!0`* `0$!`05,!`+"`*0%2!`!2!*0`00$! `0+`%0K`!`!4,!0`0$!`"%./0
0+`.!01.*`false`* `0$!`/!+* `0+`.!01.*`trueK

+1`/$+1( `*!2!.`*!! `0+`!//`0$!`+.%#%*(`*0%2!`!2!*0L`10`%0`%/`#++ `0+`'*+3`5+1`*

+`%0`%"`5+1`*!! `0+K`%*((5L`%*`0$!`render`)!0$+ L`3!` !"%*!`0$!`100+*`3%0$
0$!`onClick`00.%10!`0+`3$%$`3!`00$`+1.`!2!*0`(%/0!*!.M
UHQGHU() {
UHWXUQ (
EXWWRQ RQ&OLFN={this.KDQGOH&OLFN}!Click me!EXWWRQ!
);
}

+3L`/1,,+/!`3!`3*0`0+`00$``/!+* `$* (!.`0+`0$!`100+*`0$0`(%/0!*/`0+`0$!` +1(!_

(%'`!2!*0K`*!`/+(10%+*`3+1( `!`0+`.!0!``*!3`/!,.0!`$* (!.`* `00$`%0`0+`0$!
100+*`1/%*#`0$!`onDoubleClick`00.%10!L`/`"+((+3/M
EXWWRQ
RQ&OLFN={this.KDQGOH&OLFN}
RQ'RXEOH&OLFN={this.KDQGOH'RXEOH&OLFN}
!
Click me!
EXWWRQ!

!)!)!.`0$0`3!`(35/`%)`0+`3.%0!`(!//`+%(!.,(0!`* `2+% ` 1,(%0%*#`0$!`+ !K`+.

0$0`.!/+*L``+))+*`,.0%!`%/`0+`3.%0!``/%*#(!`!2!*0`$* (!.`"+.`!$`+),+*!*0L
3$%$`*`0.%##!.` %""!.!*0`0%+*/`+. %*#`0+`0$!`!2!*0`05,!K

S`8;<`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

$%/`0!$*%-1!`%/` !/.%! `%*``+((!0%+*`+"`,00!.*/`5`%$!(`$*M

http://reactpatterns.com/#event-switchK

%./0L`3!`$*#!`0$!`constructor`+"`0$!`+),+*!*0L`!1/!`3!`*+3`3*0`%0`0+`%* `0$!
*!3`#!*!.%`!2!*0`$* (!.M
FRQVWUXFWRU(props) {
VXSHU(props);
this.KDQGOH(YHQW = this.handleEvent.ELQG(this);
}

!+* L`3!`%),(!)!*0`0$!`#!*!.%`!2!*0`$* (!.M

KDQGOH(YHQW(event) {
VZLWFK (event.W\SH) {
FDVH 'click':
console.ORJ('clicked');
EUHDN;
FDVH 'dblclick':
console.ORJ('double clicked');
EUHDN;
GHIDXOW:
console.ORJ('unhandled', event.W\SH);
}
}

$!`#!*!.%`!2!*0`$* (!.`.!!%2!/`0$!`!2!*0`+&!0`* `/3%0$!/`+*`0$!`!2!*0`05,!`0+`"%.!

0$!`.%#$0`0%+*K`$%/`%/`,.0%1(.(5`1/!"1(`%"`3!`3*0`0+`((``"1*0%+*`+*`!$`!2!*0`Q"+.
!4),(!L`*(50%/R`+.`%"`/+)!`!2!*0/`/$.!`0$!`/)!`(+#%K

%*((5L`3!`00$`0$!`*!3`!2!*0`(%/0!*!.`0+`0$!`onClick`* `onDoubleClick`00.%10!/M
UHQGHU() {
UHWXUQ (
EXWWRQ
RQ&OLFN={this.KDQGOH(YHQW}
RQ'RXEOH&OLFN={this.KDQGOH(YHQW}
!
Click me!
EXWWRQ!
);
}

S`8;=`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

.+)`0$%/`,+%*0`+*L`3$!*!2!.`3!`*!! `0+`.!0!``*!3`!2!*0`$* (!.`"+.`0$!`/)!

+),+*!*0L`%*/0! `+"`.!0%*#``*!3`)!0$+ `* `%* %*#`%0L`3!`*`&1/0` ``*!3`/!`0+
0$!`/3%0$K

`+1,(!`)+.!`%*0!.!/0%*#`0$%*#/`0+`'*+3`+10`!2!*0/`%*`!0`.!`0$0`/5*0$!0%`!2!*0/
.!`.!1/! `* `0$0`0$!.!`%/``/%*#(!`#(+(`$* (!.K`$!`"%./0`+*!,0`)!*/`0$0`3!`**+0
/0+.!``/5*0$!0%`!2!*0`* `.!1/!`%0`(0!.`!1/!`%0`!+)!/`*1((`.%#$0`"0!.`0$!`0%+*K`$%/
0!$*%-1!`%/`2!.5`#++ `%*`0!.)/`+"`,!."+.)*!L`10`%0`*`!`,.+(!)0%`%"`3!`3*0`0+
/0+.!`0$!`!2!*0`%*/% !`0$!`/00!`+"`0$!`+),+*!*0`"+.`/+)!`.!/+*K`+`/+(2!`0$%/`,.+(!)L
!0`#%2!/`1/``persist`)!0$+ `+*`0$!`/5*0$!0%`!2!*0/L`3$%$`3!`*`((`0+`)'!`0$!
!2!*0`,!./%/0!*0`/+`0$0`3!`*`/0+.!`%0`* `.!0.%!2!`%0`(0!.K

$!`/!+* `2!.5`%*0!.!/0%*#`%),(!)!*00%+*` !0%(`%/`#%*`+10`,!."+.)*!L`* `%0

.!#. /`0$!`35`!0`00$!/`0$!`!2!*0`$* (!./`0+`0$!`K

$!*!2!.`3!`1/!`0$!`on`00.%10!/L`3!`.!` !/.%%*#`0+`!0`0$!`!$2%+.`3!`3*0`0+
$%!2!L`10`0$!`(%..5` +!/`*+0`00$`0$!`01(`!2!*0`$* (!.`0+`0$!`1* !.(5%*#`
*+ !/K

$0`%0` +!/`%*/0! `%/`00$``/%*#(!`!2!*0`$* (!.`0+`0$!`.++0`!(!)!*0L`3$%$`(%/0!*/`0+`((

0$!`!2!*0/L`0$*'/`0+`!2!*0`1(%*#K`$!*`*`!2!*0`3!`.!`%*0!.!/0! `%*`%/`"%.! `5`0$!
.+3/!.L`!0`((/`0$!`$* (!.`+*`0$!`/,!%"%`+),+*!*0/`+*`%0/`!$("K`$%/`0!$*%-1!`%/
((! `!2!*0` !(!#0%+*`* `%/`1/! `"+.`)!)+.5`* `/,!! `+,0%)%60%+*K

5HIV
*!`+"`0$!`.!/+*/`,!+,(!`(+2!`!0`%/`!1/!`%0`%/` !(.0%2!K`!%*#` !(.0%2!`)!*/
0$0`5+1`&1/0` !/.%!`3$0`5+1`3*0`0+`!` %/,(5! `+*`0$!`/.!!*`0`*5`#%2!*`,+%*0`%*
0%)!`* `!0`0'!/`.!`+"`0$!`+))1*%0%+*/`3%0$`0$!`.+3/!.K`$%/`"!01.!`)'!/
!0`2!.5`!/5`0+`.!/+*`+10`* `%0`%/`2!.5`,+3!."1(`0`0$!`/)!`0%)!K

+3!2!.L`0$!.!`)%#$0`!`/+)!`/!/`3$!.!`5+1`*!! `0+`!//`0$!`1* !.(5%*#``*+ !/

0+`,!."+.)`/+)!`%),!.0%2!`+,!.0%+*/K` 0`/$+1( `!`2+% ! `!1/!L`%*`)+/0`/!/L`0$!.!
%/``)+.!`!0_+),(%*0`/+(10%+*`0+`$%!2!`0$!`/)!`.!/1(0L`10`%0`%/`%),+.0*0`0+`'*+3
0$0`3!`$2!`0$!`,+//%%(%05`0+` +`%0`* `0+`'*+3`$+3`%0`3+.'/`/+`0$0`3!`*`)'!`0$!
.%#$0` !%/%+*K

S`8;>`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

1,,+/!`3!`3*0`0+`.!0!``/%),(!`"+.)`3%0$`*`%*,10`!(!)!*0`* ``100+*L`* `3!`3*0

%0`0+`!$2!`%*`/1$``35`0$0`3$!*`0$!`100+*`%/`(%'! L`0$!`%*,10`"%!( `#!0/`"+1/! K

$0`3!`3*0`0+` +L`%/`((`0$!`focus`)!0$+ `+*`0$!`%*,10`*+ !L`0$!`01(``%*/0*!

+"`0$!`%*,10L`%*/% !`0$!`.+3/!.W/`3%* +3K

!0W/`.!0!``(//`((! `Focus`3%0$``+*/0.10+.`3$!.!`3!`%*
0$!`handleClick`)!0$+ M
FODVV Focus H[WHQGV Component

!`3%((`(%/0!*`0+`0$!`(%'`!2!*0/`+*`0$!`100+*`0+`"+1/`0$!`%*,10`"%!( M
FRQVWUXFWRU(props) {
VXSHU(props);
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

$!*L`3!`%),(!)!*0`0$!`01(`handleClick`)!0$+ M
KDQGOH&OLFN() {
this.element.IRFXV();
}

/`5+1`*`/!!L`3!`.!`.!"!.!*%*#`0$!`element`00.%10!`+"`0$!`(//`* `((%*#`0$!`focus
)!0$+ `+*`%0K

+`1* !./0* `3$!.!`%0`+)!/`".+)L`5+1`&1/0`$2!`0+`$!'`0$!`%),(!)!*00%+*`+"`0$!

render`)!0$+ M

UHQGHU() {
UHWXUQ (
IRUP!
LQSXW
W\SH="text"
UHI={HOHPHQW => (this.HOHPHQW = HOHPHQW)}
!
EXWWRQ RQ&OLFN={this.KDQGOH&OLFN}!FocusEXWWRQ!
IRUP!
);
}

!.!`+)!/`0$!`+.!`+"`0$!`(+#%K`!`.!0!``"+.)`3%0$`*`%*,10`!(!)!*0`%*/% !`%0`* `3!

!"%*!``"1*0%+*`+*`%0/`ref`00.%10!K

S`8;?`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

$!`(('`3!` !"%*! `%/`((! `3$!*`0$!`+),+*!*0`#!0/`)+1*0! L`* `0$!`!(!)!*0

,.)!0!.`.!,.!/!*0/`0$!``%*/0*!`+"`0$!`%*,10K` 0`%/`%),+.0*0`0+`'*+3`0$0L`3$!*`0$!
+),+*!*0`#!0/`1*)+1*0! L`0$!`/)!`(('`%/`((! `3%0$``null`,.)!0!.`0+`".!!`0$!
)!)+.5K`$0`3!`.!` +%*#`%*`0$!`(('`%/`/0+.%*#`0$!`.!"!.!*!`+"`0$!`!(!)!*0`0+`!`(!
0+`1/!`%0`%*`0$!`"101.!`Q"+.`!4),(!L`3$!*`0$!`handleClick`)!0$+ `%/`"%.! RK`$!*L`3!`$2!
0$!`100+*`3%0$`%0/`!2!*0`$* (!.K`1**%*#`0$!`,.!! %*#`+ !`%*``.+3/!.`3%((`/$+3`0$!
"+.)`3%0$`0$!`"%!( `* `0$!`100+*L`* `(%'%*#`+*`0$!`100+*`3%((`"+1/`0$!`%*,10`"%!( L`/
!4,!0! K

/`3!`)!*0%+*! `,.!2%+1/(5L`%*`#!*!.(L`3!`/$+1( `0.5`0+`2+% `1/%*#`.!"/

!1/!`0$!5`"+.!`0$!`+ !`0+`!`)+.!`%),!.0%2!L`* `0$!5`!+)!
$. !.`0+`.! `* `)%*0%*K

$!`/!*.%+/`3$!.!`3!`)%#$0`*!! `0+`1/!`%0`3%0$+10`*5`+0$!.`/+(10%+*/`.!`0$!`+*!/
3$!.!`3!`.!`%*0!#.0%*#`+1.`+),+*!*0/`3%0$`+0$!.`%),!.0%2!`(%..%!/L`/1$`/`&1!.5K` 0
%/`%),+.0*0`0+`'*+3`0$0`3$!*`/!00%*#`0$!`.!"`(('`+*``*+*_*0%2!`+),+*!*0`Q
1/0+)`+),+*!*0`0$0`/0.0/`3%0$`*`1,,!./!`(!00!.RL`0$!`.!"!.!*!`3!`.!!%2!`/`
,.)!0!.`+"`0$!`(('`%/`*+0```*+ !`%*/0*!L`10`0$!`%*/0*!`+"`0$!`+),+*!*0
%0/!("K`$%/`%/`.!((5`,+3!."1(`!1/!`%0`#%2!/`1/`!//`0+`0$!`%*0!.*(`%*/0*!`+"``$%(
+),+*!*0L`10`%0`%/`(/+` *#!.+1/`* `/$+1( `!`2+% ! K`+`/!!`*`!4),(!`+"`0$%/
/+(10%+*L`3!`.!`#+%*#`0+`.!0!`03+`+),+*!*0/M

$!`"%./0`+*!`%/``/%),(!`+*0.+((! `%*,10`"%!( L`3$%$`!4,+/!/``.!/!0`"1*0%+*

0$0`.!/!0/`0$!`2(1!`+"`0$!`%*,10`%0/!("`0+`*`!),05`/0.%*#
$!`/!+* `+),+*!*0`%/``"+.)`3%0$`0$!`,.!2%+1/`%*,10`"%!( `* ``.!/!0`100+*
0$0`"%.!/`0$!`%*/0*!`)!0$+ `3$!*`(%'!

!0W/`/0.0`5`.!0%*#`0$!`%*,10M
FODVV Input H[WHQGV Component

!` !"%*!``+*/0.10+.`3%0$`` !"1(0`/00!`Q!),05`/0.%*#R`* `%* `0$!`onChange`)!0$+

3!`*!! `0+`+*0.+(`0$!`+),+*!*0L`* `0$!`reset`)!0$+ L`3$%$`.!,.!/!*0/`0$!`,1(%`
+"`0$!`+),+*!*0M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
YDOXH: ''
};
this.UHVHW = this.reset.ELQG(this);
this.KDQGOH&KDQJH = this.handleChange.ELQG(this);
}

S`8;@`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

$!`reset`"1*0%+*`%/`2!.5`/%),(!L`* `&1/0`.%*#/`0$!`/00!`'`0+`!),05M
UHVHW() {
this.VHW6WDWH({
YDOXH: ''
});
}

$!`handleChange`%/`,.!005`/%),(!`/`3!((L`* `%0`&1/0`'!!,/`0$!`/00!`+"`0$!`+),+*!*0`%*
/5*`3%0$`0$!`1..!*0`2(1!`+"`0$!`%*,10`!(!)!*0M
KDQGOH&KDQJH({ target: { value } }) {
this.VHW6WDWH({
YDOXH
});
}

%*((5L`%*/% !`0$!`render`)!0$+ L`3!` !"%*!`+1.`input`"%!( `3%0$`%0/`+*0.+((! `2(1!`*

0$!`!2!*0`$* (!.M
UHQGHU() {
UHWXUQ (
LQSXW
W\SH="text"
YDOXH={this.state.YDOXH}
RQ&KDQJH={this.KDQGOH&KDQJH}
/>
);
}

+3L`3!`.!`#+%*#`0+`.!0!`0$!`Reset`+),+*!*0L`3$%$`1/!/`0$!`,.!! %*#`+),+*!*0L
* `((`%0/`reset`)!0$+ `3$!*`0$!`100+*`%/`(%'! M
FODVV Reset H[WHQGV Component

*/% !`0$!`constructorL`3!`%* `0$!`!2!*0`$* (!.L`/`1/1(M

FRQVWUXFWRU(props) {
VXSHU(props);
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

$!`%*0!.!/0%*#`,.0`%/`0$!`+ !`%*/% !`0$!`handleClick`"1*0%+*`!1/!`0$%/`%/

3$!.!`3!`*`((`0$!`reset`)!0$+ `+*`0$!`%*/0*!`+"`0$!`%*,10M
KDQGOH&OLFN() {
this.element.UHVHW();
}

S`8<7`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

%*((5L`3!` !"%*!`+1.`render`)!0$+ L`/`"+((+3/M

UHQGHU() {
UHWXUQ (
IRUP!
,QSXW UHI={HOHPHQW => (this.HOHPHQW = HOHPHQW)}!
EXWWRQRQ&OLFN={this.KDQGOH&OLFN}!ResetEXWWRQ!
IRUP!
);
}

/`5+1`*`/!!`$!.!L`.!"!.!*%*#`*+ !`!(!)!*0/`+.`%*/0*!/`%/`/%((5`0$!`/)!`%*`0!.)/
+"`.!"`(('K

$%/`%/`,.!005`,+3!."1(`!1/!`3!`*`!/%(5`!//`)!0$+ /`+*`0$!`+),+*!*0/L`10`3!
/$+1( `!`.!"1(`!1/!`%0`.!'/`0$!`!*,/1(0%+*`* `)'!/`.!"0+.%*#`,.!005`$. K
1,,+/!L`%*`"0L`0$0`5+1`*!! `0+`.!*)!`0$!`reset`"1*0%+*`"+.`/+)!`.!/+*N`5+1`$2!`0+
$!'`((`0$!`,.!*0`+),+*!*0/`0$0`.!`1/%*#`%0`* `$*#!`0$!)`/`3!((K

!0`%/`#.!0`!1/!`%0`#%2!/`1/`` !(.0%2!` `0+`1/!`%*`((`/!/L`10`3!`*`(/+`!//

0$!`1* !.(5%*#``*+ !/`* `+),+*!*0`%*/0*!/`%*`/!`3!`*!! `0$!)`0+`.!0!`)+.!
 2*! `%*0!.0%+*/`* `+),(!4`/0.101.!/K

$QLPDWLRQV
$!*`3!`0$%*'`+10` /`* `0$!`.+3/!.L`3!`)1/0`/1.!(5`0$%*'`+10`*%)0%+*/`/`3!((K

*%)0! ` /`.!`)+.!`,(!/*0`"+.`1/!./L`* `0$!5`.!``2!.5`%),+.0*0`0++(`0+`/$+3`1/!./

0$0`/+)!0$%*#`$/`$,,!*! `+.`%/`+10`0+`+1.K

$%/`/!0%+*` +!/`*+0`%)`0+`!`*`!4$1/0%2!`#1% !`0+`.!0%*#`*%)0%+*/`* `!10%"1(

 /N`0$!`#+(`$!.!`%/`0+`,.+2% !`5+1`3%0$`/+)!`/%`%*"+.)0%+*`+10`0$!`+))+*
/+(10%+*/`3!`*`,10`%*`,(!`0+`*%)0!`+1.`!0`+),+*!*0/K

+.`` `(%..5`/1$`/`!0L`%0`%/`.1%(`0+`,.+2% !`*`!/5`35`"+.` !2!(+,!./`0+`.!0!

* `)*#!`*%)0%+*/K`!0`+)!/`3%0$`*` _+*L`((! `react-addons-css-
transition-groupL`3$%$`%/``+),+*!*0`0$0`$!(,/`1/`1%( `*%)0%+*/`%*`` !(.0%2!
35K`#%*L`!%*#`(!`0+`,!."+.)`+,!.0%+*/` !(.0%2!(5`%/`%*.! %(5`,+3!."1(L`* `%0
)'!/`0$!`+ !`)1$`!/%!.`0+`.!/+*`+10`* `/$.!`3%0$`0$!`0!)K

!0W/`(++'`0`$+3`0+`,,(5``/%),(!`" !_%*`!""!0`0+`0!40`3%0$`0$!`!0` _+*L`*

0$!*`3!`3%((`,!."+.)`0$!`/)!`+,!.0%+*`1/%*#`react-motionL``0$%. _,.05`(%..5`0$0
)'!/`.!0%*#`+),(!4`*%)0%+*/`!2!*`!/%!.K

S`8<8`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

$!`"%./0`0$%*#`3!`*!! `0+` +`0+`/0.0`1%( %*#`*`*%)0! `+),+*!*0`%/`0+`%*/0((`0$!` _

+*M
QSPLQVWDOOVDYHUHDFWDGGRQVFVVWUDQVLWLRQJURXS

*!`3!`$2!` +*!`0$0L`3!`*`%),+.0`0$!`+),+*!*0M
LPSRUW CSSTransitionGroup IURP 'react-addons-css-transition-group';

$!*L`3!`&1/0`3.,`0$!`+),+*!*0`0+`3$%$`3!`3*0`0+`,,(5`0$!`*%)0%+*`3%0$`%0M
FRQVW Transition = () => (
&667UDQVLWLRQ*URXS
WUDQVLWLRQ1DPH="fade"
WUDQVLWLRQ$SSHDU
WUDQVLWLRQ$SSHDU7LPHRXW={500}
!
K!Hello ReactK!
&667UDQVLWLRQ*URXS!
);

/`5+1`*`/!!L`0$!.!`.!`/+)!`,.+,/`0$0`*!! `!4,(%*%*#K

%./0L`3!`.!` !(.%*#``transitionNameK`$!`ReactCSSTransitionGroup`,,(%!/`
(//`3%0$`0$!`*)!`+"`0$0`,.+,!.05`0+`0$!`$%( `!(!)!*0`/+`0$0`3!`*`0$!*`1/!`
0.*/%0%+*/`0+`.!0!`+1.`*%)0%+*/K

%0$``/%*#(!`(//L`3!`**+0`!/%(5`.!0!``,.+,!.`*%)0%+*L`* `0$0`%/`3$5`0$!
0.*/%0%+*`#.+1,`,,(%!/`)1(0%,(!`(//!/`+. %*#`0+`0$!`/00!`+"`0$!`*%)0%+*K

*`0$%/`/!L`3%0$`0$!`transitionAppear`,.+,L`3!`.!`0!((%*#`0$!`+),+*!*0`0$0`3!`3*0
0+`*%)0!`0$!`$%( .!*`3$!*`0$!5`,,!.`+*`0$!`/.!!*K

+L`3$0`0$!`(%..5` +!/`%/`,,(5`0$!`fade-appear`(//`Q3$!.!`" !`%/`0$!`2(1!`+"

0$!`transitionName`,.+,R`0+`0$!`+),+*!*0`/`/++*`/`%0`#!0/`.!* !.! K

*`0$!`*!40`0%'L`0$!`fade-appear-active`(//`%/`,,(%! `/+`0$0`3!`*`"%.!`+1.
*%)0%+*`".+)`0$!`%*%0%(`/00!`0+`0$!`*!3`+*!L`1/%*#`K

!`(/+`$2!`0+`/!0`0$!`transitionAppearTimeout`,.+,!.05`0+`0!((`!0`0$!`(!*#0$`+"`0$!
*%)0%+*`/+`0$0`%0` +!/*W0`.!)+2!`!(!)!*0/`".+)`0$!``!"+.!`*%)0%+*/`.!
+),(!0! K

S`8<9`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

$!``0+`)'!`*`!(!)!*0`" !`%*`%/`/`"+((+3/K

%./0L`3!` !"%*!`0$!`+,%05`+"`0$!`!(!)!*0`%*`0$!`%*%0%(`/00!M
IDGHDSSHDU {
opacity: 0.01;
}

$!*L`3!` !"%*!`+1.`0.*/%0%+*`1/%*#`0$!`/!+* `(//L`3$%$`/0.0/`/`/++*`/`%0`#!0/`,,(%!

0+`0$!`!(!)!*0M
IDGHDSSHDUIDGHDSSHDUDFWLYH {
opacity: 1;
transition: opacity .5s ease-in;
}

!`.!`0.*/%0%+*%*#`0$!`+,%05`".+)`0.01`0+`1`%*`500ms`1/%*#`0$!`ease-in`"1*0%+*K

$%/`%/`,.!005`!/5L`10`3!`*`.!0!`)+.!`+),(!4`*%)0%+*/L`* `3!`*`(/+`*%)0!
%""!.!*0`/00!/`+"`0$!`+),+*!*0K

+.`!4),(!L`0$!`*-enter`* `*-enter-active`(//!/`.!`,,(%! `3$!*``*!3`!(!)!*0

%/` ! `/``$%( `+"`0$!`0.*/%0%+*`#.+1,K

`/%)%(.`0$%*#`,,(%!/`0+`.!)+2!`!(!)!*0/K

5HDFWPRWLRQ
/`/++*`/`0$!`+),(!4%05`+"`0$!`*%)0%+*/`#.+3/L`+.`3$!*`3!`*!! `*%)0%+*/`0$0
!,!* `+*`+0$!.`*%)0%+*/L`+.L`3$%$`%/`)+.!` 2*! L`3$!*`3!`*!! `0+`,,(5`/+)!
,$5/%/_/! `!$2%+.`0+`+1.`+),+*!*0/L`3!`.!(%6!`0$0`0$!`0.*/%0%+*`#.+1,`%/`*+0
$!(,%*#`1/`!*+1#$L`/+`3!`)5`+*/% !.`1/%*#``0$%. _,.05`(%..5K

$!`)+/0`,+,1(.`(%..5`0+`.!0!`*%)0%+*/`%*`!0`%/`react-motionL`3$%$
%/`)%*0%*! `5`$!*#`+1K` 0`,.+2% !/``2!.5`(!*`* `!/5` `0$0`#%2!/`1/``2!.5
,+3!."1(`0++(`0+`.!0!`*5`*%)0%+*/K

+`1/!`%0L`3!`"%./0`$2!`0+`%*/0((`%0M
QSPLQVWDOOVDYHUHDFWPRWLRQ

S`8<:`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

*!`0$!`%*/0((0%+*`%/`/1!//"1((5`+),(!0! L`3!`*!! `0+`%),+.0`0$!`)+0%+*`+),+*!*0

* `0$!`spring`"1*0%+*K`+0%+*`%/`0$!`+),+*!*0`3!`3%((`1/!`0+`3.,`0$!
!(!)!*0/`3!`3*0`0+`*%)0!L`3$%(!`0$!`"1*0%+*`%/``10%(%05`0$0`*`%*0!.,+(0!``2(1!
".+)`%0/`%*%0%(`/00!`0+`0$!`"%*(`+*!M
LPSRUW { Motion, spring } IURP 'react-motion';

!0W/`(++'`0`0$!`+ !M
FRQVW Transition = () => (
0RWLRQ
GHIDXOW6W\OH={{ RSDFLW\: 0.01 }}
VW\OH={{ RSDFLW\: VSULQJ(1) }}
!
{LQWHUSRODWLQJ6W\OH => (
KVW\OH={interpolatingStyle}!Hello ReactK!
)}
0RWLRQ!
);

$!.!`.!``(+0`+"`%*0!.!/0%*#`0$%*#/`$!.!K

%./0L`5+1`)5`$2!`*+0%! `0$0`0$%/`+),+*!*0`1/!/`0$!`"1*0%+*`/``$%( `,00!.*

Q/!!`Chapter 4L`+),+/!`((`0$!`$%*#/`RL`3$%$`%/``,.!005`,+3!."1(`0!$*%-1!`0+` !"%*!
$%( .!*`0$0`.!!%2!`2(1!/`0`.1*0%)!K

$!*L`3!`*`/!!`0$0`0$!`Motion`+),+*!*0`$/`03+`00.%10!/M`0$!`"%./0`+*!
%/`defaultStyleL`3$%$`.!,.!/!*0/`0$!`%*%0%(`/05(!K

#%*L`3!`/!0`0$!`+,%05`0+`0.0.1`0+`$% !`0$!`!(!)!*0`* `/0.0`0$!`" !K

$!`/05(!`00.%10!`.!,.!/!*0/`0$!`"%*(`/05(!`%*/0! L`10`3!` +`*+0`/!0`0$!`2(1!

%.!0(5N`%*/0! `3!`1/!`0$!`spring`"1*0%+*`/+`0$0`0$!`2(1!`%/`%*0!.,+(0! `".+)`0$!
%*%0%(`/00!`0+`0$!`"%*(`+*!K

*`!$`%0!.0%+*`+"`0$!`spring`"1*0%+*L`0$!`$%( `"1*0%+*`.!!%2!/`0$!`%*0!.,+(0! `/05(!

"+.`0$!`#%2!*`,+%*0`%*`0%)!`* L`&1/0`5`,,(5%*#`0$!`.!!%2! `+&!0`0+`0$!`/05(!`00.%10!`+"
0$!`+),+*!*0L`3!`*`/!!`0$!`0.*/%0%+*`+"`0$!`+,%05K

S`8<;`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

$%/`(%..5`*` +`/+)!`)+.!`++(`/01""L`10`0$!`"%./0`0$%*#/`0+`(!.*`+10`.!`0$!`/%
+*!,0/L`* `0$%/`!4),(!`/$+1( `(.%"5`0$!)K

0`%/`(/+`%*0!.!/0%*#`0+`+),.!`0$!`03+` %""!.!*0`,,.+$!/`+"`0$!`0.*/%0%+*`#.+1,
* `react-motion`0+`!`(!`0+`$++/!`0$!`.%#$0`+*!`"+.`0$!`,.+&!0`5+1`.!`3+.'%*#`+*K

6FDODEOH9HFWRU*UDSKLFV
/0`10`*+0`(!/0L`+*!`+"`0$!`)+/0`%*0!.!/0%*#`0!$*%-1!/`3!`*`,,(5`%*`0$!`.+3/!.`0+
.3`%+*/`* `#.,$/`%/`((!`!0+.` .,$%/`Q RK

 `%/`#.!0`!1/!`%0`%/`` !(.0%2!`35`+"` !/.%%*#`2!0+./`* `%0`"%0/`,!."!0(5`3%0$

0$!`,1.,+/!/`+"`!0K

!`1/! `0+`1/!`%+*`"+*0/`0+`.!0!`%+*/L`10`0$!5`$2!`3!((_'*+3*`,.+(!)/L`3%0$`0$!`"%./0
!%*#`0$0`0$!5`.!`*+0`!//%(!K` 0`%/`(/+`,.!005`$. `0+`,+/%0%+*`%+*`"+*0/`3%0$`L`*
0$!5` +`*+0`(35/`(++'`!10%"1(`%*`((`.+3/!./K`$!/!`.!`0$!`.!/+*/`3!`/$+1( `,.!"!.
 `"+.`+1.`3!`,,(%0%+*/K

.+)``!0`,+%*0`+"`2%!3L`%0` +!/`*+0`)'!`*5` %""!.!*!`%"`3!`+10,10``div`+.`*`

!(!)!*0`".+)`0$!`.!* !.`)!0$+ L`* `0$%/`%/`3$0`)'!/`%0`/+`,+3!."1(K

!`0!* `(/+`0+`$++/!` /`!1/!`3!`*`!/%(5`)+ %"5`0$!)`0`.1*0%)!`1/%*#``*

2.%,0L`3$%$`)'!/`0$!)`*`!4!((!*0`* % 0!`"+.`0$!`"1*0%+*(`,,.+$`+"`!0K

+L`%"`3!`0$%*'`+10`+1.`+),+*!*0/`/``"1*0%+*`+"`0$!%.`,.+,/L`3!`*`!/%(5`%)#%*!
$+3`3!`*`.!0!`/!("_+*0%*! ` `%+*/`0$0`3!`*`)*%,1(0!`5`,//%*#` %""!.!*0
,.+,/`0+`0$!)K

`+))+*`35`0+`.!0!` /`%*``3!`,,`3%0$`!0`%/`0+`3.,`+1.`2!0+./`%*0+``!0
+),+*!*0`* `1/!`0$!`,.+,/`0+` !"%*!`0$!%.` 5*)%`2(1!/K

!0W/`(++'`0``/%),(!`!4),(!`3$!.!`3!` .3``(1!`%.(!L`0$1/`.!0%*#``!0
+),+*!*0`0$0`3.,/`*` `!(!)!*0M
FRQVW Circle = ({ x, y, radius, fill }) => (
VYJ!
FLUFOHF[={x} F\={y} U={radius} ILOO={fill} !
VYJ!
);

/`5+1`*`/!!L`3!`*`!/%(5`1/!``/00!(!//`"1*0%+*(`+),+*!*0`0$0`3.,/`0$!`
).'1,L`* `%0`!,0/`0$!`/)!`,.+,/`/`0$!` ` +!/K

S`8<<`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

+L`0$!` `%/`&1/0``0!),(0!L`* `3!`*`1/!`0$!`/)!`Circle`)1(0%,(!`0%)!/`%*`+1.

,,(%0%+*`3%0$`2.%+1/`,.+,/K

$!`,.+,/`.!` !"%*! `%*`0$!`"+((+3%*#`35M

LPSRUW { number, string } IURP 'prop-types';
...
Circle.SURS7\SHV = {
[: number,
\: number,
UDGLXV: number,
ILOO: string
};

$%/`%/`#.!0`!1/!`%0`)'!/`3+.'%*#`3%0$` /`* `0$!%.`,.+,!.0%!/`)+.!`!4,(%%0`/+`0$0

0$!`%*0!."!`%/`(!.`* `3!`'*+3`!40(5`$+3`0+`+*"%#1.!`+1.`%+*/K

*`!4),(!`1/#!`%/`/`"+((+3/M
&LUFOH[={20} \={20} UDGLXV={20} ILOO="blue" !

!`*`+2%+1/(5`1/!`0$!`"1((`,+3!.`+"`!0`* `/!0`/+)!` !"1(0`,.)!0!./`/+`0$0L`%"`0$!

%.(!`%+*`%/`.!* !.! `3%0$+10`,.+,/L`3!`/0%((`/$+3`/+)!0$%*#K

+.`!4),(!L`3!`*` !"%*!`0$!` !"1(0`+(+.M

Circle.GHIDXOW3URSV = {
ILOO: 'red'
};

$%/`%/`,.!005`,+3!."1(`3$!*`3!`1%( ` /L`!/,!%((5`%*``0!)`3$!.!`3!`/$.!`+1.`%+*`/!0
* `3!`3*0`0+`$2!`/+)!` !"1(0`2(1!/`%*`%0L`10`3!`(/+`3*0`0+`(!0`+0$!.`0!)/` !% !
0$!%.`/!00%*#/`3%0$+10`$2%*#`0+`.!.!0!`0$!`/)!` `/$,!/K

+3!2!.L`%*`/+)!`/!/L`3!`,.!"!.`0+`!`)+.!`/0.%0`* `"%4`/+)!`2(1!/`0+`'!!,
+*/%/0!*5K`%0$`!0L`0$%/`%/``/1,!.`/%),(!`0/'K

+.`!4),(!L`3!`*`3.,`0$!`/!`%.(!`+),+*!*0`%*0+``RedCircleL`/`"+((+3/M
FRQVW RedCircle = ({ x, y, radius }) => (
&LUFOH[={x}\={y} UDGLXV={radius} ILOO="red"!
);

!.!L`0$!`+(+.`%/`/!0`5` !"1(0`* `%0`**+0`!`$*#! L`3$%(!`0$!`+0$!.`,.+,/`.!

0.*/,.!*0(5`,//! `0+`0$!`+.%#%*(`%.(!K

S`8<=`T
.%0!`+ !`"+.`0$!`.+3/!. $,0!.`=

$!`,.+,`05,!/`.!`0$!`/)!`3%0$+10`0$!`"%((M
RedCircle.SURS7\SHV = {
[: number,
\: number,
UDGLXV: number
};

$!`"+((+3%*#`/.!!*/$+0`/$+3/`03+`%.(!/L`(1!`* `.! L`0$0`.!`#!*!.0! `5`!0`1/%*#

 M

!`*`,,(5`0$%/`0!$*%-1!`* `.!0!` %""!.!*0`2.%0%+*/`+"`0$!`%.(!L`/1$

/`SmallCircle`* `RightCircleL`* `!2!.50$%*#`!(/!`3!`*!! `0+`1%( `+1.` /K

6XPPDU\
*`0$%/`$,0!.L`3!`(++'! `0`0$!` %""!.!*0`0$%*#/`3!`*` +`3$!*`3!`0.#!0`0$!`.+3/!.
3%0$`!0L`".+)`"+.)`.!0%+*`0+`!2!*0/L`* `".+)`*%)0%+*/`0+` /K

!0`#%2!/`1/`` !(.0%2!`35`0+`)*#!`((`0$!`/,!0/`3!`*!! `0+` !(`3%0$`3$!*`3!

.!0!``3!`,,(%0%+*K

*`/!`3!`*!! `%0L`!0`#%2!/`1/`!//`0+`0$!`01(``*+ !/`%*``35`0$0`3!`*

,!."+.)`%),!.0%2!`+,!.0%+*/`3%0$`0$!)L`3$%$`%/`1/!"1(`%"`3!`*!! `0+`%*0!#.0!`!0
3%0$`*`!4%/0%*#`%),!.0%2!`(%..5K

$!`*!40`$,0!.`3%((`!`+10``* `%*(%*!`/05(!/L`* `%0`3%((`(.%"5`3$0`%0`)!*/`0+

3.%0!``%*` 2.%,0K

S`8<>`T
 
6HFWLRQ3HUIRUPDQFH
,PSURYHPHQWVDQG3URGXFWLRQ
!`3%((`!#%*`0$%/`/!0%+*`5`(!.*%*#`$+3`0+`)'!`+1.`+),+*!*0/`!10%"1(L`* `+)!`0+
1* !./0* `0$!`+*!,0`+"`/!.2!._/% !`.!* !.%*#`%*`!0`"+.`+0$`"1*`* `,.+"%0K`!`3%((
0$!*`(!.*`$+3`0+`%),.+2!`0$!`,!."+.)*!`+"`+1.`,,(%0%+*/`5`0!/0%*#`* ` !1##%*#
0$!)K`!`3%((`(/+` %,`%*0+``-1%'`$,0!.`+10`!0`+10!.K`%*((5L`3!`3%((`!* `0$%/
/!0%+*`* `0$!`++'`%0/!("`5`(!.*%*#`$+3`0+` !,(+5`+1.`,,(%0%+*`0+`,.+ 10%+*`* `/!!
3$0`/0!,/`5+1`*`0'!`*!40K

*`0$%/`/!0%+*L`3!`3%((`+2!.`0$!`"+((+3%*#`$,0!./M

Chapter 7L`'!`+1.`+),+*!*0/`++'`!10%"1(
Chapter 8L`!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0
Chapter 9L` ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/
Chapter 10L`+10`!/0%*#`* `!1##%*#
Chapter 11L`!0`+10!.
Chapter 12L`*0%_00!.*/`0+`!`2+% !
Chapter 13L`!,(+5%*#`0+`.+ 10%+*
Chapter 14L`!40`0!,/
 
0DNH<RXU&RPSRQHQWV/RRN
%HDXWLIXO
1.`&+1.*!5`%*0+`!0`!/0`,.0%!/`* ` !/%#*`,00!.*/`$/`*+3`.!$! `0$!`,+%*0`3$!.!
3!`3*0`0+`)'!`+1.`+),+*!*0/`(++'`!10%"1(K`+` +`0$0L`3!`3%((`#+`0$.+1#$`((`0$!
.!/+*/`3$5`.!#1(.``)5`*+0`!`0$!`!/0`,,.+$`"+.`/05(%*#`+),+*!*0/L`* `3!`3%((
$!'`+10`2.%+1/`(0!.*0%2!`/+(10%+*/K

0.0%*#`3%0$`%*(%*!`/05(!/L`0$!*` %1)L``)+ 1(!/L`* `/05(! `+),+*!*0/L`0$%/`$,0!.

3%((`#1% !`5+1`%*0+`0$!`)#%(`3+.( `+"``%*` 2.%,0K

$%/`0+,%`%/`2!.5`$+0`* `$%#$(5`+*0.+2!./%(L`/+`0$%/`$,0!.`.!-1%.!/`*`+,!*`)%* `0+`!

1* !./0++ `* `"+((+3! K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M

+))+*`,.+(!)/`3%0$`.!#1(.``0`/(!
$0`%0`)!*/`0+`1/!`%*(%*!`/05(!/`%*`!0`* `0$!` +3*/% !/
+3`0$!` %1)`(%..5`*`$!(,`"%4`%//1!/`+"`%*(%*!`/05(!/
+3`0+`/!0`1,``,.+&!0`".+)`/.0$`1/%*#`3!,'`* ``)+ 1(!/
!01.!/`+"``)+ 1(!/`* `3$5`0$!5`.!,.!/!*0``#.!0`/+(10%+*`0+`2+% `#(+(

05(! `+),+*!*0/L``*!3`(%..5`0$0`+""!./``)+ !.*`,,.+$`0+`/05(%*#`!0
+),+*!*0/
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

&66LQ-DYD6FULSW
*`0$!`+))1*%05L`!2!.5+*!`#.!!/`0$0``.!2+(10%+*`0++'`,(!`%*`0$!`/05(%*#`+"`!0
+),+*!*0/`%*`+2!)!.`978;L`3$!*`$.%/0+,$!.`$! !1`#2!``0('`0`0$!`0%+* 
+*"!.!*!K

(/+`'*+3*`/`2&!14`+*`0$!`%*0!.*!0L`$.%/0+,$!.`3+.'/`0`!++'`* `+*0.%10!/`0+
!0K` *`$%/`0('L`$!`3!*0`0$.+1#$`((`0$!`,.+(!)/`.!(0! `0+``+*`0$!`/(!`0$0`0$!5
3!.!`"%*#`0$!)`0`!++'K

0`%/`3+.0$`1* !./0* %*#`((`+"`0$!)`!1/!`/+)!`.!`,.!005`+))+*`* `0$!5`3%((`$!(,

1/`%*0.+ 1!`+*!,0/`/1$`/`%*(%*!`/05(!/`* `(+((5`/+,! `(//`*)!/K

$!`"+((+3%*#`%/`0$!`(%/0`+"`%//1!/`3%0$`L`/%((5`,.+(!)/`3%0$``0`/(!M

(+(`)!/,!
!,!* !*%!/
! `+ !`(%)%*0%+*
%*%"%0%+*
$.%*#`+*/0*0/
+*_ !0!.)%*%/0%`!/+1(10%+*
/+(0%+*

$!`"%./0`3!((_'*+3*`,.+(!)`+"``%/`0$0`((`0$!`/!(!0+./`.!`#(+(K`+`)00!.`$+3`3!
+.#*%6!`+1.`/05(!/L`1/%*#`*)!/,!/`+.``,.+! 1.!`(%'!`0$!`(+'L`(!)!*0L`+ %"%!.
QR`)!0$+ +(+#5L`%*`0$!`!* L`3!`.!`(35/`,+((10%*#`0$!`#(+(`*)!/,!L`3$%$`3!
((`'*+3`%/`3.+*#K` 0`%/`*+0`+*(5`3.+*#`%*`,.%*%,(!L`10`%0`(/+`(! /`0+`)*5`!..+./`%*`%#
+ !/!/L`* `%0`)'!/`)%*0%*%(%05`2!.5`$. `%*`0$!`(+*#`0!.)K`+.'%*#`3%0$`%#
0!)/L`%0`%/`*+*0.%2%(`0+`'*+3`%"``,.0%1(.`(//`+.`!(!)!*0`$/`(.! 5`!!*`/05(! L`*
)+/0`+"`0$!`0%)!`3!`0!* `0+` `)+.!`(//!/`%*/0! `+"`.!1/%*#`!4%/0%*#`+*!/K

$!`/!+* `,.+(!)`3%0$``.!#. /`0$!` !"%*%0%+*`+"`0$!` !,!* !*%!/K` 0`%/`2!.5`$. L`%*

"0L`0+`/00!`(!.(5`0$0``,.0%1(.`+),+*!*0` !,!* /`+*``/,!%"%``* `0$0`0$!`
$/`0+`!`(+ ! `"+.`0$!`/05(!`0+`!`,,(%! K`%*!`/05(!/`.!`#(+(L`*5`/05(!`".+)`*5`"%(!
*`!`,,(%! `0+`*5`!(!)!*0L`* `(+/%*#`+*0.+(`%/`2!.5`!/5K

S`8=7`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

.+*0!* ` !2!(+,!./`0!* `0+`1/!`,.!,.+!//+./`0+`!`(!`0+`/,(%0`0$!%.``%*0+

/1)+ 1(!/L`10`%*`0$!`!* L``%#L`#(+(``1* (!`%/`#!*!.0! `"+.`0$!`.+3/!.K`%*!
`+ !/!/`0!* `0+`!+)!`$1#!`-1%'(5L`3!`(+/!`+*0.+(`+2!.`0$!)L`* `0$!`0$%.
,.+(!)`%/`0+` +`3%0$` ! `+ !`!(%)%*0%+*K` 0`%/`*+0`!/5`0+`% !*0%"5`-1%'(5`3$%$`/05(!/
!(+*#`0+`3$%$`+),+*!*0L`* `0$%/`)'!/` !(!0%*#`+ !`%*.! %(5`$. K` *`"0L` 1!`0+
0$!`/ %*#`*01.!`+"`L`.!)+2%*#``/!(!0+.`+.``.1(!`*`.!/1(0`%*`*`1*%*0!* ! `.!/1(0
3%0$%*`0$!`.+3/!.K

*+0$!.`,%*`+"`3+.'%*#`3%0$``+*!.*/`0$!`)%*%"%0%+*`+"`0$!`/!(!0+./`* `0$!`(//
*)!/L`+0$`%*`0$!``* `%*`0$!` 2.%,0`,,(%0%+*K` 0`3+1( `/!!)`*`!/5`0/'L`10`%0
%/`*+0L`!/,!%((5`3$!*`(//!/`.!`,,(%! `+*`0$!`"(5`+.`+*0!*0! `%*`0$!`(%!*0K

+0`!%*#`(!`0+`)%*%"5`* `+,0%)%6!`(//`*)!/`%/`,.!005` `"+.`,!."+.)*!L`* `%0`*

)'!``$1#!` %""!.!*!`0+`0$!`/%6!`+"`0$!`K

*+0$!.`,.!005`+))+*`+,!.0%+*`0$0`%/`*+*_0.%2%(`3%0$`.!#1(.``%/`/$.%*#`+*/0*0/
!03!!*`0$!`/05(!/`* `0$!`(%!*0`,,(%0%+*K`!`+"0!*`*!! `0+`'*+3`0$!`$!%#$0`+"``$! !.L
"+.`!4),(!L`0+`.!(1(0!`0$!`,+/%0%+*`+"`+0$!.`!(!)!*0/`0$0` !,!* `+*`%0K

/1((5L`3!`.! `0$!`2(1!`%*`0$!`(%!*0`1/%*#`0$!` 2.%,0` /L`10`0$!`+,0%)(`/+(10%+*

3+1( `!`0+`/$.!`+*/0*0/`* `2+% ` +%*#`!4,!*/%2!`(1(0%+*/`0`.1*0%)!K`$%/
.!,.!/!*0/`0$!`"%"0$`,.+(!)`0$0`2&!14`* `0$!`+0$!.` !2!(+,!./`0`!++'`0.%! `0+`/+(2!K

$!`/%40$`%//1!`+*!.*/`0$!`*+* !0!.)%*%/0%`.!/+(10%+*`+"`K` *`"0L`%*`L`0$!`+. !.

)00!./`* `%"`0$!``%/`(+ ! `+*` !)* L`0$!`+. !.`%/`*+0`#1.*0!! L`3$%$`(! /`0+`0$!
3.+*#`/05(!/`!%*#`,,(%! `0+`0$!`!(!)!*0/K

1,,+/!L`"+.`!4),(!L`0$0`3!`3*0`0+`+,0%)%6!`0$!`35`3!`.!-1!/0`L`(+ %*#`0$!`
.!(0! `0+``,.0%1(.`,#!`+*(5`3$!*`0$!`1/!./`*2%#0!`0+`%0K` "`0$!``.!(0! `0+`0$%/`(/0
,#!`$/`/+)!`.1(!/`0$0`(/+`,,(5`0+`0$!`!(!)!*0/`+"` %""!.!*0`,#!/L`0$!`"0`0$0`%0`$/
!!*`(+ ! `(/0`+1( `""!0`0$!`/05(%*#`+"`0$!`.!/0`+"`0$!`,,K`+.`!4),(!L`%"`0$!`1/!.`#+!/
'`0+`0$!`,.!2%+1/`,#!L`0$!5`)%#$0`/!!``,#!`3%0$`` `0$0`%/`/(%#$0(5` %""!.!*0`0$*`0$!
"%./0`0%)!`0$!5`2%/%0! `%0K

0`%/`%*.! %(5`$. `0+`+*0.+(`((`0$!`2.%+1/`+)%*0%+*/`+"`/05(!/L`.1(!/L`* `*2%#0%+*

,0$/L`10`#%*L`!%*#`(!`0+`(+ `0$!``3$!*`*!! ! `+1( `$2!``.%0%(`%),0`+*
0$!`,!."+.)*!`+"``3!`,,(%0%+*K

S`8=8`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

/0`10`*+0`(!/0L`0$!`/!2!*0$`,.+(!)`+"`L`+. %*#`0+`$.%/0+,$!.`$! !1L`%/`.!(0!

0+`%/+(0%+*K` *`L`%0`%/`()+/0`%),+//%(!`0+`$%!2!`,.+,!.`%/+(0%+*`!03!!*`"%(!/`+.
+),+*!*0/K`!(!0+./`.!`#(+(L`* `0$!5`*`!/%(5`!`+2!.3.%00!*K` 0`%/`0.%'5`0+`,.! %0
0$!`"%*(`/05(!`+"`*`!(!)!*0`&1/0`5`'*+3%*#`0$!`(//`*)!/`,,(%! `0+`%0`!1/!`/05(!/`.!
*+0`%/+(0! `* `+0$!.`.1(!/`%*`+0$!.`,.0/`+"`0$!`,,(%0%+*`*`""!0`1*.!(0! `!(!)!*0/K

*`0$!`"+((+3%*#`/!0%+*L`3!`3%((`(++'`0`3$0`%0`)!*/`0+`1/!`%*(%*!`/05(!/`3%0$`!0`*
0$!`!*!"%0/`* ` +3*/% !/`+"`%0K

,QOLQHVW\OHV
$!`+""%%(`!0` +1)!*00%+*`/1##!/0/` !2!(+,!./`1/!`%*(%*!`/05(!/`0+`/05(!`0$!%.`!0
+),+*!*0/K`$%/`/!!)/`+ `!1/!`3!`((`(!.*! `%*`,/0`5!./`0$0`/!,.0%*#`0$!
+*!.*/`%/`%),+.0*0`* `3!`/$+1( `*+0`)%4`).'1,`* `K

!0`0.%!/`0+`$*#!`0$!`+*!,0`+"`/!,.0%+*`+"`+*!.*/`5`)+2%*#`%0`".+)`0$!`/!,.0%+*
+"`0!$*+(+#%!/`0+`0$!`/!,.0%+*`+"`+),+*!*0/K`!,.0%*#`).'1,L`/05(%*#L`* `(+#%`%*0+
%""!.!*0`"%(!/`3$!*`0$!5`.!`0%#$0(5`+1,(! `* `3$!.!`+*!`**+0`3+.'`3%0$+10`0$!`+0$!.
%/`&1/0`*`%((1/%+*K`2!*`%"`%0`$!(,/`'!!,`0$!`,.+&!0`/0.101.!`(!*!.L`%0` +!/`*+0`#%2!`*5`.!(
!*!"%0K

*`!0L`3!`+),+/!`+),+*!*0/`0+`.!0!`,,(%0%+*/`3$!.!`+),+*!*0/`.!`
"1* )!*0(`1*%0`+"`+1.`/0.101.!K`!`/$+1( `!`(!`0+`)+2!`+),+*!*0/`.+//`0$!
,,(%0%+*L`* `0$!5`/$+1( `,.+2% !`0$!`/)!`.!/1(0`.!#. %*#`+0$`(+#%`* ` L`*+
)00!.`3$!.!`0$!5`#!0`.!* !.! K

$%/`%/`+*!`+"`0$!`.!/+*/`3$5`+((+0%*#`0$!`/05(!/`3%0$%*`+1.`+),+*!*0/`* `,,(5%*#
0$!)`1/%*#`%*(%*!`/05(!/`+*`0$!`!(!)!*0/`+1( `)'!`/!*/!`%*`!0K

%./0L`(!0W/`(++'`0`*`!4),(!`+"`3$0`%0`)!*/`0+`1/!`0$!`/05(!`00.%10!`+"`0$!`*+ !/`0+
,,(5`0$!`/05(%*#`0+`+1.`+),+*!*0/`%*`!0K

!`.!`#+%*#`0+`.!0!``100+*`3%0$`0$!`0!40`(%'`)!PL`* `3!`.!`#+%*#`0+`,,(5``+(+.
* ``'#.+1* `+(+.`0+`%0M
FRQVW style = {
FRORU: 'palevioletred',
EDFNJURXQG&RORU: 'papayawhip'
};
FRQVW Button = () => EXWWRQVW\OH={style}!Click me!EXWWRQ!;

S`8=9`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

/`5+1`*`/!!L`%0`%/`,.!005`!/5`0+`/05(!`!(!)!*0/`3%0$`%*(%*!`/05(!/`%*`!0K`!`&1/0`$2!`0+
.!0!`*`+&!0`3$!.!`0$!`00.%10!/`.!`0$!``.1(!/L`* `0$!`2(1!/`.!`0$!`2(1!/`3!
3+1( `1/!`%*``.!#1(.``"%(!K

$!`+*(5` %""!.!*!/`.!`0$0`0$!`$5,$!*0! ``.1(!/`)1/0`!`)!(/! `0+`!

2.%,0_+),(%*0L`* `0$!`2(1!/`.!`/0.%*#/L`/+`0$!5`$2!`0+`!`3.,,! `%*`-1+0!
).'/K

$!.!`.!`/+)!`!4!,0%+*/`.!#. %*#`0$!`2!* +.`,.!"%4!/K`+.`!4),(!L`%"`3!`3*0`0+` !"%*!

`0.*/%0%+*`+*`3!'%0L`3!`/$+1( `1/!`0$!`WebkitTransition`00.%10!L`3$!.!
0$!`3!'%0`,.!"%4`!#%*/`3%0$``,%0(`(!00!.K`$%/`.1(!`,,(%!/`0+`((`0$!`2!* +.`,.!"%4!/L
!4!,0`"+.`)/L`3$%$`%/`(+3!./!K

0$!.`1/!`/!/`.!`*1)!./—0$!5`*`!`3.%00!*`3%0$+10`-1+0!/`+.`1*%0/`+"`)!/1.!)!*0
* L`5` !"1(0L`0$!5`.!`0.!0! `/`,%4!(/K

$!`"+((+3%*#`.1(!`,,(%!/``$!%#$0`+"`100`,4M
FRQVW style = {
KHLJKW: 100
};

5`1/%*#`%*(%*!`/05(!/`3+.'/L`3!`*`(/+` +`0$%*#/`0$0`.!`$. `0+`%),(!)!*0`3%0$`.!#1(.

K`+.`!4),(!L`3!`*`.!(1(0!`/+)!``2(1!/`+*`0$!`(%!*0`0`.1*0%)!L`3$%$`%/`
2!.5`,+3!."1(`+*!,0L`/`5+1`3%((`/!!`%*`0$!`"+((+3%*#`!4),(!K

1,,+/!`5+1`3*0`0+`.!0!``"+.)`"%!( `%*`3$%$`0$!`"+*0`/%6!`$*#!/`+. %*#`0+`%0/

2(1!K`+L`%"`0$!`2(1!`+"`0$!`"%!( `%/`24L`0$!`"+*0`/%6!`%/`#+%*#`0+`!`9;`,%4!(/K`%0$`*+.)(
L`0$%/`!$2%+.`%/`()+/0`%),+//%(!`0+`.!,.+ 1!`3%0$+10`,100%*#`%*``$1#!`!""+.0`*
1,(%0! `+ !K

!0W/`(++'`0`$+3`!/5`%0`%/`0+`1/!`%*(%*!`/05(!/`%*/0! K

!`.!0!``(//`!1/!`3!`$2!`0+`/0+.!`0$!`/00!L`* `3!`*!! `*`!2!*0`$* (!.M

FODVV FontSize H[WHQGV Component {

$!`(//`$/``constructorL`3$!.!`3!`/!0`0$!` !"1(0`2(1!`"+.`0$!`/00!L`* `3!`%*

0$!`handleChange`$* (!.L`3$%$`(%/0!*/`0+`0$!`onChange`!2!*0`+"`0$!`%*,10`"%!( M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
YDOXH: 16

S`8=:`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

};
this.KDQGOH&KDQJH = this.handleChange.ELQG(this);
}

!`%),(!)!*0``/%),(!`$*#!`$* (!.L`3$!.!`3!`1/!`0$!`0.#!0`00.%10!`+"`0$!`!2!*0`0+
.!0.%!2!`0$!`1..!*0`2(1!`+"`0$!`"%!( M
KDQGOH&KDQJH({ WDUJHW: { value } }) {
this.VHW6WDWH({
YDOXH: 1XPEHU(value)
});
}

%*((5L`3!`.!* !.`0$!`%*,10`"%(!`+"`05,!`*1)!.L`3$%$`%/``+*0.+((! `+),+*!*0`!1/!

3!`'!!,`%0/`2(1!`1, 0! `5`1/%*#`0$!`/00!K` 0`(/+`$/`*`!2!*0`$* (!.L`3$%$`%/`"%.!
!2!.5`0%)!`0$!`2(1!`+"`0$!`"%!( `$*#!/K

/0`10`*+0`(!/0L`3!`1/!`0$!`/05(!`00.%10!`+"`0$!`"%!( `0+`/!0`%0/`font-sizeK`/`5+1`*
/!!L`3!`.!`1/%*#`0$!`)!(/! `2!./%+*`+"`0$!``.1(!`0+`"+((+3`0$!`!0`+*2!*0%+*M
UHQGHU() {
UHWXUQ (
LQSXW
W\SH="number"
YDOXH={this.state.YDOXH}
RQ&KDQJH={this.KDQGOH&KDQJH}
VW\OH={{ IRQW6L]H: this.state.YDOXH }}
/>
);
}

!* !.%*#`0$!`,.!! %*#`+),+*!*0L`3!`*`/!!`*`%*,10`"%!( L`3$%$`$*#!/`%0/`"+*0`/%6!

+. %*#`0+`%0/`2(1!K`$!`35`%0`3+.'/`%/`0$0`3$!*`0$!`2(1!`$*#!/L`3!`/0+.!`0$!`*!3
2(1!`+"`0$!`"%!( `%*/% !`0$!`/00!K`+ %"5%*#`0$!`/00!`"+.!/`0$!`+),+*!*0`0+`.!_.!* !.L
* `3!`1/!`0$!`*!3`/00!`2(1!`0+`/!0`0$!` %/,(5`2(1!`+"`0$!`"%!( `* `%0/`"+*0`/%6!M`%0W/`!/5
* `,+3!."1(K

2!.5`/+(10%+*`%*`+),10!.`/%!*!`$/`%0/` +3*/% !/L`* `%0`(35/`.!,.!/!*0/``0. !_+""K

*`0$!`/!`+"`%*(%*!`/05(!/L`1*"+.01*0!(5L`0$!`,.+(!)/`.!`)*5K

+.`!4),(!L`3%0$`%*(%*!`/05(!/L`%0`%/`*+0`,+//%(!`0+`1/!`,/!1 +_/!(!0+./`Q"+.
!4),(!L`:hoverR`* `,/!1 +_!(!)!*0/L`3$%$`%/``,.!005`/%#*%"%*0`(%)%00%+*`%"`5+1`.!
.!0%*#`` `3%0$`%*0!.0%+*/`* `*%)0%+*/K

S`8=;`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

$!.!`.!`/+)!`3+.'.+1* /L`* `"+.`!4),(!L`5+1`*`(35/`.!0!`.!(`!(!)!*0/`%*/0!

+"`,/!1 +`+*!/L`10`"+.`0$!`,/!1 +_(//!/L`%0`%/`*!!//.5`0+`1/!` 2.%,0`0+`/%)1(0!`0$!
`!$2%+.L`3$%$`%/`*+0`+,0%)(K

$!`/)!`,,(%!/`0+`)! %`-1!.%!/L`3$%$`**+0`!` !"%*! `1/%*#`%*(%*!`/05(!/L`* `%0

)'!/`%0`$. !.`0+`.!0!`.!/,+*/%2!`3!`,,(%0%+*/K`%*!`/05(!/`.!` !(.! `1/%*#
2.%,0`+&!0/L`%0`%/`(/+`*+0`,+//%(!`0+`1/!`/05(!`"(('/M
GLVSOD\: -webkit-flex;
GLVSOD\: flex;

2.%,0`+&!0/`**+0`$2!`03+`00.%10!/`3%0$`0$!`/)!`*)!K`05(!`"(('/`/$+1( `!
2+% ! L`10`%0`%/`(35/`#++ `0+`$2!`0$!`%(%05`0+`1/!`0$!)`%"`*!! ! K

*+0$!.`"!01.!`+"``0$0`%0`%/`*+0`,+//%(!`0+`!)1(0!`1/%*#`%*(%*!`/05(!/`%/`*%)0%+*/K
$!`3+.'.+1* `$!.!`%/`0+` !"%*!`*%)0%+*/`#(+((5`* `1/!`0$!)`%*/% !`0$!`/05(!
00.%10!`+"`0$!`!(!)!*0/K

%0$`%*(%*!`/05(!/L`3$!*!2!.`3!`*!! `0+`+2!..% !``/05(!`3%0$`.!#1(.`L`3!`.!`(35/

"+.! `0+`1/!`0$!`!important`'!53+. L`3$%$`%/` `,.0%!`!1/!`%0`,.!2!*0/`*5`+0$!.
/05(!`!%*#`,,(%! `0+`0$!`!(!)!*0K

$!`)+/0` %""%1(0`0$%*#`0$0`$,,!*/`3+.'%*#`3%0$`%*(%*!`/05(!/`%/` !1##%*#K`!`0!* `0+

1/!`(//`*)!/`0+`"%* `!(!)!*0/`%*`0$!`.+3/!.`!2++(/`0+` !1#`* `$!'`3$%$`/05(!/
$2!`!!*`,,(%! K

%0$`%*(%*!`/05(!/L`((`0$!`/05(!/`+"`0$!`%0!)/`.!`(%/0! `%*`0$!%.`/05(!`00.%10!L`3$%$`)'!/`%0
2!.5`$. `0+`$!'`* ` !1#`0$!`.!/1(0K

+.`!4),(!L`0$!`100+*`0$0`3!`.!0! `!.(%!.`%*`0$%/`/!0%+*`%/`.!* !.! `%*`0$!`"+((+3%*#

35M
EXWWRQ VW\OH="color:palevioletred;background-
color:papayawhip;"!Click me!EXWWRQ!

5`%0/!("L`%0` +!/`*+0`/!!)`2!.5`$. `0+`.! L`10`%"`5+1`%)#%*!`5+1`$2!`$1* .! /`+"

!(!)!*0/`* `$1* .! /`+"`/05(!/L`5+1`.!(%6!`0$0`0$!`,.+(!)`!+)!/`2!.5`+),(%0! K

(/+L`%"`5+1`.!` !1##%*#``(%/0`3$!.!`!2!.5`/%*#(!`%0!)`$/`0$!`/)!`/05(!`00.%10!L`* `%"

5+1`)+ %"5`+*!`+*`0$!`"(5`0+`$!'`0$!`.!/1(0`%*`0$!`.+3/!.L`5+1`3%((`/!!`0$0`5+1`.!
,,(5%*#`0$!`/05(!/`+*(5`0+`%0`* `*+0`0+`((`0$!`+0$!.`/%(%*#/L`!2!*`%"`0$!5`/$.!`0$!`/)!
/05(!K

S`8=<`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

/0`10`*+0`(!/0L`%"`3!`.!* !.`+1.`,,(%0%+*`+*`0$!`/!.2!.`/% !`Q3!`3%((`+2!.`0$%/`0+,%

%*`Chapter 8L`!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0RL`0$!`/%6!`+"`0$!`,#!`%/`%##!.`3$!*
1/%*#`%*(%*!`/05(!/K

%0$`%*(%*!`/05(!/L`3!`.!`,100%*#`((`0$!`+*0!*0`+"`0$!``%*0+`0$!`).'1,L`3$%$` /`*
!40.`*1)!.`+"`50!/`0+`0$!`"%(!`0$0`3!`/!* `0+`0$!`(%!*0/`* `)'!/`0$!`3!`,,(%0%+*
,,!.`/(+3!.K

+),.!//%+*`(#+.%0$)/`*`$!(,`3%0$`0$0`!1/!`0$!5`*`!/%(5`+),.!//`/%)%(.
,00!.*/L`* L`%*`/+)!`/!/L`(+ %*#`0$!`.%0%(`,0$``%/``#++ `/+(10%+*L`10`%*`#!*!.(L
3!`/$+1( `0.5`0+`2+% `%0K

0`01.*/`+10`0$0`%*(%*!`/05(!/`#%2!`)+.!`,.+(!)/`0$*`0$!`,.+(!)/`0$!5`0.5`0+`/+(2!K

+.`0$%/`.!/+*L`0$!`+))1*%05`.!0! ` %""!.!*0`0++(/`0+`/+(2!`0$!`,.+(!)/`+"`%*(%*!`/05(!/
10`'!!,%*#`0$!`/05(!/`%*/% !`0$!`+),+*!*0/L`+.`(+(`0+`0$!`+),+*!*0/L`0+`#!0`0$!`!/0`+"
+0$`3+.( /K

"0!.`$.%/0+,$!.`$! !1W/`0('L``(+0`+"` !2!(+,!./`/0.0! `0('%*#`+10`%*(%*!`/05(!/L`*

)*5`/+(10%+*/`* `!4,!.%)!*0/`$2!`!!*`) !`0+`"%* `*!3`35/`+"`3.%0%*#``%*
2.%,0K

*`0$!`!#%**%*#L`0$!.!`3!.!`03+`+.`0$.!!L`3$%(!`0+ 5`0$!.!`.!`)+.!`0$*`"+.05K

*`0$!`"+((+3%*#`/!0%+*/L`3!`3%((`#+`0$.+1#$`0$!`)+/0`,+,1(.`+*!/K

5DGLXP
*!`+"`0$!`"%./0`(%..%!/`0$0`3/`.!0! `0+`/+(2!`0$!`,.+(!)/`+"`%*(%*!`/05(!/`3!
!*+1*0!.! `%*`0$!`,.!2%+1/`/!0%+*`%/` %1)K` 0`%/`)%*0%*! `5`0$!`#.!0` !2!(+,!./
0`+.)% (!`/L`* `%0`%/`/0%((`+*!`+"`0$!`)+/0`,+,1(.`/+(10%+*/K

*`0$%/`/!0%+*L`3!`3%((`(++'`0`$+3` %1)`3+.'/L`3$%$`,.+(!)/`%0`/+(2!/L`* `3$5`%0`%/

`#.!0`(%..5`0+`1/!`%*`+*&1*0%+*`3%0$`!0`"+.`/05(%*#`+),+*!*0/K

!`.!`#+%*#`0+`.!0!``2!.5`/%),(!`100+*L`/%)%(.`0+`0$!`+*!`3!`1%(0`%*`0$!`!4),(!
!.(%!.`%*`0$%/`$,0!.K

!`3%((`/0.0`3%0$``/%`100+*`3%0$+10`/05(%*#L`* `3!`3%((` `/+)!`/%`/05(%*#L`/

3!((`/`,/!1 +_(//!/`* `)! %`-1!.%!/`/+`0$0`3!`*`(!.*`+10`0$!`)%*`"!01.!/`+"
0$!`(%..5K

S`8==`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

$!`100+*`3!`3%((`/0.0`3%0$`%/`.!0! `/`"+((+3/M
FRQVW Button = () => EXWWRQ!Click me!EXWWRQ!;

%./0L`3!`$2!`0+`%*/0((` %1)`1/%*#`npmM
QSPLQVWDOOVDYHUDGLXP

*!`0$!`%*/0((0%+*`%/`+),(!0!L`3!`*`%),+.0`0$!`(%..5`* `3.,`0$!`100+*`%*0+`%0M
LPSRUW radium IURP 'radium';
FRQVW Button = () => EXWWRQ!Click me!EXWWRQ!;
H[SRUWGHIDXOW UDGLXP(Button);

$!`radium`"1*0%+*`%/`*` +`Q/!!`Chapter 4L`+),+/!`((`0$!`$%*#/RL`3$%$`!40!* /`0$!

"1*0%+*(%0%!/`+"`+1.`ButtonL`.!01.*%*#``*!3`!*$*! `+),+*!*0K

"`3!`.!* !.`0$!`100+*`%*/% !`0$!`.+3/!.L`3!`3%((`*+0`/!!`*50$%*#`%*`,.0%1(.`0`0$!

)+)!*0L`!1/!`3!`.!`*+0`,,(5%*#`*5`/05(!/`0+`%0K

!0W/`/0.0`3%0$``/%),(!`/05(!`+&!0L`3$!.!`3!`/!0`0$!`'#.+1* `+(+.L`0$!`, %*#L`0$!

/%6!L`* ``+1,(!`+"`+0$!.``,.+,!.0%!/K

/`3!`/3`%*`0$!`,.!2%+1/`/!0%+*L`%*(%*!`/05(!/`%*`!0`.!` !"%*! `1/%*#` 2.%,0`+&!0/

3%0$`)!(/! ``,.+,!.0%!/M
FRQVW styles = {
EDFNJURXQG&RORU: '#ff0000',
ZLGWK: 320,
SDGGLQJ: 20,
ERUGHU5DGLXV: 5,
ERUGHU: 'none',
RXWOLQH: 'none'
};

$!`,.!! %*#`/*%,,!0`%/`*+` %""!.!*0`".+)`,(%*`%*(%*!`/05(!/`3%0$`!0L`* `%"`3!`,//`%0`0+

+1.`100+*`/`"+((+3/L`3!`*`/!!`((`0$!`/05(!/`,,(%! `0+`0$!`100+*`%*/% !`0$!`.+3/!.M
FRQVW Button = () => EXWWRQVW\OH={styles}!Click me!EXWWRQ!;

$!`.!/1(0`%/`0$!`"+((+3%*#`).'1,M
EXWWRQGDWDUDGLXP="true" VW\OH="background-color: rgb(255, 0, 0); width:
320px; padding: 20px; border-radius: 5px; border: none; outline:
none;"!Click me!EXWWRQ!

$!`+*(5` %""!.!*!`5+1`*`/!!`$!.!`%/`0$0`0$!.!`%/``data-radium`00.%10!`/!0
0+`true`00$! `0+`0$!`!(!)!*0K

S`8=>`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

+3L`3!`$2!`/!!*`0$0`%*(%*!`/05(!/` +`*+0`(!0`1/` !"%*!`*5`,/!1 +_(//!/N`(!0W/`0'!`

(++'`0`$+3`0+`/+(2!`0$!`,.+(!)`1/%*#` %1)K

/%*#`,/!1 +_(//!/L`/1$`/`:hoverL`3%0$` %1)`%/`,.!005`/0.%#$0"+.3. K

!`$2!`0+`.!0!``:hover`,.+,!.05`%*/% !`+1.`/05(!`+&!0L`* ` %1)`3%((` +`0$!`.!/0M

FRQVW styles = {
EDFNJURXQG&RORU: '#ff0000',
ZLGWK: 320,
SDGGLQJ: 20,
ERUGHU5DGLXV: 5,
ERUGHU: 'none',
RXWOLQH: 'none',
KRYHU : {
FRORU: '#fff'
}
};

"`5+1`,,(5`0$%/`/05(!`+&!0`0+`5+1.`100+*`* `.!* !.`%0`+*`0$!`/.!!*L`5+1`*`/!!`0$0

,//%*#`0$!`)+1/!`+2!.`0$!`100+*`.!/1(0/`%*``100+*`3%0$`3$%0!`0!40L`/`+,,+/! `0+`0$!
!"1(0`('`+*!K

$0`%/`#.!0—3!`*`1/!`,/!1 +_(//!/`* `%*(%*!`/05(!/`0+#!0$!.K

+3!2!.L`%"`5+1`+,!*`5+1.`!2++(/`* `0.5`0+`"+.!`0$!`:hover`/001/`%*`0$!`05(!/`,*!(L
5+1`3%((`/!!`0$0`*+0$%*#`$,,!*/K

$!`.!/+*`5+1`*`/!!`0$!`$+2!.`!""!0`10`5+1`**+0`/%)1(0!`%0`3%0$``%/`0$0` %1)
1/!/` 2.%,0`0+`,,(5`* `.!)+2!`0$!`$+2!.`/00!` !"%*! `%*`0$!`/05(!`+&!0K

"`5+1`$+2!.`+2!.`0$!`!(!)!*0`3%0$`0$!`!2++(/`+,!*L`5+1`*`/!!`0$0`0$!`/05(!`/0.%*#
$*#!/`* `0$!`+(+.`#!0/` ! `0+`%0` 5*)%((5M
EXWWRQGDWDUDGLXP="true" VW\OH="background-color: rgb(255, 0, 0); width:
320px; padding: 20px; border-radius: 5px; border: none; outline: none;
color: rgb(255, 255, 255);"!Click me!EXWWRQ!

$!`35` %1)`3+.'/`%/`5` %*#`*`!2!*0`$* (!.`"+.`!$`+*!`+"`0$!`!2!*0/`0$0`*

0.%##!.`0$!`!$2%+.`+"`,/!1 +_(//!/`* `(%/0!*%*#`0+`0$!)K

/`/++*`/`+*!`+"`0$!`!2!*0/`#!0/`"%.! L` %1)`$*#!/`0$!`/00!`+"`0$!`+),+*!*0L`3$%$

.!_.!* !./`3%0$`0$!`.%#$0`/05(!`"+.`0$!`/00!K`$%/`)%#$0`/!!)`3!%. `%*`0$!`!#%**%*#L`10
0$!.!`.!`*+`.!(` +3*/% !/`0+`0$%/`,,.+$L`* `0$!` %""!.!*!`.!#. %*#`,!."+.)*!`%/
*+0`,!.!%2(!K

S`8=?`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

!`*` `*!3`,/!1 +_(//!/L`"+.`!4),(!L`:activeL`* `0$!5`3%((`3+.'`/`3!((M

FRQVW styles = {
EDFNJURXQG&RORU: '#ff0000',
ZLGWK: 320,
SDGGLQJ: 20,
ERUGHU5DGLXV: 5,
ERUGHU: 'none',
RXWOLQH 'none',
KRYHU : {
FRORU: '#fff'
},
DFWLYH : {
SRVLWLRQ: 'relative',
WRS: 2
}
};

*+0$!.`.%0%(`"!01.!`0$0` %1)`!*(!/`%/`)! %`-1!.%!/K`! %`-1!.%!/`.!`.1%(`"+.

.!0%*#`.!/,+*/%2!`,,(%0%+*/L`* ` %1)`#%*`1/!/` 2.%,0`0+`!*(!`0$0`
"!01.!`%*`+1.`,,(%0%+*K

!0W/`(++'`0`$+3`%0`3+.'/—0$!` `%/`,.!005`/%)%(.N`3!`$2!`0+`.!0!``*!3`00.%10!`+*
+1.`/05(!`+&!0`* `*!/0`0$!`/05(!/`0$0`)1/0`!`,,(%! `3$!*`0$!`)! %`-1!.5`)0$!/
%*/% !`%0M
FRQVW styles = {
EDFNJURXQG&RORU: '#ff0000',
ZLGWK: 320,
SDGGLQJ: 20,
ERUGHU5DGLXV: 5,
ERUGHU: 'none',
RXWOLQH: 'none',
KRYHU : {
FRORU: '#fff'
},
DFWLYH : {
SRVLWLRQ: 'relative',
WRS: 2
},
#PHGLD PD[ZLGWKS[ : {
ZLGWK: 160
}
};

$!.!`%/`+*!`0$%*#`3!`)1/0` +`0+`)'!`)! %`-1!.%!/`3+.'L`* `0$0`%/`3.,,%*#`+1.

,,(%0%+*`%*0+`0$!`StyleRoot`+),+*!*0`,.+2% ! `5` %1)K

S`8=@`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

+.`0$!`)! %`-1!.%!/`0+`3+.'`,.+,!.(5L`!/,!%((5`3%0$`/!.2!._/% !`.!* !.%*#L` %1)`3%((

%*&!0`0$!`.1(!/`.!(0! `0+`0$!`)! %`-1!.5`%*``/05(!`!(!)!*0`%*/% !`0$!`L`3%0$`((`0$!
,.+,!.0%!/`/!0`/`!importantK

$%/`%/`0+`2+% `"(%'!.%*#`!03!!*`0$!` %""!.!*0`/05(!/`0$0`.!`,,(%! `0+`0$!` +1)!*0

!"+.!`0$!`(%..5`"%#1.!/`+10`3$%$`%/`0$!`)0$%*#`-1!.5K` ),(!)!*0%*#`0$!`/05(!/`%*/% !`
/05(!`!(!)!*0`,.!2!*0/`0$%/`5`(!00%*#`0$!`.+3/!.` +`%0/`.!#1(.`&+K

+L`0$!`% !`%/`0+`%),+.0`0$!`StyleRoot`+),+*!*0M
LPSRUW { StyleRoot } IURP 'radium';

$!*L`3!`*`3.,`+1.`!*0%.!`,,(%0%+*`%*/% !`%0M
FODVV App H[WHQGV Component {
UHQGHU() {
UHWXUQ (
<StyleRoot>
...
</StyleRoot>
)
}
}

/``.!/1(0`+"`0$%/L`%"`5+1`+,!*`0$!`!2++(/L`5+1`*`/!!`0$0` %1)`%*&!0! `0$!

"+((+3%*#`/05(!`%*0+`0$!`M
VW\OH!#PHGLD PD[ZLGWKS[ { .rmq-1d8d7428{width: 160px
!important;}}VW\OH!

$!`rmq-1d8d7428`(//`$/`!!*`,,(%! `0+`0$!`100+*`10+)0%((5L`/`3!((M
EXWWRQFODVV="rmq-1d8d7428" GDWDUDGLXP="true" VW\OH="background-color:
rgb(255, 0, 0); width: 320px; padding: 20px; border-radius: 5px; border:
none; outline: none;"!Click me!EXWWRQ!

"`5+1`*+3`.!/%6!`0$!`.+3/!.`3%* +3L`5+1`*`/!!`0$0`0$!`100+*`!+)!/`/)((!.`"+.
/)((`/.!!*/L`/`!4,!0! K

&66PRGXOHV
"`5+1`"!!(`0$0`%*(%*!`/05(!/`.!`*+0``/1%0(!`/+(10%+*`"+.`5+1.`,.+&!0`* `5+1.`0!)L`10
5+1`/0%((`3*0`0+`'!!,`0$!`/05(!/`/`(+/!`/`,+//%(!`0+`5+1.`+),+*!*0/L`0$!.!`%/``/+(10%+*
"+.`5+1L`((! ``)+ 1(!/K

S`8>7`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

:HESDFN
!"+.!` %2%*#`%*0+``)+ 1(!/`* `(!.*%*#`$+3`%0`3+.'/L`%0`%/`%),+.0*0`0+`1* !./0*
$+3`%0`3/`.!0! `* `0$!`0++(/`0$0`/1,,+.0`%0K

*`Chapter 2L`(!*`,`+1.`+ !L`3!`(++'! `0`$+3`3!`*`3.%0!`=`+ !`* `0.*/,%(!`%0

1/%*#`!(`* `%0/`,.!/!0/K`/`/++*`/`0$!`,,(%0%+*`#.+3/L`5+1`)5`3*0`0+
/,(%0`5+1.`+ !`/!`%*0+`)+ 1(!/`/`3!((K

+1`*`1/!`3!,'`+.`.+3/!.%"5`0+` %2% !`0$!`,,(%0%+*`%*0+`/)((`)+ 1(!/`0$0`5+1

*`%),+.0`3$!*!2!.`5+1`*!! `0$!)L`3$%(!`/0%((`.!0%*#``%#`1* (!`"+.`0$!`.+3/!.K
$!/!`0++(/`.!`((! `)+ 1(!`1* (!./L`* `3$0`0$!5` +`%/`(+ `((`0$!` !,!* !*%!/`+"
5+1.`,,(%0%+*`%*0+``/%*#(!`1* (!`0$0`*`!`!4!10! `%*`0$!`.+3/!.L`3$%$` +!/`*+0
$2!`*5`+*!,0`+"`)+ 1(!/`Q5!0RK

*`0$!`!0`3+.( L`3!,'`%/`!/,!%((5`,+,1(.`!1/!`%0`+""!./`)*5`%*0!.!/0%*#`*
1/!"1(`"!01.!/L`3%0$`0$!`"%./0`+*!`!%*#`0$!`+*!,0`+"`(+ !./K`%0$`3!,'L`5+1`*
,+0!*0%((5`(+ `*5` !,!* !*%!/`+0$!.`0$*` 2.%,0L`%"`0$!.!`%/``(+ !.`"+.`%0K`+.
!4),(!L`5+1`*`(+ ` `"%(!/L`/`3!((`/`%)#!/`* `+0$!.`//!0/L`%*/% !`0$!`1* (!K

*`5`978<L`.'`(#(!%/$L`+*!`+"`0$!`.!0+./`+"``+ 1(!/L`"%#1.! `+10`0$0`5+1

+1( `%),+.0``%*/% !``3!,'`1* (!`/`3!((L`* `$!`,1/$! `0$!`+*!,0`"+.3. K

!`0$+1#$0`0$0L`/%*!`0$!``+1( `!`%),+.0! `(+((5`%*0+``+),+*!*0L`((`0$!`%),+.0!

(//`*)!/`+1( `!`(+((5`/+,! `/`3!((K`

6HWWLQJXSDSURMHFW
*`0$%/`/!0%+*L`3!`3%((`(++'`0`$+3`0+`/!0`1,``2!.5`/%),(!`3!,'`,,(%0%+*L`1/%*#
!(`0+`0.*/,%(!`0$!` 2.%,0`* `0$!``)+ 1(!/`0+`(+ `+1.`(+((5`/+,! ``%*0+
0$!`1* (!K`!`3%((`(/+`#+`0$.+1#$`((`0$!`"!01.!/`+"``)+ 1(!/`* `(++'`0`0$!
,.+(!)/`0$!5`*`/+(2!K`$!`"%./0`0$%*#`0+` +`%/`)+2!`0+`*`!),05`"+( !.`* `.1*`0$!
"+((+3%*#`+ !M
QSPLQLW

$%/`3%((`.!0!``package.json`3%0$`/+)!` !"1(0/K

+3L`%0`%/`0%)!`0+`%*/0((`0$!` !,!* !*%!/L`3%0$`0$!`"%./0`+*!`!%*#`3!,'`* `0$!`/!+*

!%*#`webpack-dev-serverL`3$%$`3!`3%((`1/!`0+`.1*`0$!`,,(%0%+*`(+((5`* `0+`.!0!
0$!`1* (!`+*`0$!`"(5M
QSPLQVWDOOZHESDFNZHESDFNGHYVHUYHUZHESDFNFOL

S`8>8`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

*!`3!,'`%/`%*/0((! L`%0`%/`0%)!`0+`%*/0((`!(`* `%0/`(+ !.K`%*!`3!`.!`1/%*#

3!,'`0+`.!0!`0$!`1* (!L`3!`3%((`1/!`0$!`!(`(+ !.`0+`0.*/,%(!`+1.`=`+ !`3%0$%*
3!,'`%0/!("M
QSPLQVWDOO#EDEHOFRUH#EDEHOSUHVHWHQY#EDEHOSUHVHWUHDFWEDEHOORDGHU

%*((5L`3!`%*/0((`0$!`/05(!`(+ !.`* `0$!``(+ !.L`3$%$`.!`0$!`03+`(+ !./`3!`*!! `0+

!*(!`0$!``)+ 1(!/M
QSPLQVWDOOVW\OHORDGHUFVVORDGHU

$!.!`%/`+*!`)+.!`0$%*#`0+` +`0+`)'!`0$%*#/`!/%!.L`* `0$0`%/`0+`%*/0((`0$!`html-

webpack-pluginL`3$%$`%/``,(1#%*`0$0`*`.!0!`*` `,#!`0+`$+/0`+1.` 2.%,0
,,(%0%+*`+*`0$!`"(5L`&1/0`5`(++'%*#`%*0+`0$!`3!,'`+*"%#1.0%+*`* `3%0$+10`1/
*!! %*#`0+`.!0!``.!#1(.`"%(!M
QSPLQVWDOOKWPOZHESDFNSOXJLQ

/0`10`*+0`(!/0L`3!`%*/0((`react`* `react-dom`0+`1/!`0$!)`%*`+1.`/%),(!`!4),(!M
QSPLQVWDOOUHDFWUHDFWGRP

+3`0$0`((`0$!` !,!* !*%!/`.!`%*/0((! L`%0`%/`0%)!`0+`+*"%#1.!`!2!.50$%*#`0+`)'!`%0

3+.'K

$!`"%./0`0$%*#`0+` +`%/` `*`npm`/.%,0`%*`package.json`0+`.1*`0$!`webpack-dev-

serverL`3$%$`3%((`/!.2!`0$!`,,(%0%+*`%*` !2!(+,)!*0M

"VFULSWV": {
"VWDUW": "webpack-dev-server"
}

$!`3!,'`*!! /``+*"%#1.0%+*`"%(!`0+`'*+3`$+3`0+`$* (!`0$!` %""!.!*0`05,!/`+"

!,!* !*%!/`3!`.!`1/%*#`%*`+1.`,,(%0%+*L`* `0+` +`/+`3!`)1/0`.!0!``"%(!`((!
webpack.config.jsL`3$%$`!4,+.0/`*`+&!0M

PRGXOHH[SRUWV = {};

$!`+&!0`3!`!4,+.0`.!,.!/!*0/`0$!`+*"%#1.0%+*`+&!0`1/! `5`3!,'`0+`.!0!`0$!
1* (!L`* `%0`*`$2!` %""!.!*0`,.+,!.0%!/` !,!* %*#`+*`0$!`/%6!`* `0$!`"!01.!/`+"`0$!
,.+&!0K

!`3*0`0+`'!!,`+1.`!4),(!`2!.5`/%),(!L`/+`3!`.!`#+%*#`0+` `0$.!!`00.%10!/K

$!`"%./0`+*!`%/`0$!`!*0.5L`3$%$`0!((/`3!,'`3$!.!`0$!`)%*`"%(!`+"`+1.`,,(%0%+*`%/M
HQWU\: './index.js'

S`8>9`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

$!`/!+* `+*!`%/`)+ 1(!L`3$%$`%/`3$!.!`3!`0!((`3!,'`$+3`0+`(+ `0$!`!40!.*(

!,!* !*%!/K` 0`$/`*`00.%10!`((! `rulesL`3$!.!`3!`/!0``/,!%"%`(+ !.`"+.`!$`+*!
+"`0$!`"%(!`05,!/M
PRGXOH: {
UXOHV: [
{
WHVW: /\.(jsx|js)$/,
H[FOXGH: /node_modules/,
XVH: {
ORDGHU: 'babel-loader',
RSWLRQV: {
SUHVHWV: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
},
{
WHVW: /\.css/,
XVH: [
'style-loader',
'css-loadermodules=true'
]
}
]
},

!`.!`/5%*#`0$0`0$!`"%(!/`0$0`)0$`0$!`.js``+.`.jsx`.!#!4`.!`(+ ! `1/%*#`0$!`babel-
loader`/+`0$0`0$!5`#!0`0.*/,%(! `* `(+ ! `%*0+`0$!`1* (!K

+1`)5`(/+`$2!`*+0%! `0$0`3!`.!`/!00%*#`0$!`,.!/!0/`%*`0$!.!`/`3!((K`/`3!`/3
%*`Chapter 2L`(!*`,`+1.`+ !L`0$!`,.!/!0/`.!`/!0/`+"`+*"%#1.0%+*`+,0%+*/`0$0`%*/0.10
!(`+*`$+3`0+` !(`3%0$`0$!` %""!.!*0`05,!/`+"`/5*04`Q"+.`!4),(!L` RK

$!`/!+* `!*0.5`%*`0$!`rules`..5`0!((/`3!,'`3$0`0+` +`3$!*```"%(!`%/`%),+.0! L

* `%0`1/!/`0$!`css-loader`3%0$`0$!`modules`"(#`!*(! `0+`0%20!``)+ 1(!/K`$!
.!/1(0`+"`0$!`0.*/"+.)0%+*`%/`0$!*`,//! `0+`0$!`/05(!`(+ !.L`3$%$`%*&!0/`0$!`/05(!/`%*0+
0$!`$! !.`+"`0$!`,#!K

S`8>:`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

%*((5L`3!`!*(!`0$!` `,(1#%*`0+`#!*!.0!`0$!`,#!`"+.`1/L` %*#`0$!`/.%,0`0#

10+)0%((5`1/%*#`0$!`!*0.5`,0$`3!`/,!%"%! `!.(%!.M
FRQVW HtmlWebpackPlugin = UHTXLUH('html-webpack-plugin');
...
SOXJLQV: [QHZ HtmlWebpackPlugin()]

$!`+),(!0!`webpack.config.js`/$+1( `!`(%'!`0$%/M
FRQVW HtmlWebpackPlugin = UHTXLUH('html-webpack-plugin');

module.H[SRUWV = {
HQWU\: './index.js',
PRGXOH: {
UXOHV: [
{
WHVW: /\.(jsx|js)$/,
H[FOXGH: /node_modules/,
XVH: {
ORDGHU: 'babel-loader',
RSWLRQV: {
SUHVHWV: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
},
{
WHVW: /\.css/,
XVH: [
'style-loader',
'css-loadermodules=true'
]
}
]
},
SOXJLQV: [QHZ +WPO:HESDFN3OXJLQ()]
};

!`.!` +*!L`* `%"`3!`.1*`0$!`npm start`+))* `%*`0$!`!.)%*(`* `,+%*0`0$!

.+3/!.`0+`http://localhost:8080L`3!`/$+1( `!`(!`0+`/!!`0$!`"+((+3%*#`).'1,
!%*#`/!.2! M
'2&7<3(KWPO!
KWPO!
KHDG!
PHWD FKDUVHW="UTF-8!

S`8>;`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

WLWOH!Webpack AppWLWOH!
<KHDG!
ERG\!
VFULSWW\SH="text/javascript" VUF="bundle.js"!VFULSW!
ERG\!
KWPO!

/RFDOO\VFRSHG&66
+3L`%0`%/`0%)!`0+`.!0!`+1.`,,L`3$%$`3%((`+*/%/0`+"``%),(!`100+*L`+"`0$!`/)!`/+.0`3!
1/! `%*`,.!2%+1/`!4),(!/K`!`3%((`1/!`%0`0+`/$+3`((`0$!`"!01.!/`+"`0$!``)+ 1(!/K

!0W/`.!0!`*`index.js`"%(!L`3$%$`%/`0$!`!*0.5`3!`/,!%"%! `%*`0$!`3!,'`+*"%#1.0%+*L
* `(!0W/`%),+.0`React`* `ReactDOM`/`3!((M
LPSRUW React IURP 'react';
LPSRUW { render } IURP 'react-dom';

!`*`0$!*`.!0!``%),(!`100+*K`/`1/1(L`3!`.!`#+%*#`0+`/0.0`3%0$``*+*/05(!
100+*L`* `3!`3%((` `0$!`/05(!/`/0!,`5`/0!,M
FRQVW Button = () => EXWWRQ!Click me!EXWWRQ!;

%*((5L`3!`*`.!* !.`0$!`100+*`%*0+`0$!`M
UHQGHU(%XWWRQ!, document.ERG\);

(!/!`*+0!`0$0`.!* !.%*#``!0`+),+*!*0`%*0+`0$!`+ 5`%/` `,.0%!L`10`%*`0$%/`/!L

3!`.!` +%*#`%0`"+.`/%),(%%05K

+3L`/1,,+/!`3!`3*0`0+`,,(5`/+)!`/05(!/`0+`0$!`100+*—`'#.+1* `+(+.L`0$!`/%6!L
* `/+`+*K

!`.!0!``.!#1(.``"%(!L`((! `index.cssL`* `3!`,10`0$!`"+((+3%*#`(//`%*0+`%0M

EXWWRQ {
background-color: #ff0000;
width: 320px;
padding: 20px;
border-radius: 5px;
border: none;
outline: none;
}

+3L`3!`/% `0$0`3%0$``)+ 1(!/L`3!`+1( `%),+.0`0$!``"%(!/`%*0+`0$!` 2.%,0N`(!0W/

(++'`0`$+3`%0`3+.'/K

S`8><`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

*/% !`+1.`index.js`3$!.!`3!` !"%*! `0$!`100+*`+),+*!*0L`3!`*` `0$!`"+((+3%*#

(%*!M
LPSRUW styles IURP './index.css';

$!`.!/1(0`+"`0$%/`import`/00!)!*0`%/``styles`+&!0L`3$!.!`((`0$!`00.%10!/`.!`0$!
(//!/` !"%*! `%*`0$!`index.cssK

"`3!`.1*`console.log(styles)L`3!`*`/!!`0$!`"+((+3%*#`+&!0`%*`!2++(/M
{
EXWWRQ: "_2wpxM3yizfwbWee6k0UlD4"
}

+L`3!`$2!`*`+&!0`3$!.!`0$!`00.%10!/`.!`0$!`(//`*)!/`* `0$!`2(1!/`.!
Q,,.!*0(5R`.* +)`/0.%*#/K`!`3%((`/!!`(0!.`0$0`0$!5`.!`*+*.* +)L`10`(!0W/`$!'
3$0`3!`*` +`3%0$`0$0`+&!0`"%./0K

!`*`1/!`0$!`+&!0`0+`/!0`0$!`(//`*)!`00.%10!`+"`+1.`100+*L`/`"+((+3/M
FRQVW Button = () => (
EXWWRQFODVV1DPH={styles.EXWWRQ}!Click me!EXWWRQ!
);

"`3!`#+`'`0+`0$!`.+3/!.L`3!`*`*+3`/!!`0$0`0$!`/05(!/`3!` !"%*! `%*`index.css`$2!

!!*`,,(%! `0+`0$!`100+*K

* `0$0`%/`*+0`)#%L`!1/!`%"`3!`$!'`%*`!2++(/L`0$!`(//`0$0`$/`!!*`,,(%! `0+
0$!`!(!)!*0`%/`0$!`/)!`/0.%*#`0$0W/`00$! `0+`0$!`/05(!`+&!0`3!`%),+.0! `%*/% !`+1.
+ !M
EXWWRQFODVV="_2wpxM3yizfwbWee6k0UlD4"!Click me!EXWWRQ!

"`3!`(++'`0`0$!`$! !.`/!0%+*`+"`0$!`,#!L`3!`*`*+3`/!!`0$0`0$!`/)!`(//`*)!`$/
(/+`!!*`%*&!0! `%*0+`0$!`,#!M
VW\OHW\SH WH[WFVV!
BZS[0\L]IZE:HHN8O' {
background-color: #ff0000;
width: 320px;
padding: 20px;
border-radius: 5px;
border: none;
outline: none;
}
VW\OH!

S`8>=`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

$%/`%/`$+3`0$!``* `0$!`/05(!`(+ !./`3+.'K

$!``(+ !.`(!0/`5+1`%),+.0`0$!``"%(!/`%*0+`5+1.` 2.%,0`)+ 1(!/`* L`3$!*`0$!

)+ 1(!/`"(#`%/`0%20! L`((`0$!`(//`*)!/`.!`(+((5`/+,! `0+`0$!`)+ 1(!`0$!5`.!
%),+.0! `%*0+K

/`3!`)!*0%+*! `,.!2%+1/(5L`0$!`/0.%*#`3!`%),+.0! `3/`*+*.* +)L`10`%0`%/`#!*!.0!

1/%*#`0$!`$/$`+"`0$!`"%(!`* `/+)!`+0$!.`,.)!0!./`%*``35`0$0`%/`1*%-1!`3%0$%*`0$!
+ !/!K

%*((5L`0$!`/05(!`(+ !.`0'!/`0$!`.!/1(0`+"`0$!``)+ 1(!W/`0.*/"+.)0%+*`* `%0`%*&!0/

0$!`/05(!/`%*/% !`0$!`$! !.`/!0%+*`+"`0$!`,#!K

$%/`%/`2!.5`,+3!."1(`!1/!`3!`$2!`0$!`"1((`,+3!.`* `!4,.!//%2!*!//`+"`0$!`L
+)%*! `3%0$`0$!` 2*0#!/`+"`$2%*#`(+((5`/+,! `(//`*)!/`* `!4,(%%0
!,!* !*%!/K

/`)!*0%+*! `0`0$!`!#%**%*#`+"`0$%/`$,0!.L``%/`#(+(L`* `0$0`)'!/`%0`2!.5`$. `0+

)%*0%*`%*`(.#!`,,(%0%+*/K`%0$``)+ 1(!/L`(//`*)!/`.!`(+((5`/+,! `* `0$!5
**+0`(/$`3%0$`+0$!.`(//`*)!/`%*` %""!.!*0`,.0/`+"`0$!`,,(%0%+*L`!*"+.%*#`
!0!.)%*%/0%`.!/1(0K

+.!+2!.L`!4,(%%0(5`%),+.0%*#`0$!`` !,!* !*%!/`%*/% !`+1.`+),+*!*0/`$!(,/`1/`/!!

(!.(5`3$%$`+),+*!*0/`*!! `3$%$`K` 0`%/`(/+`2!.5`1/!"1(`"+.`!(%)%*0%*#` ! `+ !
!1/!`3$!*`3!` !(!0!``+),+*!*0`"+.`*5`.!/+*L`3!`*`0!((`!40(5`3$%$``%0`3/
1/%*#K

`)+ 1(!/`.!`.!#1(.`L`/+`3!`*`1/!`,/!1 +_(//!/L`)! %`-1!.%!/L`*

*%)0%+*/K

+.`!4),(!L`3!`*` ``.1(!/`(%'!`0$!`"+((+3%*#M
EXWWRQKRYHU {
color: #fff;
}
EXWWRQDFWLYH {
position: relative;
top: 2px;
}
#PHGLD PD[ZLGWKS[ {
EXWWRQ {
width: 160px
}
}

S`8>>`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

$%/`3%((`!`0.*/"+.)! `%*0+`0$!`"+((+3%*#`+ !`* `%*&!0! `%*0+`0$!` +1)!*0M

BZS[0\L]IZE:HHN8O'KRYHU {
color: #fff;
}
BZS[0\L]IZE:HHN8O'DFWLYH {
position: relative;
top: 2px;
}
#PHGLD PD[ZLGWKS[ {
BZS[0\L]IZE:HHN8O' {
width: 160px
}
}

$!`(//`*)!/`#!0`.!0! `* `0$!5`#!0`.!,(! `!2!.53$!.!`0$!`100+*`%/`1/! L`)'%*#`%0

.!(%(!`* `(+(L`/`!4,!0! K

/`5+1`)5`$2!`*+0%! L`0$+/!`(//`*)!/`.!`#.!0L`10`0$!5`)'!` !1##%*#

,.!005`$. `!1/!`3!`**+0`!/%(5`0!((`3$%$`(//!/`#!*!.0! `0$!`$/$K

$0`3!`*` +`%*` !2!(+,)!*0`)+ !`%/` ``/,!%(`+*"%#1.0%+*`,.)!0!.L`3%0$

3$%$`3!`*`$++/!`0$!`,00!.*`0$0W/`1/! `0+`,.+ 1!`0$!`/+,! `(//`*)!/K

+.`!4),(!L`3!`*`$*#!`0$!`2(1!`+"`0$!`(+ !.`/`"+((+3/M
{
WHVW: /\.css/,
XVH: [
'style-loader',
'css-loadermodules=true&ORFDO,GHQW1DPH >ORFDO@>KDVKEDVH@'
]
}

!.!L`localIdentName`%/`0$!`,.)!0!.`* `[local]`* `[hash:base64:5]`.!

,(!$+( !./`"+.`0$!`+.%#%*(`(//`*)!`2(1!`* ``"%2!_$.0!.`$/$K

0$!.`2%((!`,(!$+( !./`.!`[path]L`3$%$`.!,.!/!*0/`0$!`,0$`+"`0$!``"%(!L`*
[name]L`3$%$`%/`0$!`*)!`+"`0$!`/+1.!``"%(!K

0%20%*#`0$!`,.!2%+1/`+*"%#1.0%+*`+,0%+*L`0$!`.!/1(0`3!`$2!`%*`0$!`.+3/!.`%/`/
"+((+3/M
EXWWRQFODVV="button--2wpxM"!Click me!EXWWRQ!

$%/`%/`35`)+.!`.! (!`* `!/%!.`0+` !1#K

S`8>?`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

*`,.+ 10%+*L`3!` +`*+0`*!! `(//`*)!/`(%'!`0$%/L`* `3!`.!`)+.!`%*0!.!/0! `%*

,!."+.)*!L`/+`3!`)5`3*0`/$+.0!.`(//`*)!/`* `$/$!/K

%0$`3!,'L`%0`%/`,.!005`/0.%#$0"+.3. `!1/!`3!`*`$2!`)1(0%,(!`+*"%#1.0%+*`"%(!/
0$0`*`!`1/! `%*`0$!` %""!.!*0`/0#!/`+"`+1.`,,(%0%+*`(%"!`5(!K`(/+L`%*`,.+ 10%+*L`3!
)5`3*0`0+`!40.0`0$!``"%(!`%*/0! `+"`%*&!0%*#`%0`%*0+`0$!`.+3/!.`".+)`0$!`1* (!`/+
0$0`3!`*`$2!``(%#$0!.`1* (!`* `$!`0$!``+*```"+.`!00!.`,!."+.)*!K

+` +`0$0L`5+1`*!! `0+`%*/0((`*+0$!.`3!,'`,(1#%*L`((! `mini-css-extract-

pluginL`3$%$`*`3.%0!`*`01(``"%(!L`,100%*#`%*`((`0$!`/+,! `(//!/`0$0`3!.!
#!*!.0! `".+)``)+ 1(!/K

$!.!`.!``+1,(!`+"`"!01.!/`+"``)+ 1(!/`0$0`.!`3+.0$`)!*0%+*%*#K

$!`"%./0`+*!`%/`0$!`global`'!53+. K`.!"%4%*#`*5`(//`3%0$`:globalL`%*`"0L`)!*/
/'%*#``)+ 1(!/`*+0`0+`/+,!`0$!`1..!*0`/!(!0+.`(+((5K

+.`!4),(!L`(!0W/`/5`3!`$*#!`+1.``/`"+((+3/M
JOREDOEXWWRQ {
...
}

$!`+10,10`3%((`!`/`"+((+3/M
EXWWRQ {
...
}

$%/`%/`#++ `%"`5+1`3*0`0+`,,(5`/05(!/`0$0`**+0`!`/+,! `(+((5L`/1$`/`0$%. _,.05

3% #!0/K

5`"2+.%0!`"!01.!`+"``)+ 1(!/`%/`+),+/%0%+*K`%0$`+),+/%0%+*L`3!`*`(//!/`".+)
0$!`/)!`"%(!`+.`!40!.*(` !,!* !*%!/`* `#!0`((`0$!`/05(!/`,,(%! `0+`0$!`!(!)!*0K

+.`!4),(!L`!40.0`0$!`.1(!`0+`/!0`0$!`'#.+1* `0+`.! `".+)`0$!`.1(!/`"+.`0$!`100+*`%*0+

`/!,.0!`(+'L`/`"+((+3/M
EDFNJURXQGUHG {
background-color: #ff0000;
}

!`*`0$!*`+),+/!`%0`%*/% !`+1.`100+*`%*`0$!`"+((+3%*#`35M
EXWWRQ {
composes: background-red;
width: 320px;

S`8>@`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

padding: 20px;
border-radius: 5px;
border: none;
outline: none;
}

$!`.!/1(0`%/`0$0`((`0$!`.1(!/`+"`0$!`100+*`* `((`0$!`.1(!/`+"`0$!`composes` !(.0%+*`.!

,,(%! `0+`0$!`!(!)!*0K

$%/`%/``2!.5`,+3!."1(`"!01.!`* `%0`3+.'/`%*``"/%*0%*#`35K`+1`)%#$0`!4,!0`0$0`((
0$!`+),+/! `(//!/`.!` 1,(%0! `%*/% !`0$!`(//!/`3$!.!`0$!5`.!`.!"!.!*! `/
`@extend` +!/L`10`0$0`%/`*+0`0$!`/!K`%),(5`,10L`((`0$!`+),+/! `(//`*)!/`.!
,,(%! `+*!`"0!.`0$!`+0$!.`+*`0$!`+),+*!*0`%*`0$!`K

*`+1.`/,!%"%`/!L`3!`3+1( `$2!`0$!`"+((+3%*#M
EXWWRQFODVV="_2wpxM3yizfwbWee6k0UlD4 Sf8w9cFdQXdRV_i9dgcOq"!Click
me!EXWWRQ!

!.!L`0$!``0$0`%/`%*&!0! `%*0+`0$!`,#!`%/`/`"+((+3/M
6IZF)G4;G59BLGJF2T {
background-color: #ff0000;
}
BZS[0\L]IZE:HHN8O' {
width: 320px;
padding: 20px;
border-radius: 5px;
border: none;
outline: none;
}

$WRPLF&66PRGXOHV
0`/$+1( `!`(!.`$+3`+),+/%0%+*`3+.'/`* `3$5`%0`%/``2!.5`,+3!."1(`"!01.!`+"`
)+ 1(!/K`0`(*L`0$!`+),*5`3$!.!` `3+.'! `3$!*` `/0.0! `3.%0%*#`0$%/`++'L`3!`0.%!
0+`,1/$`%0``/0!,`"1.0$!.L`+)%*%*#`0$!`,+3!.`+"`composes`3%0$`0$!`"(!4%%(%05`+"`0+)%
`Q(/+`'*+3*`/`1*0%+*(`RK

0+)%``%/``35`0+`1/!``3$!.!`!2!.5`(//`$/``/%*#(!`.1(!K

S`8?7`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

+.`!4),(!L`3!`*`.!0!``(//`0+`/!0`0$!`).#%*_+00+)`0+`6!.+M
PE {
margin-bottom: 0;
}

!`*`1/!`*+0$!.`+*!`0+`/!0`0$!`"+*0_3!%#$0`0+`600M
IZ {
font-weight: 600;
}

$!*L`3!`*`,,(5`((`0$+/!`0+)%`(//!/`0+`0$!`!(!)!*0/M
KFODVV="mb0 fw6"!Hello ReactK!

$%/`0!$*%-1!`%/`+*0.+2!./%(L`* `,.0%1(.(5`!""%%!*0`0`0$!`/)!`0%)!K` 0`%/`$. `0+`/0.0

1/%*#`%0`!1/!`5+1`!* `1,`$2%*#`0++`)*5`(//!/`%*`5+1.`).'1,L`3$%$`)'!/`%0`$.
0+`,.! %0`0$!`"%*(`.!/1(0K` "`5+1`0$%*'`+10`%0L`%0`%/`,.!005`/%)%(.`0+`%*(%*!`/05(!/L`!1/!
5+1`,,(5`+*!`(//`,!.`.1(!L`,.0`".+)`0$!`"0`0$0`5+1`.!`1/%*#``/$+.0!.`(//`*)!`/`
,.+45K

$!`%##!/0`.#1)!*0`#%*/0`0+)%``%/`1/1((5`0$0`5+1`.!`)+2%*#`0$!`/05(%*#`(+#%
".+)`0$!``0+`0$!`).'1,L`3$%$`%/`3.+*#K`(//!/`.!` !"%*! `%*``"%(!/L`10`0$!5`.!
+),+/! `%*`0$!`2%!3/L`* `!2!.5`0%)!`5+1`$2!`0+`)+ %"5`0$!`/05(!`+"`*`!(!)!*0L`5+1`!*
1,`! %0%*#`0$!`).'1,K

*`0$!`+0$!.`$* L`3!`0.%! `1/%*#`0+)%``"+.``%0`* `3!`"+1* `0$0`%0`)'!/

,.+0+05,%*#`%*.! %(5`"/0K

*`"0L`3$!*`((`0$!`/!`.1(!/`$2!`!!*`#!*!.0! L`,,(5%*#`0$+/!`(//!/`0+`0$!`!(!)!*0/
* `.!0%*#`*!3`/05(!/`%/``2!.5`-1%'`,.+!//L`3$%$`%/`#++ K`!+* L`1/%*#`0+)%`L
3!`*`+*0.+(`0$!`/%6!`+"`0$!``"%(!L`!1/!`/`/++*`/`3!`.!0!`*!3`+),+*!*0/`3%0$
0$!%.`/05(!/L`3!`.!`1/%*#`!4%/0%*#`(//!/`* `3!` +`*+0`*!! `0+`.!0!`*!3`+*!/L`3$%$`%/
#.!0`"+.`,!."+.)*!K

+L`3!`0.%! `0+`/+(2!`0$!`,.+(!)/`+"`0+)%``1/%*#``)+ 1(!/`* `3!`((! `0$!

0!$*%-1!`0+)%``)+ 1(!/K

*`!//!*!L`5+1`/0.0`.!0%*#`5+1.`/!``(//!/`Q"+.`!4),(!L`mb0R`* `0$!*L`%*/0! `+"

,,(5%*#`0$!`(//`*)!/`+*!`5`+*!`%*`0$!`).'1,L`5+1`+),+/!`0$!)`%*0+`,(!$+( !.
(//!/`1/%*#``)+ 1(!/K

S`8?8`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

!0W/`(++'`0`*`!4),(!M
WLWOH {
FRPSRVHV: mb0 fw6;
}

!.!W/`*+0$!.`!4),(!M
KFODVV1DPH={styles.title}!Hello ReactK!

$%/`%/`#.!0`!1/!`5+1`/0%((`'!!,`0$!`/05(%*#`(+#%`%*/% !`0$!`L`* `0$!`

)+ 1(!W/`composes` +!/`0$!`&+`"+.`5+1`5`,,(5%*#`((`0$!`/%*#(!`(//!/`%*0+`0$!`).'1,K

$!`.!/1(0`+"`0$!`,.!! %*#`+ !`%/`/`"+((+3/M

KFODVV="title--3JCJR mb0--21SyP fw6--1JRhZ"!Hello ReactK!

!.!L`titleL`mb0L`* `fw6`.!`((`,,(%! `10+)0%((5`0+`0$!`!(!)!*0K`$!5`.!`/+,!

(+((5`/`3!((L`/+`3!`$2!`((`0$!` 2*0#!/`+"``)+ 1(!/K

5HDFW&66PRGXOHV
/0`10`*+0`(!/0L`0$!.!`%/``#.!0`(%..5`0$0`*`$!(,`1/`3+.'`3%0$``)+ 1(!/K`+1`)5
$2!`*+0%! `$+3`3!`3!.!`1/%*#``/05(!`+&!0`0+`(+ `((`0$!`(//!/`+"`0$!`L`*
!1/!` 2.%,0` +!/`*+0`/1,,+.0`$5,$!*0! `00.%10!/L`3!`.!`"+.! `0+`1/!`
)!(/! `(//`*)!K

(/+L`%"`3!`.!`.!"!.!*%*#``(//`*)!`0$0` +!/`*+0`!4%/0`%*`0$!``"%(!L`0$!.!`%/`*+`35`0+
'*+3`%0L`* `undefined`%/` ! `0+`0$!`(%/0`+"`(//!/K

+.`0$!/!`* `+0$!.`1/!"1(`"!01.!/L`3!`)5`3*0`0+`0.5``,'#!`0$0`)'!/`3+.'%*#`3%0$
`)+ 1(!/`!2!*`/)++0$!.K

!0W/`(++'`0`3$0`%0`)!*/`0+`#+`'`0+`0$!`index.js`3!`3!.!`1/%*#`,.!2%+1/(5`%*`0$%/
/!0%+*`3%0$`,(%*``)+ 1(!/L`* `$*#!`%0`0+`1/!`!0``)+ 1(!/`%*/0! K

$!`,'#!`%/`((! `react-css-modulesL`* `0$!`"%./0`0$%*#`3!`)1/0` +`%/`%*/0((`%0M

QSPLQVWDOOUHDFWFVVPRGXOHV

S`8?9`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

*!`0$!`,'#!`%/`%*/0((! L`3!`%),+.0`%0`%*/% !`+1.`index.js`"%(!M

LPSRUW cssModules IURP 'react-css-modules';

!`1/!`%0`/`*` +L`,//%*#`0+`%0`0$!`Button`+),+*!*0`3!`3*0`0+`!*$*!`* `0$!

/05(!/`+&!0`3!`%),+.0! `".+)`0$!`M
FRQVW EnhancedButton = FVV0RGXOHV(Button, styles);

+3L`3!`$2!`0+`$*#!`0$!`%),(!)!*00%+*`+"`0$!`100+*`0+`2+% `1/%*#`0$!`styles
+&!0K`%0$`!0``)+ 1(!/L`3!`1/!`0$!`styleName`,.+,!.05L`3$%$`%/`0.*/"+.)!
%*0+``.!#1(.`(//K

$!`#.!0`0$%*#`+10`0$%/`%/`0$0`3!`*`1/!`0$!`(//`*)!`/``/0.%*#`Q"+.
!4),(!L`"button"RM
FRQVW Button = () => EXWWRQVW\OH1DPH="button"!Click me!EXWWRQ!;

"`3!`*+3`.!* !.`0$!`EnhancedButton`%*0+`0$!`L`3!`3%((`/!!`0$0`*+0$%*#`$/`.!((5
$*#! `".+)`!"+.!L`3$%$`)!*/`0$0`0$!`(%..5`3+.'/K

!0W/`/5`3!`0.5`0+`$*#!`0$!`styleName`,.+,!.05`0+`.!"!.!*!``*+*!4%/0%*#`(//`*)!L`/
"+((+3/M
LPSRUW React IURP 'react';
LPSRUW { render } IURP 'react-dom';
LPSRUW styles IURP './index.css';
LPSRUW cssModules IURP 'react-css-modules';

FRQVW Button = () => EXWWRQVW\OH1DPH="button1"!Click me!EXWWRQ!;

FRQVW EnhancedButton = FVV0RGXOHV(%XWWRQ, styles);

UHQGHU((QKDQFHG%XWWRQ!, document.ERG\);

!`3%((`/!!`0$!`"+((+3%*#`!..+.`%*`0$!`+*/+(!`+"`0$!`.+3/!.`5` +%*#`/+M
Uncaught Error: "button1" CSS module is undefined.

$%/`%/`,.0%1(.(5`$!(,"1(`3$!*`0$!`+ !/!`#.+3/`* `3!`$2!`)1(0%,(!` !2!(+,!./

3+.'%*#`+*` %""!.!*0`+),+*!*0/`* `/05(!/K

S`8?:`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

6W\OHGFRPSRQHQWV
$!.!`%/``(%..5`0$0`%/`2!.5`,.+)%/%*#`!1/!`%0`0'!/`%*0+`+1*0`((`0$!`,.+(!)/`0$!
+0$!.`(%..%!/`$2!`!*+1*0!.! `%*`/05(%*#`+),+*!*0/K

%""!.!*0`,0$/`$2!`!!*`"+((+3! `"+.`3.%0%*#``%*` 2.%,0L`* `)*5`/+(10%+*/`$2!

!!*`0.%! L`/+`*+3`0$!`0%)!`%/`.%,!`"+.``(%..5`0$0`0'!/`((`0$!`(!.*%*#`* `0$!*`1%( /
/+)!0$%*#`+*`0+,`+"`%0K

$!`(%..5`%/`+*!%2! `* `)%*0%*! `5`03+`,+,1(.` !2!(+,!./`%*`0$!` 2.%,0

+))1*%05M` (!**` !.*`* `4`0+%!.#K

0`.!,.!/!*0/``2!.5`)+ !.*`,,.+$`0+`0$!`,.+(!)L`* `%0`1/!/`! #!`"!01.!/`+"`978<

* `/+)!` 2*! `0!$*%-1!/`0$0`$2!`!!*`,,(%! `0+`!0`0+`,.+2% !``+),(!0!
/+(10%+*`"+.`/05(%*#K

!0W/`(++'`0`$+3`%0`%/`,+//%(!`0+`.!0!`0$!`/)!`100+*`3!`/3`%*`0$!`,.!2%+1/`/!0%+*/L
* `$!'`%"`((`0$!``"!01.!/`3!`.!`%*0!.!/0! `%*`Q"+.`!4),(!L`,/!1 +_(//!/`*
)! %`-1!.%!/R`3+.'`3%0$`/05(! `+),+*!*0/K

%./0L`3!`$2!`0+`%*/0((`0$!`(%..5`5`.1**%*#`0$!`"+((+3%*#`+))* M
QSPLQVWDOOVW\OHGFRPSRQHQWV

*!`0$!`(%..5`%/`%*/0((! L`3!`$2!`0+`%),+.0`%0`%*/% !`+1.`+),+*!*0W/`"%(!M

LPSRUW styled IURP 'styled-components';

0`0$0`,+%*0L`3!`*`1/!`0$!`styled`"1*0%+*`0+`.!0!`*5`!(!)!*0`5
1/%*#`styled.elementNameL`3$!.!`elementName`*`!``divL``100+*L`+.`*5`+0$!.
2(% ``!(!)!*0K

$!`/!+* `0$%*#`0+` +`%/`0+` !"%*!`0$!`/05(!`+"`0$!`!(!)!*0`3!`.!`.!0%*#L`* `0+` +`/+L`3!

1/!`*`=`"!01.!`((! `0##! `0!),(0!`(%0!.(/L`3$%$`%/``35`+"`,//%*#`0!),(0!
/0.%*#/`0+``"1*0%+*`3%0$+10`0$!)`!%*#`%*0!.,+(0! `!"+.!$* K

$%/`)!*/`0$0`0$!`"1*0%+*`.!!%2!/`0$!`01(`0!),(0!`3%0$`((`0$!` 2.%,0
!4,.!//%+*/L`* `0$%/`)'!/`0$!`(%..5`(!`0+`1/!`0$!`"1((`,+3!.`+"` 2.%,0`0+`,,(5`0$!
/05(!/`0+`0$!`!(!)!*0/K

!0W/`/0.0`5`.!0%*#``/%),(!`100+*`3%0$``/%`/05(%*#M
FRQVW Button = styled.EXWWRQC
backgroundColor: #ff0000;
width: 320px;

S`8?;`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

padding: 20px;
borderRadius: 5px;
border: none;
outline: none;
C;

$%/`'%* _+"_3!%. `/5*04`.!01.*/``,.+,!.`!0`+),+*!*0`((! `ButtonL`3$%$`.!* !./

`100+*`!(!)!*0`* `,,(%!/`0+`%0`((`0$!`/05(!/` !"%*! `%*`0$!`0!),(0!K`$!`35`0$!`/05(!/
.!`,,(%! `%/`5`.!0%*#``1*%-1!`(//`*)!L` %*#`%0`0+`0$!`!(!)!*0L`* `0$!*`%*&!0%*#
0$!`+..!/,+* %*#`/05(!`%*`0$!`$! `+"`0$!` +1)!*0K

$!`"+((+3%*#`%/`0$!`+),+*!*0`0$0`#!0/`.!* !.! M
EXWWRQFODVV="kYvFOg"!Click me!EXWWRQ!

$!`/05(!`0$0`#!0/` ! `0+`0$!`,#!`%/`/`"+((+3/M
N<Y)2J {
background-color: #ff0000;
width: 320px;
padding: 20px;
border-radius: 5px;
border: none;
outline: none;
}

$!`#++ `0$%*#`+10`/05(! `+),+*!*0/`%/`0$0`%0`/1,,+.0/`()+/0`((`0$!`"!01.!/`+"`L

3$%$`)'!/`%0``#++ `* % 0!`0+`!`1/! `%*``.!(_3+.( `,,(%0%+*K

+.`!4),(!L`%0`/1,,+.0/`,/!1 +_(//!/`1/%*#``_(%'!`/5*04M
FRQVW Button = styled.EXWWRQ`
background-color: #ff0000;
width: 320px;
padding: 20px;
border-radius: 5px;
border: none;
outline: none;
&:hover {
color: #fff;
}
&:active {
position: relative;
top: 2px;
}
`;

S`8?<`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

0`(/+`/1,,+.0/`)! %`-1!.%!/M
FRQVW Button = styled.EXWWRQ`
background-color: #ff0000;
width: 320px;
padding: 20px;
border-radius: 5px;
border: none;
outline: none;
&:hover {
color: #fff;
}
&:active {
position: relative;
top: 2px;
}
@media (max-width: 480px) {
width: 160px;
}
`;

$!.!`.!`)*5`+0$!.`"!01.!/`0$0`0$%/`(%..5`*`.%*#`0+`5+1.`,.+&!0K

+.`!4),(!L`+*!`5+1`$2!`.!0! `0$!`100+*L`5+1`*`!/%(5`+2!..% !`%0/`/05(!/`* `1/!`%0

)1(0%,(!`0%)!/`3%0$` %""!.!*0`,.+,!.0%!/K

*/% !`0$!`0!),(0!/L`%0`%/`(/+`,+//%(!`0+`1/!`0$!`,.+,/`0$0`0$!`+),+*!*0`.!!%2! `*

$*#!`0$!`/05(!`+. %*#(5K

*+0$!.`#.!0`"!01.!`%/`0$!)%*#K`.,,%*#`5+1.`+),+*!*0/`%*0+``ThemeProvider
+),+*!*0L`5+1`*`%*&!0``0$!)!`,.+,!.05` +3*`0+`0$!`0$.!!L`3$%$`)'!/`%0`!40.!)!(5
!/5`0+`.!0!` /`3$!.!`,.0`+"`0$!`/05(!`%/`/$.! `!03!!*`+),+*!*0/`* `/+)!`+0$!.
,.+,!.0%!/` !,!* `+*`0$!`1..!*0(5`/!(!0! `0$!)!K

S`8?=`T
'!`+1.`+),+*!*0/`++'`!10%"1( $,0!.`>

6XPPDU\
*`0$%/`$,0!.L`3!`(++'! `0``(+0`+"`%*0!.!/0%*#`0+,%/K`!`/0.0! `5`#+%*#`0$.+1#$`0$!
,.+(!)/`+"``0`/(!L`/,!%"%((5L`0$!`,.+(!)/`0$0`0$!5`$ `0`!++'`3$%(!` !(%*#
3%0$`K

!`(!.*! `$+3`%*(%*!`/05(!/`3+.'`%*`!0`* `3$5`%0`%/`#++ `0+`+(+0!`0$!`/05(!/`3%0$%*

+),+*!*0/K`!`(/+`(++'! `0`0$!`(%)%00%+*/`+"`%*(%*!`/05(!/K

$!*L`3!`)+2! `+*`0+` %1)L`3$%$`/+(2!/`0$!`)%*`,.+(!)/`+"`%*(%*!`/05(!/L`#%2%*#`1/`

(!.`%*0!."!`0+`3.%0!`+1.``%*` 2.%,0K`+.`0$+/!`3$+`0$%*'`0$0`%*(%*!`/05(!/`.!`
 `/+(10%+*L`3!`)+2! `%*0+`0$!`3+.( `+"``)+ 1(!/L`/!00%*#`1,``/%),(!`,.+&!0`".+)
/.0$K

),+.0%*#`0$!``"%(!/`%*0+`+1.`+),+*!*0/`)'!/`0$!` !,!* !*%!/`(!.L`* `/+,%*#`0$!

(//`*)!/`(+((5`2+% /`(/$!/K`!`(++'! `0`$+3``)+ 1(!W/`composes`%/``#.!0
"!01.!L`* `$+3`3!`*`1/!`%0`%*`+*&1*0%+*`3%0$`0+)%``0+`.!0!``".)!3+.'`"+.
-1%'`,.+0+05,%*#K

%*((5L`3!`$ ``-1%'`(++'`0`styled`+),+*!*0/L`3$%$`%/``2!.5`,.+)%/%*#`(%..5`*
%/`)!*0`0+`$*#!`0$!`35`3!`,,.+$`0$!`/05(%*#`+"`+),+*!*0/`+),(!0!(5K

S`8?>`T
 
6HUYHU6LGH5HQGHULQJIRU)XQ
DQG3URILW
$!`*!40`/0!,`0+`1%( %*#`!0`,,(%0%+*/`%/`+10`(!.*%*#`$+3`0$!`/!.2!._/% !
.!* !.%*#`3+.'/`* `3$0`!*!"%0/`%0`*`#%2!`1/K`$!`1*%2!./(`,,(%0%+*/`.!`!00!.`"+.
L`* `0$!5`!*(!`'*+3(! #!`/$.%*#`!03!!*`0$!`".+*0!* `* `0$!`'!* K`$!5`*
(/+`%),.+2!`0$!`,!.!%2! `/,!! `+"``3!`,,(%0%+*L`3$%$`1/1((5`(! /`0+`%*.!/!
+*2!./%+*/K` +3!2!.L`,,(5%*#`/!.2!._/% !`.!* !.%*#`0+``!0`,,(%0%+*`+)!/`3%0$`
+/0L`* `3!`/$+1( `0$%*'`.!"1((5`+10`3$!0$!.`3!`*!! `%0`+.`*+0K

*`0$%/`$,0!.L`5+1`3%((`/!!`$+3`0+`/!0`1,``/!.2!._/% !`.!* !.! `,,(%0%+*L`* `5`0$!

!* `+"`0$!`.!(!2*0`/!0%+*/L`5+1`3%((`!`(!`0+`1%( ``1*%2!./(`,,(%0%+*`*
1* !./0* `0$!`,.+/`* `0$!`+*/`+"`0$!`0!$*%-1!K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#M

* !./0* %*#`3$0``1*%2!./(`,,(%0%+*`%/
%#1.%*#`+10`0$!`.!/+*/`3$5`3!`)5`3*0`0+`!*(!`/!.2!._/% !`.!* !.%*#
.!0%*#``/%),(!`/00%`/!.2!._/% !`.!* !.! `,,(%0%+*`3%0$`!0
 %*#` 0`"!0$%*#`0+`/!.2!._/% !`.!* !.%*#`* `1* !./0* %*#`+*!,0/`/1$
/` !$5 .0%+*\$5 .0%+*
/%*#`!40K&/`5`!%0$`0+`!/%(5`.!0!``!0`,,(%0%+*`0$0`.1*/`+*`+0$`0$!
/!.2!.`* `0$!`(%!*0
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

8QLYHUVDODSSOLFDWLRQV
$!*`3!`0('`+10` 2.%,0`3!`,,(%0%+*/L`3!`1/1((5`0$%*'`+"`(%!*0_/% !`+ !`0$0
(%2!/`%*`0$!`.+3/!.K

$!`35`0$!5`1/1((5`3+.'`%/`0$0`0$!`/!.2!.`.!01.*/`*`!),05` `,#!`3%0$``/.%,0`0#
0+`(+ `0$!`,,(%0%+*K`$!*`0$!`,,(%0%+*`%/`.! 5L`%0`)*%,1(0!/`0$!``%*/% !`0$!
.+3/!.`0+`/$+3`0$!` `* `0+`%*0!.0`3%0$`1/!./K`$%/`$/`!!*`0$!`/!`"+.`0$!`(/0`"!3
5!./L`* `%0`%/`/0%((`0$!`35`0+`#+`"+.``$1#!`*1)!.`+"`,,(%0%+*/K

*`0$%/`++'L`3!`$2!`/!!*`$+3`!/5`%0`%/`0+`.!0!`,,(%0%+*/`1/%*#`!0`+),+*!*0/`*
$+3`0$!5`3+.'`3%0$%*`0$!`.+3/!.K`$0`3!`$2!`*+0`/!!*`5!0`%/`$+3`!0`*`.!* !.`0$!
/)!`+),+*!*0/`+*`0$!`/!.2!.L`#%2%*#`1/``,+3!."1(`"!01.!`((! `/!.2!._/% !
.!* !.%*#`QRK

!"+.!`#+%*#`%*0+`0$!` !0%(/L`(!0W/`0.5`0+`1* !./0* `3$0`%0`)!*/`0+`.!0!`,,(%0%+*/

0$0`.!* !.`+0$`+*`0$!`/!.2!.`* `0$!`(%!*0K`+.`5!./L`3!`1/! `0+`$2!`+),(!0!(5
%""!.!*0`,,(%0%+*/`"+.`0$!`/!.2!.`* `(%!*0M`"+.`!4),(!L``&*#+`,,(%0%+*`0+`.!* !.
0$!`2%!3/`+*`0$!`/!.2!.L`* `/+)!` 2.%,0`".)!3+.'/L`/1$`/`'+*!`+.`&1!.5L`+*
0$!`(%!*0K`$+/!`/!,.0!`,,/`1/1((5`$ `0+`!`)%*0%*! `5`03+`0!)/`+"` !2!(+,!./
3%0$` %""!.!*0`/'%((`/!0/K` "`5+1`*!! ! `0+`/$.!` 0`!03!!*`0$!`/!.2!._/% !`.!* !.! `,#!/
* `0$!`(%!*0_/% !`,,(%0%+*L`5+1`+1( `%*&!0`/+)!`2.%(!/`%*/% !``/.%,0`0#K`/%*#
03+` %""!.!*0`(*#1#!/`* `,(0"+.)/L`0$!.!`3/`*+`35`0+`/$.!`+))+*`%*"+.)0%+*L
/1$`/`)+ !(/`+.`2%!3/L`!03!!*`0$!` %""!.!*0`/% !/`+"`0$!`,,(%0%+*K

%*!`+ !K&/`3/`.!(!/! `%*`977@L` 2.%,0`$/`#%*! ``(+0`+"`00!*0%+*`* `,+,1(.%05

+*`0$!`/!.2!._/% !`/`3!((L`0$*'/`0+`3!_,,(%0%+*`".)!3+.'/L`/1$`/`4,.!//K

/%*#`0$!`/)!`(*#1#!`+*`+0$`/% !/`*+0`+*(5`)'!/`%0`!/5`"+.` !2!(+,!./`0+`.!1/!`0$!%.

'*+3(! #!L`10`%0`(/+`!*(!/` %""!.!*0`35/`+"`/$.%*#`+ !`!03!!*`0$!`/!.2!.`* `0$!
(%!*0K

%0$`!0L`%*`,.0%1(.L`0$!`+*!,0`+"`%/+)+.,$%`3!`,,(%0%+*/`!)!`2!.5`,+,1(.
3%0$%*`0$!` 2.%,0`+))1*%05K`.%0%*#`*`%/+)+.,$%`,,(%0%+*`)!*/`1%( %*#`*
,,(%0%+*`0$0`(++'/`0$!`/)!`+*`0$!`/!.2!.`* `0$!`(%!*0K

$!`"0`0$0`0$!`/)!`(*#1#!`%/`1/! `0+`3.%0!`0$!`03+`,,(%0%+*/`)!*/`0$0``%#`,.0
+"`0$!`(+#%`*`!`/$.! L`3$%$`+,!*/`)*5`,+//%%(%0%!/K`$%/`)'!/`0$!`+ !`/!`!/%!.
0+`.!/+*`+10`* `2+% /`1**!!//.5` 1,(%0%+*K

!0`.%*#/`0$!`+*!,0``/0!,`"+.3. L`#%2%*#`1/``/%),(!` `0+`.!* !.`+1.`+),+*!*0/

+*`0$!`/!.2!.`* `0.*/,.!*0(5`,,(5%*#`((`0$!`(+#%`*!! ! `0+`)'!`0$!`,#!`%*0!.0%2!
Q"+.`!4),(!L`!2!*0`$* (!./R`+*`0$!`.+3/!.K

S`8?@`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

$!`0!.)`%/+)+.,$%` +!/`*+0`"%0`%*`0$%/`/!*.%+L`!1/!L`%*`0$!`/!`+"`!0L`0$!
,,(%0%+*/`.!`0$!`/)!L`* `0$0`%/`3$5`+*!`+"`0$!`.!0+./`+"`!0`+10!.L`%$!(
'/+*L`,.+,+/! ``)+.!`)!*%*#"1(`*)!`"+.`0$%/`,00!.*M`1*%2!./(K

`*%2!./(`,,(%0%+*`%/`*`,,(%0%+*`0$0`*`.1*`+0$`+*`0$!`/!.2!._`* `0$!`(%!*0_
/% !`3%0$`0$!`/)!`+ !K

*`0$%/`$,0!.L`3!`3%((`(++'`0`0$!`.!/+*/`3$5`3!`/$+1( `+*/% !.`)'%*#`+1.

,,(%0%+*/`*%2!./(L`* `3!`3%((`(!.*`$+3`!0`+),+*!*0/`*`!`!/%(5`.!* !.! `+*
0$!`/!.2!._/% !K

5HDVRQVWRLPSOHPHQW665
`%/``#.!0`"!01.!L`10`3!`/$+1( `*+0`&1),`%*0+`%0`&1/0`"+.`0$!`/'!`+"`%0N`3!`/$+1( `$2!
`.!(`* `/+(% `.!/+*`0+`/0.0`1/%*#`%0K` *`0$%/`/!0%+*L`3!`3%((`(++'`0`$+3`/!.2!._/% !
.!* !.%*#`*`$!(,`+1.`,,(%0%+*`* `3$0`,.+(!)/`%0`*`/+(2!`"+.`1/K

6(2
*!`+"`0$!`)%*`.!/+*/`3!`)5`3*0`0+`.!* !.`+1.`,,(%0%+*/`+*`0$!`/!.2!._/% !
%/`/!.$`!*#%*!`+,0%)%60%+*`QRK

"`3!`/!.2!`*`!),05` `/'!(!0+*`0+`0$!`.3(!./`+"`0$!`)%*`/!.$`!*#%*!/L`0$!5`.!
*+0`(!`0+`!40.0`*5`)!*%*#"1(`%*"+.)0%+*`".+)`%0K`+3 5/L` ++#(!`/!!)/`0+`!`(!
0+`.1*` 2.%,0L`10`0$!.!`.!`/+)!`(%)%00%+*/L`* ``%/`+"0!*``.%0%(`/,!0`+"`+1.
1/%*!//!/K

+.`5!./L`3!`1/! `0+`3.%0!`03+`,,(%0%+*/M`*``+*!`"+.`0$!`.3(!./`* `*+0$!.`+*!

0+`!`1/! `+*`0$!`(%!*0`/% !`5`0$!`1/!./K

!`1/! `0+` +`0$0`!1/!``,,(%0%+*/`+1( `*+0`#%2!`1/`0$!`(!2!(`+"`%*0!.0%2%05

1/!./`!4,!0L`3$%(!`(%!*0_/% !`,,(%0%+*/` % `*+0`#!0`%* !4! `5`/!.$`!*#%*!/K

%*0%*%*#`* `/1,,+.0%*#`03+`,,(%0%+*/`%/` %""%1(0L`* `)'!/`0$!`+ !`/!`(!//

"(!4%(!`* `(!//`,.+*!`0+`$*#!/K

1'%(5`3%0$`!0L`3!`*`.!* !.`+1.`+),+*!*0/`+*`0$!`/!.2!.`/% !`* `/!.2!`0$!`+*0!*0

+"`+1.`,,(%0%+*/`0+`0$!`.3(!./`%*`/1$``35`0$0`%0`%/`!/5`"+.`0$!)`0+`1* !./0* `*
%* !4`0$!`+*0!*0K

S`8@7`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

$%/`%/`#.!0L`*+0`+*(5`"+.`L`10`(/+`"+.`/+%(`/$.%*#`/!.2%!/K`(0"+.)/`/1$`/
!++'`+.`3%00!.`#%2!`1/``35`+"` !"%*%*#`0$!`+*0!*0`+"`0$!`/*%,,!0/`0$0`.!`/$+3*
3$!*`+1.`,#!/`.!`/$.! K

+.`!4),(!L`1/%*#`,!*` .,$L`3!`*`0!((`!++'`0$0L`"+.``,.0%1(.`,#!L`3!`3*0`
!.0%*`%)#!`0+`!`/$+3*`* ``,.0%1(.`0%0(!`0+`!`1/! `/`0$!`0%0(!`+"`0$!`,+/0K

0`%/`()+/0`%),+//%(!`0+` +`0$0`1/%*#`(%!*0_/% !_+*(5`,,(%0%+*/`!1/!`0$!`!*#%*!`0$0

!40.0/`0$!`%*"+.)0%+*`".+)`0$!`,#!/`1/!/`0$!`).'1,`.!01.*! `5`0$!`/!.2!.K

"`+1.`/!.2!.`.!01.*/`*`!),05` `/0.101.!`"+.`((`0$!`/L`0$!`.!/1(0`%/`0$0`3$!*`0$!
,#!/`.!`/$.! `+*`0$!`/+%(`*!03+.'/L`0$!`/*%,,!0/`+"`+1.`3!`,,(%0%+*`.!`!),05`/
3!((L`3$%$`""!0/`0$!%.`2%.(%05K

$FRPPRQFRGHEDVH
!` +`*+0`$2!`)*5`+,0%+*/`+*`0$!`(%!*0`/% !N`+1.`,,(%0%+*/`$2!`0+`!`3.%00!*`%*
2.%,0K`$!.!`.!`/+)!`(*#1#!/`0$0`*`!`+*2!.0! `%*0+` 2.%,0`0`1%( `0%)!L
10`0$!`+*!,0` +!/`*+0`$*#!K

$!`%(%05`0+`1/!`0$!`/)!`(*#1#!`+*`0$!`/!.2!.`.!,.!/!*0/``/%#*%"%*0`3%*`.!#. %*#
)%*0%*%(%05`* `'*+3(! #!`/$.%*#`.+//`0$!`+),*5K

!%*#`(!`0+`/$.!`0$!`(+#%`!03!!*`0$!`(%!*0`* `0$!`/!.2!.`)'!/`%0`!/5`0+`,,(5`*5
$*#!/`+*`+0$`/% !/`3%0$+10` +%*#`0$!`3+.'`03%!L`3$%$`)+/0`+"`0$!`0%)!`(! /`0+`"!3!.
!..+./`* `"!3!.`,.+(!)/K

$!`!""+.0`+"`)%*0%*%*#``/%*#(!`+ !`/!`%/`(!//`0$*`0$!`3+.'`.!-1%.! `0+`'!!,`03+

%""!.!*0`,,(%0%+*/`1,`0+` 0!K

*+0$!.`.!/+*`5+1`)%#$0`+*/% !.`%*0.+ 1%*#` 2.%,0`+*`0$!`/!.2!.`/% !`%*`5+1.`0!)

%/`/$.%*#`'*+3(! #!`!03!!*`".+*0!* `* `'!* ` !2!(+,!./K

$!`%(%05`0+`.!1/!`0$!`+ !`+*`+0$`/% !/`)'!/`+((+.0%+*`!/%!.L`* `0$!`0!)/`/,!'

`+))+*`(*#1#!L`3$%$`$!(,/`3%0$`)'%*#`"/0!.` !%/%+*/`* `$*#!/K

S`8@8`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

%HWWHUSHUIRUPDQFH
/0L`10`*+0`(!/0L`3!`((`(+2!`(%!*0_/% !`,,(%0%+*/L`!1/!`0$!5`.!`"/0`* `.!/,+*/%2!L
10`0$!.!`%/``,.+(!)—0$!`1* (!`$/`0+`!`(+ ! `* `.1*`!"+.!`1/!./`*`0'!`*5
0%+*`+*`0$!`,,(%0%+*K

$%/`)%#$0`*+0`!``,.+(!)`1/%*#``)+ !.*`(,0+,`+.`` !/'0+,`+),10!.`+*``"/0

%*0!.*!0`+**!0%+*K` +3!2!.L`%"`3!`(+ ``$1#!` 2.%,0`1* (!`1/%*#``)+%(!` !2%!
3%0$``: `+**!0%+*L`1/!./`$2!`0+`3%0`"+.``(%00(!`3$%(!`!"+.!`%*0!.0%*#`3%0$`0$!
,,(%0%+*K`$%/`%/`*+0`+*(5` `"+.`0$!``%*`#!*!.(L`10`%0`(/+`""!0/`+*2!./%+*/K` 0`$/
!!*`,.+2!*`5`0$!`)&+.`!_+))!.!`3!/%0!/`0$0``"!3`)%((%/!+* /` ! `0+`0$!`,#!
(+ `*`$2!`*`!*+.)+1/`%),0`+*`.!2!*1!/K

+.`!4),(!L`%"`3!`/!.2!`+1.`,,(%0%+*`3%0$`*`!),05` `,#!`* ``script`0#`+*

0$!`/!.2!.`* `3!`/$+3``/,%**!.`0+`+1.`1/!./`1*0%(`0$!5`*`(%'`+*`*50$%*#L`0$!
,!.!,0%+*`+"`0$!`/,!! `+"`0$!`3!/%0!`%/`$%#$(5`""!0! K

"`3!`.!* !.`+1.`3!/%0!`+*`0$!`/!.2!._/% !`%*/0! `* `0$!`1/!./`/0.0`/!!%*#`/+)!`+"`0$!

+*0!*0`/`/++*`/`0$!5`$%0`0$!`,#!L`0$!5`.!`)+.!`(%'!(5`0+`/05L`!2!*`%"`0$!5`$2!`0+`3%0
0$!`/)!`)+1*0`+"`0%)!`!"+.!` +%*#`*50$%*#`"+.`.!(L`!1/!`0$!`(%!*0_/% !`1* (!`$/
0+`!`(+ ! `.!#. (!//`+"`0$!`K

$%/`,!.!%2! `,!."+.)*!`%/`/+)!0$%*#`3!`*`#.!0(5`%),.+2!`1/%*#`/!.2!._/% !
.!* !.%*#`!1/!`3!`*`+10,10`+1.`+),+*!*0/`+*`0$!`/!.2!.`* `.!01.*`/+)!
%*"+.)0%+*`0+`0$!`1/!./`/0.%#$0_35K

'RQ WXQGHUHVWLPDWHWKHFRPSOH[LW\
2!*`%"`!0`,.+2% !/`*`!/5` `0+`.!* !.`+),+*!*0/`+*`0$!`/!.2!.L`.!0%*#`
*%2!./(`,,(%0%+*`$/``+/0K`+L`3!`/$+1( `+*/% !.`.!"1((5`!"+.!`!*(%*#`%0`"+.`+*!
+"`0$!`,.!! %*#`.!/+*/`* `$!'`%"`+1.`0!)`%/`.! 5`0+`/1,,+.0`* `)%*0%*`
*%2!./(`,,(%0%+*K

/`3!`3%((`/!!`%*`0$!`+)%*#`/!0%+*/L`.!* !.%*#`+),+*!*0/`%0`%/`*+0`0$!`+*(5`0/'`0$0
*!! /`0+`!` +*!`0+`.!0!`/!.2!._/% !`.!* !.! `,,(%0%+*/K

!`$2!`0+`/!0`1,`* `)%*0%*``/!.2!.`3%0$`%0/`.+10!/`* `%0/`(+#%L`)*#!`0$!`/!.2!.

0`"(+3L`* `/+`+*K`+0!*0%((5L`3!`3*0`0+`$!`0$!`+*0!*0`0+`/!.2!`0$!`,#!/`"/0!.`*
..5`+10`)*5`+0$!.`0/'/`0$0`.!`.!-1%.! `0+`)%*0%*``"1((5`"1*0%+*(`*%2!./(
,,(%0%+*K

S`8@9`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

+.`0$%/`.!/+*L`)5`/1##!/0%+*`%/`0+`1%( `0$!`(%!*0_/% !`2!./%+*`"%./0L`* `+*(5`3$!*`0$!

3!`,,(%0%+*`%/`"1((5`3+.'%*#`+*`0$!`/!.2!.`/$+1( `5+1`0$%*'`+10`%),.+2%*#`0$!
!4,!.%!*!`5`!*(%*#`K

`/$+1( `!`!*(! `+*(5`3$!*`/0.%0(5`*!! ! K`+.`!4),(!L`%"`5+1`*!! ``+.`%"`5+1

*!! `0+`1/0+)%6!`0$!`/+%(`/$.%*#`%*"+.)0%+*L`5+1`/$+1( `/0.0`0$%*'%*#`+10`%0K

"`5+1`.!(%6!`0$0`5+1.`,,(%0%+*`0'!/``(+0`+"`0%)!`0+`(+ `"1((5`* `5+1`$2!`(.! 5

+*!`((`0$!`+,0%)%60%+*`Q/!!`0$!`"+((+3%*#`$,0!.`"+.`)+.!`+10`0$%/`0+,%RL`5+1`*
+*/% !.`1/%*#`/!.2!._/% !`.!* !.%*#`0+`+""!.``!00!.`!4,!.%!*!`0+`5+1.`1/!./`* `%),.+2!
0$!`,!.!%2! `/,!! K

$EDVLFH[DPSOH
!`3%((`*+3`.!0!``2!.5`/%),(!`/!.2!._/% !`,,(%0%+*`0+`(++'`0`0$!`/0!,/`0$0`.!
*!! ! `0+`1%( ``/%`*%2!./(`/!01,K

0`%/`#+%*#`0+`!``)%*%)(`* `/%),(!`/!01,`+*`,1.,+/!`!1/!`0$!`#+(`$!.!`%/`0+`/$+3
$+3``3+.'/`.0$!.`0$*`,.+2% %*#``+),.!$!*/%2!`/+(10%+*`+.``+%(!.,(0!L`!2!*
0$+1#$`5+1`+1( `1/!`0$!`!4),(!`,,(%0%+*`/``/0.0%*#`,+%*0`"+.``.!(_3+.(
,,(%0%+*K

$%/`/!0%+*`//1)!/`0$0`((`0$!`+*!,0/`.!#. %*#` 2.%,0`1%( `0++(/L

/1$`/`3!,'`* `%0/`(+ !./L`.!`(!.L`* `%0`.!-1%.!/``(%00(!`%0`+"
'*+3(! #!`+"`+ !K&/K`/`` 2.%,0` !2!(+,!.L`%0`/$+1( `!`!/5`"+.`5+1
0+`"+((+3`0$%/`/!0%+*L`!2!*`%"`5+1`$2!`*!2!.`/!!*``+ !K&/`,,(%0%+*
!"+.!K

$!`,,(%0%+*`3%((`+*/%/0`+"`03+`,.0/M

$!`/!.2!.`/% !L`3$!.!`3!`3%((`1/!`4,.!//`0+`.!0!``/%`3!`/!.2!.`* `/!.2!

*` `,#!`3%0$`0$!`/!.2!._/% !`.!* !.! `!0`,,(%0%+*

$!`(%!*0`/% !L`3$!.!`3!`3%((`.!* !.`0$!`,,(%0%+*L`/`1/1(L`1/%*#`react-dom

+0$`/% !/`+"`0$!`,,(%0%+*`3%((`!`0.*/,%(! `3%0$`!(`* `1* (! `3%0$`3!,'

!"+.!`!%*#`.1*L`3$%$`3%((`(!0`1/`1/!`0$!`"1((`,+3!.`+"`=`* `0$!`)+ 1(!/`+0$`+*
+ !K&/`* `+*`0$!`.+3/!.K

S`8@:`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

!0W/`/0.0`5`)+2%*#`%*0+`*`!),05`"+( !.`* `.1**%*#`0$!`"+((+3%*#`0+`.!0!``*!3

,'#!M
QSPLQLW

$!*`package.json`$/`!!*`.!0! L`%0`%/`0%)!`0+`%*/0((`0$!` !,!* !*%!/K`!`*`/0.0

3%0$`webpackM
QSPLQVWDOOZHESDFN

"0!.`%0`%/` +*!L`%0`%/`0%)!`0+`%*/0((`0$!`!(`(+ !.`* `0$!`,.!/!0/`0$0`3!`*!! `0+`3.%0!`*

=`,,(%0%+*`1/%*#`!0`* ` M
QSPLQVWDOO#EDEHOFRUH#EDEHOSUHVHWHQY#EDEHOSUHVHWUHDFWEDEHO
ORDGHU

!`(/+`$2!`0+`%*/0((`` !,!* !*5L`3$%$`3!`3%((`*!! `0+`.!0!`0$!`/!.2!.`1* (!K`$!

3!,'`(!0/`1/` !"%*!``/!0`+"`!40!.*(/L`3$%$`.!` !,!* !*%!/`0$0`3!` +`*+0`3*0`0+
 `0+`0$!`1* (!K`$!*`.!0%*#``1%( `"+.`0$!`/!.2!.L`%*`"0L`3!` +`*+0`3*0`0+` `0+
0$!`1* (!`+"`((`0$!`*+ !`,'#!/`0$0`3!`1/!N`3!`&1/0`3*0`0+`1* (!`+1.`/!.2!.`+ !K
$!.!W/``,'#!`0$0`$!(,/`3%0$`0$0L`* `3!`*`/%),(5`,,(5`%0`0+`0$!`!40!.*(`!*0.5`%*
+1.`3!,'`+*"%#1.0%+*`0+`!4(1 !`((`0$!`)+ 1(!/M
QSPLQVWDOOZHESDFNQRGHH[WHUQDOV

.!0L`%0`%/`*+3`0%)!`0+`.!0!`*`!*0.5`%*`0$!`*,)`scripts`/!0%+*`+"`package.json`/+
0$0`3!`*`!/%(5`.1*`0$!`1%( `+))* `".+)`0$!`0!.)%*(M
"VFULSWV": {
"EXLOG": "webpack"
}

!`*+3`$2!`0+`.!0!`0$!`+*"%#1.0%+*`"%(!L`((! `webpack.config.jsL`0+`0!((`3!,'
$+3`3!`3*0`+1.`"%(!/`0+`!`1* (! K

!0W/`/0.0`%),+.0%*#`0$!`(%..5`3!`3%((`1/!`0+`/!0`+1.`*+ !`!40!.*(/K`!`3%((`(/+` !"%*!

0$!`+*"%#1.0%+*`"+.`0$!`!(`(+ !.L`3$%$`3!`3%((`1/!`"+.`+0$`0$!`(%!*0`* `0$!`/!.2!.M
FRQVW nodeExternals = UHTXLUH('webpack-node-externals');

FRQVW rules = [
{
WHVW: /\.(js|jsx)$/,
H[FOXGH: /node_modules/,
XVH: {
ORDGHU: 'babel-loader',
RSWLRQV: {

S`8@;`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

SUHVHWV: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
];

*`Chapter 7L`'!`+1.`+),+*!*0/`++'`!10%"1(L`3!`(++'! `0`$+3`3!`$ `0+`!4,+.0``

+*"%#1.0%+*`+&!0`".+)`0$!`+*"%#1.0%+*`"%(!K`$!.!`%/`+*!`++(`"!01.!`%*`3!,'`0$0
(!0/`1/`!4,+.0`*`..5`+"`+*"%#1.0%+*/`/`3!((`/+`0$0`3!`*` !"%*!`+0$`(%!*0`* `/!.2!.
+*"%#1.0%+*/`%*`0$!`/)!`,(!`* `1/!`+0$`%*`+*!`#+K

$!`(%!*0`+*"%#1.0%+*`/$+1( `!`2!.5`")%(%.M
FRQVW client = {
HQWU\: './src/client.js',
RXWSXW: {
SDWK: './dist/public',
ILOHQDPH: 'bundle.js'
},
PRGXOH: {
UXOHV
}
};

!`.!`0!((%*#`3!,'`0$0`0$!`/+1.!`+ !`+"`0$!`(%!*0`,,(%0%+*`%/`%*/% !
0$!`src`"+( !.L`* `3!`3*0`0$!`+10,10`1* (!`0+`!`#!*!.0! `%*`0$!`dist`"+( !.K

!`(/+`/!0`0$!`)+ 1(!`(+ !./`1/%*#`0$!`,.!2%+1/`+&!0`3!`.!0! `3%0$`babel-loaderK

0`3/` +*!`/`/%),(!`/`,+//%(!K

$!`/!.2!.`+*"%#1.0%+*`%/`/(%#$0(5` %""!.!*0L`10`%0`/$+1( `!`2!.5`!/5`"+.`5+1`0+`"+((+3

* `1* !./0* M
FRQVW server = {
HQWU\: './src/server.js',
RXWSXW: {
SDWK: './dist',
ILOHQDPH: 'server.js'
},
PRGXOH: {
UXOHV
},

S`8@<`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

WDUJHW: 'node',
H[WHUQDOV: [QRGH([WHUQDOV()]
};

/`5+1`*`/!!L`!*0.5L`+10,10L`* `)+ 1(!`.!`0$!`/)!L`!4!,0`"+.`0$!`"%(!`*)!/K

$!`*!3`,.)!0!./`.!`0$!`0.#!0L`3$!.!`3!`/,!%"5`0$!`*+ !`0+`0!((`3!,'`0+`%#*+.!`((
0$!`1%(0_%*`/5/0!)`,'#!/`+"`+ !K&/L`/1$`/`fs`* `externalsL`3$!.!`3!`1/!`0$!
(%..5`3!`%),+.0! `!.(%!.`0+`0!((`3!,'`0+`%#*+.!`0$!` !,!* !*%!/K

/0L`10`*+0`(!/0L`3!`$2!`0+`!4,+.0`0$!`+*"%#1.0%+*/`/`*`..5M
PRGXOHH[SRUWV = [client, server];

$!`+*"%#1.0%+*`%/` +*!K`!`.!`*+3`.! 5`0+`3.%0!`/+)!`+ !L`* `3!`3%((`/0.0`".+)`0$!

!0`,,(%0%+*L`3$%$`3!`.!`)+.!`")%(%.`3%0$K

!0W/`.!0!`*`src`"+( !.`* `*`app.js`"%(!`%*/% !`%0K

$!`app.js`"%(!`/$+1( `$2!`0$!`"+((+3%*#`+*0!*0M
LPSRUW React IURP 'react';

FRQVW App = () => GLY!Hello ReactGLY!;

H[SRUWGHIDXOW App;

+0$%*#`+),(!4`$!.!M`3!`%),+.0`!0L`3!`.!0!`*`App`+),+*!*0L`3$%$`.!* !./
0$!` !((+`!0`)!//#!L`* `3!`!4,+.0`%0K

!0W/`*+3`.!0!`client.jsL`3$%$`%/`.!/,+*/%(!`"+.`.!* !.%*#`0$!`App`+),+*!*0`%*/% !
0$!`M
LPSRUW React IURP 'react';
LPSRUW { render } IURP 'react-dom';
LPSRUW App IURP './app';

UHQGHU(<App />, document.JHW(OHPHQW%\,G('app'));

#%*L`0$%/`/$+1( `/+1* `")%(%.L`/%*!`3!`%),+.0`!0L`!0L`*

0$!`App`+),+*!*0`3!`.!0! `!.(%!.L`* `3!`1/!`!0`0+`.!* !.`%0`%*``
!(!)!*0`3%0$`0$!`app K

!0W/`*+3`)+2!`0+`0$!`/!.2!.K

S`8@=`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

$!`"%./0`0$%*#`0+` +`%/`.!0!``template.js`"%(!L`3$%$`!4,+.0/``"1*0%+*`0$0`3!`3%((`1/!
0+`.!01.*`0$!`).'1,`+"`0$!`,#!`0$0`+1.`/!.2!.`3%((`#%2!`'`0+`0$!`.+3/!.M
H[SRUW GHIDXOW body => `
'2&7<3(KWPO!
KWPO!
KHDG!
PHWDFKDUVHW="UTF-8"!
KHDG!
ERG\!
GLYLG="app"!^body`GLY!
VFULSWVUF="/bundle.js"!VFULSW!
ERG\!
KWPO!`;

0`/$+1( `!`,.!005`/0.%#$0"+.3. L`0$!`"1*0%+*`!,0/`bodyL`3$%$`3!`3%((`(0!.`/!!

+*0%*/`0$!`!0`,,L`* `%0`.!01.*/`0$!`/'!(!0+*`+"`0$!`,#!K

0`%/`3+.0$`*+0%*#`0$0`3!`(+ `0$!`1* (!`+*`0$!`(%!*0`/% !`!2!*`%"`0$!`,,`%/`.!* !.!

/!.2!.`/% !K``%/`+*(5`$("`+"`0$!`&+`0$0`!0` +!/`0+`.!* !.`+1.`,,(%0%+*K`!`/0%((
3*0`+1.`,,(%0%+*`0+`!``(%!*0_/% !`,,(%0%+*`3%0$`((`0$!`"!01.!/`3!`*`1/!`%*`0$!
.+3/!.L`/1$`/`!2!*0`$* (!./L`"+.`!4),(!K

"0!.`0$%/L`5+1`*!! `0+`%*/0((`expressL`reactL`* `react-domM

QSPLQVWDOOH[SUHVVUHDFWUHDFWGRP

+3`%0`%/`0%)!`0+`.!0!`server.jsL`3$%$`$/`)+.!` !,!* !*%!/`* `%/`3+.0$`!4,(+.%*#

%*` !0%(M
LPSRUW express IURP 'express';
LPSRUW React IURP 'react';
LPSRUW { renderToString } IURP 'react-dom/server';
LPSRUW path IURP 'path';
LPSRUW App IURP './app';
LPSRUW template IURP './template';

$!`"%./0`0$%*#`0$0`3!`%),+.0`%/`expressL`0$!`(%..5`0$0`((+3/`1/`0+`.!0!``3!`/!.2!.
3%0$`/+)!`.+10!/`!/%(5L`* `3$%$`%/`(/+`(!`0+`/!.2!`/00%`"%(!/K

!+* (5L`3!`%),+.0`!0`* `!0`0+`.!* !.`AppL`3$%$`3!`%),+.0`/`3!((K`+0%!

0$!`/server`,0$`%*`0$!`import`/00!)!*0`+"`!0K`$!`(/0`0$%*#`3!`%),+.0`%/`0$!
0!),(0!`3!` !"%*! `!.(%!.K

+3`3!`.!0!`*`4,.!//`,,(%0%+*M
FRQVW app = H[SUHVV();

S`8@>`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

!`0!((`0$!`,,(%0%+*`3$!.!`+1.`/00%`//!0/`.!`/0+.! M
app.XVH(express.VWDWLF(path.UHVROYH(BBGLUQDPH, './dist/public')));

/`5+1`)5`$2!`*+0%! L`0$!`,0$`%/`0$!`/)!`0$0`3!`1/! `%*`0$!`(%!*0`+*"%#1.0%+*`+"

3!,'`/`0$!`+10,10` !/0%*0%+*`+"`0$!`(%!*0`1* (!K

$!*L`$!.!`+)!/`0$!`(+#%`+"``3%0$`!0M
app.JHW('/', (req, res) => {
FRQVW body = UHQGHU7R6WULQJ(<App />);
FRQVW html = WHPSODWH(body);
res.VHQG(html);
});

!`.!`0!((%*#`4,.!//`0$0`3!`3*0`0+`(%/0!*`0+`0$!`.+10!L`/L`* `3$!*`%0`#!0/`$%0`5``(%!*0L
3!`.!* !.`App`0+``/0.%*#`1/%*#`0$!`!0`(%..5K` !.!`+)!`0$!`)#%`* `0$!
/%),(%%05`+"`0$!`/!.2!._/% !`.!* !.%*#`+"`!0K

$0`renderToString` +!/`%/`%0`.!01.*/``/0.%*#`.!,.!/!*00%+*`+"`0$!``!(!)!*0/
#!*!.0! `5`+1.`App`+),+*!*0N`0$!`/)!`0.!!`0$0`%0`3+1( `.!* !.`%*`0$!``%"`3!
3!.!`1/%*#`0$!`!0`.!* !.`)!0$+ K

$!`2(1!`+"`0$!`+ 5`2.%(!`%/`/+)!0$%*#`(%'!`0$!`"+((+3%*#M
GLYGDWDUHDFWURRW="" GDWDUHDFWLG="1" GDWDUHDFW
FKHFNVXP="982061917"!Hello ReactGLY!

/`5+1`*`/!!L`%0`.!,.!/!*0/`3$0`3!` !"%*! `%*`0$!`render`)!0$+ `+"`+1.`AppL`!4!,0`"+.

`+1,(!`+"` 0`00.%10!/`0$0`!0`1/!/`+*`0$!`(%!*0`0+`00$`0$!`(%!*0_/% !`,,(%0%+*
0+`0$!`/!.2!._/% !`.!* !.! `/0.%*#K

+3`0$0`3!`$2!`0$!``.!,.!/!*00%+*`+"`+1.`,,L`3!`*`1/!`0$!`template`"1*0%+*`0+
,,(5`%0`0+`0$!` `0!),(0!`* `/!* `%0`'`0+`0$!`.+3/!.`3%0$%*`0$!`4,.!//`.!/,+*/!K

/0L`10`*+0`(!/0L`3!`$2!`0+`/0.0`0$!`4,.!//`,,(%0%+*M
app.OLVWHQ(3000, () => {
console.ORJ('Listening on port 3000');
});

!`.!`*+3`.! 5`0+`#+N`0$!.!`.!`+*(5``"!3`+,!.0%+*/`(!"0K

$!`"%./0`+*!`%/` !"%*%*#`0$!`/0.0`/.%,0`+"`npm`* `/!00%*#`%0`0+`.1*`0$!`*+ !`/!.2!.M

"VFULSWV": {
"EXLOG": "webpack",

S`8@?`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

"VWDUW": "node ./dist/server"

}

$!`/.%,0/`.!`.! 5L`/+`3!`*`"%./0`1%( `0$!`,,(%0%+*`3%0$`0$!`"+((+3%*#M

QSPUXQEXLOG

$!*`0$!`1* (!/`.!`.!0! L`3!`*`.1*`0$!`"+((+3%*#`+))* M

QSPVWDUW

+%*0`0$!`.+3/!.`0+`http://localhost:3000`* `/!!`0$!`.!/1(0K

$!.!`.!`03+`%),+.0*0`0$%*#/`0+`*+0!`$!.!K`%./0L`3!`1/!`0$!`%!3`#!`+1.!`"!01.!`+"
0$!`.+3/!.L`3!`*`/!!`0$!`/+1.!`+ !`+"`0$!`,,(%0%+*`!%*#`.!* !.! `* `.!01.*!
".+)`0$!`/!.2!.L`3$%$`3!`3+1( `*+0`/!!`%"``3/`*+0`!*(! K

!+* L`%"`3!`+,!*`!2++(/`* `3!`$2!`0$!`!0`!40!*/%+*`%*/0((! L`3!`*`/!!`0$0

0$!`App`+),+*!*0`$/`!!*`++0! `+*`0$!`(%!*0`/`3!((K

$!`"+((+3%*#`/.!!*/$+0`/$+3/`0$!`/+1.!`+"`0$!`,#!M

$GDWDIHWFKLQJH[DPSOH
$!`!4),(!`%*`0$!`,.!2%+1/`/!0%+*`/$+1( `!4,(%*`(!.(5`$+3`0+`/!0`1,``1*%2!./(
,,(%0%+*`%*`!0K

0`%/`,.!005`/0.%#$0"+.3. L`* `0$!`)%*`"+1/`%/`+*`#!00%*#`0$%*#/` +*!K

S`8@@`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

+3!2!.L`%*``.!(_3+.( `,,(%0%+*L`3!`3%((`(%'!(5`3*0`0+`(+ `/+)!` 0`%*/0! `+"`

/00%`!0`+),+*!*0L`/1$`/`App`%*`0$!`!4),(!K`1,,+/!`3!`3*0`0+`(+ `*
.)+2W/`#%/0/`+*`0$!`/!.2!.`* `.!01.*`0$!`(%/0`+"`%0!)/`".+)`0$!`4,.!//`,,`3!`&1/0
.!0! K

*`0$!` 0`"!0$%*#`!4),(!/`%*`Chapter 5L`.+,!.`0`!0$%*#L`3!`(++'! `0`$+3`3!`*

1/!`componentDidMount`0+`"%.!`0$!` 0`(+ %*#K`$0`3+1( *W0`3+.'`+*`0$!`/!.2!.
!1/!`+),+*!*0/` +`*+0`#!0`)+1*0! `+*`0$!``* `0$!`(%"!`5(!`$++'`*!2!.`#!0/
"%.! K

/%*#`$++'/`0$0`.!`!4!10! `!.(%!.L`/1$`/`componentWillMountL`3%((`*+0`3+.'`!%0$!.L
!1/!`0$!` 0`"!0$%*#`+,!.0%+*`%/`async`3$%(!`renderToString`%/`*+0K`+.`0$0
.!/+*L`3!`$2!`0+`"%* ``35`0+`(+ `0$!` 0`!"+.!$* `* `,//`%0`0+`0$!`+),+*!*0`/
,.+,/K

!0W/`(++'`0`$+3`3!`*`0'!`0$!`,,(%0%+*`".+)`0$!`,.!2%+1/`/!0%+*`* `$*#!`%0``%0
0+`)'!`%0`(+ `0$!`#%/0/` 1.%*#`0$!`/!.2!._/% !`.!* !.%*#`,$/!K

$!`"%./0`0$%*#`0+` +`%/`0+`$*#!`app.js`0+`!,0``(%/0`+"`#%/0/`/`propL`* `(++,`0$.+1#$

%0`%*`0$!`.!* !.`)!0$+ `0+` %/,(5`0$!%.` !/.%,0%+*/M
LPSRUW React IURP 'react';
LPSRUW { array } IURP 'prop-types';

FRQVW App = ({ gists }) => (

XO!
{gists.PDS(gist => (
OLNH\={gist.LG}!{gist.GHVFULSWLRQ}OL!
))}
XO!
);
App.SURS7\SHV = {
JLVWV: array
};

H[SRUWGHIDXOW App;

,,(5%*#`0$!`+*!,0`0$0`3!`(!.*! `%*`0$!`,.!2%+1/`$,0!.L`3!` !"%*!``/00!(!//

"1*0%+*(`+),+*!*0L`3$%$`.!!%2!/`gists`/``,.+,`* `(++,/`0$.+1#$`0$!`!(!)!*0/`0+
.!* !.``(%/0`+"`%0!)/K

+3L`3!`$2!`0+`$*#!`0$!`/!.2!.`0+`.!0.%!2!`gists`* `,//`0$!)`0+`0$!`+),+*!*0K

S`977`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

+`1/!`0$!`"!0$` `+*`0$!`/!.2!.`/% !L`3!`$2!`0+`%*/0((``(%..5`((! `isomorphic-

fetchL`3$%$`%),(!)!*0/`0$!`"!0$`/0* . /K` 0`*`!`1/! `%*`+ !K&/`* `0$!`.+3/!.M

QSPLQVWDOOLVRPRUSKLFIHWFK

!`"%./0`%),+.0`0$!`(%..5`%*`server.jsM
LPSRUW fetch IURP 'isomorphic-fetch';

$!` `((`3!`3*0`0+`)'!`(++'/`/`"+((+3/M
IHWFK('https://api.github.com/users/gaearon/gists')
.WKHQ(response => response.MVRQ())
.WKHQ(gists => {

});

!.!L`0$!`gists`.!`2%((!`0+`!`1/! `%*/% !`0$!`(/0`then`"1*0%+*K` *`+1.`/!L`3!`3*0

0+`,//`0$!)` +3*`0+`AppK

+L`3!`*`$*#!`0$!`/`.+10!`/`"+((+3/M
app.JHW('/', (req, res) => {
IHWFK('https://api.github.com/users/gaearon/gists')
.WKHQ(response => response.MVRQ())
.WKHQ(gists => {
FRQVW body = UHQGHU7R6WULQJ($SS JLVWV={gists} !);
FRQVW html = WHPSODWH(body);
res.VHQG(html);
});
});

!.!L`3!`"%./0`"!0$`gists`* `0$!*`3!`.!* !.`App`0+``/0.%*#L`,//%*#`0$!`,.+,!.05K

*!`App`%/`.!* !.! L`* `3!`$2!`%0/`).'1,L`3!`1/!`0$!`0!),(0!`3!`1/! `%*

0$!`,.!2%+1/`/!0%+*L`* `3!`.!01.*`%0`0+`0$!`.+3/!.K

1*`0$!`"+((+3%*#`+))* `%*`0$!`+*/+(!`* `,+%*0`0$!`.+3/!.

0+`http://localhost:3000K`+1`/$+1( `!`(!`0+`/!!``/!.2!._/% !`.!* !.`(%/0`+"`gistsM
QSPUXQEXLOG QSPVWDUW

+`)'!`/1.!`0$0`0$!`(%/0`%/`.!* !.! `".+)`0$!`4,.!//`,,`5+1`*`*2%#0!`$!.!M

view-source:http://localhost:3000/

+1`3%((`/!!`0$!`).'1,`* `0$!` !/.%,0%+*/`+"`gistsK

S`978`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

$0`%/`#.!0L`* `%0`(++'/`!/5L`10`%"`3!`$!'`0$!`!2++(/`+*/+(!L`3!`*`/!!`0$!
"+((+3%*#`!..+.M

**+0`.! `,.+,!.05`W),W`+"`1* !"%*!

$!`.!/+*`3!`/!!`0$!`!..+.`%/`0$0L`+*`0$!`(%!*0L`3!`.!`.!* !.%*#`App`#%*`10`3%0$+10
,//%*#`*5`gists`0+`%0K

$%/`+1( `/+1* `+1*0!.%*01%0%2!`%*`0$!`!#%**%*#`!1/!`3!`)%#$0`0$%*'`0$0`!0`%/

/).0`!*+1#$`0+`1/!`0$!`#%/0/`.!* !.! `3%0$%*`0$!`/!.2!._/% !`/0.%*#`+*`0$!`(%!*0K`10`0$0`%/
*+0`3$0`$,,!*/L`/+`3!`$2!`0+`"%* ``35`0+`)'!`0$!`#%/0/`2%((!`+*`0$!`(%!*0`/% !`/
3!((K

+1`)5`+*/% !.`0$0`5+1`*`!4!10!`0$!`"!0$`#%*`+*`0$!`(%!*0K`$0`3+1( `3+.'L`10

%0`%/`*+0`+,0%)(`!1/!`5+1`3+1( `!* `1,`"%.%*#`03+` `((/L`+*!`+*`0$!`4,.!//
/!.2!.`* `+*!`%*`0$!`.+3/!.K

"`3!`0$%*'`+10`%0L`3!`(.! 5`) !`0$!`((`+*`0$!`/!.2!.L`* `3!`$2!`((`0$!` 0`3!

*!! K``05,%(`/+(10%+*`0+`/$.!` 0`!03!!*`0$!`/!.2!.`* `0$!`(%!*0`%/` !$5 .0%*#`0$!
0`%*`0$!` `).'1,`* `$5 .0%*#`%0`'`%*`0$!`.+3/!.K

$%/`/!!)/`(%'!``+),(!4`+*!,0L`10`%0`%/`*+0K`!`3%((`(++'`0`$+3`!/5`%0`%/`0+`%),(!)!*0
*+3K

$!`"%./0`0$%*#`3!`)1/0` +`%/`0+`%*&!0`0$!`#%/0/`%*`0$!`0!),(0!`"0!.`3!`"!0$! `0$!)`+*`0$!

(%!*0K`+` +`0$%/L`3!`$2!`0+`$*#!`0$!`0!),(0!``%0M
H[SRUWGHIDXOW (body, gists) => `
<!DOCTYPE html>
KWPO!
KHDG!
PHWDFKDUVHW="UTF-8"!
KHDG!
ERG\!
GLYLG="app"!^body`GLY!
VFULSW!window.JLVWV = ^JSON.VWULQJLI\(gists)`VFULSW!
VFULSWVUF="/bundle.js"!VFULSW!
ERG\!
KWPO!
`;

$!`template`"1*0%+*`*+3`!,0/`03+`,.)!0!./—0$!`body`+"`0$!`,,`* `0$!
+((!0%+*`+"`gistsK

S`979`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

$!`"%./0`+*!`%/`%*/!.0! `%*/% !`0$!`,,`!(!)!*0L`3$%(!`0$!`/!+* `%/`1/! `0+` !"%*!``#(+(

gists`2.%(!`00$! `0+`0$!`window`+&!0`/+`0$0`3!`*`1/!`%0`%*`0$!`(%!*0K

*/% !`0$!`Express`.+10!`Qserver.jsRL`3!`&1/0`$2!`0+`$*#!`0$!`(%*!`3$!.!`3!`#!*!.0!
0$!`0!),(0!`,//%*#`0$!`+ 5L`/`"+((+3/M
FRQVW html = WHPSODWH(body, gists);

/0L`10`*+0`(!/0L`3!`$2!`0+`1/!`0$!`gists`00$! `0+``3%* +3`%*/% !`client.jsL

3$%$`%/`,.!005`!/5M
ReactDOM.Kydrate(
$SS JLVWV={window.JLVWV} !,
document.JHW(OHPHQW%\,G('app')
);

5 .0!`3/`%*0.+ 1! `%*`!0`8=`* `3+.'/`/%)%(.`0+`.!* !.`+*`0$!`(%!*0`/% !L`3$!0$!.

0$!` `$/`/!.2!.`.!* !.! `).'1,`+.`*+0K` "`0$!.!`%/`*+`).'1,`,.!2%+1/(5`1/%*#`L
0$!*`0$!`$5 .0!`)!0$+ `3%((`"%.!``3.*%*#`0$0`5+1`*`/%(!*!`%0`5`1/%*#`0$!
*!3`suppressHydrationWarning`00.%10!K`

!`.! ``gists` %.!0(5L`* `3!`,//`0$!)`0+`0$!`App`+),+*!*0`0$0`#!0/`.!* !.! `+*`0$!

(%!*0K

+3L`.1*`0$!`"+((+3%*#`+))* `#%*M
QSPUXQEXLOG QSPVWDUW

"`3!`,+%*0`0$!`.+3/!.`3%* +3`0+``http://localhost:3000L`0$!`!..+.`%/`#+*!L`* `%"`3!

%*/,!0`0$!`App`+),+*!*0`1/%*#`!0`!2++(/L`3!`*`/!!`$+3`0$!`(%!*0_
/% !`App`+),+*!*0`.!!%2!/`0$!`+((!0%+*`+"`gistsK

1H[WMV
+1`$2!`(++'! `0`0$!`/%/`+"`/!.2!._/% !`.!* !.%*#`3%0$`!0L`* `5+1`*`1/!`0$!
,.+&!0`3!`.!0! `/``/0.0%*#`,+%*0`"+.``.!(`,,K

+3!2!.L`5+1`)5`0$%*'`0$0`0$!.!`%/`0++`)1$`+%(!.,(0!`* `0$0`5+1`.!`.!-1%.! `0+

'*+3`0++`)*5` %""!.!*0`0++(/`0+`.1*``/%),(!`*%2!./(`,,(%0%+*`3%0$`!0K

$%/`%/``+))+*`"!!(%*#`((! ` 2.%,0`"0%#1!L`/` !/.%! `%*`0$!`%*0.+ 10%+*`0+`0$%/

++'K

S`97:`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

1'%(5L`!++'` !2!(+,!./`* `+0$!.`+),*%!/`%*`0$!`!0`+))1*%05L`.!`3+.'%*#

2!.5`$. `0+`%),.+2!`0$!``* `)'!`0$!`(%"!`+"` !2!(+,!./`!/%!.K`+1`)%#$0`$2!
1/! `create-react-app`0`0$%/`,+%*0`0+`0.5`+10`0$!`!4),(!/`%*`0$!`,.!2%+1/`$,0!./L`*
5+1`/$+1( `1* !./0* `$+3`%0`)'!/`%0`2!.5`/%),(!`0+`.!0!`!0`,,(%0%+*/`3%0$+10
.!-1%.%*#` !2!(+,!./`0+`(!.*`)*5`0!$*+(+#%!/`* `0++(/K

+3L`create-react-app` +!/`*+0`/1,,+.0``5!0L`10`0$!.!W/``+),*5`((! `!%0`3$+

.!0! ``0++(`((! `!40K&/L`3$%$`)'!/`%0`%*.! %(5`!/5`0+`#!*!.0!`*%2!./(
,,(%0%+*/`3%0$+10`3+..5%*#`+10`+*"%#1.0%+*`"%(!/K` 0`(/+`.! 1!/`0$!`+%(!.,(0!``(+0K

0`%/`%),+.0*0`0+`/5`0$0`1/%*#`/0.0%+*/`%/`(35/`2!.5`#++ `"+.`1%( %*#`,,(%0%+*/

-1%'(5K` +3!2!.L`%0`%/`.1%(`0+`'*+3`$+3`0$!`%*0!.*(/`3+.'/`!"+.!` %*#`0++`)*5
(5!./L`* `0$0`%/`3$5`3!`/0.0! `3%0$`0$!`)*1(`,.+!//`!"+.!`(!.*%*#`!40K&/K

!`$2!`(++'! `0`$+3``3+.'/`* `$+3`3!`*`,//`0$!`/00!`".+)`0$!`/!.2!.`0+`0$!

(%!*0K`+3`0$0`0$!`/!`+*!,0/`.!`(!.L`3!`*`)+2!`0+``0++(`0$0`$% !/``(%00(!`%0`+"
+),(!4%05`* `)'!/`1/`3.%0!`(!//`+ !`0+`$%!2!`0$!`/)!`.!/1(0/K

!`3%((`.!0!`0$!`/)!`,,`3$!.!`((`0$!`#%/0/`".+)`*`.)+2`.!`(+ ! L`* `5+1

3%((`/!!`$+3`(!*`* `/%),(!`0$!`+ !`%/`0$*'/`0+`!40K&/K

%./0`+"`((L`(!0W/`)+2!`%*0+`*`!),05`"+( !.`* `.!0!``*!3`,.+&!0M

QSPLQLW

$!*`0$%/`%/` +*!L`3!`*`%*/0((`0$!`!40K&/`(%..5`* `!0M

QSPLQVWDOOQH[WUHDFWUHDFWGRP

+3`0$0`0$!`,.+&!0`%/`.!0! L`3!`$2!`0+` `*`npm`/.%,0`0+`.1*`0$!`%*.5M

"VFULSWV": {
"GHY": "next"
}

!."!0L`%0`%/`*+3`0%)!`0+`#!*!.0!`+1.`App`+),+*!*0K

!40K&/`%/`/! `+*`+*2!*0%+*/L`3%0$`0$!`)+/0`%),+.0*0`+*!`!%*#`0$0`5+1`*`.!0!
,#!/`0+`)0$`0$!`.+3/!.`/K`$!` !"1(0`,#!`%/`indexL`/+`3!`*`.!0!``"+( !.
((! `pages`* `,10`*`index.js`"%(!`%*/% !`%0K

S`97;`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

!`/0.0`%),+.0%*#`0$!` !,!* !*%!/M

LPSRUW React IURP 'react';
LPSRUW fetch IURP 'isomorphic-fetch';

#%*L`3!`%),+.0`isomorphic-fetch`!1/!`3!`3*0`0+`!`(!`0+`1/!`0$!`fetch
"1*0%+*`+*`0$!`/!.2!.`/% !K

!`0$!*` !"%*!``(//`((! `AppL`3$%$`%*$!.%0/`".+)`React.ComponentM

FODVV App H[WHQGV Component

*/% !`0$!`(//L`3!` !"%*!``static async`"1*0%+*L`((! `getInitialPropsL`3$%$`%/

3$!.!`3!`0!((`!40K&/`3$%$` 0`3!`3*0`0+`(+ L`+0$`+*`0$!`/!.2!.`* `+*`0$!`(%!*0K`$!`
(%..5`3%((`)'!`0$!`+&!0`.!01.*! `".+)`0$!`"1*0%+*`2%((!`/`,.+,/`%*/% !`0$!
+),+*!*0K

$!`static`* `async`'!53+. /`,,(%! `0+``(//`)!0$+ `)!*`0$0`0$!`"1*0%+*`*`!

!//! `+10/% !`0$!`%*/0*!`+"`0$!`(//`* `0$0`0$!`"1*0%+*`5%!( /`0$!`!4!10%+*`+"`0$!
wait`%*/0.10%+*/`%*/% !`%0/`+ 5K

$!/!`+*!,0/`.!`,.!005` 2*! L`* `0$!5`.!`*+0`,.0`+"`0$!`/+,!`+"`0$%/`$,0!.L`10`%"

5+1`.!`%*0!.!/0! `%*`0$!)L`5+1`/$+1( `$!'`+10`0$!`.%,0`,.+,+/(/`Qhttps:/b/
github.bcom/btc39/bproposalsRK

$!`%),(!)!*00%+*`+"`0$!`)!0$+ `3!`&1/0` !/.%! `%/`/`"+((+3/M

VWDWLFDV\QF getInitialProps() {
FRQVW url = 'https://api.github.com/users/gaearon/gists';
FRQVW response = DZDLW fetch(url);
FRQVW gists = DZDLW response.MVRQ();
UHWXUQ {
gists
};
};

!`.!`0!((%*#`0$!`"1*0%+*`0+`"%.!`0$!`"!0$`* `3%0`"+.`0$!`.!/,+*/!N`0$!*`3!`.!
0.*/"+.)%*#`0$!`.!/,+*/!`%*0+` L`3$%$`.!01.*/``,.+)%/!K`$!*`0$!`,.+)%/!`%/
.!/+(2! L`3!`*`.!01.*`0$!`props`+&!0`3%0$`0$!`gistsK

$!`render`)!0$+ `+"`0$!`+),+*!*0`(++'/`,.!005`/%)%(.`0+`0$!`,.!! %*#`+*!M

UHQGHU() {
UHWXUQ (
XO!
{this.props.gists.PDS(gist => (

S`97<`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

OLNH\={gist.id}!{gist.GHVFULSWLRQ}OL!
))}
XO!
);
}

+3!2!.L`%0`1/!/`this.props.gists`!1/!`3!`.!`%*/% !``(//`%*/0*!K

%*((5L`3!` !"%*!`PropTypesL`/`5+1`/$+1( `(35/` +`3$!*`.!0%*#`+),+*!*0/M

App.SURS7\SHV = {
JLVWV: array
};

$!*`3!`!4,+.0`0$!`+),+*!*0M
H[SRUWGHIDXOW App;

+3L`+,!*`0$!`+*/+(!`* `.1*`0$!`"+((+3%*#M
QSPUXQGHY

!`3%((`/!!`0$!`"+((+3%*#`+10,10M
!5HDG\RQKWWSORFDOKRVW

"`3!`,+%*0`0$!`.+3/!.`0+`0$0`L`3!`*`/!!`0$!`*%2!./(`,,(%0%+*`%*`0%+*K

0`%/`.!((5`%),.!//%2!`$+3`!/5`%0`%/`0+`/!0`1,``*%2!./(`,,(%0%+*`3%0$``"!3`(%*!/`+"
+ !`* `6!.+`+*"%#1.0%+*L`0$*'/`0+`!40K&/K

+1`)5`(/+`*+0%!`0$0`%"`5+1`! %0`0$!`,,(%0%+*`%*/% !`5+1.`! %0+.L`5+1`3%((`!`(!`0+

/!!`0$!`.!/1(0/`3%0$%*`0$!`.+3/!.`%*/0*0(5`3%0$+10`*!! %*#`0+`.!".!/$`0$!`,#!K`$0`%/
*+0$!.`"!01.!`+"`!40K&/L`3$%$`!*(!/`$+0`)+ 1(!`.!,(!)!*0K` 0`%/`%*.! %(5`1/!"1(`%*
!2!(+,)!*0`)+ !K

"`5+1`(%'! `0$%/`$,0!.L`#+`* `#%2!`0$!)``/0.`+*` %0 1M`https:/b/bgithub.bcom/bzeit/

next.bjs.b

S`97=`T
!.2!._% !`!* !.%*#`"+.`1*`* `.+"%0 $,0!.`?

6XPPDU\
$!`&+1.*!5`0$.+1#$`/!.2!._/% !`.!* !.%*#`$/`+)!`0+`*`!* K`+1`.!`*+3`(!`0+`.!0!`
/!.2!._/% !`.!* !.! `,,(%0%+*`3%0$`!0L`* `%0`/$+1( `!`(!.`3$5`%0`*`!`1/!"1(`"+.
5+1K``%/`!.0%*(5`+*!`+"`0$!`)%*`.!/+*/L`10`/+%(`/$.%*#`* `,!."+.)*!`.!
%),+.0*0`"0+./`/`3!((K

+1`(!.*! `$+3`%0`%/`,+//%(!`0+`(+ `0$!` 0`+*`0$!`/!.2!.`* ` !$5 .0!`%0`%*`0$!` 

0!),(0!`0+`)'!`%0`2%((!`"+.`0$!`(%!*0_/% !`,,(%0%+*`3$!*`%0`++0/`+*`0$!`.+3/!.K

%*((5L`5+1`$2!`(++'! `0`$+3`0++(/`/1$`/`!40K&/`*`$!(,`5+1`.! 1!`0$!`+%(!.,(0!

* `$% !`/+)!`+"`0$!`+),(!4%05`0$0`/!00%*#`1,``/!.2!._/% !`.!* !.`!0`,,(%0%+*
1/1((5`.%*#/`0+`0$!`+ !`/!K

*`0$!`*!40`$,0!.L`3!`3%((`0('`+10`$+3`0+`%),.+2!`0$!`,!."+.)*!`%*`+1.`!0
,,(%0%+*/K

S`97>`T
 
,PSURYHWKH3HUIRUPDQFHRI
<RXU$SSOLFDWLRQV
$!`!""!0%2!`,!."+.)*!`+"``3!`,,(%0%+*`%/`.%0%(`0+`,.+2% %*#``#++ `1/!.
!4,!.%!*!`* `%),.+2%*#`+*2!./%+*/K`$!`!0`(%..5`%),(!)!*0/` %""!.!*0`0!$*%-1!/
0+`.!* !.`+1.`+),+*!*0/`"/0`* `0+`0+1$`0$!`+1)!*0`&!0`+ !(`QR`/`(%00(!`/
,+//%(!K`,,(5%*#`$*#!/`0+`0$!``%/`1/1((5`!4,!*/%2!`* `/+`)%*%)%6%*#`0$!
*1)!.`+"`+,!.0%+*/`%/`.1%(K

+3!2!.L`0$!.!`.!`/+)!`,.0%1(.`/!*.%+/`3$!.!`!0`**+0`+,0%)%6!`0$!`,.+!//L`*
%0W/`1,`0+`0$!` !2!(+,!.`0+`%),(!)!*0`/,!%"%`/+(10%+*/`0+`)'!`0$!`,,(%0%+*`.1*
/)++0$(5K

*`0$%/`$,0!.L`3!`3%((`#+`0$.+1#$`0$!`/%`+*!,0/`+"`!0`* `3!`3%((`(!.*`$+3`0+`1/!
/+)!` /`0+`$!(,`0$!`(%..5`"%* `0$!`+,0%)(`,0$`0+`1, 0!`0$!``3%0$+10
!#. %*#`0$!`1/!.`!4,!.%!*!K`!`3%((`(/+`/!!`/+)!`+))+*`)%/0'!/`0$0`*`$.)`+1.
,,(%0%+*/`* `)'!`0$!)`/(+3!.K

$.+1#$`0$!`/%),(!`!4),(!/`%*`0$%/`$,0!.L`5+1`3%((`(!.*`+10`0$!`0++(/`0$0`3!`*
%),+.0`%*0+`+1.`+ !`/!`0+`)+*%0+.`,!."+.)*!`* `"%* `+00(!*!'/K`!`3%((`(/+`/!!
$+3`%))10%(%05`* `PureComponent`.!`0$!`,!."!0`0++(/`0+`1%( `"/0`!0
,,(%0%+*/K

!`/$+1( `2+% `+,0%)%6%*#`+1.`+),+*!*0/`"+.`0$!`/'!`+"`%0L`* `%0`%/`%),+.0*0`0+`,,(5

0$!`0!$*%-1!/`0$0`3!`3%((`/!!`%*`0$!`"+((+3%*#`/!0%+*/`+*(5`3$!*`0$!5`.!`*!! ! K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M

+3`.!+*%(%0%+*`3+.'/`* `$+3`3!`*`$!(,`!0` +``!00!.`&+`1/%*#`0$!

'!5/
+3`1/%*#`0$!`,.+ 10%+*`2!./%+*`+"`!0`)'!/`0$!`(%..5`"/0!.
$0`shouldComponentUpdate`* `PureComponent`*` +`"+.`1/`* `$+3`0+
1/!`0$!)
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

+))+*`+,0%)%60%+*`0!$*%-1!/`* `+))+*`,!."+.)*!_.!(0! `)%/0'!/

$0`%0`)!*/`0+`1/!`%))10(!` 0`* `$+3`0+` +`%0
/!"1(`0++(/`* `(%..%!/`0+`)'!`+1.`,,(%0%+*/`.1*`"/0!.

5HFRQFLOLDWLRQ
+/0`+"`0$!`0%)!L`!0`%/`"/0`!*+1#$`5` !"1(0`* `5+1` +`*+0`*!! `0+` +`*50$%*#`)+.!
0+`%),.+2!`0$!`,!."+.)*!`+"`5+1.`,,(%0%+*K`!0`10%(%6!/` %""!.!*0`0!$*%-1!/`0+
+,0%)%6!`0$!`.!* !.%*#`+"`0$!`+),+*!*0/`+*`0$!`/.!!*K

$!*`!0`$/`0+` %/,(5``+),+*!*0L`%0`((/`%0/`render`)!0$+ `* `0$!`render

)!0$+ /`+"`%0/`$%( .!*`.!1./%2!(5K`$!`render`)!0$+ `+"``+),+*!*0`.!01.*/``0.!!`+"
!0`!(!)!*0/L`3$%$`!0`1/!/`0+` !% !`3$%$``+,!.0%+*/`$2!`0+`!` +*!`0+
1, 0!`0$!` K

$!*!2!.``+),+*!*0`/00!`$*#!/L`!0`((/`0$!`render`)!0$+ `+*`0$!`*+ !/`#%*L

* `%0`+),.!/`0$!`.!/1(0`3%0$`0$!`,.!2%+1/`0.!!`+"`!0`!(!)!*0/K`$!`(%..5`%/`/).0
!*+1#$`0+`"%#1.!`+10`0$!`)%*%)1)`/!0`+"`+,!.0%+*/`.!-1%.! `0+`,,(5`0$!`!4,!0! `$*#!/
+*`0$!`/.!!*K`$%/`,.+!//`%/`((! `.!+*%(%0%+*L`* `%0`%/`)*#! `0.*/,.!*0(5`5
!0K`$*'/`0+`0$0L`3!`*`!/%(5` !/.%!`$+3`+1.`+),+*!*0/`$2!`0+`(++'`0``#%2!*
,+%*0`%*`0%)!`%*`` !(.0%2!`35`* `(!0`0$!`(%..5` +`0$!`.!/0K

!0`0.%!/`0+`,,(5`0$!`/)((!/0`,+//%(!`*1)!.`+"`+,!.0%+*/`+*`0$!``!1/!
0+1$%*#`0$!``%/`*`!4,!*/%2!`+,!.0%+*K

+3!2!.L`+),.%*#`03+`0.!!/`+"`!(!)!*0/`%/`*+0`".!!`!%0$!.L`* `!0`)'!/`03+
//1),0%+*/`0+`.! 1!`%0/`+),(!4%05M

"`03+`!(!)!*0/`$2!`` %""!.!*0`05,!L`0$!5`.!* !.`` %""!.!*0`0.!!K

!2!(+,!./`*`1/!`'!5/`0+`).'`$%( .!*`/`/0(!`.+//` %""!.!*0`.!* !.`((/K

$!`/!+* `,+%*0`%/`%*0!.!/0%*#`".+)`` !2!(+,!.`,!./,!0%2!`!1/!`%0`#%2!/`1/``0++(`0+

$!(,`!0`.!* !.`+1.`2%!3/`"/0!.K

5` !"1(0L`3$!*`+)%*#`'`+*`0$!`$%( .!*`+"```*+ !L`+0$`0$!`(%/0/`+"`$%( .!*`.!

%0!.0! `5`!0`0`0$!`/)!`0%)!K`* `3$!*!2!.`0$!.!`%/`` %""!.!*!`%0`.!0!/``)100%+*K

S`97@`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

!0W/`/!!`/+)!`!4),(!/K`+*2!.0%*#`!03!!*`0$!`"+((+3%*#`03+`0.!!/`3%((`3+.'`3!((L`3$!*
 %*#`*`!(!)!*0`0`0$!`!* `+"`0$!`$%( .!*K
XO!
OL!CarlosOL!
OL!JavierOL!
XO!

XO!
OL!CarlosOL!
OL!JavierOL!
OL!JonaOL!
XO!

$!`03+`<li>Carlos</li>`0.!!/L`)0$`0$!`03+`<li>Javier</li>`0.!!/L`5`!0`*
0$!*`%0`3%((`%*/!.0`0$!`<li>Jona</li>`0.!!K

*/!.0%*#`*`!(!)!*0`0`0$!`!#%**%*#`$/`3+./!`,!."+.)*!L`%"`%),(!)!*0! `*%2!(5K` "`3!

(++'`0`0$!`!4),(!L`%0`3+.'/`2!.5`,++.(5`3$!*`+*2!.0%*#`!03!!*`0$+/!`03+`0.!!/K
XO!
OL!CarlosOL!
OL!JavierOL!
XO!

XO!
OL!JonaOL!
OL!CarlosOL!
OL!JavierOL!
XO!

2!.5`$%( `3%((`!`)100! `5`!0L`%*/0! `+"`%0`.!(%6%*#`0$0`%0`*`'!!,`0$!`/10.!!/

(%*!`<li>Carlos</li>`* `<li>Javier</li>`%*00K`$%/`*`,+//%(5`!`*`%//1!

.H\V
$%/`,.+(!)`*`+"`+1./!`!`/+(2! `* `0$!`35`"+.`0$%/`%/`0$!`key`00.%10!`3$%$`%/
/1,,+.0! `5`!0K`$%( .!*`,+//!/`'!5/`* `0$!/!`'!5/`.!`1/! `5`!0`0+`)0$
$%( .!*`!03!!*`0$!`/1/!-1!*0`0.!!`* `0$!`+.%#%*(`0.!!K`$!`0.!!`+*2!./%+*`*`!
) !`!""%%!*0`5` %*#``'!5`0+`+1.`,.!2%+1/`!4),(!M
XO!
OLNH\ !CarlosOL!
OLNH\ !JavierOL!
XO!

S`987`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

XO!
OLNH\ !JonaOL!
OLNH\ !CarlosOL!
OLNH\ !JavierOL!
XO!

!0`*+3`'*+3/`0$0`2017`'!5`%/`0$!`*!3`+*!`* `0$!`2018`* `2019`'!5/`$2!`&1/0

)+2! K

%* %*#``'!5`%/`*+0`$. K`$!`!(!)!*0`0$0`5+1`3%((`!` %/,(5%*#`)%#$0`(.! 5`$2!`

1*%-1!` K`+`0$!`'!5`*`&1/0`+)!`".+)`5+1.` 0M
OLNH\={element.LG}!{element.WLWOH}OL!

`*!3` `*`!` ! `0+`5+1.`)+ !(`5`5+1`+.`0$!`'!5`*`!`#!*!.0! `5`/+)!`,.0/`+"

0$!`+*0!*0K`$!`'!5`$/`0+`+*(5`!`1*%-1!`)+*#`%0/`/%(%*#/L`%0` +!/`*+0`$2!`0+`!`1*%-1!
#(+((5K

*`%0!)`%* !4`%*`0$!`..5`*`!`,//! `/``'!5L`10`%0`%/`*+3`+*/% !.! `/``

,.0%!K`10`%"`0$!`%0!)/`.!`*!2!.`.!+. ! `0$%/`*`3+.'`3!((K`$!`.!+. !./`3%((`/!.%+1/(5
""!0`0$!`,!."+.)*!K

"`5+1`.!`.!* !.%*#`)1(0%,(!`%0!)/`1/%*#``map`"1*0%+*`* `5+1` +*W0`/,!%"5`0$!`'!5

,.+,!.05L`5+1`3%((`#!0`0$%/`)!//#!`.*%*#M`$`$%( `%*`*`..5`+.`%0!.0+.`/$+1(
$2!``1*%-1!`X'!5X`,.+,K`

2SWLPL]DWLRQWHFKQLTXHV
0`%/`%),+.0*0`0+`*+0%!`0$0L`%*`((`0$!`!4),(!/`%*`0$%/`++'L`3!`.!`1/%*#`,,/`0$0`$2!
!%0$!.`!!*`.!0! `3%0$`create-react-app`+.`$2!`!!*`.!0! `".+)`/.0$L`10`(35/
3%0$`0$!` !2!(+,)!*0`2!./%+*`+"`!0K

/%*#`0$!` !2!(+,)!*0`2!./%+*`+"`!0`%/`2!.5`1/!"1(`"+.`+ %*#`* ` !1##%*#`/`%0`#%2!/

5+1`((`0$!`*!!//.5`%*"+.)0%+*`0+`"%4`0$!`2.%+1/`%//1!/K` +3!2!.L`((`0$!`$!'/`*
3.*%*#/`+)!`3%0$``+/0L`3$%$`3!`3*0`0+`2+% `%*`,.+ 10%+*K

+L`0$!`2!.5`"%./0`+,0%)%60%+*`0$0`3!`/$+1( ` +`0+`+1.`,,(%0%+*/`%/`0+`1%( `0$!`1* (!L

/!00%*#`0$!`NODE_ENV`!*2%.+*)!*0`2.%(!`0+`productionK`$%/`%/`,.!005`!/5
3%0$`3!,'`* `%0`%/`&1/0``)00!.`+"`1/%*#`DefinePlugin`%*`0$!`"+((+3%*#`35M
QHZ webpack.'HILQH3OXJLQ({
'SURFHVVHQY': {
12'(B(19: JSON.VWULQJLI\('production')

S`988`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

}
})

+`$%!2!`0$!`!/0`,!."+.)*!L`3!`*+0`+*(5`3*0`0+`.!0!`0$!`1* (!`3%0$`0$!
,.+ 10%+*`"(#`0%20! L`10`3!`(/+`3*0`0+`/,(%0`+1.`1* (!/M`+*!`"+.`+1.`,,(%0%+*
* `+*!`"+.`+1.`node_modulesK`+` +`/+L`5+1`*!! `0+`1/!`0$!`*!3`+,0%)%60%+*`*+ !`%*
3!,'`;M
RSWLPL]DWLRQ: {
VSOLW&KXQNV: {
FDFKH*URXSV: {
GHIDXOW: false,
FRPPRQV: {
WHVW: /node_modules/,
QDPH: 'vendor',
FKXQNV: 'all'
}
}
}
}

+3L`3!,'`;`$/`03+`)+ !/— !2!(+,)!*0`* `,.+ 10%+*K`5` !"1(0L`0$!`,.+ 10%+*

)+ !`%/`!*(! L`)!*%*#`0$!`+ !`3%((`!`)%*%"%! `* `+),.!//! `3$!*`5+1`+),%(!
5+1.`1* (!/`1/%*#`0$!`,.+ 10%+*`)+ !N`5+1`*`/,!%"5`%0`3%0$`0$%/M
{
PRGH: process.env.12'(B(19 === 'production'  'production' :
'development',
}

+1.`webpack.config.js`"%(!`/$+1( `(++'`(%'!`0$%/M
PRGXOH.exports = {
HQWU\: './index.js',
RSWLPL]DWLRQ: {
VSOLW&KXQNV: {
FDFKH*URXSV: {
GHIDXOW: false,
FRPPRQV: {
WHVW: /node_modules/,
QDPH: 'vendor',
FKXQNV: 'all'
}
}
}
},
SOXJLQV: [
QHZ webpack.'HILQH3OXJLQ({

S`989`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

SURFHVVHQY : {
12'(B(19: JSON.VWULQJLI\('production')
}
})
],
PRGH: process.env.12'(B(19 === 'production'  'production' :
'development'
}

VKRXOG&RPSRQHQW8SGDWH
+.`)*5` !2!(+,!./L`0$!`35`0$!`.!+*%(!.`(#+.%0$)`3+.'/`%/`+*"1/%*#K`$!5`+"0!*
0$%*'`0$0`/%*!`!0`%/`/).0`!*+1#$`0+`"%* `+10`0$!`/$+.0!/0`,0$`0+`,,(5`0$!`$*#!/`0+
0$!`L`0$!`render`)!0$+ /`+"`0$!`+),+*!*0/`0$0`.!`*+0`$*#! ` +`*+0`!2!.`#!0
((! K`$0W/`1*"+.01*0!(5`".`".+)`!%*#`0.1!K

*`"0L`0+`"%* `+10`0$!`*!!//.5`/0!,/`0+`.! 1!`0$!``+,!.0%+*/L`!0`$/`0+`"%.!`0$!

render`)!0$+ /`+"`((`0$!`+),+*!*0/`* `+),.!`0$!`.!/1(0/`3%0$`0$!`,.!2%+1/`+*!/K

"`*+0$%*#`$*#!/L`*+`$*#!/`3%((`!`) !`%*`0$!`L`3$%$`%/`#.!0K`10`%"`+1.`render
)!0$+ /` +`+),(!4`+,!.0%+*/L`!0`3%((`0'!`/+)!`0%)!`0+`"%#1.!`+10`0$0`*+`+,!.0%+*/
$2!`0+`!` +*!L`3$%$`%/`*+0`+,0%)(K

!`/1.!(5`3*0`+1.`+),+*!*0/`0+`!`/%),(!L`* `3!`/$+1( `2+% ` +%*#`!4,!*/%2!

+,!.0%+*/`%*/% !`0$!`.!* !.!.K` +3!2!.L`/+)!0%)!/`3!`/%),(5`**+0`)*#!`0$%/`*
+1.`,,(%0%+*/`!+)!`/(+3L`!2!*`%"`0$!``%/`*+0`0+1$! `0`((K

!0`%/`*+0`(!`0+`"%#1.!`+10`3$%$`+),+*!*0/` +`*+0`*!! `0+`!`1, 0! L`10`3!`$2!`

"1*0%+*`0$0`3!`*`%),(!)!*0`0+`0!((`0$!`(%..5`3$!0$!.`0+`1, 0!``+),+*!*0`+.`*+0K

$!`)!0$+ `%/`((! `shouldComponentUpdateL`* `%"`%0`.!01.*/`falseL`0$!`+),+*!*0

* `((`%0/`$%( .!*W/`render`)!0$+ /`.!`*+0`((! ` 1.%*#`*`1, 0!`+"`%0/`,.!*0/K

!0W/`.!0!``List`+),+*!*0`0+`1* !./0* `0$%/`)!0$+ M

FODVV List H[WHQGV Component

$!`List`+),+*!*0`$/``+*/0.10+.`3$!.!`3!`%*%0%(%6!`0$!`(%/0`* `3!`%* `0$!`!2!*0

$* (!.M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
LWHPV: ['foo', 'bar']

S`98:`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

};
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

!`0$!*` !"%*!`0$!`!2!*0`$* (!.`0$0`,,!* /``*!3`%0!)`0+`0$!`(%/0`* `/0+.!/`0$!

.!/1(0%*#`..5`%*0+`0$!`stateM
KDQGOH&OLFN() {
FRQVW items = this.state.items.VOLFH();
items.XQVKLIW('baz');
this.VHW6WDWH({
LWHPV
});
}

%*((5L`3!`/,!%"5`0$!`render`)!0$+ `3$!.!`3!`(++,`0$.+1#$`0$!`%0!)/` %/,(5%*#`!2!.5

/%*#(!`!(!)!*0`+"`0$!`(%/0`* ` !(.%*#`button`3%0$`%0/`onClick`!2!*0`$* (!.M
UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.map(item => OLNH\ ^LWHP`!{item}OL!)}
XO!

EXWWRQRQ&OLFN={this.handleClick}!+EXWWRQ!
GLY!
);
}

+3L`0.5`0+` `0$!`"+((+3%*#`+ !`0+`0$!`,.!2%+1/(5`.!0! `(%/0M

VKRXOG&RPSRQHQW8SGDWH() {
UHWXUQ false;
}

+1`*`/!!`0$0`(%'%*#`+*`0$!`B`100+*`$/`*+`!""!0`3$0/+!2!.`+*`0$!`,,(%0%+*`%*/% !
0$!`.+3/!.L`!2!*`0$+1#$`0$!`/00!`$*#!/K`$0`%/`!1/!`3!`.!`0!((%*#`!0`0$0`0$!
+),+*!*0` +!/`*+0`*!! `0+`!`1, 0! K

!01.*%*#`false`((`0$!`0%)!`%/`".`".+)`1/!"1(L`* `/+` !2!(+,!./`1/1((5`$!'`%"`0$!

,.+,/`+.`0$!`/00!`.!`$*#! `%*/% !`0$0`)!0$+ K

S`98;`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

*`0$!`/!`+"`ListL`"+.`!4),(!L`3!`/$+1( `$!'`%"`0$!`items`..5`$/`!!*`)+ %"%! `+.

*+0L`* `.!01.*``2(1!`+. %*#(5K

$!`shouldComponentUpdate`)!0$+ `,//!/`03+`,.)!0!./`0$0`3!`*`1/!`0+
%),(!)!*0`0$+/!`$!'/L`0$!`"%./0`,.)!0!.`.!,.!/!*0/`nextProps`3$%(!`0$!`/!+*
,.)!0!.`.!,.!/!*0/``nextStateK

*`+1.`/!L`3!`+1( ` +`/+)!0$%*#`(%'!`0$%/M
VKRXOG&RPSRQHQW8SGDWH(nextProps, nextState) {
UHWXUQ this.state.LWHPV !== nextState.LWHPV;
}

!`.!01.*`true`+*(5`%"`0$!`%0!)/`.!`$*#! L`3$%(!`3!`/0+,`0$!`.!* !.%*#`%*`*5`+0$!.

/!K`1,,+/!L`"+.`!4),(!L`0$0`List`%/``$%( `+"``+),+*!*0`0$0`#!0/`1, 0!
".!-1!*0(5`10`%0/`/00!` +!/`*+0`""!0`0$!`List`%*`*5`35M`!`*`1/!
shoudlComponentUpdate`0+`0!((`!0`0+`/0+,`.1**%*#`0$!`render`)!0$+ /`".+)`0$0
+),+*!*0`0+`%0/`$%( .!*K

$!'%*#`%"`((`0$!`,.+,/`* `((`0$!`/00!`00.%10!/`.!`$*#! `%/``+.%*#`&+L`* `%0`%/

/+)!0%)!/`$. `0+`)%*0%*`0$!`+),(!4`shouldComponentUpdate`%),(!)!*00%+*/L
!/,!%((5`3$!*`0$!`.!-1%.!)!*0/`$*#!`".!-1!*0(5K

+.`0$0`.!/+*L`!0`#%2!/`1/``/,!%(`+),+*!*0`".+)`3$%$`3!`*`%*$!.%0`* `3$%$
%),(!)!*0/``/$((+3`+),.%/+*`+"`((`0$!`,.+,/`* `0$!`/00!`00.%10!/`"+.`1/K

/%*#`%0`%/`,.!005`/0.%#$0"+.3. N`3!`&1/0`$2!`0+`!40!* `React.PureComponent`%*/0!

+"`React.Component`3$!*`3!`.!0!`+1.`+),+*!*0`(//!/K

0`%/`%),+.0*0`0+`*+0%!`0$0`0$!`/$((+3`+),.%/+*L`/`0$!`*)!`/1##!/0/L` +!/`*+0`$!'
"+.` !!,`* `*!/0! `,.+,!.0%!/`%*`+&!0/L`* `%0`*`/+)!0%)!/`#%2!`1*!4,!0! `.!/1(0/K

0`3+.'/`2!.5`3!((`3%0$`%))10(!` 0`/0.101.!/L`3$%$`3!`3%((`/!!`%*`)+.!` !0%(`(0!.`%*

0$%/`$,0!.K` 0`%/`3+.0$`/5%*#`0$0`,!."+.)%*#`` !!,`+),.%/+*`+"`+),(!4`+&!0/`*
/+)!0%)!/`!`)+.!`!4,!*/%2!`0$*`0$!`render`)!0$+ `%0/!("K

$0`%/`3$5`PureComponent`/$+1( `!`1/! `+*(5`3$!*`%0`%/`*!! ! `* `+*(5`+*!`0$!

,!."+.)*!`$/`!!*`)!/1.! `* `5+1`$2!`"%#1.! `+10`3$%$`+),+*!*0/`.!`0'%*#
0++`)1$`0%)!`0+`!`!4!10! K

S`98<`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

6WDWHOHVVIXQFWLRQDOFRPSRQHQWV
*+0$!.`+*!,0`0$0`%/`/+)!0%)!/`+1*0!.%*01%0%2!`"+.`!#%**!./`%/`0$!`"0`0$0`/00!(!//
+),+*!*0/` +`*+0`#%2!`1/`*5`!*!"%0/`.!#. %*#`,!."+.)*!K

$!5`.!`#.!0`"+.`0$!`)*5`.!/+*/`0$0`3!`/3`%*`Chapter 3L`.!0!`.1(5`!1/(!
+),+*!*0/L`* `"+.`0$!`35`0$!5`)'!`+1.`,,(%0%+*/`/%),(!.`* `!/%!.`0+`.!/+*`+10L
10`0$!5` +`*+0`$2!`Q/`5!0R`*5`%*0!.*(`%),(!)!*00%+*`0$0`)'!/`0$!)`"/0!.K

0`%/`!/5`0+`0$%*'`0$0`0$!5`.!`.!* !.! `-1%'!.`!1/!`0$!5` +`*+0`$2!`*`%*/0*!L`

/00!L`+.`!2!*0`$* (!./L`10`0`0$!`)+)!*0`0$0W/`*+0`0$!`/!K

*`0$!`"101.!L`0$!5`)%#$0`!`+,0%)%6! `Q+. %*#`0+`0$!`!0`0!)RL`10`0+ 5`0$!5

,!."+.)`!2!*`3+./!`!1/!`%0`%/`*+0`,+//%(!`0+`1/!`0$!`shouldComponentUpdate`)!0$+
0$0L`/`3!`$2!`/!!*`!"+.!L`*`$!(,`!0`.!* !.`0$!`0.!!`"/0!.K

&RPPRQVROXWLRQV
!`$2!`/!!*`$+3`1/%*#`PureComponent`*`$!(,`1/`0+`0!((`!0`3$!0$!.``/10.!!`$/`0+
!`.!* !.! `+.`*+0K` "`10%(%6! `%*`0$!`.%#$0`35L`%0`+1( `%),.+2!`0$!`,!."+.)*!`+"`+1.
,,(%0%+*/``(+0K` 0`%/`(/+`%),+.0*0`0+`/0.!//`0$0`%0`/$+1( `!`1/! `+*(5`"0!.`0$!
,,(%0%+*`$/`!!*`)+*%0+.! `* `0$!`+00(!*!'`$/`!!*`"+1* K

$!.!`.!`/+)!`0.%'5`/%010%+*/`3$!.!`!40!* %*#`PureComponent` +!/`*+0`#%2!`0$!

!4,!0! `.!/1(0/N`1/1((5L`0$!`1/!`%/`0$0`+1.`,.+,/`+.`/00!`00.%10!/`.!`$*#%*#`!2!*`%"
3!`0$%*'`0$!5`.!`*+0K`+)!0%)!/`%0`%/`*+0`!/5`0+`"%#1.!`+10`3$%$`,.+,/`.!`1/%*#`0$!
+),+*!*0`0+`.!_.!* !.`+.`3!` +`*+0`'*+3`3$%$`+),+*!*0/`*`!`+,0%)%6!
3%0$`PureComponentK

+/0`+"`0$!`0%)!L`.!"0+.%*#`0$!`+),+*!*0/`* `,100%*#`0$!`/00!`%*`0$!`.%#$0`,(!`*
#.!0(5`//%/0`0$!`+,0%)%60%+*`+"`0$!`,,(%0%+*K

*`0$%/`/!0%+*L`3!`3%((`(++'`0`/+)!`+))+*`0++(/`* `/+(10%+*/`0+`/+(2!`.!_.!* !.%*#

%//1!/L`"%#1.%*#`+10`3$%$`+),+*!*0/`*`!`+,0%)%6! K`!`3%((`(/+`(++'`0`$+3`0+
.!"0+.`+),(!4`+),+*!*0/`%*0+`/)((`+*!/`0+`$%!2!`!00!.`,!."+.)*!K

S`98=`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

:K\GLG\RXXSGDWH"
$!.!`.!` %""!.!*0`0$%*#/`3!`*` +`0+`"%* `+10`3$%$`+),+*!*0/` +`*+0`*!! `0+`!
1, 0! K`*!`+"`0$!`!/%!/0`%/`0+`%*/0((``0$%. _,.05`(%..5`0$0`*`,.+2% !`0$!
%*"+.)0%+*`10+)0%((5K

%./0`+"`((L`3!`$2!`0+`05,!`0$!`"+((+3%*#`+))* `%*`0$!`0!.)%*(M
QSPLQVWDOOVDYHGHYZK\GLG\RXXSGDWH

* ` `0$!`"+((+3%*#`/*%,,!0`"0!.`0$!`import`/00!)!*0`+"`!0`%*`5+1.`,,K&/M
LPSRUW React IURP 'react';
LI (process.env.12'(B(19 !== 'production') {
FRQVW { whyDidYouUpdate } = UHTXLUH('why-did-you-update');
ZK\'LG<RX8SGDWH(React);
}

!`.!`/%((5`/5%*#`0$0L`%*` !2!(+,)!*0`)+ !L`3!`3*0`0+`(+ `0$!`(%..5`* `,0$

!0`1/%*#`0$!`whyDidYouUpdate`)!0$+ K` 0`%/`%),+.0*0`0+`/5`0$0`0$%/`(%..5`/$+1(
*+0`!`!*(! `%*`,.+ 10%+*K

"`3!`*+3`#+`'`0+`0$!`List`!4),(!`+"`0$!`,.!2%+1/`/!0%+*`* `3!`$*#!`%0``(%00(!`%0L
3!`*`/!!`0$!`(%..5`%*`0%+*K

$!`"%./0`0$%*#`3!`$2!`0+` +`%/`0+`)+ %"5`0$!`render`)!0$+ `/`"+((+3/M

UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.PDS(item => (
,WHP NH\={item} LWHP={item} !
))}
XO!
EXWWRQRQ&OLFN={this.KDQGOH&OLFN}!+EXWWRQ!
GLY!
);
}

*/0! `+"`.!* !.%*#`0$!`/%*#(!`(%/0`%0!)/`%*/% !`0$!`map`"1*0%+*L`3!`.!01.*`

1/0+)`Item`+),+*!*0`0+`3$%$`3!`,//`0$!`1..!*0`%0!)`* `3!`1/!`0$!`'!5`0+`0!((`!0
3$%$`+),+*!*0/`!4%/0! `!"+.!`0$!`1, 0!K

S`98>`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

!`*`*+3`%),(!)!*0`0$!`%0!)`+),+*!*0L`!40!* %*#`React.ComponentM
FODVV Item H[WHQGV Component

0`0$!`)+)!*0L`%0`+*(5`%),(!)!*0/`0$!`render`)!0$+ L`3$%$` +!/`3$0`3!`3!.!` +%*#

%*/% !`0$!`render`)!0$+ `+"`ListM
UHQGHU() {
UHWXUQ (
OL!{this.props.LWHP}OL!
);
}

*`0$!`.+3/!.`+*/+(!L`5+1`*`/!!`0$!`+10,10`".+)`0$!`whyDidYouUpdate`"1*0%+*L`3$%$
0!((/`1/`0$0`3!`*`2+% `.!_.!* !.%*#`/+)!`+),+*!*0/M
,WHPSURSV
Value did not change. Avoidable re-render!
before Object {item: "foo"}
after Object {item: "foo"}

,WHPSURSV
Value did not change. Avoidable re-render!
before Object {item: "bar"}
after Object {item: "bar"}

*`"0L`!2!*`%"`!0` +!/`*+0`0+1$`0$!``"+.`0$!`foo`* `bar`%0!)/L`0$!%.`render

)!0$+ /`.!`/0%((`!%*#`((! `3%0$`0$!`/)!`,.+,/L`3$%$`)'!/`!0`,!."+.)`*
 %0%+*(`&+K`$%/`%/`2!.5`1/!"1(`%*"+.)0%+*`0$0`%/`/+)!0%)!/`*+0`!/5`0+`"%* K

+3L`3!`*`!/%(5`"%4`0$!`%//1!`5`)+ %"5%*#`0$!`extends`/00!)!*0`+"`0$!`Item
+),+*!*0`".+)`extends`* `React.Component`0+M
FODVV Item H[WHQGV PureComponent

"`3!`*+3`+,!*`0$!`.+3/!.`* `.1*`0$!`,,(%0%+*`#%*L`(%'%*#`0$!`B`100+*L`3!`/!!
0$0`*+0$%*#`%/`(+##! `%*0+`0$!`+*/+(!L`3$%$`)!*/`0$0`3!`.!`*+0`.!* !.%*#
*5`Item`"+.`3$%$`0$!`,.+,/`.!`*+0`$*#! K

!#. %*#`,!.!%2! `,!."+.)*!L`0$!.!`%/`*+0`)1$` %""!.!*!`%*`0$%/`/)((`!4),(!L`10`%"

5+1`%)#%*!``%#`,,(%0%+*`0$0`/$+3/`$1* .! /`+"`list`%0!)/L`0$%/`/)((`$*#!`*
.!,.!/!*0``$1#!`3%*K

S`98?`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

&UHDWLQJIXQFWLRQVLQVLGHWKHUHQGHUPHWKRG
+3L`(!0W/`'!!,`+*` %*#`"!01.!/`0+`List`/`3!`3+1( ` +`%*``.!(_3+.( `,,(%0%+*`*
/!!`3$!0$!.L`0`/+)!`,+%*0L`3!`)*#!`0+`.!'`0$!`!*!"%0/`#%2!*`5`PureComponentK

+.`!4),(!L`3!`3*0`0+` ``(%'`!2!*0`$* (!.`+*`!$`%0!)`/+`0$0L`%"`0$!`%0!)`#!0/

(%'! L`3!`(+#`%0/`2(1!`%*0+`0$!`+*/+(!K

$%/`%/`".`".+)`!%*#``1/!"1(`"!01.!`%*``.!(`,,(%0%+*L`10`5+1`*`!/%(5
"%#1.!`+10`$+3L`3%0$``/)((`)+1*0`+"`!""+.0L`5+1`*`.!0!``)+.!`+),(!4`+,!.0%+*`Q"+.
!4),(!L`/$+3%*#``*!3`3%* +3`3%0$`0$!`%0!)W/` 0RK

+` `0$!`(+##%*#`"!01.!L`3!`$2!`0+`,,(5`03+`$*#!/M`+*!`0+`0$!`render`)!0$+ `+"

`List`* `0$!`+0$!.`+*!`0+`0$!`render`)!0$+ `+"`ItemK

!0W/`/0.0`3%0$`0$!`"%./0`+*!M
UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.PDS(item => (
,WHP
NH\={item}
LWHP={item}
RQ&OLFN={() => console.ORJ(item)}
!
))}
XO!
EXWWRQRQ&OLFN={this.KDQGOH&OLFN}!+EXWWRQ!
GLY!
);
}

!` ! `*`onClick`,.+,`0+`0$!`Item`+),+*!*0L`* `3!`/!0`%0`0+``"1*0%+*`0$0L`3$!*

((! L`(+#/`0$!`1..!*0`%0!)`%*0+`0$!`+*/+(!K

+`)'!`%0`3+.'L`3!`$2!`0+` `0$!`(+#%`+*`0$!`Item`+),+*!*0/`/`3!((L`* `3!`*`&1/0

1/!`0$!`onClick`,.+,`/`0$!`onClick`$* (!.`+"`0$!`<li>`!(!)!*0M
UHQGHU() {
UHWXUQ (
OLRQ&OLFN={this.props.RQ&OLFN}!
{this.props.LWHP}

S`98@`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

OL!
);
}

$!`+),+*!*0`%/`/0%((`,1.!L`* `3!`!4,!0`%0`0+`*+0`.!_.!* !.`%"`0$!`2(1!/`$2!`*+0

$*#! `3$!*`baz`%/` ! `0+`0$!`(%/0K

*"+.01*0!(5L`%"`3!`.1*`0$!`+),+*!*0`%*`0$!`.+3/!.L`3!`*+0%!`/+)!`*!3`(+#/`%*
!2++(/K`%./0`+"`((L`0$!`whyDidYouUpdate`(%..5`%/`0!((%*#`1/`0$0`0$!.!`%/``,+//%(5
2+% (!`.!_.!* !.`!1/!`0$!`onClick`"1*0%+*`%/`(35/`0$!`/)!M
,WHPSURSVRQ&OLFN
Value is a function. Possibly avoidable re-render
before onClick() {
return console.log(item);
}
after onClick() {
return console.log(item);
}

,WHPSURSVRQ&OLFN
Value is a function. Possibly avoidable re-render
before onClick() {
return console.log(item);
}
after onClick() {
return console.log(item);
}

$!`.!/+*`!0`0$%*'/`0$0`3!`.!`,//%*#``*!3`"1*0%+*`+*`!2!.5`.!* !.`%/`!1/!`0$!
..+3`"1*0%+*`.!01.*/``*!3(5`.!0! `"1*0%+*`!2!.5`0%)!`%0`%/`%*2+'! L`!2!*`%"`0$!
%),(!)!*00%+*`.!)%*/`0$!`/)!K`$%/`%/``,.!005`+))+*`)%/0'!`3$!*`1/%*#`!0L`*
%0`*`!`!/%(5`"%4! `5`.!"0+.%*#`0$!`+),+*!*0/``%0K

*"+.01*0!(5L`3!`**+0` !"%*!`0$!`(+##%*#`"1*0%+*`+*!`%*`0$!`,.!*0`!1/!`3!`*!! `0+

'*+3`3$%$`$%( `$/`"%.! `%0N`0$0`%/`3$5`.!0%*#`%0`%*/% !`0$!`(++,`/!!)/`0$!`!/0`/+(10%+*K

$0`3!`01((5`$2!`0+` +`%/`)+2!`,.0`+"`0$!`(+#%`%*/% !`0$!`%0!)`0$0`'*+3/`0$!`%0!)

0$0`$/`!!*`(%'! K

!0W/`/!!`0$!`"1((`%),(!)!*00%+*`+"`ItemL`3$%$`!40!* /`PureComponentM
FODVV Item H[WHQGV PureComponent

S`997`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

0`$/`constructorL`3$!.!`3!`%* `0$!`(%'`$* (!.L`3$%$`%/`*+3`,.0`+"`%0/

%),(!)!*00%+*M
FRQVWUXFWRU(props) {
VXSHU(props);
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

*/% !`0$!`handleClick`"1*0%+*L`3!`((`0$!`onClick`$* (!.`0$0`3!`.!!%2!

".+)``propsL`,//%*#`0$!`1..!*0`%0!)`0$0`$/`!!*`(%'! `3%0$%*`0$!`<li>`!(!)!*0M
KDQGOH&OLFN() {
this.props.RQ&OLFN(this.props.LWHP);
}

%*((5L`%*`0$!`render`)!0$+ L`3!`1/!`0$!`*!3`(+(`!2!*0`$* (!.M

UHQGHU() {
UHWXUQ (
OLRQ&OLFN={this.KDQGOH&OLFN}!
{this.props.LWHP}
OL!
);
}

$!`(/0`0$%*#`0+` +`%/`$*#!`0$!`List`+),+*!*0`.!* !.`0+`)'!`%0`*+0`.!01.*``*!3

"1*0%+*`0`!2!.5`/%*#(!`.!* !.L`/`"+((+3/M
UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.PDS(item => (
,WHPNH\={item} LWHP={item} RQ&OLFN={console.ORJ} />
))}
XO!
EXWWRQRQ&OLFN={this.handleClick}!+EXWWRQ!
GLY!
);
}

/`5+1`*`/!!L`3!`.!`,//%*#`0$!`"1*0%+*`3!`3*0! `0+`1/!L`%*`0$%/`/!`console.logL
3$%$`3%((`!`((! `%*/% !`0$!`$%( .!*`3%0$`0$!`.%#$0`,.)!0!.K`+%*#`/+L`0$!`%*/0*!`+"
0$!`"1*0%+*`%*`List`%/`(35/`0$!`/)!`* `%0` +!/`*+0`"%.!`*5`.!_.!* !.%*#K

S`998`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

"`3!`*+3`.1*`0$!`+),+*!*0`%*`0$!`.+3/!.`* `3!`(%'`0$!`B`100+*`0+` `0$!`*!3`%0!)L

3$%$`1/!/`0$!`List`+),+*!*0`0+`.!* !.L`3!`*`/!!`0$0`3!`.!`*+0`3/0%*#`0%)!
*5)+.!K

(/+L`%"`3!`(%'`+*`*5`%0!)`%*`0$!`(%/0L`3!`3%((`/!!`%0/`2(1!`%*`0$!`+*/+(!`/`3!((K

/`*`.)+2`/5/L`%0`%/`*+0``,.+(!)`5`%0/!("`0+`1/!`..+3`"1*0%+*/`%*/% !`0$!
render`)!0$+ `Q+.`!2!*`0+`1/!`bind`0+`2+% `%* %*#`%*`0$!`+*/0.10+.RN`3!`&1/0`$2!`0+
!`.!"1(`* `)'!`/1.!`0$0`%0` +!/`*+0`"+.!`*5`1**!!//.5`.!_.!* !.%*#
3$!*`PureComponent`%/`%*`0%+*K

&RQVWDQWVSURSV
!0W/`'!!,`+*`%),.+2%*#`+1.`(%/0`!4),(!L`* `/!!`3$0`$,,!*/`3$!*`3!` `*!3
"!01.!/K

*`0$%/`/!L`3!`3%((`(!.*`$+3`0+`2+% ``+))+*`!..+.`3$!*`1/%*#`PureComponentL
3$%$`)'!/`%0`(!//`!""!0%2!K

1,,+/!`3!`3*0`0+` ``,.+,`0+`+1.`Item`+),+*!*0L`3$%$`.!,.!/!*0/``(%/0`+"`/001/!/
0$0`0$!`%0!)`*`$2!K`$!.!`.!`)*5`35/`+"`%),(!)!*0%*#`%0L`10`+1.`"+1/`%/`)+.!`+*
0$!`35`3!`,//` +3*`0$!` !"1(0`2(1!/K

$*#!`0$!`render`)!0$+ `+"`0$!`List`+),+*!*0`/`"+((+3/M
UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.PDS(item => (
,WHP
NH\={item}
LWHP={item}
RQ&OLFN={console.ORJ}
VWDWXVHV={['open', 'close']}
/>
))}
XO!
EXWWRQRQ&OLFN={this.handleClick}!+EXWWRQ!
GLY!
);
}

S`999`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

*`0$!`,.!! %*#`+ !L`"+.`!$`ItemL`3!`/!0`0$!`key`* `0$!`item`,.+,`0+`0$!`1..!*0`2(1!

+"`itemK`!`"%.!`console.log`3$!*`0$!`onClick`!2!*0`%/`"%.! `%*/% !`ItemL`* `3!`*+3
$2!``*!3`,.+,L`3$%$`.!,.!/!*0/`0$!`,+//%(!`/001/!/`+"`itemK

+3L`%"`3!`.!* !.`0$!`List`+),+*!*0`%*/% !`0$!`.+3/!.`3!`/!!`"++`* `.`/`1/1(L`*

%"`3!`(%'`0$!`B`100+*`0+` `6L`3!`*+0%!``*!3`)!//#!`%*`0$!`+*/+(!M
,WHPSURSVVWDWXVHV
Value did not change. Avoidable re-render!
before ["open", "close"]
after ["open", "close"]
,WHPSURSVVWDWXVHV
Value did not change. Avoidable re-render!
before ["open", "close"]
after ["open", "close"]

$!`)!//#!`%/`0!((%*#`1/`0$0`!2!*`%"`0$!`2(1!/`%*/% !`0$!`..5`/05`0$!`/)!L`+*`!2!.5
.!* !.`3!`.!`,//%*#``*!3`%*/0*!`+"`0$!`..5`0+`ItemK

$!`.!/+*`!$%* `0$%/`!$2%+.`%/`0$0`((`0$!`+&!0/`.!01.*``*!3`%*/0*!`3$!*`.!0!
* ``*!3`..5`%/`*!2!.`!-1(`0+`*+0$!.L`!2!*`%"`0$!5`+*0%*`0$!`/)!`2(1!/M
[] === []
false

$!.!`%/`(/+``0(!`,.%*0! `+*`0$!`+*/+(!L`3$%$`/$+3/`0$!`0%)!`0$0`!0`%/`3/0%*#
.!* !.%*#`0$!`%0!)/`3%0$`1*$*#! `,.+,/`3$!*`0$!.!`%/`*+`*!! `0+`0+1$`0$!`K

$0`3!`*` +`0+`/+(2!`0$!`%//1!`$!.!`%/`0+`.!0!`0$!`..5`+*!L`* `(35/`,//`0$!`/)!

%*/0*!`0+`!2!.5`.!* !.M
LPSRUW React, { Component } IURP 'react';
LPSRUW Item IURP './Item';

FRQVW statuses = ['open', 'close'];

FODVV List H[WHQGV Component {

FRQVWUXFWRU(props) {
VXSHU(props);

this.VWDWH = {
LWHPV: ['foo', 'bar']
};

this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

S`99:`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

KDQGOH&OLFN() {
FRQVW items = this.state.items.VOLFH();
items.XQVKLIW('baz');

this.VHW6WDWH({
items
});
}

UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.PDS(item => (
,WHP
NH\={item}
LWHP={item}
RQ&OLFN={console.ORJ}
VWDWXVHV={statuses}
/>
))}
XO!
EXWWRQRQ&OLFN={this.KDQGOH&OLFN}!+EXWWRQ!
GLY!
);
}
}

H[SRUWGHIDXOW List;

"`3!`0.5`0$!`+),+*!*0`#%*`%*`0$!`.+3/!.L`3!`/!!`0$0`0$!`+*/+(!`*+3`+*0%*/`*+
)!//#!L`3$%$`)!*/`0$0`0$!`%0!)/` +`*+0`.!_.!* !.`0$!)/!(2!/`1**!!//.%(5`3$!*`0$!
*!3`!(!)!*0`%/` ! K

5HIDFWRULQJDQGJRRGGHVLJQ
*`0$!`(/0`,.0`+"`0$%/`/!0%+*L`3!`3%((`/!!`$+3`3!`*`.!"0+.`*`!4%/0%*#`+),+*!*0`Q+.
!/%#*``*!3`+*!`%*``!00!.`35R`0+`%),.+2!`0$!`,!."+.)*!`+"`+1.`,,(%0%+*K

++.` !/%#*`$+%!/`+"0!*`(! `0+`%//1!/L`* L`%*`0$!`/!`+"`!0L`%"`3!` +`*+0`,10`0$!`/00!

%*`0$!`.%#$0`,(!L`0$!`.%/'`%/`0$0`+1.`+),+*!*0/`.!`#+%*#`0+`.!* !.`)+.!`0$*`*!! ! K

/`3!`/% `!"+.!L`0$%/`%/`*+0``$1#!`,.+(!)`%"``+),+*!*0`.!* !./`%0/!("`)+.!`+"0!*`0$*

*!!//.5K`$!`,.+(!)`!+)!/``.!(`+*!`+*(5`3$!*`3!`)!/1.!`,!."+.)*!`* `.!(%6!
0$0`.!* !.%*#``(+*#`(%/0`+"`%0!)/`)*5`0%)!/`)'!/`0$!`,,(%0%+*`(!//`.!/,+*/%2!K

S`99;`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

$!`+),+*!*0`0$0`3!`.!`#+%*#`0+`.!0!`%/`/%)%(.`0+`0$!`,.!2%+1/`+*!L``0+_ +`(%/0_(%'!
+),+*!*0`3%0$``"+.)`0+`(!0`0$!`1/!./`!*0!.``*!3`%0!)K

/`1/1(L`3!`3%((`/0.0`3%0$``/%`2!./%+*L`* `3!`3%((`+,0%)%6!`%0`/0!,`5`/0!,K

$!`+),+*!*0`%/`((! `Todos`L`3$%$`%/``(//`0$0`%/`extends`* `React.ComponentM

FODVV Todos H[WHQGV Component

*/% !`constructorL`3!`%*%0%(%6!`0$!`/00!`* `%* `0$!`!2!*0`$* (!./M

FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
LWHPV: ['foo', 'bar'],
YDOXH: ''
};
this.KDQGOH&KDQJH = this.handleChange.ELQG(this);
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

$!`state`$/`03+`00.%10!/M

itemsM`$%/`%/`0$!`(%/0`+"`%0!)/`3%0$``+1,(!`+"` !"1(0`2(1!/L`* `%0W/`(/+`0$!

..5`3$!.!`0$!`*!3`%0!)/`3%((`!` !
valueM`$%/`%/`0$!`1..!*0`2(1!`+"`0$!`%*,10`0$0`0$!`1/!./`*`"%((`0+` `*!3
%0!)/

+1`/$+1( `!`*+3`(!`0+`%*"!.`0$!`"1*0%+*(%0%!/`+"`0$!`!2!*0`$* (!./`".+)`0$!%.`*)!/K

!`$2!`handleChange`0$0`%/`"%.! `!2!.5`0%)!``1/!.`05,!/``$.0!.`%*`0$!`"+.)M
KDQGOH&KDQJH({ target: { value } }) {
this.VHW6WDWH({
YDOXH
});
}

/`3!`/3`%*`Chapter 6L`.%0!`+ !`"+.`0$!`.+3/!.L`0$!`onChange`$* (!.`.!!%2!/`0$!

!2!*0`3%0$``0.#!0`,.+,!.05`0$0`.!,.!/!*0/`0$!`%*,10`!(!)!*0L`* `3!`/0+.!`%0/`2(1!`%*/% !
0$!`/00!`0+`+*0.+(`0$!`+),+*!*0K

$!*L`0$!.!`%/`handleClick`0$0`%/`"%.! `3$!*`0$!`1/!./`/1)%0`0$!`"+.)`0+` ``*!3`%0!)M

KDQGOH&OLFN() {
FRQVW items = this.state.items.VOLFH();
items.XQVKLIW(this.state.YDOXH);
this.VHW6WDWH({

S`99<`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

items
});
}

$!`(%'`$* (!.`%/`,.!005`/%)%(.`0+`0$!`,.!2%+1/`+*!`!4!,0`0$0`%0`1/!/`0$!`2(1!`".+)`0$!
/00!`%*/0! `+"``+*/0*0`/0.%*#L`* `%0` /`%0`/`0$!`"%./0`!(!)!*0`+*``+,5`+"`0$!`1..!*0
..5K

%*((5L`3!` !/.%!`+1.`2%!3`%*`0$!`render`)!0$+ M
UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.PDS(item => OLNH\={item}!{item}OL!)}
XO!
GLY!
LQSXW
W\SH="text"
YDOXH={this.state.value}
RQ&KDQJH={this.handleChange}
!
EXWWRQRQ&OLFN={this.handleClick}!+EXWWRQ!
GLY!
GLY!
);
}

!`$2!`0$!`1*+. !.! `(%/0L`3$!.!`3!`(++,`0$.+1#$`0$!`%0!)/`+((!0%+*`* `3!`,.%*0`!2!.5

/%*#(!`%0!)`%*/% !``<li>`!(!)!*0K`$!*`0$!.!`%/`0$!`+*0.+((! `%*,10`"%!( L`* `3!`/!0`%0/
1..!*0`2(1!/`/`3!((`/`(%/0!*`0+`0$!`$*#!`!2!*0K`/0L`10`*+0`(!/0L`0$!.!`%/``B`100+*L
3$%$`3!`1/!`0+`/1)%0`0$!`2(1!`* ` `%0`0+`0$!`..5`+"`%0!)/K

+3L`0$%/`+),+*!*0`3+.'/L`* `%"`3!`.1*`%0`%*/% !`0$!`.+3/!.L`3!W((`/!!`0$!`(%/0`+"`%0!)/

3%0$`0$!`03+` !"1(0`2(1!/`* `0$!`"+.)`0$0`3!`*`1/!`0+` `*!3`%0!)/`0+`0$!`(%/0K`/
/++*`/`3!`(%'`+*`0$!`100+*L`0$!`*!3`%0!)`%/` ! `0+`0$!`0+,`+"`0$!`(%/0K

$!.!`.!`*+`,.0%1(.`,.+(!)/`3%0$`0$%/`+),+*!*0`1*(!//`3!`/0.0` %*#`$1* .! /`+"

%0!)/K`0`0$0`,+%*0L`3!`.!(%6!`0$0`05,%*#`%*0+`0$!`"%!( `!+)!/`(##5K`$!`.!/+*`"+.`0$!
.! 10%+*`%*`,!."+.)*!`/`/++*`/`0$!`*1)!.`+"`%0!)/`#.+3/`%/`0$0`0$!`(%/0`.!_.!* !./
!2!.5`0%)!``1/!.`05,!/`%*`0$!`"%!( K`$!*`3!`1, 0!`0$!`/00!`3%0$`0$!`*!3`2(1!`+"`0$!
+*0.+((! `+),+*!*0L`%*`"0L`!0`((/`0$!`.!* !.`#%*`0+`/!!`%"`0$!`!(!)!*0/`.!
%""!.!*0K

S`99=`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

$!`+*(5`$*#!`%/`0$!`2(1!`+"`0$!`input`!(!)!*0L`* `0$0`%/`#+%*#`0+`!`0$!`+*(5
)100%+*`,,(%! `0+`0$!`N`10L`0+`"%#1.!`+10`3$%$`+,!.0%+*/`.!`*!! ! L`!0`$/`0+
.!* !.`0$!`!*0%.!`+),+*!*0`* `((`%0/`$%( .!*L`* `.!* !.%*#``%#`(%/0`+"`%0!)/`)*5
0%)!/`+2!.`%/`!4,!*/%2!K

+3L`%"`3!`(++'`0`0$!`/00!`+&!0`+"`0$!`+),+*!*0L`%0W/`,.!005`(!.`0$0`%0`%/`*+0`3!((
/0.101.! K` *`"0L`3!`.!`/0+.%*#`0$!`%0!)/`/`3!((`/`0$!`2(1!`+"`0$!`"+.)`"%!( L`3$%$`.!
03+`!*0%.!(5` %""!.!*0`0$%*#/K

1.`#+(`%/`(35/`0+`$2!`+),+*!*0/`0$0` +`+*!`0$%*#`2!.5`3!((L`.0$!.`0$*
+),+*!*0/`3%0$`)1(0%,(!`,1.,+/!/K

$!`/+(10%+*`$!.!`%/`0+`/,(%0`0$!`+),+*!*0`%*0+`/)((!.`+*!/L`!$`+*!`3%0$``(!.
.!/,+*/%%(%05`* `/00!K

!`*!! ``+))+*`,.!*0`!1/!`0$!`+),+*!*0/`.!`.!(0! K` *`"0L`%"`3!` +*W0`3*0`0+

.!_.!* !.`0$!`(%/0`!2!.5`0%)!``1/!.`05,!/`%*`0$!`"%!( L`3!`(/+` +`*+0`3*0`0+`.!* !.`0$!`(%/0
#%*`/`/++*`/`0$!`"+.)`%/`/1)%00! `* `0$!`*!3`%0!)`%/` ! K

+` +`/+L`3!`$*#!`0$!`Todos`+),+*!*0`0+`/0+.!`+*(5`0$!`(%/0`+"`%0!)/L`3$%$`%/`0$!`,.0
+"`0$!`/0+.!`0$0`%/`/$.! `!03!!*`0$!`(%/0`* `0$!`"+.)K

$!*`3!`.!0!``/!,.0!`(%/0`0$0`+*(5`.!!%2!/`0$!`%0!)/`* ``"+.)`0$0`$/`%0/`/00!`"+.
+*0.+((%*#`0$!`%*,10`"%!( K`$!`"%!( `"%.!/``(('`+*`0$!`+))+*`,.!*0`0+`1, 0!`0$!`(%/0
3$!*`0$!`"+.)`%/`/1)%00! K

!0W/`/0.0`$*#%*#`0$!`Todos`+),+*!*0M
FODVV Todos H[WHQGV Component

*`0$!`+*/0.10+.L`3!`*+3` !"%*!`+*(5`0$!` !"1(0`%0!)/`%*/% !`0$!`/00!L`* `3!`%* `

/%*#(!`/1)%0`$* (!.L`3$%$`%/`0$!`(('`+"`0$!`Form`+),+*!*0M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
LWHPV: ['foo', 'bar']
};
this.KDQGOH6XEPLW = this.handleSubmit.ELQG(this);
}

$!`%),(!)!*00%+*`+"`0$!`/1)%0`$* (!.`%/`0$!`/)!`/`3!W2!`/!!*`!"+.!`+*`0$!`(%'
$* (!.M
KDQGOH6XEPLW(value) {
FRQVW items = this.state.items.VOLFH();

S`99>`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

items.XQVKLIW(value);
this.VHW6WDWH({
items
});
}

$!`!4!,0%+*`%/`0$0`%0`.!!%2!/`0$!`2(1!`+"`0$!`*!3`%0!)`/``,.)!0!.`+"`0$!`(('K` 0
0$!*`(+*!/`0$!`..5`* ` /`0$!`2(1!`/`%0/`"%./0`!(!)!*0K`$!*`0$!`..5`%/`1, 0! L`%0
#!0/` ! `'`0+`0$!`/00!K

$!`render`)!0$+ `%/`)1$`(!*!.`*+3L`!1/!`3!`&1/0`.!* !.`03+`1/0+)`+),+*!*0/L

!$`+*!`3%0$`0$!%.`,.+,/M
UHQGHU() {
UHWXUQ (
GLY!
/LVWLWHPV={this.state.LWHPV} !
)RUPRQ6XEPLW={this.handleSubmit} /!
GLY!
);
}

$!`List`+),+*!*0`.!!%2!/`0$!`%0!)/`".+)`0$!`/00!L`* `0$!`Form`.!!%2!/
0$!`handleSubmit`"1*0%+*`/``(('L`* `%0`"%.!/`onSubmit`3$!*`0$!`1/!.`(%'/`0$!`B
100+*K

0`%/`*+3`0%)!`0+`.!0!`0$!`/1+),+*!*0/L`* `3!`3%((`/0.0`".+)`List`&1/0`5`!40.0%*#
0$!`,.0`+"`0$!`+ !`".+)`0$!`,.!2%+1/`render`)!0$+ K

List`*`!`%),(!)!*0! `/``(//L`* `%0`%*$!.%0/`".+)`PureComponent`/+`0$0`%0`#!0/`.!_

.!* !.! `+*(5`3$!*`0$!`%0!)/`.!`$*#! M
FODVV List H[WHQGV PureComponent

$!`render`)!0$+ `%/`,.!005`/%),(!`* `%0`&1/0`(++,/`0$.+1#$`0$!`%0!)/`%*`0$!`..5`0+

#!*!.0!`0$!`(%/0M
UHQGHU() {
UHWXUQ (
XO!
{this.props.items.PDS(item => OLNH\={item}!{item}OL!)}
XO!
);
}

S`99?`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

$!*L`3!`$2!`0$!`Form`+),+*!*0L`3$%$`%/``%0`)+.!`+),(!4`!1/!`%0`$* (!/`0$!
/00!`+"`0$!`+*0.+((! `%*,10`!(!)!*0K` 0`!40!* /`PureComponent`/`3!((`/+`0$0`%0`*!2!.
#!0/`.!_.!* !.! `".+)`0$!`,.!*0`/%*!`0$!`(('`*!2!.`$*#!/M
FODVV Form H[WHQGV PureComponent

!` !"%*!`constructorL`3$!.!`3!`/!0`0$!`%*%0%(`/00!`* `%* `0$!`$*#!`$* (!.`"+.`0$!

+*0.+((! `%*,10M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
YDOXH: ''
};
this.KDQGOH&KDQJH = this.handleChange.ELQG(this);
}

$!`%),(!)!*00%+*`+"`0$!`$*#!`$* (!.`%/`2!.5`/%)%(.`0+`*5`+0$!.`+*0.+((! `%*,10`3!

$2!`/!!*`/+`".M
KDQGOH&KDQJH({ WDUJHW: { YDOXH } }) {
this.VHW6WDWH({
YDOXH
});
}

0`.!!%2!/`0$!`0.#!0`!(!)!*0L`3$%$`%/`+1.`%*,10L`* `/2!/`%0/`2(1!`%*0+`0$!`/00!K

%*((5L`%*`0$!`render`)!0$+ L`3!` !(.!`0$!`!(!)!*0/`0$0`+),+/!`+1.`"+.)M

UHQGHU() {
UHWXUQ (
GLY!
LQSXW
W\SH="text"
YDOXH={this.state.YDOXH}
RQ&KDQJH={this.KDQGOH&KDQJH}
!
EXWWRQ RQ&OLFN={() => this.props.RQ6XEPLW(this.state.YDOXH)}!+
EXWWRQ!
GLY!
);
}

$%/`%*(1 !/`0$!`+*0.+((! `%*,10`"%!( L`3$!.!`3!`/!0`0$!`2(1!L`0$!`$*#!`$* (!.L`*

0$!`B`100+*L`3$%$`"%.!/`0$!`(('`,//%*#`0$!`1..!*0`2(1!K` *`0$%/`/!L`3!`*
#!*!.0!``"1*0%+*`%*/% !``render`!1/!`0$!.!`.!`*+`,1.!`$%( .!*K

S`99@`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

+*!P` "`3!`*+3`.1*`0$!`*!3(5`.!0! `Todos`+),+*!*0`%*`0$!`,#!L`3!`/!!`0$0`0$!

!$2%+.`%/`0$!`/)!`/`!"+.!L`10`0$!`(%/0`* `0$!`"+.)`$2!`03+`/!,.0!`/00!/`* `0$!5
.!* !.`+*(5`3$!*`0$!%.`,.+,/`$*#!K

+.`!4),(!L`%"`3!`0.5`0+` `$1* .! /`+"`%0!)/`%*/% !`0$!`(%/0L`3!`/!!`0$0`0$!

,!."+.)*!`%/`*+0`""!0! `* `0$!`%*,10`"%!( `%/`*+0`(##5K`!W2!`/+(2! ``,!."+.)*!
%//1!`&1/0`5`.!"0+.%*#`0$!`+),+*!*0`* `$*#%*#`0$!` !/%#*``%0`5`/!,.0%*#`0$!
.!/,+*/%%(%0%!/`+..!0(5K

7RROVDQGOLEUDULHV
*`0$!`*!40`/!0%+*L`3!`3%((`#+`0$.+1#$`/+)!`0!$*%-1!/L`0++(/L`* `(%..%!/`0$0`3!
*`,,(5`0+`+1.`+ !`/!`0+`)+*%0+.`* `%),.+2!`0$!`,!."+.)*!K

,PPXWDELOLW\
/`3!`$2!`/!!*L`0$!`)+/0`,+3!."1(`0++(`3!`*`1/!`0+`%),.+2!`0$!`,!."+.)*!`+"`+1.
!0`,,(%0%+*`%/`shouldComponentUpdate`1/%*#`PureComponentK

$!`+*(5`,.+(!)`%/`0$0`PureComponent`1/!/``/$((+3`+),.%/+*`)!0$+ `#%*/0`0$!
,.+,/`* `/00!L`3$%$`)!*/`0$0`%"`3!`,//`*`+&!0`/``,.+,`* `3!`)100!`+*!`+"`%0/
2(1!/L`3!` +`*+0`#!0`0$!`!4,!0! `!$2%+.K

*`"0L``/$((+3`+),.%/+*`**+0`"%* `)100%+*`+*`0$!`,.+,!.0%!/`* `0$!`+),+*!*0/

*!2!.`#!0`.!_.!* !.! L`!4!,0`3$!*`0$!`+&!0`%0/!("`$*#!/K

*!`35`0+`/+(2!`0$%/`%//1!`%/`1/%*#`%))10(!` 0M`0`0$0L`+*!`%0`#!0/`.!0! L`**+0

!`)100! K

+.`!4),(!L`3!`*`/!0`0$!`/00!`%*`0$!`"+((+3%*#`)+ !M
FRQVW obj = this.state.REM;

obj.IRR = 'bar';

this.VHW6WDWH({ obj });

2!*`%"`0$!`2(1!`+"`0$!`foo`00.%10!`+"`0$!`+&!0`%/`$*#! L`0$!`.!"!.!*!`0+`0$!`+&!0`%/
/0%((`0$!`/)!`* `0$!`/$((+3`+),.%/+*` +!/`*+0`.!+#*%6!`%0K

S`9:7`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

$0`3!`*` +`%*/0! `%/`.!0!``*!3`%*/0*!`!2!.5`0%)!`3!`)100!`0$!`+&!0L`/

"+((+3/M
FRQVW obj = Object.DVVLJQ({}, this.state.REM, { IRR: 'bar' });

this.VHW6WDWH({ obj });

*`0$%/`/!L`3!`#!0``*!3`+&!0`3%0$`0$!`foo`,.+,!.05`/!0`0+`bar`L`* `0$!`/$((+3
+),.%/+*`3+1( `!`(!`0+`"%* `0$!` %""!.!*!K

%0$`=`* `!(L`0$!.!`%/`*+0$!.`35`0+`!4,.!//`0$!`/)!`+*!,0`%*``)+.!`!(!#*0
35L`* `%0`%/`5`1/%*#`0$!`+&!0`/,.! `+,!.0+.M
FRQVW obj = {
...this.state.REM,
IRR: 'bar'
};
this.VHW6WDWH({ obj });

$%/`/0.101.!`%/`)+.!`+*%/!`0$*`0$!`,.!2%+1/`+*!L`* `%0`,.+ 1!/`0$!`/)!`.!/1(0N`10L

0`0$!`0%)!`+"`3.%0%*#L`%0`.!-1%.!/`0$!`+ !`0+`!`0.*/,%(! `0+`!`!4!10! `%*/% !`0$!
.+3/!.K

!0`,.+2% !/`/+)!`%))10%(%05`$!(,!./`0+`)'!`%0`!/5`0+`3+.'`3%0$`%))10(!`+&!0/L
* `0$!.!`%/`(/+``,+,1(.`(%..5`((! `immutable.js`L`3$%$`$/`)+.!`,+3!."1(
"!01.!/`10`%0`.!-1%.!/`5+1`0+`(!.*`*!3` /K

%DEHOSOXJLQV
$!.!`.!`(/+``+1,(!`+"`%*0!.!/0%*#`!(`,(1#%*/`0$0`3!`*`%*/0((`* `1/!`0+`%),.+2!
0$!`,!."+.)*!`+"`+1.`!0`,,(%0%+*/K`$!5`)'!`0$!`,,(%0%+*/`"/0!.L`+,0%)%6%*#
,.0/`+"`0$!`+ !`0`1%( _0%)!K

$!`"%./0`+*!`%/`0$!`!0`+*/0*0`!(!)!*0/`0.*/"+.)!.`0$0`"%* /`((`0$!`/00%`!(!)!*0/
0$0` +`*+0`$*#!` !,!* %*#`+*`0$!`,.+,/`* `!40.0/`0$!)`".+)`0$!`render`)!0$+ `Q+.
0$!`"1*0%+*(`/00!(!//`+),+*!*0/R`0+`2+% `((%*#`createElement`1**!!//.%(5K

/%*#``!(`,(1#%*`%/`,.!005`/0.%#$0"+.3. K`!`"%./0`%*/0((`%0`3%0$`npmM
QSPLQVWDOOVDYHGHYEDEHOSOXJLQWUDQVIRUPUHDFWFRQVWDQWHOHPHQWV

S`9:8`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

+1`*!! `0+`.!0!`0$!`.babelrc`"%(!`* ` ``plugins`'!5`3%0$`*`..5`0$0`$/`0$!

2(1!`3%0$`0$!`(%/0`+"`0$!`,(1#%*`0$0`3!`3*0`0+`0%20!M
{
"SOXJLQV": ["transform-react-constant-elements"]
}

$!`/!+* `!(`,(1#%*`3!`*`$++/!`0+`1/!`0+`%),.+2!`,!."+.)*!`%/`0$!`!0`%*(%*!
!(!)!*0/`0.*/"+.)L`3$%$`.!,(!/`((`0$!` ` !(.0%+*/`Q+.`0$!`createElement`((/R
3%0$``)+.!`+,0%)%6! `2!./%+*`+"`0$!)`0+`)'!`!4!10%+*`"/0!.K

*/0((`0$!`,(1#%*`3%0$M
QSPLQVWDOOVDYHGHYEDEHOSOXJLQWUDQVIRUPUHDFWLQOLQHHOHPHQWV

!40L`5+1`*`!/%(5` `0$!`,(1#%*`0+`0$!`..5`+"`,(1#%*/`%*`0$!`.babelrc`"%(!L`/`"+((+3/M
{
"SOXJLQV": ["transform-react-inline-elements"]
}

+0$`,(1#%*/`/$+1( `!`1/! `+*(5`%*`,.+ 10%+*`!1/!`0$!5`)'!` !1##%*#`$. !.`%*

!2!(+,)!*0`)+ !K

6XPPDU\
1.`&+1.*!5`0$.+1#$`,!."+.)*!`%/`"%*%/$! L`* `3!`*`*+3`+,0%)%6!`+1.`,,(%0%+*/`0+
#%2!`1/!./``!00!.`K

*`0$%/`$,0!.L`3!`(!.*! `$+3`0$!`.!+*%(%0%+*`(#+.%0$)`3+.'/`* `$+3`!0`(35/

0.%!/`0+`0'!`0$!`/$+.0!/0`,0$`0+`,,(5`$*#!/`0+`0$!`K`!`*`(/+`$!(,`0$!`(%..5`0+
+,0%)%6!`%0/`&+`5`1/%*#`0$!`'!5/K

*!`5+1W2!`"+1* `5+1.`+00(!*!'/L`5+1`*`,,(5`+*!`+"`0$!`0!$*%-1!/`3!`$2!`/!!*`%*
0$%/`$,0!.`0+`"%4`0$!`%//1!K`*!`+"`0$!`"%./0`0++(/`5+1`*`1/!`%/`0+
!40!* `PureComponent`* `1/!`%))10(!` 0`0+`)'!`5+1.`+),+*!*0`.!_.!* !.`+*(5
3$!*`/0.%0(5`*!! ! K

+*W0`"+.#!0`0+`2+% `0$!`+))+*`)%/0'!/`0$0`)'!`PureComponent`(!//`!""!0%2!L`/1$
/`#!*!.0%*#`*!3`"1*0%+*/`%*/% !`0$!`render`)!0$+ `+.`1/%*#`constant`/`,.+,/K

!`$2!`(!.*! `$+3`.!"0+.%*#`* ` !/%#*%*#`5+1.`+),+*!*0/`/0.101.!`%*`0$!`,.+,!.

35`+1( `,.+2% !``,!."+.)*!`++/0K`1.`#+(`%/`0+`$2!`/)((`+),+*!*0/`0$0` +`+*!
/%*#(!`0$%*#`%*`0$!`!/0`,+//%(!`35K

S`9:9`T
 ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/ $,0!.`@

0`0$!`!* `+"`0$!`$,0!.L`3!`0('! `+10`%))10%(%05L`* `3!W2!`/!!*`3$5`%0W/`%),+.0*0

*+0`0+`)100!` 0`0+`)'!`shouldComponentUpdate`* `/$((+3`+),.!` +`0$!%.`&+K
%*((5L`3!`.*`0$.+1#$` %""!.!*0`0++(/`* `(%..%!/`0$0`*`)'!`5+1.`,,(%0%+*/`"/0!.K

*`0$!`*!40`$,0!.L`3!W((`(++'`0`0!/0%*#`* ` !1##%*#`1/%*#` !/0L`*65)!L`* `!0`!2

++(/K

S`9::`T
 
$ERXW7HVWLQJDQG'HEXJJLQJ
!0L`0$*'/`0+`%0/`+),+*!*0/L`)'!/`%0`!/5`0+`0!/0`+1.`,,(%0%+*/K`$!.!`.!`)*5
%""!.!*0`0++(/`0$0`3!`*`1/!`0+`.!0!`0!/0/`3%0$`!0L`* `$!.!`3!W((`+2!.`0$!`)+/0
,+,1(.`+*!/`0+`1* !./0* `0$!`!*!"%0/`0$!5`,.+2% !K

!/0`%/`*`((_%*_+*!`0!/0%*#`".)!3+.'`/+(10%+*L`)%*0%*! `5`$.%/0+,$!.`+&!.`".+)
!++'`* `+*0.%10+./`3%0$%*`0$!`+))1*%05L`* `%)/`0+`#%2!`5+1`0$!`!/0` !2!(+,!.
!4,!.%!*!K`!`3%((`(++'`0`+0$`35/`+"`1%( %*#`0$!`!/0`0!/0`!*2%.+*)!*0K

5`0$!`!* `+"`0$!`$,0!.L`5+1W((`!`(!`0+`.!0!``0!/0`!*2%.+*)!*0`".+)`/.0$`* `3.%0!

0!/0/`"+.`5+1.`,,(%0%+*W/`+),+*!*0/K

*`0$%/`$,0!.L`3!`3%((`(++'`0`0$!`"+((+3%*#`0+,%/M

$5`%0`%/`%),+.0*0`0+`0!/0`+1.`,,(%0%+*/L`* `$+3`0$%/`$!(,/` !2!(+,!./`)+2!

"/0!.
+3`0+`/!0`1,`` !/0`!*2%.+*)!*0`0+`0!/0`+),+*!*0/`1/%*#`*65)!
$0`*65)!`%/`* `3$5`%0`%/``)1/0_$2!`"+.`0!/0%*#`!0`,,(%0%+*/
+3`0+`0!/0``.!(_3+.( `+),+*!*0
+3`0+`0!/0`!2!*0/
$!`!0` !2!(+,!.`0++(/`* `/+)!`!..+._$* (%*#`0!$*%-1!/
+10`!/0%*#`* `!1##%*# $,0!.`87

7KHEHQHILWVRIWHVWLQJ
!/0%*#`3!` /`$/`(35/`!!*`` %""%1(0`&+K`.+)`1*%0`0+`!* _0+_!* `0!/0/K`$!`"0`0$0
0$!`%*0!."!/` !,!* `+*`.+3/!./L`1/!.`%*0!.0%+*/L`* `)*5`+0$!.`2.%(!/`)'!/`%0
%""%1(0`0+`%),(!)!*0`*`!""!0%2!`0!/0%*#`/0.0!#5K

"`5+1W2!`!2!.`0.%! `0+`3.%0!`!* _0+_!* `0!/0/`"+.`0$!`3!L`5+1W((`'*+3`$+3`+),(!4`%0`%/`0+

#!0`+*/%/0!*0`.!/1(0/`* `$+3`0$!`.!/1(0/`.!`+"0!*`""!0! `5`"(/!`*!#0%2!/` 1!`0+
%""!.!*0`"0+./L`/1$`/`0$!`*!03+.'K`0$!.`0$*`0$0L`1/!.`%*0!."!/`.!`".!-1!*0(5
1, 0! `0+`%),.+2!`0$!`!4,!.%!*!L`)4%)%6!`+*2!./%+*/L`+.`/%),(5` `*!3`"!01.!/K

"`0!/0/`.!`$. `0+`3.%0!`* `)%*0%*L` !2!(+,!./`.!`(!//`,.+*!`0+`+2!.`0$!%.`,,(%0%+*/K

*`0$!`+0$!.`$* L`0!/0/`.!`,.!005`%),+.0*0`!1/!`0$!5`)'!` !2!(+,!./`)+.!`+*"% !*0
3%0$`0$!%.`+ !L`3$%$`%/`.!"(!0! `%*`/,!! `* `-1(%05K` "``,%!!`+"`+ !`%/`3!((`0!/0! `Q*
0!/0/`.!`3!((`3.%00!*RL` !2!(+,!./`*`!`/1.!`0$0`%0`3+.'/`* `%/`.! 5`0+`/$%,K`%)%(.(5L
0$*'/`0+`0!/0/L`%0`!+)!/`!/%!.`0+`.!"0+.`0$!`+ !`!1/!`0!/0/`#1.*0!!`0$0`0$!
"1*0%+*(%0%!/` +`*+0`$*#!` 1.%*#`0$!`.!3.%0!K

!2!(+,!./`0!* `0+`"+1/`+*`0$!`"!01.!`0$!5`.!`1..!*0(5`%),(!)!*0%*#L`* `/+)!0%)!/`%0

%/`$. `0+`'*+3`%"`+0$!.`,.0/`+"`0$!`,,(%0%+*`.!`""!0! `5`0$+/!`$*#!/K`!/0/`$!(,`0+
2+% `.!#.!//%+*/`!1/!`0$!5`*`0!((`%"`0$!`*!3`+ !`.!'/`0$!`+( `0!/0/K` .!0!.
+*"% !*!`%*`3.%0%*#`*!3`"!01.!/`(! /`0+`"/0!.`.!(!/!/K

!/0%*#`0$!`)%*`"1*0%+*(%0%!/`+"`*`,,(%0%+*`)'!/`0$!`+ !`/!`)+.!`/+(% L`*

3$!*!2!.``*!3`1#`%/`"+1* L`%0`*`!`.!,.+ 1! L`"%4! L`* `+2!.! `5`0!/0/`/+`0$0`%0
+!/`*+0`$,,!*`#%*`%*`0$!`"101.!K

1'%(5L`!0`Q* `0$!`+),+*!*0`!.R`)'!/`0!/0%*#`1/!.`%*0!."!/`!/5`* `!""%%!*0K

!/0%*#`+),+*!*0/L`+.`0.!!/`+"`+),+*!*0/L`%/``(!//`. 1+1/`&+`!1/!`!2!.5`/%*#(!`,.0
+"`0$!`,,(%0%+*`$/`%0/`.!/,+*/%%(%0%!/`* `+1* .%!/K

"`+),+*!*0/`.!`1%(0`%*`0$!`.%#$0`35L`%"`0$!5`.!`,1.!`* `%)`"+.`+),+/%(%05`*
.!1/%(%05L`0$!5`*`!`0!/0! `/`/%),(!`"1*0%+*/K

*+0$!.`#.!0`,+3!.`0$0`)+ !.*`0++(/`.%*#`1/`%/`0$!`%(%05`0+`.1*`0!/0/`1/%*#`+ !`*

0$!`+*/+(!K`,%**%*#`1,``.+3/!.`"+.`!2!.5`/%*#(!`0!/0`)'!/`0!/0/`/(+3!.`* `(!//
,.! %0(!L` !#. %*#`0$!` !2!(+,!.`!4,!.%!*!N`%*/0! L`.1**%*#`0$!`0!/0/`1/%*#`0$!
+*/+(!`%/`"/0!.K

!/0%*#`+),+*!*0/`+*(5`%*`0$!`+*/+(!`*`/+)!0%)!/`#%2!`1*!4,!0! `!$2%+./`3$!*
0$!5`.!`.!* !.! `%*``.!(`.+3/!.L`10`%*`)5`!4,!.%!*!`0$%/`%/`..!K

$!*`3!`0!/0`!0`+),+*!*0/L`3!`3*0`0+`)'!`/1.!`0$0`0$!5`3+.'`,.+,!.(5`* `0$0L
#%2!*` %""!.!*0`/!0/`+"`,.+,/L`0$!%.`+10,10`%/`(35/`+..!0K

S`9:<`T
+10`!/0%*#`* `!1##%*# $,0!.`87

!`)5`(/+`3*0`0+`+2!.`((`0$!`2.%+1/`/00!/`0$0``+),+*!*0`*`$2!K`$!`/00!
)%#$0`$*#!`5`(%'%*#``100+*L`/+`3!`3.%0!`0!/0/`0+`$!'`%"`((`0$!`!2!*0`$* (!./`.!
+%*#`3$0`0$!5`.!`/1,,+/! `0+` +K

$!*`((`0$!`"1*0%+*(%0%!/`+"`0$!`+),+*!*0`.!`+2!.! L`10`3!`3*0`0+` +`)+.!L`3!`*

3.%0!`0!/0/`0+`2!.%"5`%0/`!$2%+.`+*`! #!`/!/K` #!`/!/`.!`/00!/`0$0`0$!`+),+*!*0
*`//1)!`3$!*L`"+.`!4),(!L`((`0$!`,.+,/`.!`nullL`+.`0$!.!`%/`*`!..+.K`*!`0$!`0!/0/
.!`3.%00!*L`3!`*`!`,.!005`+*"% !*0`0$0`0$!`+),+*!*0`!$2!/`/`!4,!0! K

!/0%*#``/%*#(!`+),+*!*0`%/`#.!0L`10`%0` +!/`*+0`#1.*0!!`0$0`)1(0%,(!`%* %2% 1((5

0!/0! `+),+*!*0/`3%((`/0%((`3+.'`+*!`0$!5`.!`,10`0+#!0$!.K`/`3!`3%((`/!!`(0!.L`3%0$
!0`3!`*`)+1*0``0.!!`+"`+),+*!*0/`* `0!/0`0$!`%*0!#.0%+*`!03!!*`0$!)K

$!.!`.!` %""!.!*0`0!$*%-1!/`0$0`3!`*`1/!`0+`3.%0!`0!/0/L`* `+*!`+"`0$!`)+/0`,+,1(.

+*!/`%/`0!/0_ .%2!*` !2!(+,)!*0`QRK`,,(5%*#``)!*/`3.%0%*#`0$!`0!/0/`"%./0`*
0$!*`3.%0%*#`0$!`+ !`0+`,//`0$!`0!/0/K

+((+3%*#`0$%/`,00!.*`$!(,/`1/`0+`3.%0!`!00!.`+ !`!1/!`3!`.!`"+.! `0+`0$%*'`)+.!

+10`0$!` !/%#*`!"+.!`%),(!)!*0%*#`0$!`"1*0%+*(%0%!/L`3$%$`1/1((5`(! /`0+`$%#$!.
-1(%05K

3DLQOHVV-DYD6FULSWWHVWLQJZLWK-HVW
$!`)+/0`%),+.0*0`35`0+`(!.*`$+3`0+`0!/0`!0`+),+*!*0/`%*`0$!`.%#$0`35`%/`5`
3.%0%*#`/+)!`+ !L`* `0$0`%/`3$0`3!`.!`#+%*#`0+` +`%*`0$%/`/!0%+*K

$!`!0` +1)!*00%+*`/5/`0$0`0`!++'`0$!5`1/!` !/0`0+`0!/0`0$!%.`+),+*!*0/K

+3!2!.L`!0` +!/`*+0`"+.!`5+1`0+`1/!``,.0%1(.`0!/0`".)!3+.'L`* `5+1`*`1/!
5+1.`"2+.%0!`+*!`3%0$+10`*5`,.+(!)/K

+`/!!` !/0`%*`0%+*L`3!`.!`#+%*#`0+`.!0!``,.+&!0`".+)`/.0$L`%*/0((%*#`((`0$!
!,!* !*%!/`* `3.%0%*#``+),+*!*0`3%0$`/+)!`0!/0/K` 0W((`!`"1*P

$!`"%./0`0$%*#`0+` +`%/`0+`)+2!`%*0+``*!3`"+( !.`* `.1*`0$!`"+((+3%*#M

QSPLQLW

*!`package.json`%/`.!0! L`3!`*`/0.0`%*/0((%*#`0$!` !,!* !*%!/L`3%0$`0$!`"%./0`+*!

!%*#`0$!`jest`,'#!`%0/!("M
QSPLQVWDOOVDYHGHYMHVW

S`9:=`T
+10`!/0%*#`* `!1##%*# $,0!.`87

+`0!((`npm`0$0`3!`3*0`0+`1/!`0$!`jest`+))* `0+`.1*`0$!`0!/0/L`3!`$2!`0+` `0$!

"+((+3%*#`/.%,0/`0+`package.jsonM
"VFULSWV": {
"EXLOG": "webpack",
"VWDUW": "node ./dist/server",
"WHVW": "jest",
"WHVWFRYHUDJH": "jest --coverage"
}

+`3.%0!`+),+*!*0/`* `0!/0/`1/%*#`978<`* ` L`3!`$2!`0+`%*/0((`((`!(_.!(0!

,'#!/`/+`0$0` !/0`*`1/!`0$!)`0+`0.*/,%(!`* `1* !./0* `0$!`+ !K

$!`/!+* `/!0`+"` !,!* !*%!/`%/M

QSPLQVWDOOVDYHGHY#EDEHOFRUH#EDEHOSUHVHWHQY#EDEHOSUHVHWUHDFW
EDEHOMHVW

/`5+1`)5`'*+3L`3!`*+3`$2!`0+`.!0!``.babelrc`"%(!L`3$%$`%/`1/! `5`!(`0+`'*+3
0$!`,.!/!0/`* `0$!`,(1#%*/`0$0`3!`3+1( `(%'!`0+`1/!`%*/% !`0$!`,.+&!0K

$!`.babelrc`"%(!`(++'/`(%'!`0$!`"+((+3%*#M
{
"SUHVHWV": ["@babel/preset-env", "@babel/preset-react"]
}

+3L`%0`%/`0%)!`0+`%*/0((`!0`* `ReactDOML`3$%$`3!`*!! `0+`.!0!`* `.!* !.

+),+*!*0/M
QSPLQVWDOOVDYHUHDFWUHDFWGRP

$!`/!01,`%/`.! 5L`* `3!`*`.1*` !/0`#%*/0`=`+ !`* `.!* !.`+1.`+),+*!*0/`%*0+

0$!`L`10`0$!.!`%/`+*!`)+.!`0$%*#`0+` +K

!`*!! `0+`%*/0((`enzyme`* `enzyme-adapter-react-16.3M

QSPLQVWDOOHQ]\PHHQ]\PHDGDSWHUUHDFW

"0!.`5+1`$2!`%*/0((! `0$!/!`,'#!/L`5+1`$2!`0+` ``jest`+*"%#1.0%+*

0+`package.jsonM
"MHVW": {
"VHWXS)LOHV$IWHU(QY": [
"<rootDir>/jest/setupTestFramework.js"
],
"FROOHFW&RYHUDJH)URP": [

S`9:>`T
+10`!/0%*#`* `!1##%*# $,0!.`87

"src/**/*.{js,jsx}"
]
}

$!*L`(!0W/`.!0!`0$!`jest/setupTestFramework.js`"%(!M
LPSRUW { configure } IURP 'enzyme';
LPSRUW Adapter IURP 'enzyme-adapter-react-16.3';

FRQILJXUH({ DGDSWHU: QHZ Adapter() });

+3L`(!0W/`%)#%*!`3!`$2!``Hello`+),+*!*0M
LPSRUW React IURP 'react';

FRQVW Hello = props => (

KFODVV1DPH "Hello"!Hello {props.QDPH __ 'World'}K!
);

H[SRUWGHIDXOW Hello;

*`+. !.`0+`0!/0`0$%/`+),+*!*0L`3!`*!! `0+`.!0!``"%(!`3%0$`0$!`/)!`*)!`10` %*#`0$!

.test`Q+.`.specR`/1""%4`%*`0$!`"%(!K`$%/`3%((`!`+1.`0!/0`"%(!M

'HSHQGHQFLHV
LPSRUW React IURP 'react';
LPSRUW { shallow } IURP 'enzyme';

&RPSRQHQWWRWHVW
LPSRUW Hello IURP './index';

GHVFULEH('Hello', () => {
FRQVW wrapper = VKDOORZ(+HOOR!);
FRQVW wrapperWithProps = VKDOORZ(+HOOR QDPH="Carlos" !);

LW('should render Home component', () => {

H[SHFW(wrapper.OHQJWK).WR%H(1);
});

LW('should render by default Hello World', () => {

H[SHFW(wrapper.WH[W()).WR%H('Hello World');
});

LW('should render the name prop', () => {

H[SHFW(wrapperWithProps.WH[W()).WR%H('Hello Carlos');
});

LW('should has .Home class', () => {

S`9:?`T
+10`!/0%*#`* `!1##%*# $,0!.`87

H[SHFW(wrapper.ILQG('h1').KDV&ODVV('Hello')).WR%H(true);
});
});

$!*L`%*`+. !.`0+`.1*`0$!`testL`5+1`*!! `0+`!4!10!`0$!`"+((+3%*#`+))* M

QSPWHVW

+1`/$+1( `/!!`0$%/`.!/1(0M

$!`PASS`(!(`)!*/`0$0`((`0!/0/`$2!`!!*`,//! `/1!//"1((5N`%"`5+1`"%(! `0`(!/0`+*

+*!`0!/0L`5+1`3+1( `/!!`0$!`FAIL`(!(K`!0W/`$*#!`+*!`+"`+1.`0!/0/`0+`)'!`%0`"%(M
LW('should render Home component', () => {
H[SHFW(wrapper.length).WR%H();
});

S`9:@`T
+10`!/0%*#`* `!1##%*# $,0!.`87

$%/`%/`0$!`.!/1(0M

/`5+1`*`/!!L`0$!`FAIL`(!(`%/`/,!%"%! `3%0$`*`K`(/+L`0$!`!4,!0! `* `.!!%2!

2(1!/`,.+2% !`1/!"1(`%*"+.)0%+*L`* `5+1`*`/!!`3$%$`2(1!`%/`!4,!0! `* `3$%$
2(1!`%/`!%*#`.!!%2! K

"`5+1`3*0`0+`/!!`0$!`+2!.#!`,!.!*0#!`+"`((`5+1.`1*%0`0!/0/L`5+1`*`!4!10!`0$!
"+((+3%*#`+))* M
QSPUXQWHVWFRYHUDJH

S`9;7`T
+10`!/0%*#`* `!1##%*# $,0!.`87

$!`.!/1(0`%/`0$!`"+((+3%*#M

$!`+2!.#!`(/+`#!*!.0!/`*` `2!./%+*`+"`0$!`.!/1(0N`%0`.!0!/`` %.!0+.5`((!

coverage`* `%*/% !`*+0$!.`((! `Icov-reportK` "`5+1`+,!*`0$!`index.html`"%(!`%*
5+1.`.+3/!.L`5+1`3%((`/!!`0$!` `2!./%+*`(%'!`0$%/M

S`9;8`T
+10`!/0%*#`* `!1##%*# $,0!.`87

7HVWLQJHYHQWV
$!`!2!*0/`.!`2!.5`+))+*`%*`*5`3!`,,(%0%+*`* `3!`*!! `0+`0!/0`0$!)`/`3!((L`/+
(!0W/`(!.*`$+3`0+`0!/0`!2!*0/K`+.`0$%/L`(!0W/`.!0!``*!3`ShowInformation`+),+*!*0M
LPSRUW React, { Component } IURP 'react';

FODVV ShowInformation H[WHQGV Component {

VWDWH = {
QDPH: '',
DJH: 0,
VKRZ: false
};

KDQGOH2Q&KDQJH = ({ WDUJHW: { YDOXH, QDPH } }) => {

this.VHW6WDWH({
[QDPH]: YDOXH
});
}

KDQGOH6KRZ,QIRUPDWLRQ = () => {
this.VHW6WDWH({
VKRZ: true
});
}

UHQGHU() {
LI (this.state.VKRZ) {
UHWXUQ (
GLYFODVV1DPH="ShowInformation"!
K!Personal InformationK!

GLYFODVV1DPH="personalInformation"!
S!VWURQJ!Name:<VWURQJ! {this.state.QDPH}S!
S!VWURQJ!Age:VWURQJ! {this.state.DJH}S!
GLY!
GLY!
);
}
UHWXUQ (
GLYFODVV1DPH="ShowInformation"!
K!Personal InformationK!

S!VWURQJ!Name:VWURQJ!S!

<S!
LQSXW

S`9;9`T
+10`!/0%*#`* `!1##%*# $,0!.`87

QDPH="name"
W\SH="text"
YDOXH={this.state.QDPH}
RQ&KDQJH={this.KDQGOH2Q&KDQJH}
!
S!

S!
LQSXW
QDPH="age"
W\SH="number"
YDOXH={this.state.DJH}
RQ&KDQJH={this.KDQGOH2Q&KDQJH}
!
S!

S!
EXWWRQRQ&OLFN={this.KDQGOH6KRZ,QIRUPDWLRQ}!
Show Information
EXWWRQ!
S!
GLY!
);
}
}

H[SRUWGHIDXOW ShowInformation;

+1`3%((`,.+(5`#!0`0$!`"+((+3%*#`!..+.`3$!*`5+1`0.5`0+`.1*`0$%/`+ !M

+`"%4`0$%/`%//1!L`5+1`*!! `0+`%*/0((`0$!`"+((+3%*#`,'#!M
QSPLQVWDOO#EDEHOSOXJLQSURSRVDOFODVVSURSHUWLHV

* `0$!*`5+1`*!! `0+` `%0`0+`5+1.`.babelrc`"%(!`/``,(1#%*M

{
"SUHVHWV": [
"@babel/preset-env",
"@babel/preset-react"
],

S`9;:`T
+10`!/0%*#`* `!1##%*# $,0!.`87

"SOXJLQV": ["@babel/plugin-proposal-class-properties"]
}

+3L`(!0W/`.!0!`0$!`0!/0`"%(!`0`src/components/ShowInformation/index.test.jsM
'HSHQGHQFLHV
LPSRUW React IURP 'react';
LPSRUW { shallow } IURP 'enzyme';

&RPSRQHQWWRWHVW
LPSRUW ShowInformation IURP './index';

GHVFULEH('ShowInformation', () => {
FRQVW wrapper = VKDOORZ(<ShowInformation />);

LW('should render ShowInformation component', () => {

H[SHFW(wrapper.OHQJWK).WR%H(1);
});

LW('should modify the state onChange', () => {

wrapper.ILQG('input[name="name"]').VLPXODWH('change', {
WDUJHW: {
QDPH: 'name',
YDOXH: 'Carlos'
}
});

wrapper.ILQG('input[name="age"]').VLPXODWH('change', {
WDUJHW: {
QDPH: 'age',
YDOXH: 31
}
});

*HWWLQJWKHYDOXHVRIWKHQDPHDQGDJHVWDWHV
H[SHFW(wrapper.VWDWH('name')).WR%H('Carlos');
H[SHFW(wrapper.VWDWH('age')).WR%H(31);
});

LW('should show the personal information when user clicks on the

button', () => {
6LPXODWLQJWKHFOLFNHYHQW
wrapper.ILQG('button').VLPXODWH('click');

7KHVKRZVWDWHVKRXOGEHWUXH
H[SHFW(wrapper.VWDWH('show')).WR%H(true);
});
});

S`9;;`T
+10`!/0%*#`* `!1##%*# $,0!.`87

"`5+1`.1*`0$!`0!/0`* `%0`3+.'/`"%*!L`5+1`/$+1( `/!!`0$%/M

5HDFW'HY7RROV
$!*`0!/0%*#`%*`0$!`+*/+(!`%/`*+0`!*+1#$L`* `3!`3*0`0+`%*/,!0`+1.`,,(%0%+*`3$%(!`%0
%/`.1**%*#`%*/% !`0$!`.+3/!.L`3!`*`1/!`0$!`!0`!2!(+,!.`++(/K

+1`*`%*/0((`0$!)`/``$.+)!`!40!*/%+*`0`0$!`"+((+3%*#`M`https:/b/bchrome.
google.bcom/bwebstore/bdetail/breact-bdeveloper-btools/
fmkadmapgofadopljbjfkapdkoienihibhl=ben.b

$!`%*/0((0%+*` /``0`0+`0$!`$.+)!`!2++(/`((! `!0L`3$!.!`5+1`*`%*/,!0`0$!

.!* !.! `0.!!`+"`+),+*!*0/`* `$!'`3$%$`,.+,!.0%!/`0$!5`$2!`.!!%2! `* `3$0`0$!%.
/00!`%/`0``,.0%1(.`,+%*0`%*`0%)!K

.+,/`* `/00!/`*`!`.! L`* `0$!5`*`!`$*#! `%*`.!(`0%)!`0+`0.%##!.`1, 0!/`%*`0$!

 `* `/!!`0$!`.!/1(0/`/0.%#$035K

$%/`%/``)1/0_$2!`0++(L`* `%*`0$!`)+/0`.!!*0`2!./%+*/`%0`$/``*!3`"!01.!`0$0`*`!
!*(! `5`0%'%*#`0$!`.!`!0`, 0!/`$!'+4K

$!*`0$%/`"1*0%+*(%05`%/`!*(! L`3!`*`1/!`+1.`,,(%0%+*`* `2%/1((5`/!!`3$%$

+),+*!*0/`#!0`1, 0! `3$!*`3!`,!."+.)``,.0%1(.`0%+*K`$!`1, 0! `+),+*!*0/
.!`$%#$(%#$0! `3%0$`+(+.! `.!0*#(!/L`* `%0`!+)!/`!/5`0+`/,+0`,+//%(!`+,0%)%60%+*/K

S`9;<`T
+10`!/0%*#`* `!1##%*# $,0!.`87

5HGX['HY7RROV
"`5+1`.!`1/%*#`! 14`%*`5+1.`,,(%0%+*`,.+(5L`5+1`3*0`0+`1/!`! 14`!2++(/`0+`!
(!`0+` !1#`5+1.`! 14`"(+3K`+1`*`%*/0((`%0`0`0$!`"+((+3%*#`M`https:/b/bchrome.
google.bcom/bwebstore/bdetail/bredux-bdevtools/blmhkpmbekcpmknklioeibfkpmmfibljdbhl=
es.b

(/+L`5+1`*!! `0+`%*/0((`0$!`redux-devtools-extension`,'#!M
QSPLQVWDOOVDYHGHYUHGX[GHYWRROVH[WHQVLRQ

*!`5+1`$2!`%*/0((! `0$!`!0`!2!(+,!.`++(/`* `! 14`!2++(/L`5+1`3%((`*!! `0+

+*"%#1.!`0$!)K

"`5+1`0.5`0+`1/!`! 14`!2++(/` %.!0(5L`%0`3+*W0`3+.'N`0$%/`%/`!1/!`3!`*!! `0+`,//`0$!

composeWithDevTools`)!0$+ `%*0+`0$!`! 14`/0+.!N`0$%/`/$+1( `!`0$!
configureStore.js`"%(!M

'HSHQGHQFLHV
LPSRUW { createStore, applyMiddleware } IURP 'redux';
LPSRUW thunk IURP 'redux-thunk';
LPSRUW { composeWithDevTools } IURP 'redux-devtools-extension';

5RRW5HGXFHU
LPSRUW rootReducer IURP '@reducers';

H[SRUWGHIDXOWIXQFWLRQ configureStore({
initialState,
reducer
}) {
FRQVW middleware = [
thunk
];
UHWXUQ FUHDWH6WRUH(
rootReducer,
initialState,
FRPSRVH:LWK'HY7RROV(DSSO\0LGGOHZDUH(...middleware))
);
}

S`9;=`T
+10`!/0%*#`* `!1##%*# $,0!.`87

6XPPDU\
*`0$%/`$,0!.L`5+1`(!.*! `+10`0$!`!*!"%0/`+"`0!/0%*#L`* `0$!`".)!3+.'/`5+1`*`1/!
0+`+2!.`5+1.`!0`+),+*!*0/`3%0$`0!/0/K

+1`(!.*! `$+3`0+`%),(!)!*0`* `0!/0`+),+*!*0/`* `!2!*0/`3%0$`*65)!L`$+3`0+`1/!

0$!` !/0`+2!.#!L`* `$+3`0+`1/!`!0`* `! 14`!2`++(/K

0`%/`%),+.0*0`0+`!.`%*`)%* `+))+*`/+(10%+*/`3$!*`%0`+)!/`0+`0!/0%*#`+),(!4
+),+*!*0/L`/1$`/`$%#$!._+. !.`+),+*!*0/`+.`"+.)/`3%0$`)1(0%,(!/`*!/0! `"%!( /K

*`0$!`*!40`$,0!.L`5+1`3%((`(!.*`+10`$+3`0+`%),(!)!*0`.+10!/`%*`5+1.`,,(%0%+*`1/%*#
!0`+10!.K

S`9;>`T
 
5HDFW5RXWHU
!0L`1*(%'!`*#1(.L`%/``(%..5`%*/0! `+"``".)!3+.'L`)!*%*#`/,!%"%`"1*0%+*(%0%!/
Q"+.`!4),(!L`.+10%*#`propTypesR`.!`*+0`,.0`+"`0$!`!0`+.!K` */0! L`.+10%*#`%/`$* (!
5``0$%. _,.05`(%..5`((! `!0`+10!.K

*`0$%/`$,0!.L`5+1`3%((`/!!`$+3`0+`%),(!)!*0`!0`+10!.`%*`5+1.`,,(%0%+*L`* `5`0$!
!* `+"`0$!`.!(!2*0`/!0%+*/L`5+1`3%((`!`(!`0+` ` 5*)%`.+10!/`* `1* !./0* `$+3
!0`+10!.`3+.'/K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M

* !./0* %*#`0$!` %""!.!*!/`!03!!*`0$!`react-routerL`react-router-

domL`* `react-router-native`,'#!/
+3`0+`%*/0((`* `+*"%#1.!`!0`+10!.
 %*#`0$!`<Switch>`+),+*!*0
 %*#`0$!`exact`,.+,!.05
 %*#`,.)!0!./`0+`0$!`.+10!/
!0`+10!. $,0!.`88

,QVWDOODWLRQDQGFRQILJXUDWLRQ
"0!.`5+1`.!0!``*!3`!0`,,(%0%+*`1/%*#`create-react-appL`0$!`"%./0`0$%*#`5+1
*!! `0+` +`%/`0+`%*/0((`!0`+10!.`2;K4L`1/%*#`0$%/`+))* M
QSPLQVWDOOUHDFWURXWHUGRP

+1`,.+(5`.!`+*"1/! `+10`3$5`3!`.!`%*/0((%*#`react-router-dom`%*/0! `+"

react-routerK`!0`+10!.`+*0%*/`((`0$!`+))+*`+),+*!*0/`+"`react-router-dom
* `react-router-nativeK`$0`)!*/`0$0`%"`5+1`.!`1/%*#`!0`"+.`0$!`3!L`5+1
/$+1( `1/!`react-router-domL`* `%"`5+1`.!`1/%*#`!0`0%2!L`5+1`*!! `0+`1/!`react-
router-nativeK`$!`react-router-dom`,'#!`3/`.!0! `+.%#%*((5`0+`+*0%*
2!./%+*`;L`* `react-router`3/`1/%*#`2!./%+*`:K`$!`react-router-dom`$/`/+)!
%),.+2!)!*0/`+2!.`react-routerK`$!5`.!`(%/0! `$!.!M

$!`%),.+2! `<Link>`+),+*!*0`Q3$%$`.!* !./`<a>RK

*(1 !/`<BrowserRouter>L`3$%$`%*0!.0/`3%0$`0$!
.+3/!.`window.historyK
*(1 !/`<NavLink>L`3$%$`%/``<Link>`3.,,!.`0$0`'*+3/`3$!0$!.`%0´/`0%2!
+.`*+0K
*(1 !/`<HashRouter>L`3$%$`1/!/`0$!`$/$`%*`0$!``0+`.!* !.`0$!
+),+*!*0/K` "`5+1`$2!`+*!`/00%`,#!L`5+1`/$+1( `1/!`0$%/`+),+*!*0`%*/0!
+"`<BrowserRouter>K

&UHDWLQJRXUVHFWLRQV
!0W/`.!0!`/+)!`/!0%+*/`0+`0!/0`/+)!`/%`.+10!/K`!`*!! `0+`.!0!`"+1.`/00!(!//
+),+*!*0/`QAboutL`ContactL`HomeL`* `Error404R`* `*)!`0$!)`/`index.jsx`%*
0$!%.` %.!0+.%!/K

+1`*` `0$!`"+((+3%*#`0+`0$!`src/components/Home.jsx`+),+*!*0M
LPSRUW React IURP 'react';

FRQVW Home = () => (

GLYFODVV1DPH="Home"!
K!HomeK!
GLY!
);

H[SRUWGHIDXOW Home;

S`9;@`T
!0`+10!. $,0!.`88

$!`src/components/About.jsx`+),+*!*0`*`!`.!0! `3%0$`0$!`"+((+3%*#M
LPSRUW React IURP 'react';

FRQVW About = () => (

GLYFODVV1DPH="About"!
K!AboutK!
GLY!
);

H[SRUWGHIDXOW About;

$!`"+((+3%*#`.!0!/`0$!`src/components/Contact.jsx`+),+*!*0M
LPSRUW React IURP 'react';

FRQVW Contact = () => (

GLYFODVV1DPH="Contact"!
K!ContactK!
GLY!
);

H[SRUWGHIDXOW Contact;

%*((5L`0$!`src/components/Error404/index.jsx`+),+*!*0`%/`.!0! `/`"+((+3/M
LPSRUW React IURP 'react';

FRQVW Error404 = () => (

GLYFODVV1DPH="Error404"!
K!Error404K!
GLY!
);

H[SRUWGHIDXOW Error404;

"0!.`3!`$2!`.!0! `((`0$!`/00!(!//`+),+*!*0/L`3!`*!! `0+`)+ %"5`+1.`index.js`"%(!`0+

%),+.0`+1.`.+10!`"%(!L`3$%$`3!`3%((`.!0!`%*`0$!`*!40`/0!,M
'HSHQGHQFLHV
LPSRUW React IURP 'react';
LPSRUW { render } IURP 'react-dom';
LPSRUW { BrowserRouter as Router } IURP 'react-router-dom';

6W\OHV
LPSRUW './index.css';

5RXWHV

S`9<7`T
!0`+10!. $,0!.`88

LPSRUW AppRoutes IURP './routes';

UHQGHU(
5RXWHU!
$SS5RXWHV!
5RXWHU!,
document.JHW(OHPHQW%\,G('root')
);

+3L`3!`*!! `0+`.!0!`0$!`.+10!`"%(!L`3$!.!`3!`3%((`.!* !.`+1.`Home`+),+*!*0`3$!*`0$!

1/!.`!//!/`0+`0$!`.++0`,0$`Q\RM
'HSHQGHQFLHV
LPSRUW React IURP 'react';
LPSRUW { Route } IURP 'react-router-dom';

&RPSRQHQWV
LPSRUW App IURP './components/App';
LPSRUW Home IURP './components/Home';

FRQVW AppRoutes = () => (

$SS!
5RXWHSDWK="/" FRPSRQHQW={Home} !
$SS!
);

H[SRUWGHIDXOW AppRoutes;

"0!.`0$0L`3!`*!! `0+`)+ %"5`+1.`App.jsx`"%(!`0+`.!* !.`0$!`.+10!`+),+*!*0/`/`$%( .!*M

LPSRUW React IURP 'react';
LPSRUW { element } IURP 'prop-types';
LPSRUW './App.css';

FRQVW App = ({ children }) => (

GLYFODVV1DPH="App"!
{FKLOGUHQ}
GLY!
);

App.SURS7\SHV = {
FKLOGUHQ: element
};

H[SRUWGHIDXOW App;

"`5+1`.1*`0$!`,,(%0%+*L`5+1`3%((`/!!`0$!`Home`+),+*!*0`%*`0$!`.++0`Q\RM

S`9<8`T
!0`+10!. $,0!.`88

+3L`(!0W/` `Error404`3$!*`0$!`1/!.`0.%!/`0+`!//`*5`+0$!.`.+10!M
'HSHQGHQFLHV
LPSRUW React IURP 'react';
LPSRUW { Route } IURP 'react-router-dom';

&RPSRQHQWV
LPSRUW App IURP './components/App';
LPSRUW Home IURP './components/Home';
LPSRUW Error404 IURP './components/Error404';

FRQVW AppRoutes = () => (

$SS!
5RXWHSDWK="/" FRPSRQHQW={Home} !
5RXWHFRPSRQHQW={Error404} !
$SS!
);

H[SRUWGHIDXOW AppRoutes;

!0W/`.1*`0$!`,,(%0%+*`#%*K`+1`3%((`/!!`0$0`+0$`0$!`Home`* `Error404`+),+*!*0/
.!`!%*#`.!* !.! M

S`9<9`T
!0`+10!. $,0!.`88

+1`.!`,.+(5`3+* !.%*#`3$5`0$%/`%/`$,,!*%*#K` 0W/`!1/!`3!`*!! `0+`1/!`0$!

<Switch>`+),+*!*0`0+`!4!10!`&1/0`+*!`+),+*!*0`%"`%0`)0$!/`0$!`,0$K`+.`0$%/L`3!
*!! `0+`%),+.0`0$!`Switch`+),+*!*0`* ` `%0`/``3.,,!.`"+.`+1.`.+10!/M
'HSHQGHQFLHV
LPSRUW React IURP 'react';
LPSRUW { Route, 6ZLWFK } IURP 'react-router-dom';

&RPSRQHQWV
LPSRUW App IURP './components/App';
LPSRUW Home IURP './components/Home';
LPSRUW Error404 IURP './components/Error404';

FRQVW AppRoutes = () => (

<App>
6ZLWFK!
<Route path="/" component={Home} />
<Route component={Error404} />
6ZLWFK!
</App>
);

H[SRUWGHIDXOW AppRoutes;

+3L`%"`5+1`#+0`0+`0$!`.++0`Q/RL`5+1`3%((`/!!`0$!`Home`+),+*!*0`* `Error404`3+*W0`!`
!4!10! `0`0$!`/)!`0%)!`Q%0`3%((`&1/0`!`!4!10! `%*`0$!`Home`+),+*!*0RL`10`%"`3!`#+`0+
/somefakeurlL`3!`3%((`/!!`0$0`0$!`Home`+),+*!*0`%/`!4!10! `/`3!((L`* `0$%/`%/`
,.+(!)M

S`9<:`T
!0`+10!. $,0!.`88

+`"%4`0$!`,.+(!)L`3!`*!! `0+` `0$!`exact`,.+,`%*`0$!`.+10!`0$0`3!`3*0`0+`)0$K`$!

,.+(!)`%/`0$0`/somefakeurl`3%((`)0$`+1.`.++0`,0$`Q/RL`10`%"`3!`3*0`0+`!`2!.5
/,!%"%`+10`0$!`,0$/L`3!`*!! `0+` `0$!`exact`,.+,`0+`+1.`Home`.+10!M
FRQVW AppRoutes = () => (
<App>
<Switch>
<Route path="/" component={Home} H[DFW />
<Route component={Error404} />
</Switch>
</App>
);

+3L`%"`5+1`#+`0+`/somefakeurl`+*!`)+.!`0%)!L`5+1`3%((`!`(!`0+`/!!`0$!`..+.;7;
+),+*!*0M

+3L`3!`*` `+1.`+0$!.`+),+*!*0/`QAbout`* `ContactRM

'HSHQGHQFLHV
LPSRUW React IURP 'react';
LPSRUW { Route, Switch } IURP 'react-router-dom';

&RPSRQHQWV
LPSRUW App IURP './components/App';
LPSRUW About IURP './components/About';
LPSRUW Contact IURP './components/Contact';
LPSRUW Home IURP './components/Home';
LPSRUW Error404 IURP './components/Error404';

FRQVW AppRoutes = () => (

$SS!
6ZLWFK!
<Route path="/" component={Home} exact />
5RXWHSDWK="/about" FRPSRQHQW={About} H[DFW!
5RXWHSDWK="/contact" FRPSRQHQW={Contact} H[DFW!

S`9<;`T
!0`+10!. $,0!.`88

<Route component={Error404} />

6ZLWFK!
$SS!
);

H[SRUWGHIDXOW AppRoutes;

+3L`5+1`*`2%/%0`/aboutM

(0!.*0%2!(5L`5+1`*`*+3`2%/%0`/contactM

$GGLQJSDUDPHWHUVWRWKHURXWHV
+`".L`5+1`$2!`(!.*! `$+3`0+`1/!`!0`+10!.`"+.`/%`.+10!/`Q+*!_(!2!(`.+10!/RK`+3L`
3%((`/$+3`5+1`$+3`0+` `/+)!`,.)!0!./`0+`0$!`.+10!/`* `#!0`0$!)`%*0+`+1.
+),+*!*0/K

+.`0$%/`!4),(!L`3!`3%((`.!0!``Contacts`+),+*!*0`0+` %/,(5``(%/0`+"`+*00/`3$!*
3!`2%/%0`/contacts`.+10!L`10`3!`3%((`/$+3`0$!`+*00`%*"+.)0%+*`QnameL`phoneL`*
emailR`3$!*`0$!`1/!.`2%/%0/`/contacts/:contactIdK

S`9<<`T
!0`+10!. $,0!.`88

$!`"%./0`0$%*#`3!`*!! `0+` +`%/`0+`.!0!`+1.`Contacts`+),+*!*0K`!0W/`1/!`0$%/`/'!(!0+*M

LPSRUW React, { Component } IURP 'react';
LPSRUW './Contacts.css';

FODVV Contacts H[WHQGV Component {

)RUQRZZHDUHJRLQJWRDGGRXUFRQWDFWVWRRXU
ORFDOVWDWHEXWQRUPDOO\WKLVVKRXOGFRPH
IURPVRPHVHUYLFH
VWDWH = {
FRQWDFWV: [
{
LG: 1,
QDPH: 'Carlos Santana',
HPDLO: 'carlos.santana@dev.education',
SKRQH: '415-307-3112'
},
{
LG: 2,
QDPH: 'John Smith',
HPDLO: 'john.smith@dev.education',
SKRQH: '223-344-5122'
},
{
LG: 3,
QDPH: 'Alexis Nelson',
HPDLO: 'alexis.nelson@dev.education',
SKRQH: '664-291-4477'
}
]
};

UHQGHU() {
UHWXUQ (
GLYFODVV1DPH="Contacts"!
K!ContactsK!
GLY!
);
}
}

H[SRUWGHIDXOW Contacts;

!0W/`1/!`0$!/!``/05(!/M
.&RQWDFWV ul {
list-style: none;
margin: 0;

S`9<=`T
!0`+10!. $,0!.`88

margin-bottom: 20px;
padding: 0;
}

.&RQWDFWV ul li {
padding: 10px;
}

.&RQWDFWV a {
color: #555;
text-decoration: none;
}

.&RQWDFWV a:hover {
color: #ccc;
text-decoration: none;
}

*!`5+1`$2!`.!0! `0$!`Contacts`+),+*!*0L`5+1`*!! `0+`%),+.0`%0`%*0+`+1.`.+10!`"%(!M

// Dependencies
import React from 'react';
import { Route, Switch } from 'react-router-dom';

// Components
import App from './components/App';
import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
import Error404 from './components/Error404';
LPSRUW Contacts IURP './components/Contacts';

const AppRoutes = () => (

<App>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/about" component={About} exact />
<Route path="/contact" component={Contact} exact />
5RXWHSDWK="/contacts" FRPSRQHQW={Contacts} H[DFW!
<Route component={Error404} />
</Switch>
</App>
);

export default AppRoutes;

S`9<>`T
!0`+10!. $,0!.`88

+3L`5+1`3%((`!`(!`0+`/!!`0$!`+*00/`+),+*!*0`%"`5+1`#+`0+`0$!`/contacts`M

+3`0$0`0$!`Contacts`+),+*!*0`%/`+**!0! `0+`!0`+10!.L`(!0W/`.!* !.`+1.`+*00/

/``(%/0M
LPSRUW React, { Component } IURP 'react';
LPSRUW { Link } IURP 'react-router-dom';
LPSRUW './Contacts.css';

FODVV Contacts H[WHQGV Component {

)RUQRZZHDUHJRLQJWRDGGRXUFRQWDFWVWRRXU
ORFDOVWDWHEXWQRUPDOO\WKLVVKRXOGFRPH
IURPVRPHVHUYLFH
VWDWH = {
FRQWDFWV: [
{
LG: 1,
QDPH: 'Carlos Santana',
HPDLO: 'carlos.santana@dev.education',
SKRQH: '415-307-3112'
},
{
LG: 2,
QDPH: 'John Smith',
HPDLO: 'john.smith@dev.education',
SKRQH: '223-344-5122'
},
{
LG: 3,
QDPH: 'Alexis Nelson',
HPDLO: 'alexis.nelson@dev.education',

S`9<?`T
!0`+10!. $,0!.`88

SKRQH: '664-291-4477'
}
]
};

UHQGHU&RQWDFWV = contacts => (

XO!
{contacts.PDS((contact, key) => (
OLNH\={key}!
/LQNWR={`/contacts/${contact.id}`}!{contact.QDPH}/LQN!
OL!
))}
XO!
);

UHQGHU() {
FRQVW { contacts } = this.VWDWH;

UHWXUQ (
GLYFODVV1DPH="Contacts"!
K!ContactsK!

{this.UHQGHU&RQWDFWV(contacts)}
GLY!
);
}
}

H[SRUWGHIDXOW Contacts;

/`5+1`*`/!!L`3!`.!`1/%*#`0$!`<Link>`+),+*!*0L`3$%$`3%((`#!*!.0!`*`<a>`0#`0$0
,+%*0/`0+`/contacts/contact.idL`* `0$%/`%/`!1/!`3!`3%((` ``*!3`*!/0! `.+10!`%*0+
+1.`.+10!`"%(!`0+`)0$`0$!` `+"`0$!`+*00M
FRQVW AppRoutes = () => (
$SS!
6ZLWFK!
<Route path="/" component={Home} exact />
<Route path="/about" component={About} exact />
<Route path="/contact" component={Contact} exact />
<Route path="/contacts" component={Contacts} exact />
5RXWHSDWK="/contacts/:contactId" FRPSRQHQW={Contacts} H[DFW!
<Route component={Error404} />
6ZLWFK!
$SS!
);

S`9<@`T
!0`+10!. $,0!.`88

!0`+10!.`$/``/,!%(`,.+,`((! `matchL`3$%$`%/`*`+&!0`0$0`+*0%*/`((`0$!` 0

.!(0! `0+`0$!`.+10!L`* `%"`3!`$2!`,.)!0!./L`3!`3%((`!`(!`0+`/!!`0$!)`%*`0$!`match
+&!0M
LPSRUW React, { Component } IURP 'react';
LPSRUW { Link } IURP 'react-router-dom';
LPSRUW './Contacts.css';

FODVV Contacts H[WHQGV Component {

)RUQRZZHDUHJRLQJWRDGGRXUFRQWDFWVWRRXU
ORFDOVWDWHEXWQRUPDOO\WKLVVKRXOGFRPH
IURPVRPHVHUYLFH
VWDWH = {
FRQWDFWV: [
{
LG: 1,
QDPH: 'Carlos Santana',
HPDLO: 'carlos.santana@dev.education',
SKRQH: '415-307-3112'
},
{
LG: 2,
QDPH: 'John Smith',
HPDLO: 'john.smith@dev.education',
SKRQH: '223-344-5122'
},
{
LG: 3,
QDPH: 'Alexis Nelson',
HPDLO: 'alexis.nelson@dev.education',
SKRQH: '664-291-4477'
}
]
};

UHQGHU6LQJOH&RQWDFW = ({ name, email, phone }) => (

!
K!{name}K!
S!{email}S!
S!{phone}S!
!
)

UHQGHU&RQWDFWV = () => (
XO!
{this.state.contacts.PDS((contact, key) => (
OLNH\={key}!
/LQNWR={`/contacts/${contact.LG}`}!{contact.QDPH}/LQN!

S`9=7`T
!0`+10!. $,0!.`88

OL!
))}
XO!
);

UHQGHU() {
/HW VVHHZKDWFRQWDLQVWKHSURSVREMHFW
console.ORJ(this.props);

:HJRWWKHQRWH,GSDUDPIURPPDWFKREMHFW
FRQVW { PDWFK: { SDUDPV: { FRQWDFW,G } } } = this.SURSV;
FRQVW { contacts } = this.VWDWH;

%\GHIDXOWRXUVHOHFWHG1RWHLVIDOVH
OHW selectedContact = IDOVH;

LI (FRQWDFW,G > 0) {
,IWKHFRQWDFWLGLVKLJKHUWKDQWKHQZHILOWHULWIURPRXU
FRQWDFWVDUUD\
selectedContact = contacts.ILOWHU(
contact => contact.id === 1XPEHU(contactId)
)>@;
}

UHWXUQ (
GLYFODVV1DPH="Contacts"!
K!ContactsK!

^ :HUHQGHURXUVHOHFWHG&RQWDFWRUDOOWKHFRQWDFWV `
{VHOHFWHG&RQWDFW
 this.UHQGHU6LQJOH&RQWDFW(selectedContact)
: this.UHQGHU&RQWDFWV()}
GLY!
);
}
}

H[SRUWGHIDXOW Contacts;

S`9=8`T
!0`+10!. $,0!.`88

$!`match`,.+,`(++'/`(%'!`0$%/M

/`5+1`*`/!!L`0$!`match`,.+,/`+*0%*/``(+0`+"`1/!"1(`%*"+.)0%+*K`!0`+10!.`(/+`
%*(1 !/`0$!`+&!0W/`$%/0+.5`* `(+0%+*K`(/+L`3!`*`#!0`((`0$!`,.)!0!./`3!`,//
3%0$%*`0$!`.+10!/N`%*`0$%/`/!L`3!`.!`.!!%2%*#`0$!`contactId`,.)!0!.K

"`5+1`.1*`0$!`,,(%0%+*`#%*L`5+1`/$+1( `/!!`5+1.`+*00/`(%'!`0$%/M

S`9=9`T
!0`+10!. $,0!.`88

"`5+1`(%'`+*` +$*`)%0$`Q3$+/!`contactId`%/`2RL`5+1`3%((`/!!`0$!`+*00`%*"+.)0%+*M

"0!.`0$%/L`5+1`*` ``*2.`%*`0$!`App`+),+*!*0`0+`!//`0+`((`0$!`.+10!/M
LPSRUW React IURP 'react';
LPSRUW { element } IURP 'prop-types';
LPSRUW { Link } IURP 'react-router-dom';
LPSRUW './App.css';

FRQVW App = ({ children }) => (

GLYFODVV1DPH="App"!
XOFODVV1DPH="menu"!
OL!/LQNWR="/"!Home/LQN!OL!
OL!/LQNWR="/about"!About/LQN!OL!
OL!/LQNWR="/contacts"!Contacts/LQN!OL!
OL!/LQNWR="/contact"!Contact/LQN!OL!
XO!

{children}
GLY!
);

App.SURS7\SHV = {
FKLOGUHQ: element
};

H[SRUWGHIDXOW App;

S`9=:`T
!0`+10!. $,0!.`88

+3L`(!0W/`)+ %"5`+1.`App`/05(!/M
.$SS {
text-align: center;
}

$SSXOPHQX {
margin: 50px;
padding: 0;
list-style: none;
}

$SSXOPHQXOL {
display: inline-block;
padding: 0 10px;
}

$SSXOPHQXOLD {
color: #333;
text-decoration: none;
}

$SSXOPHQXOLDKRYHU {
color: #ccc;
}

%*((5L`5+1`3%((`/!!`/+)!0$%*#`(%'!`0$%/M

S`9=;`T
!0`+10!. $,0!.`88

6XPPDU\
$!`&+1.*!5`0$.+1#$`!0`+10!.`$/`+)!`0+`*`!* L`* `*+3`5+1`'*+3`$+3`0+`%*/0((
* `+*"%#1.!`!0`+10!.L`$+3`0+`.!0!`/%`.+10!/`* `$+3`0+` `,.)!0!./`0+`0$!
*!/0! `.+10!/K

*`0$!`*!40`$,0!.L`3!`3%((`/!!`$+3`0+`2+% `/+)!`+"`0$!`)+/0`+))+*`*0%_,00!.*/`%*
!0K

S`9=<`T
 
$QWL3DWWHUQVWREH$YRLGHG
*`0$%/`++'L`5+1W2!`(!.*! `$+3`0+`,,(5`!/0`,.0%!/`3$!*`3.%0%*#``!0`,,(%0%+*K
*`0$!`"%./0`"!3`$,0!./L`3!`.!2%/%0! `0$!`/%`+*!,0/`0+`1%( ``/+(% `1* !./0* %*#L`*
0$!*`3!`0++'``(!,`%*0+`)+.!` 2*! `0!$*%-1!/`%*`0$!`"+((+3%*#`$,0!./K

+1`/$+1( `*+3`!`(!`0+`1%( `.!1/(!`+),+*!*0/L`)'!`+),+*!*0/`+))1*%0!

3%0$`!$`+0$!.L`* `+,0%)%6!`*`,,(%0%+*`0.!!`0+`#!0`0$!`!/0`,!."+.)*!K` +3!2!.L
!2!(+,!./`)'!`)%/0'!/L`* `0$%/`$,0!.`%/`((`+10`0$!`+))+*`*0%_,00!.*/`3!
/$+1( `2+% `3$!*`1/%*#`!0K

++'%*#`0`+))+*`!..+./`3%((`$!(,`5+1`0+`2+% `0$!)`* `3%((`% `5+1.`1* !./0* %*#`+"

$+3`!0`3+.'/`* `$+3`0+`1%( `,,(%0%+*/`%*`0$!`!0`35K`+.`!$`,.+(!)L`3!
3%((`/!!`*`!4),(!`0$0`/$+3/`$+3`0+`.!,.+ 1!`* `/+(2!`%0K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M

*%0%(%6%*#`0$!`/00!`1/%*#`,.+,!.0%!/
100%*#`0$!`/00!`
/%*#`%* !4!/`/``'!5
,.! %*#`,.+,!.0%!/`+*``!(!)!*0/

,QLWLDOL]LQJWKHVWDWHXVLQJSURSHUWLHV
*`0$%/`/!0%+*L`3!`3%((`/!!`$+3`%*%0%(%6%*#`0$!`/00!`1/%*#`,.+,!.0%!/`.!!%2! `".+)`0$!
,.!*0`%/`1/1((5`*`*0%_,00!.*K` `$2!`1/! `0$!`3+. `1/1((5`!1/!L`/`3!`3%((`/!!L`+*!
3!`$2!`%0`(!.`%*`+1.`)%* `3$0`0$!`,.+(!)/`3%0$`0$%/`,,.+$`.!L`3!`)%#$0`/0%((
!% !`0+`1/!`%0K

*!`+"`0$!`!/0`35/`0+`(!.*`/+)!0$%*#`%/`5`(++'%*#`0`0$!`+ !L`/+`3!`3%((`/0.0`5
.!0%*#``/%),(!`+),+*!*0`3%0$``B`100+*`0+`%*.!)!*0``+1*0!.K
*0%_00!.*/`0+`!`2+% ! $,0!.`89

$!`+),+*!*0`%/`%),(!)!*0! `1/%*#``classL`/`/$+3*`%*`0$!`"+((+3%*#`/*%,,!0`+"`+ !M
FODVV Counter H[WHQGV Component

0`$/``constructorL`3$!.!`3!`%*%0%(%6!`0$!`state`1/%*#`0$!`count`,.+,!.05L`* `3!
%* `0$!`!2!*0`$* (!.M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
FRXQW: props.FRXQW
};
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

$!`%),(!)!*00%+*`+"`0$!`(%'`$* (!.`%/`,.!005`/0.%#$0"+.3. —3!`&1/0` `1`0+`0$!

1..!*0`+1*0`2(1!`* `/0+.!`0$!`.!/1(0%*#`2(1!`'`%*0+`0$!`stateM
KDQGOH&OLFN() {
this.VHW6WDWH({
FRXQW: this.state.FRXQW + 1
});
}

%*((5L`%*`0$!`render`)!0$+ L`3!` !/.%!`0$!`+10,10L`3$%$`%/`+),+/! `+"`0$!`1..!*0

2(1!`+"`0$!`countL`* `0$!`100+*`0+`%*.!)!*0`%0M
UHQGHU() {
UHWXUQ (
GLY!
{this.state.FRXQW}
EXWWRQRQ&OLFN={this.KDQGOH&OLFN}!+<EXWWRQ!
GLY!
);
}

+3L`(!0W/`.!* !.`0$%/`+),+*!*0L`,//%*#`1`/`0$!`count`,.+,!.05M
&RXQWHU FRXQW={1} !

0`3+.'/`/`!4,!0! —!$`(%'`+*`0$!`B`100+*`%*.!)!*0/`0$!`1..!*0`2(1!K`+L`3$0W/
0$!`,.+(!)O

S`9=>`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

$!.!`.!`03+`)%*`!..+./L`3$%$`.!`+10(%*! `/`"+((+3/M

!`$2!`` 1,(%0! `/+1.!`+"`0.10$

"`0$!`count`,.+,!.05`,//!/`0+`0$!`+),+*!*0`$*#!/L`0$!`/00!` +!/`*+0`#!0
1, 0!

"`3!`%*/,!0`0$!`Counter`!(!)!*0`1/%*#`0$!`!0`!2++(/L`3!`*+0%!
0$0`Props`* `State`$+( ``/%)%(.`2(1!M
&RXQWHU!
Props
count: 1
State
count: 1

$%/`)'!/`%0`1*(!.`3$%$`%/`0$!`1..!*0`* `0.1/03+.0$5`2(1!`0+`1/!`%*/% !`0$!

+),+*!*0L`* `0+` %/,(5`0+`0$!`1/!.K

2!*`3+./!L`(%'%*#`B`+*!`)'!/`0$!`2(1!/` %2!.#!K`*`!4),(!`+"`0$%/` %2!.#!*!`%/

/$+3*`%*`0$!`"+((+3%*#`+ !M
&RXQWHU!
Props
count: 1
State
count: 2

0`0$%/`,+%*0L`3!`*`//1)!`0$0`0$!`/!+* `2(1!`.!,.!/!*0/`0$!`1..!*0`+1*0L`10`0$%/`%/
*+0`!4,(%%0`* `*`(! `0+`1*!4,!0! `!$2%+./L`+.`3.+*#`2(1!/` +3*`%*`0$!`0.!!K

$!`/!+* `,.+(!)`!*0!./`+*`$+3`0$!`(//`%/`.!0! `* `%*/0*0%0! `5`!0K`$!

constructor`"1*0%+*`+"`0$!`(//`#!0/`((! `+*(5`+*!`3$!*`0$!`+),+*!*0`%/`.!0! K

*`+1.`Counter`+),+*!*0L`3!`.! `0$!`2(1!`+"`0$!`count`,.+,!.05`* `3!`/0+.!`%0`%*0+

0$!`/00!K` "`0$!`2(1!`+"`0$0`,.+,!.05`$*#!/` 1.%*#`0$!`(%"!`5(!`+"`0$!`,,(%0%+*`Q(!0W/
/5L`%0`!+)!/`10RL`0$!`Counter`+),+*!*0`3%((`*!2!.`1/!`0$!`*!3`2(1!L`!1/!`%0`$/
(.! 5`!!*`%*%0%(%6! K`$%/`,10/`0$!`+),+*!*0`%*0+`*`%*+*/%/0!*0`/00!L`3$%$`%/`*+0
+,0%)(`* `$. `0+` !1#K

$0`%"`3!`.!((5`3*0`0+`1/!`0$!`,.+,W/`2(1!`0+`%*%0%(%6!`0$!`+),+*!*0L`* `3!`'*+3`"+.
/1.!`0$0`0$!`2(1!` +!/`*+0`$*#!`%*`0$!`"101.!O

S`9=?`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

*`0$0`/!L`%0W/``!/0`,.0%!`0+`)'!`%0`!4,(%%0`* `#%2!`0$!`,.+,!.05``*)!`0$0`)'!/
5+1.`%*0!*0%+*/`(!.L`/1$`/`initialCountK`+.`!4),(!L`(!0W/`/5`3!`$*#!`0$!
constructor`+"`0$!`Counter`+),+*!*0`%*`0$!`"+((+3%*#`35M

FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
FRXQW: props.LQLWLDO&RXQW
};
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

"`3!`1/!`%0`(%'!`/+L`%0`%/`(!.`0$0`0$!`,.!*0`+*(5`$/``35`0+`%*%0%(%6!`0$!`+1*0!.L`10`*5
"101.!`2(1!/`+"`0$!`initialCount`,.+,!.05`3%((`!`%#*+.! M
&RXQWHU LQLWLDO&RXQW={1} !

0XWDWLQJWKHVWDWH
!0`+)!/`3%0$``2!.5`(!.`* `/0.%#$0"+.3. ` `0+`)100!`0$!`%*0!.*(`/00!`+"
+),+*!*0/K`/%*#`0$!`setState`"1*0%+*L`3!`*`0!((`0$!`(%..5`$+3`3!`3*0`0$!`/00!`0+
!`$*#! K`/`/++*`/`0$!`/00!`%/`1, 0! L`!0`.!_.!* !./`0$!`+),+*!*0L`* `3!`*
!//`0$!`*!3`/00!`0$.+1#$`0$!`this.state`,.+,!.05—0$0W/`%0K

+)!0%)!/L`$+3!2!.L`3!`+1( `)'!`0$!`)%/0'!`+"`)100%*#`0$!`/00!`+&!0` %.!0(5L

(! %*#`0+` *#!.+1/`+*/!-1!*!/`"+.`0$!`+),+*!*0W/`+*/%/0!*5`* `,!."+.)*!K

%./0`+"`((L`%"`3!`)100!`0$!`/00!`3%0$+10`1/%*#`setStateL`03+` `0$%*#/`*`$,,!*M

$!`/00!`$*#!/`3%0$+10`)'%*#`0$!`+),+*!*0`.!_.!* !.
$!*!2!.`setState`#!0/`((! `%*`0$!`"101.!L`0$!`)100! `/00!`#!0/`,,(%!

"`3!`#+`'`0+`0$!`+1*0!.`!4),(!`* `$*#!`0$!`(%'`$* (!.`0+`0$!`"+((+3%*#L`3!`*

/!!`0$0`(%'%*#`B` +!/`*+0`""!0`0$!`.!* !.! `2(1!`%*`0$!`.+3/!.K` +3!2!.L`%"`3!`(++'
%*0+`0$!`+),+*!*0`1/%*#`0$!`!0`!2++(/L`0$!`2(1!`+"`0$!`/00!`%/`+..!0(5`1, 0! K
$%/`%/`*`%*+*/%/0!*0`/00!`* `3!`/1.!(5` +`*+0`3*0`%0`%*`+1.`,,(%0%+*/M
KDQGOH&OLFN() {
this.state.FRXQW++;
}

S`9=@`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

"`5+1`.!` +%*#`%0`5`)%/0'!L`5+1`*`!/%(5`"%4`%0`5`1/%*#`0$!`setState` N`10`%"`5+1

"%* `5+1./!("` +%*#`%0`+*`,1.,+/!L`"+.`!4),(!L`0+`2+% `0$!`+),+*!*0`.!_.!* !.%*#L`5+1
$ `!00!.`.!_0$%*'`0$!`/0.101.!`+"`5+1.`+),+*!*0/K

/`3!`/3`%*`Chapter 3L`.!0!`.1(5`!1/(!`+),+*!*0/L`+*!`+"`0$!`.!/+*/`3$5`3!`1/!
0$!`/00!`+&!0`%/`0+`/0+.!`2(1!/`0$0`.!`*!! ! `%*/% !`0$!`render`)!0$+ K

$!`/!+* `,.+(!)`0$0`+1./`3$!*`0$!`/00!`%/`)100! ` %.!0(5`%/`0$0L

3$!*!2!.`setState`%/`((! `%*`*5`+0$!.`,.0`+"`0$!`+),+*!*0L`0$!`)100! `/00!`#!0/
,,(%! `1*!4,!0! (5K

+.`!4),(!L`%"`3!`'!!,`+*`3+.'%*#`+*`0$!`Counter`+),+*!*0`* `3!` `0$!`"+((+3%*#

100+*L`3$%$`1, 0!/`0$!`/00!`.!0%*#``*!3`foo`,.+,!.05L`3!`*`/!!`0$0`(%'%*#
0$!`B` +!/`*+0`$2!`*5`2%/%(!`!""!0K` +3!2!.L`/`/++*`/`3!`(%'`, 0!L`0$!`+1*0`2(1!
%*`0$!`.+3/!.`)'!/``&1),L` %/,(5%*#`0$!`1..!*0`$% !*`/00!`+1*0`2(1!M
EXWWRQRQ&OLFN={() => this.VHW6WDWH({ IRR 'bar' })}>
Update
EXWWRQ!

$%/`1*+*0.+((! `!$2%+.`%/`/+)!0$%*#`3!`3*0`0+`2+% `/`3!((K

/0`10`*+0`(!/0L`)100%*#`0$!`/00!`$/``/!2!.!`%),0`+*`,!."+.)*!K`+`/$+3`0$%/
!$2%+.L`3!`.!`#+%*#`0+`.!0!``*!3`+),+*!*0L`/%)%(.`0+`0$!`(%/0`3!`1/! `%*`Chapter
9L` ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/L`3$!*`3!`(!.*! `$+3`0+`1/!`keys
* `PureComponentK

$*#%*#`0$!`2(1!`+"`0$!`/00!`$/``*!#0%2!`%),0`3$!*`1/%*#`PureComponentK`+
1* !./0* `0$!`,.+(!)L`3!`.!`#+%*#`0+`.!0!`0$!`"+((+3%*#`ListM
FODVV List H[WHQGV PureComponent

*/% !`%0/`constructorL`3!`%*%0%(%6!`0$!`(%/0`3%0$`03+`%0!)/`* `%* `0$!`!2!*0`$* (!.M

FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
LWHPV: ['foo', 'bar']
};
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

S`9>7`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

$!`(%'`$* (!.`%/`,.!005`/%),(!—%0`&1/0`,1/$!/``*!3`!(!)!*0`%*0+`0$!`..5`Q3!`3%((`/!!
(0!.`3$5`0$0`%/`3.+*#R`* `0$!*`%0`/!0/`0$!`..5`'`%*0+`0$!`stateM
KDQGOH&OLFN() {
this.state.items.SXVK('baz');
this.VHW6WDWH({
LWHPV: this.state.LWHPV
});
}

%*((5L`3!`1/!`0$!`render`)!0$+ `0+` %/,(5`0$!`1..!*0`(!*#0$`+"`0$!`(%/0`* `0$!`100+*

0$0`0.%##!./`0$!`$* (!.M
UHQGHU() {
UHWXUQ (
GLY!
{this.state.items.OHQJWK}
EXWWRQRQ&OLFN={this.KDQGOH&OLFN}!+EXWWRQ!
GLY!
);
}

++'%*#`0`0$!`+ !L`3!`)%#$0`0$%*'`0$0`0$!.!`.!`*+`%//1!/N`$+3!2!.L`%"`3!`.1*`0$!
+),+*!*0`%*/% !`0$!`.+3/!.L`3!W((`*+0%!`0$0`0$!`2(1!` +!/*W0`#!0`1, 0! `3$!*`3!
(%'`BK

2!*`%*`0$%/`/!L`5`$!'%*#`0$!`/00!`+"`0$!`+),+*!*0`1/%*#`0$!`!0`!2++(L`3!`*
/!!`$+3`0$!`/00!`$/`!!*`1, 0! `%*0!.*((5L`3%0$+10`1/%*#``.!_.!* !.M
<List>
State
items: Array[3]
0: "foo"
1: "bar"
2: "baz"

$!`.!/+*`3$5`3!`!4,!.%!*!`0$%/`%*+*/%/0!*5`%/`0$0`3!`)100! `0$!`..5`%*/0! `+"

,.+2% %*#``*!3`2(1!K

1/$%*#``*!3`%0!)`%*0+`0$!`..5L`%*`"0L` +!/`*+0`.!0!``*!3`..5K
$!`PureComponent` !% !/`%"`0$!`+),+*!*0`/$+1( `!`1, 0! `5`$!'%*#`3$!0$!.`0$!
2(1!/`+"`%0/`,.+,!.0%!/`* `/00!`.!`$*#! `10L`%*`0$%/`/!L`3!`,//! `0$!`/)!`..5
#%*K`$%/`*`!`+1*0!._%*01%0%2!`%*`0$!`!#%**%*#L`!/,!%((5`%"`5+1`.!`*+0`1/! `0+
3+.'%*#`3%0$`%))10(!` 0`/0.101.!/K

S`9>8`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

$!`,+%*0`$!.!`%/`0+`(35/`/!0``*!3`2(1!`+"`0$!`state`,.+,!.05L`3$%$`)!*/`3!`*
!/%(5`"%4`0$!`%//1!`5`$*#%*#`0$!`(%'`$* (!.`+"`0$!`List`+),+*!*0`%*`0$!`"+((+3%*#
35M
KDQGOH&OLFN() {
this.VHW6WDWH({
LWHPV: this.state.items.FRQFDW('baz')
});
}

$!`concat`"1*0%+*`+"`0$!`..5`.!01.*/``*!3`..5L`0$1/`,,!* %*#`0$!`*!3`%0!)`0+`0$!
,.!2%+1/`+*!/K` *`0$%/`35L`PureComponent`"%* /``*!3`..5`%*`0$!`/00!`* `.!_.!* !./
%0/!("`+..!0(5K

8VLQJLQGH[HVDVDNH\
*`Chapter 9L` ),.+2!`0$!`!."+.)*!`+"`+1.`,,(%0%+*/L`3$%$`0('/`+10`,!."+.)*!
* `0$!`.!+*%(!.L`3!`/3`$+3`3!`*`$!(,`!0`"%#1.!`+10`0$!`/$+.0!/0`,0$`0+`1, 0!`0$!
`5`1/%*#`0$!`key`,.+,K

$!`'!5`,.+,!.05`1*%-1!(5`% !*0%"%!/`*`!(!)!*0`%*`0$!`L`* `!0`1/!/`%0`0+`$!'`%"

0$!`!(!)!*0`%/`*!3L`+.`%"`%0`$/`0+`!`1, 0! `3$!*`0$!`+),+*!*0`,.+,!.0%!/`+.`/00!
$*#!K

/%*#`'!5/`%/`(35/``#++ `% !`* L`%"`5+1` +*W0` +`%0L`!0`#%2!/``3.*%*#`%*`0$!

+*/+(!`Q%*` !2!(+,)!*0`)+ !RK` +3!2!.L`%0`%/`*+0`/%),(5``)00!.`+"`1/%*#``'!5N
/+)!0%)!/L`0$!`2(1!`0$0`3!` !% !`0+`1/!`/``'!5`*`)'!`0$!` %""!.!*!K` *`"0L`1/%*#
0$!`3.+*#`'!5`*`#%2!`1/`1*!4,!0! `!$2%+./`%*`/+)!`%*/0*!/K` *`0$%/`/!0%+*L`3!`3%((
/!!`+*!`+"`0$+/!`%*/0*!/K

!0W/L`#%*L`.!0!``List`+),+*!*0L`/`/$+3*`$!.!M
FODVV List H[WHQGV PureComponent

*`0$!`constructorL`0$!`%0!)/`.!`%*%0%(%6! `* `0$!`$* (!./`.!`+1* `0+`0$!

+),+*!*0M
FRQVWUXFWRU(props) {
VXSHU(props);
this.VWDWH = {
LWHPV: ['foo', 'bar']
};
this.KDQGOH&OLFN = this.handleClick.ELQG(this);
}

S`9>9`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

$!`%),(!)!*00%+*`+"`0$!`(%'`$* (!.`%/`/(%#$0(5` %""!.!*0`".+)`0$!`,.!2%+1/`+*!L`!1/!

%*`0$%/`/!L`3!`*!! `0+`%*/!.0``*!3`%0!)`0`0$!`0+,`+"`0$!`(%/0M
KDQGOH&OLFN() {
FRQVW items = this.state.items.VOLFH();
items.XQVKLIW('baz');
this.VHW6WDWH({
LWHPV
});
}

%*((5L`%*`0$!`render`)!0$+ L`3!`/$+3`0$!`(%/0`* `0$!`B`100+*`0+` `0$!`6`%0!)`0`0$!

0+,`+"`0$!`(%/0M
UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.PDS((item, index) => (
OLNH\={index}!{item}OL!
))}
XO!

EXWWRQRQ&OLFN={this.KDQGOH&OLFN}!+EXWWRQ!
GLY!
);
}

"`5+1`.1*`0$!`+),+*!*0`%*/% !`0$!`.+3/!.L`5+1`3%((`*+0`/!!`*5`,.+(!)/N`(%'%*#
0$!`B`100+*`%*/!.0/``*!3`%0!)`0`0$!`0+,`+"`0$!`(%/0K`10`(!0W/` +`*`!4,!.%)!*0K

!0W/`$*#!`0$!`render`)!0$+ `%*`0$!`"+((+3%*#`35L` %*#`*`%*,10`"%!( `*!.`!$

%0!)K`!`0$!*`1/!`*`%*,10`"%!( `!1/!`3!`*`! %0`%0/`+*0!*0L`)'%*#`%0`!/%!.`0+`"%#1.!
+10`0$!`,.+(!)M
UHQGHU() {
UHWXUQ (
GLY!
XO!
{this.state.items.PDS((item, index) => (
OLNH\={index}!
{item}
LQSXWW\SH="text" !
OL!
))}
XO!
EXWWRQRQ&OLFN={this.handleClick}!+EXWWRQ!

S`9>:`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

GLY!
);
}

"`3!`.1*`0$%/`+),+*!*0`#%*`%*`0$!`.+3/!.L`+,5`0$!`2(1!/`+"`0$!`%0!)/`%*`0$!`%*,10
"%!( /L`* `0$!*`(%'`BL`3!`3%((`#!0`1*!4,!0! `!$2%+.K

/`/$+3*`%*`0$!`"+((+3%*#`/.!!*/$+0L`0$!`%0!)/`/$%"0` +3*`3$%(!`0$!`%*,10`!(!)!*0/
.!)%*`%*`0$!`/)!`,+/%0%+*L`%*`/1$``35`0$0`0$!%.`2(1!` +!/`*+0`)0$`0$!`2(1!`+"`0$!
%0!)/`*5)+.!M

1**%*#`0$!`+),+*!*0L`(%'%*#`BL`* `$!'%*#`0$!`+*/+(!`/$+1( `#%2!`1/`((`0$!

*/3!./`3!`*!! K

$0`3!`*`/!!`%/`0$0`!0L`%*/0! `+"`%*/!.0%*#`0$!`*!3`!(!)!*0`+*`0+,L`/3,/`0$!`0!40`+"
0$!`03+`!4%/0%*#`!(!)!*0/L`* `%*/!.0/`0$!`(/0`%0!)`0`0$!`+00+)`/`%"`%0`3/`*!3K`$!
.!/+*`%0` +!/`0$0`%/`!1/!`3!`.!`1/%*#`0$!`%* !4`+"`0$!`map`"1*0%+*`/`0$!`'!5K

*`"0L`0$!`%* !4`(35/`/0.0/`".+)`0L`!2!*`%"`3!`,1/$``*!3`%0!)`0+`0$!`0+,`+"`0$!`(%/0L`/+
!0`0$%*'/`0$0`3!`$*#! `0$!`2(1!/`+"`0$!`!4%/0%*#`03+L`* ` ! ``*!3`!(!)!*0`0
%* !4`2K`$!`!$2%+.`%/`0$!`/)!`/`%0`3+1( `$2!`!!*`3%0$+10`1/%*#`0$!`'!5`,.+,!.05`0
((K

S`9>;`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

$%/`%/``2!.5`+))+*`,00!.*`!1/!L`3!`)5`0$%*'`0$0`,.+2% %*#`*5`'!5`%/`(35/`0$!
!/0`/+(10%+*L`10`%0`%/`*+0`(%'!`0$0`0`((K`$!`'!5`$/`0+`!`1*%-1!`* `/0(!L`% !*0%"5%*#
+*!L`* `+*(5`+*!L`%0!)K

+`/+(2!`0$%/`,.+(!)`3!`*L`"+.`!4),(!L`1/!`0$!`2(1!`+"`0$!`%0!)`%"`3!`!4,!0`%0`*+0`0+`!
.!,!0! `3%0$%*`0$!`(%/0L`+.`.!0!``1*%-1!`% !*0%"%!.K

6SUHDGLQJSURSHUWLHVRQ'20HOHPHQWV
$!.!`%/``+))+*`,.0%!`0$0`$/`.!!*0(5`!!*` !/.%! `/`*`*0%_,00!.*`5`*
.)+2N`%0`(/+`0.%##!./``3.*%*#`%*`0$!`+*/+(!`3$!*`5+1` +`%0`%*`5+1.`!0
,,(%0%+*K

0`%/``0!$*%-1!`0$0`%/`3% !(5`1/! `%*`0$!`+))1*%05`* ` `$2!`,!./+*((5`/!!*`%0

)1(0%,(!`0%)!/`%*`.!(_3+.( `,.+&!0/K`!`1/1((5`/,.! `0$!`,.+,!.0%!/`0+`0$!`!(!)!*0/`0+
2+% `3.%0%*#`!2!.5`/%*#(!`+*!`)*1((5L`3$%$`%/`/$+3*`/`"+((+3/M
&RPSRQHQW {...props}!

$%/`3+.'/`2!.5`3!((`* `%0`#!0/`0.*/,%(! `%*0+`0$!`"+((+3%*#`+ !`5`!(M

React.FUHDWH(OHPHQW(Component, props);

+3!2!.L`3$!*`3!`/,.! `,.+,!.0%!/`%*0+```!(!)!*0L`3!`.1*`0$!`.%/'`+"` %*#

1*'*+3*` `00.%10!/L`3$%$`%/` `,.0%!K

$!`,.+(!)`%/`*+0`.!(0! `+*(5`0+`0$!`/,.! `+,!.0+.N`,//%*#`*+*_/0* . `,.+,!.0%!/

+*!`5`+*!`(! /`0+`0$!`/)!`%//1!/`* `3.*%*#/K`%*!`0$!`/,.! `+,!.0+.`$% !/`0$!
/%*#(!`,.+,!.0%!/`3!`.!`/,.! %*#L`%0`%/`!2!*`$. !.`0+`"%#1.!`+10`3$0`3!`.!`,//%*#`0+
0$!`!(!)!*0K

+`/!!`0$!`3.*%*#`%*`0$!`+*/+(!L``/%`+,!.0%+*`3!`*` +`%/`.!* !.`0$!`"+((+3%*#

+),+*!*0M
FRQVW Spread = () => GLYIRR="bar"!;

$!`)!//#!`3!`#!0`(++'/`(%'!`0$!`"+((+3%*#`!1/!`0$!`foo`,.+,!.05`%/`*+0`2(% `"+.
`div`!(!)!*0M

*'*+3*`,.+,`a"++a`+*`D %2E`0#K`!)+2!`0$%/`,.+,`".+)`0$!`!(!)!*0

*`0$%/`/!L`/`3!`/% L`%0`%/`!/5`0+`"%#1.!`+10`3$%$`00.%10!`3!`.!`,//%*#`* `.!)+2!`%0

10L`%"`3!`1/!`0$!`/,.! `+,!.0+.L`/`%*`0$!`"+((+3%*#`!4),(!L`3!`**+0`+*0.+(`3$%$
,.+,!.0%!/`.!`,//! `".+)`0$!`,.!*0M

S`9><`T
*0%_00!.*/`0+`!`2+% ! $,0!.`89

FRQVW Spread = props => GLY {...props} !;

"`3!`1/!`0$!`+),+*!*0`%*`0$!`"+((+3%*#`35L`0$!.!`.!`*+`%//1!/M
6SUHDGFODVV1DPH="foo" !

`$%/L`$+3!2!.L`%/`*+0`0$!`/!`%"`3!` +`/+)!0$%*#`(%'!`0$!`"+((+3%*#K`!0`+),(%*/
!1/!`3!`.!`,,(5%*#``*+*_/0* . `00.%10!`0+`0$!``!(!)!*0M
6SUHDGIRR="bar" FODVV1DPH="baz"!

*!`/+(10%+*`3!`*`1/!`0+`/+(2!`0$%/`,.+(!)`%/`.!0!``,.+,!.05`((! `domProps`0$0`3!
*`/,.! `/"!(5`0+`0$!`+),+*!*0`!1/!`3!`.!`!4,(%%0(5`/5%*#`0$0`%0`+*0%*/`2(%
`,.+,!.0%!/K

+.`!4),(!L`3!`*`$*#!`0$!`Spread`+),+*!*0`%*`0$!`"+((+3%*#`35M
FRQVW Spread = props => GLY {...props.GRP3URSV} !;

!`*`0$!*`1/!`%0`/`"+((+3/M
6SUHDGIRR="bar" GRP3URSV={{ FODVV1DPH: 'baz' }}!

/`3!`$2!`/!!*`)*5`0%)!/`3%0$`!0L`%0W/`(35/`#++ `,.0%!`0+`!`!4,(%%0K

6XPPDU\
*+3%*#`((`0$!`!/0`,.0%!/`%/`(35/``#++ `0$%*#L`10`/+)!0%)!/`!%*#`3.!`+"`*0%_
,00!.*/`$!(,/`1/`2+% `0'%*#`0$!`3.+*#`,0$K`+/0`%),+.0*0(5L`(!.*%*#`0$!`.!/+*/`3$5
/+)!`0!$*%-1!/`.!`+*/% !.! ` `,.0%!`$!(,/`1/`1* !./0* `$+3`!0`3+.'/L`*
$+3`3!`*`1/!`%0`!""!0%2!(5K

*`0$%/`$,0!.L`3!`+2!.! `"+1.` %""!.!*0`35/`+"`1/%*#`+),+*!*0/`0$0`*`$.)`0$!

,!."+.)*!`* `!$2%+.`+"`+1.`3!`,,(%0%+*/K

+.`!$`+*!`+"`0$+/!L`3!`1/! `*`!4),(!`0+`.!,.+ 1!`0$!`,.+(!)`* `/1,,(%! `0$!

$*#!/`0+`,,(5L`%*`+. !.`0+`"%4`0$!`%//1!K

!`(!.*! `3$5`1/%*#`,.+,!.0%!/`0+`%*%0%(%6!`0$!`/00!`*`.!/1(0`%*`%*+*/%/0!*%!/`!03!!*
0$!`/00!`* `0$!`,.+,!.0%!/L`* `3!` %/+2!.! `3$5`)100%*#`0$!`/00!`%/` `"+.
,!."+.)*!K`!`(/+`/3`$+3`1/%*#`0$!`3.+*#`'!5`00.%10!`*`,.+ 1!` `!""!0/`+*
0$!`.!+*%(%0%+*`(#+.%0$)K`%*((5L`3!`(!.*! `3$5`/,.! %*#`*+*_/0* . `,.+,!.0%!/`0+
`!(!)!*0/`%/`+*/% !.! `*`*0%_,00!.*K

S`9>=`T
 
'HSOR\LQJWR3URGXFWLRQ
+3`0$0`5+1`$2!`+),(!0! `5+1.`"%./0`!0`,,(%0%+*L`%0`%/`0%)!`0+`(!.*`$+3`0+` !,(+5
%0`0+`0$!`3+.( K`+.`0$%/`,1.,+/!L`3!`3%((`1/!`0$!`(+1 `/!.2%!`((! `%#%0(`!*K

*`0$%/`$,0!.L`5+1`3%((`(!.*`$+3`0+` !,(+5`5+1.`!0`,,(%0%+*`1/%*#`+ !K&/`*

#%*4`+*`*`1*01`/!.2!.`".+)`%#%0(`!*K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#`0+,%/M

.!0%*#``%#%0(`!*`.+,(!0`* `+*"%#1.%*#`%0
!,(+5%*#`+1.`!0`,,(%0%+*`0+`,.+ 10%+*
+*"%#1.%*#`*#%*4L`9L`* `` +)%*
),(!)!*0%*#`%.(! `"+.`+*0%*1+1/` *0!#.0%+*

&UHDWLQJRXUILUVW'LJLWDO2FHDQ'URSOHW
`$2!`1/! `%#%0(`!*`"+.`0$!`(/0`"+1.`5!./`* ` `*`/5`0$0`%0`%/`+*!`+"`0$!`!/0`(+1
/!.2%!/` `$2!`0.%! L`*+0`&1/0`!1/!`+"`0$!`$!,`+/0/L`10`(/+`!1/!`%0`%/`/1,!.`!/5
* `"/0`0+`+*"%#1.!L`* `0$!`+))1*%05`$/``(+0`+"`1, 0! ` +1)!*00%+*`0+`"%4`)+/0`+"
0$!`+))+*`%//1!/`.!(0! `0+`0$!`/!.2!.`+*"%#1.0%+*K

0`0$%/`,+%*0L`5+1`3%((`*!! `0+`%*2!/0`/+)!`)+*!5`0+`#!0`0$%/`/!.2%!K` `3%((`/$+3`5+1`0$!

$!,!/0`35`0+` +`0$%/L`* `%"`%*`0$!`"101.!`5+1`3*0`0+`%*.!/!`0$!`,+3!.`+"`5+1.
.+,(!0/L`5+1`3%((`!`(!`0+`%*.!/!`0$!`,%05`3%0$+10`.! +%*#`0$!`+*"%#1.0%+*K`$!
(+3!/0`,.%!`"+.`0$!`2!.5`/%`.+,(!0`%/`I<K77`,!.`)+*0$`QI7K77>`,!.`$+1.RK`

$!`(0!/0``2!./%+*`+"`1*01`%/`8?K7;N`5+1`3%((`*!! `0+`'*+3`/+)!`/%`%*14
+))* /`0+`!`(!`0+`+*"%#1.!`5+1.`.+,(!0K` "`5+1W.!``!#%**!.`1/%*#`%*14L` +*W0
3+..5— W((`0.5`0+`/$+3`5+1`!$`/0!,`%*``2!.5`!/5`35K
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

6LJQLQJXSWR'LJLWDO2FHDQ
"`5+1` +*W0`$2!``%#%0(`!*`+1*0L`5+1`*`/%#*`1,`0`https:/b/bcloud.
digitalocean.bcom/bregistrations/bnewK

+1`*`/%#*`1,`3%0$`5+1.` ++#(!`+1*0L`+.`5`.!#%/0!.%*#`)*1((5K`*!`5+1`.!#%/0!.
3%0$` ++#(!L`5+1`3%((`/!!`0$!`%((%*#`%*"+`2%!3L`/`"+((+3/M

S`9>?`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

+1`*`,5`3%0$`5+1.`.! %0`. `+.`5`1/%*#`5(K`*!`5+1`+*"%#1.! `5+1.`,5)!*0

%*"+.)0%+*L`%#%0(`!*`3%((`/'`5+1`"+.`/+)!`%*"+.)0%+*`+10`5+1.`,.+&!0`/+`0$0`%0
*`+*"%#1.!`5+1.`.+,(!0`"/0!.M

S`9>@`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

&UHDWLQJRXUILUVW'URSOHW
!2!.0$!(!//L`3!`3%((`.!0!``*!3`.+,(!0`".+)`/.0$N`"+((+3`0$!/!`/0!,/`0+` +`/+M

8K !(!0`0$!`!3`.+,(!0`+,0%+*L`/`/$+3*`%*`0$!`"+((+3%*#`/.!!*/$+0M

S`9?7`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

9K $++/!`1*01`8?K7;K9`4=;L`/`"+((+3/M

:K $!*L`$++/!`0$!`0* . `,(*L`/`/$+3*`$!.!M

;K +1`*`0$!*`$++/!`I<\)+`%*`0$!`,5)!*0`+,0%+*M

S`9?8`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

<K !(!0``.!#%+*K` *`0$%/`/!L`3!`3%((`/!(!0`0$!`*`.*%/+`.!#%+*M

=K  `0$!`*)!`+"`5+1.`.+,(!0`* `0$!*`(%'`+*`0$!`.!0!`100+*L`/`"+((+3/M

S`9?9`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

>K 0`3%((`0'!`.+1* `:7`/!+* /`0+`.!0!`5+1.`.+,(!0K`*!`%0`$/`!!*`.!0! L

5+1`3%((`!`(!`0+`/!!`%0M

?K +((+3%*#`%0/`.!0%+*L`5+1`/$+1( `#!0`*`!)%(`3%0$`5+1.`.+,(!0`.! !*0%(/M

@K +3L`%*`5+1.`!.)%*(L`5+1`*`!//`0+`0$!` .+,(!0`5`1/%*#`0$!`"+((+3%*#
+))* M
VVKURRW#7+(B'523/(7B,3

S`9?:`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

87K $!`"%./0`0%)!`5+1`(+#`%*L`5+1`3%((`#!0``)!//#!`0+` `0$%/` `0+`5+1.`'*+3*

$+/0/K`$!*L`5+1`3%((`!`/'! `"+.`5+1.`.+,(!0`,//3+. `Q0$!`+*!`5+1`#+0`%*
5+1.`!)%(RL`* `0$!*`5+1`*!! `0+` !"%*!``*!3`,//3+. M

S`9?;`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

,QVWDOOLQJ1RGHMV
+3`0$0`5+1W.!`+**!0! `0+`5+1.` .+,(!0L`(!0W/`+*"%#1.!`%0K`%./0L`3!`*!! `0+`%*/0((`0$!
(0!/0`2!./%+*`+"`+ !K&/`1/%*#``K`$!`1..!*0`2!./%+*`+"`+ !`/`0`0$!`0%)!`+"`3.%0%*#
0$%/`++'`%/`88K88K4K`+((+3`0$!/!`#%2!*`/0!,/`0+`%*/0((`+ !K&/M

8K "L`3$!*`5+1`.!`.! %*#`0$%/`,.#.,$L`+ !`$/``*!3`2!./%+*L`$*#!`0$!

2!./%+*`%*`0$!`setup_11.x`+))* M
FGa
FXUOV/KWWSVGHEQRGHVRXUFHFRPVHWXSB[RQRGHVRXUFHBVHWXSVK

9K *!`5+1`#!0`0$!`nodesource_setup.sh`"%(!L`.1*`0$!`"+((+3%*#`+))* M
VXGREDVKQRGHVRXUFHBVHWXSVK

:K $!*L`%*/0((`+ !`5`.1**%*#`0$!`"+((+3%*#`+))* M
VXGRDSWLQVWDOOQRGHMV\

;K "`!2!.50$%*#`3+.'/`"%*!L`2!.%"5`0$!`%*/0((! `2!./%+*`+"`+ !`* `*,)`3%0$`0$!

"+((+3%*#`+))* /M
QRGHY
Y
QSPY


&RQILJXULQJ*LWDQG*LW+XE
`.!0! ``/,!%(`.!,+/%0+.5`"+.`$!(,%*#`5+1`0+` !,(+5`5+1.`"%./0`!0`,,(%0%+*`0+
,.+ 10%+*`Qhttps:/b/bgithub.bcom/bD3vEducation/bproductionRK

*`5+1.`.+,(!0L`5+1`*!! `0+`(+*!`0$%/` %0`.!,+/%0+.5`+.`5+1.`+3*`.!,+/%0+.5`%"`5+1`$2!

5+1.`!0`,,(%0%+*`.! 5`0+`!` !,(+5! K`$!`,.+ 10%+*`.!,+/%0+.5`%/`,1(%L`10
*+.)((5`5+1`3%((`1/!``,.%20!`.!,+/%0+.5N`%*`0$%/`/!L`5+1`*!! `0+` `0$!` `'!5`+"
5+1.`.+,(!0`0+`5+1.` %0 1`+1*0K`+`.!0!`0$%/`'!5L`"+((+3`0$!/!`/0!,/M

S`9?<`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

8K 1*`0$!`ssh-keygen`+))* `* `0$!*`,.!//`*0!.`0$.!!`0%)!/`3%0$+10`3.%0%*#

*5`,//,$./!M

"`5+1`(!"0`5+1.`!.)%*(`%*0%2!`"+.`)+.!`0$*`"%2!`)%*10!/L`5+1.
.+,(!0`+**!0%+*`3%((`,.+(5`!`(+/! L`* `5+1`3%((`*!! `0+`+**!0
#%*K`

S`9?=`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

9K *!`5+1`$2!`.!0! `5+1.` .+,(!0` `'!5L`5+1`*`/!!`%0`5`.1**%*#`0$!

"+((+3%*#`+))* M
YLURRWVVKLGBUVDSXE

+1`3%((`/!!`/+)!0$%*#`(%'!`0$%/M

:K +,5`5+1.` `'!5`* `0$!*`2%/%0`5+1.` %0 1`+1*0K` +`0+`!00%*#/`^`

* ` ` !5/`Qhttps:/b/bgithub.bcom/bsettings/bssh/bnewRK`$!*L`,/0!`5+1.`'!5
%*`0$!`0!40`.!`* ` `5+1.`0%0(!`0+`0$!`'!5M

S`9?>`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

;K *!`5+1`(%'`+*`0$!` ` `'!5`100+*L`5+1`3%((`/!!`5+1.` `'!5L`(%'!`/+M

<K +3`5+1`*`(+*!`+1.`.!,+/%0+.5`Q+.`5+1./R`1/%*#`0$!`"+((+3%*#`+))* M
JLWFORQHJLW#JLWKXEFRP'Y(GXFDWLRQSURGXFWLRQJLW

=K *!`5+1`(+*!`%0`"+.`0$!`"%./0`0%)!L`5+1`3%((`#!0``)!//#!L`/'%*#`5+1`0+`((+3
0$!``'!5`"%*#!.,.%*0M

>K +1`$2!`0+`3.%0!`5!/`* `0$!*`$%0`*0!.`0+`!`(!`0+`(+*!`%0M

S`9??`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

?K $!*L`5+1`$2!`0+`#+`0+`0$!`,.+ 10%+*` %.!0+.5`* `%*/0((`0$!`*,)`,'#!/M

FGSURGXFWLRQ
QSPLQVWDOO

@K "`5+1`3*0`0+`0!/0`0$!`,,(%0%+*L`&1/0`.1*`0$!`start`/.%,0M
QSPVWDUW

87K $!*`+,!*`5+1.`.+3/!.`* `#+`0+`5+1.` .+,(!0` `* ` `0$!`,+.0`*1)!.K` *

)5`/!L`%0`%/`http://159.65.102.222:3000M

88K $%/`3%((`.1*`0$!`,.+&!0`%*` !2!(+,)!*0`)+ !K` "`5+1`3*0`0+`.1*`0$!`,.+ 10%+*

)+ !L`0$!*`5+1`*`.1*`0$!`"+((+3%*#`+))* M
QSPUXQVWDUWSURGXFWLRQ

S`9?@`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

+1`/$+1( `/!!`9`.1**%*#L`/`/$+3*`%*`0$!`"+((+3%*#`/.!!*/$+0M

S`9@7`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

89K "`5+1`.1*`%0`* `5+1`2%!3`0$!`!03+.'`0`%*`5+1.`$.+)!`!2`++(/L`5+1`3%((

/!!`0$!`1* (!/`!%*#`(+ ! M

7XUQLQJRIIRXUGURSOHW
+`01.*`+""`0$!` .+,(!0L`"+((+3`0$!/!`/0!,/M

8K "`5+1`3*0`0+`01.*`+""`5+1.` .+,(!0L`5+1`*`#+`0+`0$!`+3!.`/!0%+*L`+.`5+1`*
1/!`0$!`\`/3%0$M

S`9@8`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

9K %#%0(`!*`3%((`$.#!`5+1`+*(5`3$!*`5+1.` .+,(!0`%/`K` "`5+1`(%'`+*`0$!

`/3%0$`0+`01.*`%0`+""L`0$!*`5+1`3%((`#!0`0$!`"+((+3%*#`)!//#!M

&RQILJXULQJQJLQ[30DQGDGRPDLQ
1.`.+,(!0`%/`.! 5`0+`!`1/! `"+.`,.+ 10%+*L`10`/`5+1`*`/!!L`3!`.!`/0%((`1/%*#`,+.0
:777K`!`*!! `0+`+*"%#1.!`*#%*4`* `%),(!)!*0``,.+45`0+`.! %.!0`0$!`0.""%`".+)`,+.0`?7
0+`:777N`0$%/`)!*/`3!`3+*W0`*!! `0+`/,!%"5`0$!`,+.0` %.!0(5`*5)+.!K`+ !`.+ 10%+*
.+!//`*#!.`Q9R`3%((`$!(,`1/`.1*`0$!`+ !`/!.2!.`%*`,.+ 10%+*`/!1.!(5K
!*!.((5L`%"`3!`.1*`+ !` %.!0(5`3%0$`0$!`node`+.`babel-node`+))* L`* `0$!.!`%/`*
!..+.`%*`0$!`,,L`0$!*`%0`3%((`./$`* `3%((`/0+,`3+.'%*#N`9`.!/0.0/`0$!`*+ !`/!.2!.`%"`*
!..+.`+1./K

%./0L`%*`5+1.` .+,(!0L`5+1`*!! `0+`%*/0((`9`#(+((5M

QSPLQVWDOOJSP

S`9@9`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

,QVWDOOLQJDQGFRQILJXULQJQJLQ[
+`%*/0((`*#%*4L`5+1`*!! `0+`!4!10!`0$!`"+((+3%*#`+))* M
VXGRDSWJHWXSGDWH
VXGRDSWJHWLQVWDOOQJLQ[

"0!.`5+1`$2!`%*/0((! `*#%*4L`0$!*`5+1`*`/0.0`0$!`+*"%#1.0%+*M

8K !`*!! `0+` &1/0`0$!`"%.!3((`0+`((+3`0$!`0.""%`"+.`,+.0`?7K`+`(%/0`0$!`2%((!

,,(%0%+*`+*"%#1.0%+*/L`5+1`*!! `0+`.1*`0$!`"+((+3%*#`+))* M
VXGRXIZDSSOLVW
$YDLODEOHDSSOLFDWLRQV
1JLQ[)XOO
1JLQ[+773
1JLQ[+7736
2SHQ66+

9K Nginx Full`)!*/`0$0`%0`3%((`((+3`0$!`0.""%`".+)`,+.0`?7`Q R`* `,+.0`;;:

Q RK`!`$2!*W0`+*"%#1.! `*5` +)%*`3%0$`L`/+L`"+.`*+3L`3!`/$+1(
.!/0.%0`0$!`0.""%`0+`/!* `0$!`0.""%`&1/0`0$.+1#$`,+.0`?7`Q RM
VXGRXIZDOORZ 1JLQ[+773
5XOHVXSGDWHG
5XOHVXSGDWHG Y

"`5+1`0.5`0+`!//`0$!` .+,(!0` L`5+1`/$+1( `/!!`*#%*4`3+.'%*#M

S`9@:`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

:K +1`*`)*#!`0$!`*#%*4`,.+!//`3%0$`0$!/!`+))* /M
6WDUWVHUYHUVXGRV\VWHPFWOVWDUWQJLQ[
6WRSVHUYHUVXGRV\VWHPFWOVWRSQJLQ[
5HVWDUWVHUYHUVXGRV\VWHPFWOUHVWDUWQJLQ[

6HWWLQJXSDUHYHUVHSUR[\VHUYHU
/` `)!*0%+*! `,.!2%+1/(5L`3!`*!! `0+`/!0`1,``.!2!./!`,.+45`/!.2!.`0+`/!* `0$!`0.""%`".+)
,+.0`?7`Q R`0+`,+.0`:777`Q!0`,,RK`+` +`0$%/L`5+1`*!! `0+`+,!*`0$!`"+((+3%*#`"%(!M
VXGRYLHWFQJLQ[VLWHVDYDLODEOHGHIDXOW

$!`/0!,/`.!`/`"+((+3/M

8K *`0$!`location /`(+'L`5+1`*!! `0+`.!,(!`0$!`+ !`%*`0$!`"%(!`3%0$`0$!

"+((+3%*#M
ORFDWLRQ / {
SUR[\BSDVV http://localhost:3000;
SUR[\BKWWSBYHUVLRQ 1.1;
SUR[\BVHWBKHDGHU Upgrade $http_upgrade;
SUR[\BVHWBKHDGHU Connection 'upgrade';
SUR[\BVHWBKHDGHU Host $host;
SUR[\BFDFKHBE\SDVV $http_upgrade;
}

9K *!`5+1`$2!`/2! `0$!`"%(!L`5+1`*`2!.%"5`3$!0$!.`0$!.!`%/``/5*04`!..+.`%*
0$!`*#%*4`+*"%#1.0%+*`3%0$`0$!`"+((+3%*#`+))* M
VXGRQJLQ[W

:K "`!2!.50$%*#`%/`"%*!L`0$!*`5+1`/$+1( `/!!`0$%/M

;K %*((5L`5+1`*!! `0+`.!/0.0`0$!`*#%*4`/!.2!.M
VXGRV\VWHPFWOUHVWDUWQJLQ[

+3L`5+1`/$+1( `!`(!`0+`!//`0$!`!0`,,(%0%+*`3%0$+10`0$!`,+.0L`/`/$+3*`%*`0$!
"+((+3%*#`/.!!*/$+0M

S`9@;`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

$GGLQJDGRPDLQWRRXUGURSOHW
/%*#`*` `"+.``3!/%0!`%/`*+0`*%!N`3!`(35/`*!! `0+`1/!`` +)%*`0+`$!(,`1/!./`"%* `+1.
3!/%0!`!/%!.K` "`5+1`3*0`0+`1/!`` +)%*`+*`5+1.` .+,(!0L`5+1`*!! `0+`$*#!`0$!
*)!/!.2!./`+"`5+1.` +)%*`0+`,+%*0`0+`%#%0(`!*`K` `*+.)((5`1/!` + 5`0+
.!#%/0!.`)5` +)%*/K`+` +`/+`1/%*#` + 5L`"+((+3`0$!/!`/0!,/M

8K ` +`0+`https:/b/bdcc.bgodaddy.bcom/bmanage/bYOURDOMAIN.bCOM/bdnsL`* `0$!*`#+`0+
0$!`)!/!.2!./`/!0%+*M

S`9@<`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

9K (%'`+*`0$!`$*#!`100+*L`/!(!0`1/0+)L`* `0$!*`/,!%"5`0$!`%#%0(`!*
M

S`9@=`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

:K +.)((5L`0$%/`0'!/`!03!!*`8<`* `:7`)%*10!/`"+.`0$!``$*#!/`0+`!
.!"(!0! N`"+.`*+3L`"0!.`5+1`$2!`1, 0! `5+1.`)!/!.2!./L`#+`0+`5+1.` .+,(!0
/$+. L`* `0$!*`$++/!`0$!` `` +)%*`+,0%+*M

S`9@>`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

;K $!*L`3.%0!`5+1.` +)%*`*)!L`/!(!0`5+1.` .+,(!0L`* `(%'`+*`0$!`

+)%*`100+*M

+3L`5+1`$2!`0+`.!0!``*!3`.!+. `"+.`K`!(!0`0$!``0L`%*`0$!
`3.%0!`wwwL`%*`0$!`(%/`"%!( `3.%0!`@L`* `5` !"1(0L`0$!``%/`43200N`0$%/`%/
0+`!*(!`!//`0+`5+1.` +)%*`1/%*#`0$!`www`,.!"%4M

S`9@?`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

"`5+1` % `!2!.50$%*#`+..!0(5L`5+1`/$+1( `!`(!`0+`!//`5+1.` +)%*`* `/!!`0$!`!0

,,(%0%+*`3+.'%*#K`/` `/% `!"+.!L`0$%/`,.+!//`*`0'!`1,`0+`:7`)%*10!/L`10`%*`/+)!
/!/L`%0`*`0'!`1,`0+`9;`$+1./L` !,!* %*#`+*`0$!``,.+,#0%+*`/,!! M

,PSOHPHQWLQJ&LUFOH&,IRUFRQWLQXRXV
LQWHJUDWLRQ
W2!`!!*`1/%*#`%.(! `"+.``3$%(!`* ` `*`0!((`5+1`0$0`%0`%/`+*!`+"`0$!`!/0` `/+(10%+*/M`%0
%/`".!!`"+.`,!./+*(`1/!L`#%2%*#`5+1`1*(%)%0! `.!,+/%0+.%!/`* `1/!./L`5+1`$2!`8L777`1%( /
)%*10!/`,!.`)+*0$L`+*!`+*0%*!.L`* `+*!`+*1..!*0`&+N`%"`5+1`*!! `)+.!L`5+1`*
1,#. !`0$!`,(*`3%0$`*`%*%0%(`,.%!`+"`I<7`,!.`)+*0$K

S`9@@`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

$!`"%./0`0$%*#`5+1`*!! `0+` +`%/`%#*`,`+*`0$!`/%0!`1/%*#`5+1.` %0 1`+1*0`Q+.

%01'!0L`%"`5+1`,.!"!.RK` "`5+1`$++/!`0+`1/!` %0 1L`5+1`*!! `0+`10$+.%6!`%.(! `%*
5+1.`+1*0L`/`/$+3*`%*`0$!`"+((+3%*#`/.!!*/$+0M

S`:77`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

$GGLQJDQ66+NH\WR&LUFOH&,
+3`0$0`5+1`$2!`.!0! `5+1.`+1*0L`%.(! `*!! /``35`0+`(+#`%*`0+`5+1.`%#%0(
!*` .+,(!0`0+`.1*`0$!` !,(+5`/.%,0K`+((+3`0$!/!`/0!,/`0+`+),(!0!`0$%/`0/'M

8K .!0!``*!3` `'!5`%*/% !`+1.` .+,(!0`1/%*#`0$!`"+((+3%*#`+))* M

VVKNH\JHQWUVD
7KHQVDYHWKHNH\DVVVKLGBUVDBGURSOHWZLWKQRSDVVZRUG

9K "0!.`0$0L`(!0W/` `0$!`'!5`0+`+1.`autorhized_keysM
FDWLGBUVDBGURSOHWSXE!!DXWKRUL]HGBNH\V

:K +3L`5+1`*!! `0+` +3*(+ `0$!`,.%20!`'!5K`+`2!.%"5`0$0`5+1`*`(+#`%*`3%0$

0$!`*!3`'!5L`5+1`*!! `0+`+,5`%0`0+`5+1.`(+(`)$%*!L`/`"+((+3/M
,Q\RXUORFDOPDFKLQHGR
VFSURRW#<285B'523/(7B,3URRWVVKLGBUVDBGURSOHWaVVK
VVKDGGLGBUVDBGURSOHW
VVKYURRW#<285B'523/(7B,3

"`5+1` % `!2!.50$%*#`+..!0(5L`5+1`/$+1( `!`(!`0+`(+#`%*`0+`5+1.` .+,(!0`3%0$+10`

,//3+. L`* `0$0`)!*/`%.(! `*`$2!`!//`0+`+1.` .+,(!0M

8K +,5`0$!`+*0!*0`+"`5+1.`id_rsa_droplet.pub`'!5`* `0$!*`#+`0+`5+1.
.!,+/%0+.5`/!00%*#/`Q0$!`#!.`%+*`*!40`0+`0$!`*)!`+"`5+1.`.!,+/%0+.5RM

S`:78`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

9K $!*L`#+`0+` `!.)%//%+*/L`/`"+((+3/M

:K +1`*`(/+`!//`+*`0$!
`https://circleci.com/gh/<285B*,7B86(5/<285B5(326,725</edit#sshL
* `0$!*`(%'`+*`0$!` ` ` !5`100+*M

;K /0!`5+1.`,.%20!`'!5L`* `0$!*`,10``*)!`0+`0$!`$+/0*)!N`3!`3%((`*)!`%0
%#%0(`!*`.+,(!0K

S`:79`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

&RQILJXULQJ&LUFOH&,
+3`0$0`5+1`$2!`+*"%#1.! `0$!`%.(! `!//`0+`5+1.` .+,(!0L`5+1`*!! `0+` `
config`"%(!`0+`5+1.`,.+&!0`0+`/,!%"5`0$!`&+/`5+1`3*0`0+`!4!10!`"+.`0$!` !,(+5)!*0
,.+!//K`$%/`,.+!//`%/`/$+3*`%*`0$!`"+((+3%*#`/0!,/M

8K +.`0$%/L`5+1`*!! `0+`.!0!`0$!`.circleci` %.!0+.5`* ` `0$!`"+((+3%*#

%*/% !`0$!`"%(!`config.ymlM
YHUVLRQ: 2
MREV:
EXLOG:
EUDQFKHV:
RQO\:
- master
ZRUNLQJBGLUHFWRU\: ~/tmp
GRFNHU:
- LPDJH: circleci/node:10
VWHSV:
- FKHFNRXW
- UXQ: npm install
- UXQ npm run lint
- UXQ: npm test
- UXQ: ssh -o 6WULFW+RVW.H\&KHFNLQJ=no
'523/(7B86(5@'523/(7B,3 'cd production; git checkout PDVWHU; git
pull; npm install; npm run start:production;'

9K $!*`5+1`$2!``.yml`"%(!L`5+1`*!! `0+`!`.!"1(`3%0$`0$!`%* !*00%+*N`/%*!`%0`%/

/%)%(.`0+`50$+*L`%"`5+1` +*W0`%* !*0`+..!0(5`5+1`3%((`#!0`*`!..+.K`!0W/`/!!
$+3`0$%/`"%(!`%/`/0.101.! M
YHUVLRQ 2

:K ,!%"5`0$!`%.(! `2!./%+*`3!`3%((`1/!K` *`0$%/`/!L`5+1`.!`1/%*#`2!./%+*`9`Q0$!

(0!/0`+*!L`0`0$!`0%)!`+"`3.%0%*#`0$%/`++'RM
MREV:

;K */% !`jobsL`3!`3%((`/,!%"5`0$0`%0`*!! /`0+`+*"%#1.!`0$!`+*0%*!.N`3!`3%((

.!0!`%0`1/%*#`+'!.L`* `(/+`+10(%*!`0$!`/0!,/`0+`"+((+3`"+.`0$!` !,(+5)!*0
,.+!//M
EXLOG:
EUDQFKHV:
RQO\:
- master

S`:7:`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

<K *`0$%/`(+'L`3!`.!`/,!%"5%*#`0$0`3!`3%((`1/!`+*(5`0$!`master`.*$`+"`0$!
.!,+/%0+.5K`"`+1./!L`5+1`*`$*#!`%0`"+.`*5`.*$`5+1`3*0`0+` !,(+5M
ZRUNLQJBGLUHFWRU\: ~/tmp

=K $!`working_directory`3%((`!`0$!`0!),+.(` %.!0+.5`3!`3%((`1/!`0+`%*/0((
0$!``,'#!/`* `.1*`+1.` !,(+5`/.%,0/K` *`0$%/`/!L` ` !% ! `0+`1/!`0$!
tmp` %.!0+.5L`/`"+((+3/M

GRFNHU:
- LPDJH: circleci/node:10

>K /` `/% `!"+.!L`3!`3%((`.!0!``+'!.`+*0%*!.L`* `%*`0$%/`/!L` `/!(!0! `*

!4%/0%*#`%)#!`0$0`%*(1 !/`node: 10K` "`5+1`3*0`0+`'*+3`+10`((`0$!
2%((!`%)#!/L`5+1`*`2%/%0`https:/b/bcircleci.bcom/bdocs/b2.b0/bcircleci-
imagesM

VWHSV:
- FKHFNRXW
- UXQ: npm install
- UXQ: npm run lint
- UXQ: npm test
- UXQ: ssh -o 6WULFW+RVW.H\&KHFNLQJ=no '523/(7B86(5@'523/(7B,3
'cd production; git checkout master; git pull; npm install; npm run
start:production;'

+.`+ !`/!L`0$!`$!'+10`%/``/%),(!`#%0`$!'+10`0+`)/0!.L`0$!*`+*`!$`.1*`/!*0!*!L
5+1`*!! `0+`/,!%"5`0$!`/.%,0/`5+1`3*0`0+`.1*K`+((+3`0$!/!`/0!,/M

8K npm installM`%./0L`5+1`*!! `0+`%*/0((`0$!``,'#!/`0+`!`(!`0+`,!."+.)

0$!`*!40`0/'/K
8K npm run lintM`4!10!/`0$!`%*0`2(% 0%+*N`%"`%0`"%(/L`%0`3%((`.!'
0$!` !,(+5)!*0`,.+!//L`+0$!.3%/!L`%0`+*0%*1!/`3%0$`0$!`*!40`.1*K
9K npm run testM`4!10!/`0$!`&!/0`2(% 0%+*/N`%"`%0`"%(/L`%0`3%((`.!'`0$!
!,(+5)!*0`,.+!//L`+0$!.3%/!L`%0`+*0%*1!/`3%0$`0$!`*!40`.1*K
:K *`0$!`(/0`/0!,L`3!`+**!0`0+`+1.`%#%0(`!*`.+,(!0L`,//%*#
0$!`StrictHostKeyChecking=no`"(#`0+` %/(!`0$!`/0.%0`$+/0`'!5`$!'%*#L
0$!*`3!`1/!`0$!`$DROPLET_USER`* `$DROPLET_IP``2.%(!/`0+`+**!0`%0
Q3!`3%((`.!0!`0$+/!`%*`0$!`*!40`/0!,RL`* `"%*((5L`3!`3%((`/,!%"5`((`0$!
+))* /`3!`3%((`,!."+.)`%*/% !`+1.` .+,(!0`1/%*#`/%*#(!`-1+0!/K`$!/!
+))* /`.!`(%/0! `/`"+((+3/M`
cd productionM` .*0/`!//`0+`0$!`,.+ 10%+*`Q+.`5+1.` %0
.!,+/%0+.5`*)!R

S`:7;`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

git checkout masterM`$%/`3%((`$!'+10`0$!`)/0!.`.*$

git pullM`1((/`0$!`(0!/0`$*#!/`".+)`+1.`.!,+/%0+.5
npm run start:productionM`$%/`%/`0$!`"%*(`/0!,L`3$%$`.1*/`+1.
,.+&!0`%*`,.+ 10%+*`)+ !

&UHDWLQJ(19YDULDEOHVLQ&LUFOH&,
/`5+1`/3`,.!2%+1/(5L`3!`.!`1/%*#`0$!`$DROPLET_USER`* `$DROPLET_IP`2.%(!/L`10
+`3!` !"%*!`0$+/!O`+((+3`0$!/!`/0!,/M

8K +1`*!! `0+`#+`0+`5+1.`,.+&!0`/!00%*#/`#%*`* `/!(!0`0$!`Environment

Variables`+,0%+*K`$!*L`5+1`*!! `0+`.!0!`0$!`DROPLET_USER`2.%(!M

S`:7<`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

9K $!*L`5+1`*!! `0+`.!0!`0$!`DROPLET_IP`3%0$`5+1.` .+,(!0` M

:K +3L`5+1`*!! `0+`,1/$`0$!`config`"%(!`0+`5+1.`.!,+/%0+.5L`* `5+1`3%((`!`.! 5

"+.`0$!`)#%K`+3`0$0`%.(! `%/`+**!0! `0+`5+1.`.!,+/%0+.5L`!2!.5`0%)!`5+1
,1/$`$*#!/`0+`)/0!.L`%0`3%((`"%.!``1%( K`+.)((5L`0$!`"%./0`03+`+.`0$.!!`1%( /
*`"%(` 1!`0+`/5*04`!..+./L`+.`%* !*0`!..+./`%*`+1.`+*"%#L`+.`)5!`!1/!`3!
$2!`(%*0!.`!..+./L`+.`1*%0`0!/0`!..+./N`%"`5+1`$2!``"%(1.!L`5+1`3%((`/!!`/+)!0$%*#
(%'!`0$%/M

S`:7=`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

;K /`5+1`*`/!!`".+)`0$!`,.!! %*#`/.!!*/$+0L`0$!`"%./0`03+`1%( `"%(1.!/

/5`1%( `..+.L`* `0$!`0$%. `+*!`/5/`3+.'"(+3L`/%((5`)!*%*#`0$0`%*`0$!
"%./0`1%( L`0$!`config.yml`"%(!` % *W0`!4%/0L`%*`0$!`/!+* L` `$ ``/5*04`!..+.`%*
0$!`config.ymlL`* `0$!*`%*`0$!`0$%. `+*!L`!2!.50$%*#`3/`"%*!`3%0$`0$!
config.ymlL`10` `#+0``3+.'"(+3`!..+.L`)!*%*#`0$0`/+)!`+"`0$!`/.%,0/`"%(!
Q(%*0!.`+.`0!/0/RK
<K "0!.`5+1`"%4`((`0$!`/5*04`!..+./`%*`0$!`config.yml`"%(!L`* `((`0$!`%//1!/`3%0$
0$!`(%*0!.`+.`0$!`1*%0`0!/0/L`5+1`/$+1( `/!!```1%( L`(%'!`0$%/M

=K "`5+1`(%'`+*`0$!`1%( `*1)!.L`5+1`*`/!!`((`0$!`/0!,/`0$0`%.(! `!4!10!

!"+.!`,1(%/$%*#`0$!`*!3`$*#!/`%*`5+1.` .+,(!0M

S`:7>`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

>K /`5+1`*`/!!L`0$!`+. !.`+"`0$!`/0!,/`%/`0$!`/)!`/`3!`/,!%"%! `%*`+1.

config.yml`"%(!N`5+1`*`!2!*`/!!`0$!`+10,10`+"`!$`/0!,`5`(%'%*#`+*`%0M

S`:7?`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

?K +3L`(!0W/`/1,,+/!`5+1`$2!`*`!..+.`+*`5+1.`(%*0!.`2(% 0%+*`+.`%*`/+)!`1*%0
0!/0/K`!0W/`/!!`3$0`$,,!*`%*`0$0`/!L`/`"+((+3/M

/`5+1`*`/!!L`+*!`*`!..+.`%/` !0!0! L`%0`3%((`!4%0`3%0$`+ !`8K`$%/`)!*/`%0`3%((`+.0

0$!` !,(+5)!*0`* `3%((`).'`%0`/``"%(1.!L`* `/`5+1`*`/!!L`((`0$!`/0!,/`"0!.`npm run
lint`.!`*+0`!4!10! K

S`:7@`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

*+0$!.`++(`0$%*#`%/`0$0`*+3L`%"`5+1`#+`0+`5+1.` %0 1`.!,+/%0+.5`* `$!'`5+1.

+))%0/L`5+1`3%((`/!!`((`0$!`+))%0/`0$0`$2!``/1!//`1%( `* `((`0$!`+))%0/`0$0
$2!``"%(! `1%( M

S`:87`T
!,(+5%*#`0+`.+ 10%+* $,0!.`8:

6XPPDU\
$!`&+1.*!5`0$.+1#$`0$!` !,(+5)!*0`,.+!//`$/`+)!`0+`*`!* L`* `*+3`5+1`'*+3`$+3
0+` !,(+5`5+1.`!0`,,(%0%+*`0+`0$!`3+.( `Q,.+ 10%+*RL`* `(/+`$+3`0+`%),(!)!*0
%.(! `"+.`+*0%*1+1/`%*0!#.0%+*K

*`0$!`*!40`$,0!.L`3!`3%((`(!.*`$+3`0+`,1(%/$`*,)`,'#!/K

S`:88`T
 
1H[W6WHSV
!0`%/`+*!`+"`0$!`)+/0`)6%*#`(%..%!/`0$0`$/`!!*`.!(!/! `%*`0$!`(/0`"!3`5!./L`*+0
+*(5`!1/!`+"`0$!`(%..5`%0/!("`* `%0/`#.!0`"!01.!/`10L`)+/0`%),+.0*0(5L` 1!`0+`0$!
!+/5/0!)`0$0`$/`!!*`1%(0`.+1* `%0K

+((+3%*#`0$!`!0`+))1*%05`%/`2!.5`!4%0%*#`* `%*/,%.%*#N`0$!.!`.!`*!3`,.+&!0/`*
0++(/`0+`(!.*`* `,(5`3%0$`!2!.5`/%*#(!` 5K`+0`&1/0`0$0L`0$!.!`.!`+*"!.!*!/`*
)!!01,/`3$!.!`5+1`*`0('`0+`,!+,(!`%*`.!(`(%"!`* `1%( `*!3`.!(0%+*/$%,/L`(+#`,+/0/
0$0`5+1`*`.! `0+`%),.+2!`5+1.`/'%((/`* `(!.*`)+.!L`* `)*5`+0$!.`35/`0+`!+)!`
!00!.` !2!(+,!.K

!0`* `%0/`!+/5/0!)`.!`!*+1.#%*#`!/0`,.0%!/`* `(+2!`"+.`+,!*`/+1.!`%*

!2!(+,!./L`3$%$`%/`"*0/0%`"+.`0$!`"101.!`+"`+1.`.!!./K

*`0$%/`$,0!.L`3!`3%((`+2!.`0$!`"+((+3%*#``0+,%/M

+3`0+`+*0.%10!`0+`0$!`!0`(%..5`5`+,!*%*#`%//1!/`* `,1((`.!-1!/0/
$5`%0`%/`%),+.0*0`0+`#%2!`'`0+`0$!`+))1*%05`* `/$.!`5+1.`+ !
$!`)+/0`%),+.0*0`/,!0/`0+`'!!,`%*`)%* `3$!*`,1/$%*#`+,!*`/+1.!`+ !
+3`0+`,1(%/$`*`*,)`,'#!`* `$+3`0+`1/!`/!)*0%`2!./%+*%*#

&RQWULEXWLQJWR5HDFW
*!`0$%*#`0$0`,!+,(!`+"0!*`3*0`0+` +`3$!*`0$!5W2!`1/! `!0`"+.``3$%(!`%/`+*0.%10!`0+
0$!`(%..5K`!0`%/`+,!*`/+1.!L`3$%$`)!*/`0$0`%0/`/+1.!`+ !`%/`,1(%`* `*5+*!
3$+W/`/%#*! `0$!`+*0.%10+.`%!*/!`#.!!)!*0`QR`*`$!(,`0+`"%4`1#/L`3.%0!
+1)!*00%+*L`+.`!2!*` `*!3`"!01.!/K

+1`*`.! `0$!`"1((`0!.)/`+"`0$!``0`0$!`"+((+3%*#`M`https:/b/bcode.bfacebook.bcom/
claK
!40`0!,/ $,0!.`8;

+1`*!! `0+`)'!`/1.!`0$0`*5`1#`5+1`,+/0`%*`!0W/` %0 1`.!,+/%0+.5`%/`877A

.!,(%(!K`*!`5+1`2!.%"5`0$%/L`* `%"`5+1`3*0`0+`"%(!`*`%//1!`+*` %0 1L`5+1`*`#+
0+`https:/b/bgithub.bcom/bfacebook/breact/bissues/bnewK

/`5+1W((`/!!L`0$!`%//1!`+)!/`3%0$`/+)!`,.!_"%((! `%*/0.10%+*/L`3%0$`+*!`+"`0$+/!`!%*#`0+
/!0`1,`0$!`)%*%)(` !)+K`$!`+0$!.`-1!/0%+*/`$!(,`5+1`0+`!4,(%*`0$!`,.+(!)L`* `0+
!/.%!`1..!*0`* `!4,!0! `!$2%+./K

0`%/`%),+.0*0`"+.`5+1`0+`.! `0$!`!++'`+ !`+"`+* 10`!"+.!`,.0%%,0%*#`+.

+*0.%10%*#`0+`0$!`.!,+/%0+.5`0`https:/b/bcode.bfacebook.bcom/bcodeofconductK`$!
+1)!*0`(%/0/`#++ `!$2%+./`0$0`.!`!4,!0! `".+)`((`+))1*%05`)!)!./`* `0$0
!2!.5+*!`/$+1( `"+((+3K

*!`0$!`%//1!`%/`"%(! L`5+1`$2!`0+`3%0`"+.`+*!`+"`0$!`+.!`+*0.%10+./`0+`!4)%*!`%0`*
0!((`5+1`3$0`0$!5W2!` !% ! `0+` +`3%0$`0$!`1#K`!,!* %*#`+*`0$!`/!2!.%05`+"`%0L`0$!5
)%#$0`"%4`%0L`+.`/'`5+1`0+`"%4`%0K

*`0$!`/!+* `/!L`5+1`*`"+.'`0$!`.!,+/%0+.5`* `3.%0!`+ !`0+`/+(2!`0$!`,.+(!)K` 0`%/

%),+.0*0`0+`"+((+3`0$!`+ %*#`/05(!`#1% !/`* `3.%0!`((`0$!`0!/0/`"+.`0$!`"%4K` 0`%/`(/+
.1%(`0$0`((`0$!`+( `0!/0/`,//`0+`)'!`/1.!`0$!`*!3`+ !` +!/`*+0`%*0.+ 1!`.!#.!//%+*/
%*`0$!`+ !/!K

$!*`0$!`"%4`%/`.! 5`* `((`0$!`0!/0/`.!`#.!!*L`5+1`*`/1)%0``,1((`.!-1!/0L`* `3%0`"+.

0$!`+.!`0!)`)!)!./`0+`.!2%!3`%0K`$!5`)5` !% !`0+`)!.#!`%0L`+.`/'`5+1`0+`)'!`/+)!
$*#!/K

"`5+1` % `*+0`"%* ``1#`10`5+1`/0%((`3*0`0+`+*0.%10!`0+`0$!`,.+&!0L`5+1`*`(++'`%*0+

0$!`%//1!/`0##! `3%0$`0$!`#++ `"%./0`%//1!`(!(`+*` %0 1M`https:/b/bgithub.bcom/
facebook/breact/blabels/bgood%20first%20issueK

$%/`%/``#.!0`35`0+`/0.0`+*0.%10%*#`* `%0`%/`"*0/0%`0$0`0$!`!0`0!)`#%2!/
!2!.5+*!L`!/,!%((5`*!3`+*0.%10+./L`0$!`,+//%%(%05`+"`!%*#`,.0`+"`0$!`,.+&!0K

"`5+1`"%* ``#++ `"%./0`1#`%//1!`0$0`$/`*+0`(.! 5`!!*`0'!*`5`/+)!+*!L`5+1`*`

`+))!*0`+*`0$!`%//1!`/5%*#`0$0`5+1`.!`%*0!.!/0! `%*`3+.'%*#`+*`%0K`*!`+"`0$!`+.!
)!)!./`3%((`#!0`%*`0+1$`3%0$`5+1K`'!`/1.!`0+` %/1//`5+1.`,,.+$L`* `0$!`,0$`5+1
3*0`0+`0'!`3%0$`0$!)`!"+.!`/0.0%*#`+ %*#L`/+`0$0`5+1` +`*+0`$2!`0+`.!3.%0!`0$!`+ !
)1(0%,(!`0%)!/K

S`:8:`T
!40`0!,/ $,0!.`8;

*+0$!.`35`+"`%),.+2%*#`!0`%/`5` %*#`*!3`"!01.!/K` 0`%/`%),+.0*0`0+`/5`0$0`0$!

!0`0!)`$/``,(*`0+`"+((+3L`* `0$!`)%*`"!01.!/`.!` !/%#*! `* ` !% ! `5`0$!
+.!`)!)!./K

"`5+1`.!`%*0!.!/0! `%*`'*+3%*#`0$!`*!40`/0!,/`0$0`0$!`(%..5`3%((`0'!L`5+1`*`"%* `/+)!

+"`0$!)`1* !.`0$!`(!(`5,!M`%#`%01.!`+*` %0 1M`https:/b/bgithub.bcom/bfacebook/
react/blabels/bType%3A%20Big%20PictureK

$0`/% L`%"`5+1`$2!`/+)!`#++ `% !/`+10`"!01.!/`0$0`/$+1( `!` ! `0+`0$!`(%..5L

0$!`"%./0`0$%*#`0+` +`%/`+,!*`*`%//1!L`* `/0.0`0('%*#`3%0$`0$!`!0`0!)K`+1`/$+1(
2+% `/,!* %*#`0%)!`3.%0%*#`+ !`* `/1)%00%*#``,1((`.!-1!/0`!"+.!`/'%*#`0$!)L
!1/!`0$!`"!01.!`5+1`$2!`%*`)%* `)%#$0`*+0`"%0`%*0+`0$!%.`,(*/L`+.`)%#$0`+*"(%0`3%0$
+0$!.`"1*0%+*(%0%!/`0$!5`.!`3+.'%*#`+*K

'LVWULEXWLQJ\RXUFRGH
+*0.%10%*#`0+`0$!`!0`!+/5/0!)` +!/`*+0`+*(5`)!*`,1/$%*#`+ !`%*0+`0$!`!0
.!,+/%0+.5K`+`#%2!`'`0+`0$!`+))1*%05`* `$!(,` !2!(+,!./L`5+1`*`.!0!`,'#!/L
(+#`,+/0/L`*/3!.`-1!/0%+*/`+*`0'`2!."(+3L`* `,!."+.)`)*5`+0$!.`0%2%0%!/K

1,,+/!L`"+.`!4),(!L`5+1`.!0! ``!0`+),+*!*0`0$0`/+(2!/``+),(!4`,.+(!)L`*
5+1`0$%*'`0$0`+0$!.` !2!(+,!./`3+1( `!*!"%0`".+)`1/%*#`%0`%*/0! `+"`%*2!/0%*#`0%)!`%*
1%( %*#`0$!%.`/+(10%+*/K`$!`!/0`0$%*#`0+` +`%/`0+`,1(%/$`%0` %0 1`* `)'!`%0`2%((!
"+.`!2!.5+*!`0+`.! `* `1/!K` +3!2!.L`,1/$%*#`0$!`+ !`0+` %0 1`%/`+*(5``/)((`0%+*
3%0$%*``%#`,.+!//L`* `%0`+)!/`3%0$`/+)!`.!/,+*/%%(%0%!/K`+L`5+1`/$+1( `$2!``(!.
% !`%*`)%* `+10`0$!`.!/+*/`!$%* `5+1.`$+%!K

$!`)+0%20%+*`!$%* `3$5`5+1`3*0`0+`/$.!`5+1.`+ !`+*0.%10!/`0+`%),.+2%*#`5+1.

/'%((/`/`` !2!(+,!.K`$.%*#`5+1.`+ !L`+*`0$!`+*!`$* L`"+.!/`5+1`0+`"+((+3`!/0`,.0%!/
* `3.%0!`!00!.`+ !K`*`0$!`+0$!.`$* L`%0`!4,+/!/`5+1.`+ !`0+`"!! '`* `+))!*0/
".+)`+0$!.` !2!(+,!./K`$%/`%/``%#`+,,+.01*%05`"+.`5+1`0+`.!!%2!`0%,/`* `%),.+2!`5+1.
+ !`0+`)'!`%0`!00!.K

S`:8;`T
!40`0!,/ $,0!.`8;

0$!.`0$*`0$!`/1##!/0%+*/`.!(0! `0+`0$!`+ !`%0/!("L`5`,1/$%*#`5+1.`+ !`0+` %0 1L`5+1

!*!"%0`".+)`+0$!.`,!+,(!W/`% !/K` *`"0L`5+1`)%#$0`$2!`0$+1#$0`+10``/%*#(!`,.+(!)
0$0`5+1.`+),+*!*0`*`/+(2!L`10`*+0$!.` !2!(+,!.`)5`1/!`%0`%*``/(%#$0(5` %""!.!*0
35L`"%* %*#`*!3`/+(10%+*/`"+.`%0K`+.!+2!.L`0$!5`)%#$0`*!! `*!3`"!01.!/`* `0$!5`+1(
$!(,`5+1`%),(!)!*0`0$!)L`/+`0$0`!2!.5+*!L`5+1./!("`%*(1 ! L`*`!*!"%0`".+)`%0K`1%( %*#
/+"03.!`0+#!0$!.`%/``#.!0`35`0+`%),.+2!`+0$`5+1.`/'%((/`* `5+1.`,'#!/L`* `0$0`%/
3$5` `/0.+*#(5`!(%!2!`%*`+,!*`/+1.!K

*+0$!.`/%#*%"%*0`+,,+.01*%05`0$0`+,!*`/+1.!`*`#%2!`5+1`%/`(!00%*#`5+1`#!0`%*`0+1$
3%0$`/).0`* `,//%+*0!` !2!(+,!./`".+)`((`.+1* `0$!`3+.( K`+.'%*#`(+/!(5`3%0$
*!3`,!+,(!`3$+`$2!` %""!.!*0`'#.+1* /`* `/'%((`/!0/`%/`+*!`+"`0$!`!/0`35/`0+`'!!,
+1.`)%* /`+,!*`* `%),.+2!`+1./!(2!/K

$.%*#`+ !`(/+`#%2!/`5+1`/+)!`.!/,+*/%%(%0%!/`* `%0`+1( `!`0%)!_+*/1)%*#K` *`"0L

+*!`0$!`+ !`%/`,1(%`* `,!+,(!`*`1/!`%0L`5+1`$2!`0+`)%*0%*`%0K

%*0%*%*#``.!,+/%0+.5`.!-1%.!/`+))%0)!*0`!1/!`0$!`)+.!`,+,1(.`%0`#!0/`* `0$!
)+.!`,!+,(!`1/!`%0L`0$!`$%#$!.`0$!`*1)!.`+"`-1!/0%+*/`* `%//1!/K`+.`!4),(!L` !2!(+,!./
)5`!*+1*0!.`1#/`* `+,!*`%//1!/L`/+`5+1`$2!`0+`#+`0$.+1#$`((`+"`0$!)`* `0.5`0+
.!,.+ 1!`0$!`,.+(!)/K` "`0$!`,.+(!)/`!4%/0L`0$!*`5+1`$2!`0+`3.%0!`0$!`"%4`* `,1(%/$`
*!3`2!./%+*`+"`0$!`(%..5K`+1`+1( `.!!%2!`,1((`.!-1!/0/`".+)` !2!(+,!./L`3$%$`+1( `!
(+*#`* `+),(!4L`* `0$!5`*!! `0+`!`.!2%!3! K

"`5+1` !% !`0+`/'`,!+,(!`0+`+_)%*0%*`0$!`,.+&!0`* `$!(,`5+1`3%0$`%//1!/`* `,1((

.!-1!/0/L`5+1`$2!`0+`++. %*0!`3%0$`0$!)`0+`/$.!`5+1.`2%/%+*`* `)'!` !%/%+*/
0+#!0$!.K`%0$`0$%/`%*`)%* L`3!`*`#+`0$.+1#$`/+)!`#++ `,.0%!/`0$0`*`$!(,`5+1`)'!
`!00!.`.!,+/%0+.5L`* `2+% `/+)!`+"`0$!`+))+*`,%0"((/K

%./0`+"`((L`%"`5+1`3*0`0+`,1(%/$`5+1.`!0`+),+*!*0L`5+1`$2!`0+`3.%0!`
+),.!$!*/%2!`/!0`+"`0!/0/K`%0$`,1(%`+ !`* `)*5`,!+,(!`+*0.%10%*#`0+`%0L`0!/0/`.!
2!.5`$!(,"1(`"+.`)*5`.!/+*/M

$!5`)'!`0$!`+ !`)+.!`.+1/0
$!5`$!(,`+0$!.` !2!(+,!./`1* !./0* `3$0`0$!`+ !` +!/
$!5`)'!`%0`!/%!.`0+`"%* `.!#.!//%+*`3$!*`*!3`+ !`%/` !
$!5`)'!`+0$!.`+*0.%10+./`)+.!`+*"% !*0`%*`3.%0%*#`0$!`+ !

S`:8<`T
!40`0!,/ $,0!.`8;

$!`/!+* `%),+.0*0`0$%*#`0+` +`%/` ``README`3%0$`` !/.%,0%+*`+"`0$!`+),+*!*0L`*

!4),(!`+"`%0/`1/!L`* ` +1)!*00%+*`+"`0$!` /`* `,.+,/`0$0`*`!`1/! K

$%/`$!(,/`1/!./`+"`0$!`,'#!L`10`%0`(/+`2+% /`,!+,(!`+,!*%*#`%//1!/`* `/'%*#

-1!/0%+*/`+10`$+3`0$!`(%..5`3+.'/`* `$+3`%0`/$+1( `!`1/! K

0`%/`(/+`!//!*0%(`0+` ``LICENSE`"%(!`0+`5+1.`.!,+/%0+.5`0+`)'!`,!+,(!`3.!`+"`3$0
0$!5`*`* `**+0` +`3%0$`5+1.`+ !K` %0 1`$/``(+0`+"`.! 5_) !`0!),(0!/`0+
$++/!`".+)K

$!*!2!.`5+1`*L`5+1`/$+1( `'!!,`0$!`,'#!`/)((`* ` `/`"!3` !,!* !*%!/`/

5+1`*K`!2!(+,!./`0!* `0+`0$%*'`.!"1((5`+10`/%6!`3$!*`0$!5`$2!`0+` !% !`3$!0$!.`0+
1/!``(%..5`+.`*+0K`!)!)!.`0$0`$!25`,'#!/`$2!`` `%),0`+*`,!."+.)*!K

+0`+*(5`0$0L` !,!* %*#`+*`0++`)*5`0$%. _,.05`(%..%!/`*`.!0!`,.+(!)/`%"`*5`+"

0$!)`.!`*+0`)%*0%*! `+.`$2!`1#/K

*!`0.%'5`,.0`%*`/$.%*#`!0`+),+*!*0/`+)!/`3$!*`5+1`$2!`0+` !% !`+10`0$!

/05(%*#K`$.%*#` 2.%,0`+ !`%/`,.!005`/0.%#$0"+.3. L`3$%(!`00$%*#`0$!``%/`*+0`/
!/5`/`5+1`)5`0$%*'K` *`"0L`0$!.!`.!`)*5` %""!.!*0`,0$/`5+1`*`0'!`0+`,.+2% !`%0M
".+)` %*#```"%(!`0+`0$!`,'#!L`0+`1/%*#`%*(%*!`/05(!/K`$!`%),+.0*0`0$%*#`0+`'!!,`%*
)%* `%/`0$0``%/`#(+(`* `#!*!.%`(//`*)!/`)5`+*"(%0`3%0$`0$!`+*!/`0$0`(.! 5
!4%/0`%*`0$!`,.+&!0`3$!.!`0$!`+),+*!*0`%/`%),+.0! K

$!`!/0`$+%!`%/`0+`%*(1 !`0$!`"!3!/0`,+//%(!`/05(!/`* `)'!`0$!`+),+*!*0`$%#$(5

+*"%#1.(!`"+.`!* `1/!./K` *`0$%/`35L` !2!(+,!./`3%((`!`)+.!`(%'!(5`0+`1/!`%0`!1/!`%0
*`!` ,0! `0+`0$!%.`1/0+)`/+(10%+*/K

+`/$+3`0$0`5+1.`+),+*!*0`%/`$%#$(5`1/0+)%6(!L`5+1`*` `+*!`+.`)+.!`!4),(!/`0+
0$!`.!,+/%0+.5`0+`)'!`%0`!/5`"+.`!2!.5+*!`0+`1* !./0* `$+3`%0`3+.'/`* `3$%$`,.+,/`%0
!,0/K`4),(!/`.!`(/+`1/!"1(`/+`0$0`5+1`*`0!/0`*!3`2!./%+*/`+"`0$!`+),+*!*0`*
/!!`%"`0$!.!`.!`1*!4,!0! `.!'%*#`$*#!/K

/`3!`/3`%*`Chapter 3L`.!0!`.1(5`!1/(!`+),+*!*0/L`0++(/`/1$`/`!0
0+.5++'`*`$!(,`5+1`.!0!`(%2%*#`/05(!`#1% !/L`3$%$`.!`!/%!.`"+.`5+1`0+`)%*0%*L`*
"+.`0$!`+*/1)!.`+"`5+1.`,'#!`0+`*2%#0!`* `1/!K

*`!4!((!*0`!4),(!`+"``$%#$(5`1/0+)%6(!`(%..5`0$0`1/!/`0+.5++'`0+`/$+3`((`0$!/!
2.%0%+*/`%/`react-dates`".+)`%.*K`+1`/$+1( `0'!`0$0`.!,+/%0+.5`/`0$!`,!."!0
!4),(!`+"`$+3`0+`,1(%/$`!0`+),+*!*0/`0+` %0 1K

S`:8=`T
!40`0!,/ $,0!.`8;

/`5+1`*`/!!L`0$!5`1/!`0+.5++'`0+`/$+3`0$!` %""!.!*0`+,0%+*/`+"`0$!`+),+*!*0M

/0`10`*+0`(!/0L`5+1`)%#$0`*+0`+*(5`3*0`0+`/$.!`5+1.`+ !—5+1`)5`(/+`3*0`0+
%/0.%10!`5+1.`,'#!K`$!`)+/0`,+,1(.`,'#!`)*#!.`"+.` 2.%,0`%/`npmL`3$%$
3!W2!`1/! `0$.+1#$+10`0$%/`++'`0+`%*/0((`,'#!/`* ` !,!* !*%!/K

*`0$!`*!40`/!0%+*L`3!`3%((`/!!`$+3`!/5`%0`%/`0+`,1(%/$``*!3`,'#!`3%0$`npmK

0$!.`0$*`npmL`/+)!` !2!(+,!./`)5`*!! `0+` `5+1.`+),+*!*0`/``#(+(` !,!* !*5

* `1/!`%0`3%0$+10``,'#!`)*#!.K

/`3!`/3`%*`Chapter 1L`'%*#`+1.`%./0`0!,/`3%0$`!0L`5+1`*`!/%(5`1/!`!0`5`&1/0
 %*#``/.%,0`0#`,+%*0%*#`0+`unpkg.comK` 0`%/`%),+.0*0`0+`#%2!`0$!`1/!./`+"`5+1.`(%..5
0$!`/)!`+,0%+*K

+L`0+`+""!.``#(+(`2!./%+*`+"`5+1.`,'#!L`5+1`/$+1( `1%( `0$!`*%2!./(`+ 1(!

!"%*%0%+*`QR`2!./%+*`/`3!((K`%0$`3!,'L`0$%/`%/`,.!005`/0.%#$0"+.3. N`5+1
&1/0`$2!`0+`/!0`0$!`libraryTarget`%*`0$!`+10,10`/!0%+*`+"`0$!`+*"%#1.0%+*`"%(!K

S`:8>`T
!40`0!,/ $,0!.`8;

3XEOLVKLQJDQQSPSDFNDJH
$!`)+/0`,+,1(.`35`+"`)'%*#``,'#!`2%((!`0+` !2!(+,!./`%/`5`,1(%/$%*#`%0
0+`npmL`0$!`,'#!`)*#!.`"+.`+ !K&/K

!`1/! `%0`%*`((`0$!`!4),(!/`%*`0$%/`++'`* `5+1`$2!`/!!*`$+3`!/5`%0`%/`0+`%*/0((`

,'#!N`%0`%/`&1/0``)00!.`+"`.1**%*#`0$!`npm install`,'#!L`* `0$0`%/`%0K`$0`5+1
)5`*+0`'*+3`%/`$+3`!/5`%0`%/`0+`,1(%/$``,'#!`/`3!((K

%./0`+"`((L`(!0W/`/5`5+1`)+2!`%*0+`*`!),05` %.!0+.5`* `3.%0!`0$!`"+((+3%*#`%*`5+1.

!.)%*(M
QSPLQLW

`*!3`package.json`3%((`!`.!0! `* `/+)!`-1!/0%+*/`3%((`!` %/,(5! K`$!`"%./0`+*!

%/`0$!`,'#!`*)!L`3$%$` !"1(0/`0+`0$!`"+( !.`*)!L`* `0$!*`0$!`2!./%+*`*1)!.K
$!/!`.!`0$!`)+/0`%),+.0*0`+*!/L`!1/!`0$!`"%./0`%/`0$!`*)!`0$0`0$!`1/!./`+"`5+1.
,'#!`3%((`.!"!.`0+`3$!*`0$!5`%*/0((`* `1/!`%0N`0$!`/!+* `$!(,/`5+1`.!(!/!`*!3
2!./%+*/`+"`5+1.`,'#!`/"!(5`* `3%0$+10`.!'%*#`+0$!.`,!+,(!W/`+ !K

$!`2!./%+*`*1)!.`%/`+),+/! `+"`0$.!!`*1)!./`/!,.0! `5`` +0L`* `0$!5`((`$2!`

)!*%*#K`$!`(/0`*1)!.`+"`0$!`,'#!`+*`0$!`.%#$0`.!,.!/!*0/`0$!`,0$L`* `%0`/$+1( `!
%*.!/! `3$!*``*!3`2!./%+*`+"`0$!`(%..5`0$0`+*0%*/`1#`"%4!/`%/`,1/$! `0+`npmK

$!`*1)!.`%*`0$!`)% (!`%* %0!/`0$!`)%*+.`2!./%+*`+"`0$!`.!(!/!L`* `%0`/$+1( `!

$*#! `3$!*`*!3`"!01.!/`.!` ! `0+`0$!`(%..5K`$+/!`*!3`"!01.!/`/$+1( `*+0`.!'
!4%/0%*#` /K

%*((5L`0$!`"%./0`*1)!.`+*`0$!`(!"0`.!,.!/!*0/`0$!`)&+.`2!./%+*L`* `%0`$/`0+`!`%*.!/!
3$!*``2!./%+*`+*0%*%*#`.!'%*#`$*#!/`%/`.!(!/! `0+`0$!`,1(%K

+((+3%*#`0$%/`,,.+$L`((! `!)*0%`!./%+*%*#`Q!)!.RL`%/`#++ `,.0%!`* `%0

)'!/`5+1.`1/!./`)+.!`+*"% !*0`3$!*`0$!5`$2!`0+`1, 0!`5+1.`,'#!K

$!`"%./0`2!./%+*`+"``,'#!`%/`1/1((5`0.1.0K

+`,1(%/$`*`npm`,'#!L`5+1`)1/0`$2!`*`npm`+1*0L`3$%$`5+1`*`!/%(5`.!0!`5
.1**%*#`0$!`"+((+3%*#`+))* `%*`0$!`+*/+(!L`3$!.!`$username`%/`0$!`*)!`+"`5+1.
$+%!M
QSPDGGXVHUXVHUQDPH

*!`0$!`1/!.`%/`.!0! L`5+1`*`.1*`0$!`"+((+3%*#`+))* M
QSPSXEOLVK

S`:8?`T
!40`0!,/ $,0!.`8;

`*!3`!*0.5`3%((`!` ! `0+`0$!`.!#%/0.5`3%0$`0$!`,'#!`*)!`* `0$!`2!./%+*`5+1

/,!%"%! `%*`package.jsonK

$!*!2!.`5+1`$*#!`/+)!0$%*#`%*`5+1.`(%..5`* `5+1`3*0`0+`,1/$``*!3`2!./%+*L`5+1
&1/0`$2!`0+`.1*`$typeL`3$!.!`+*!`,0$`%/`)%*+.`+.`)&+.M
QSPYHUVLRQW\SH

$%/`+))* `3%((`1),`0$!`2!./%+*`10+)0%((5`%*`5+1.`package.json`* `%0`3%((`(/+

.!0!``+))%0`* ``0#`%"`5+1.`"+( !.`%/`1* !.`2!./%+*`+*0.+(K

*!`0$!`2!./%+*`*1)!.`%/`%*.!/! L`5+1`&1/0`$2!`0+`.1*`npm publish`#%*L`* `0$!

*!3`2!./%+*`3%((`!`2%((!`0+`1/!./K

6XPPDU\
*`0$!`(/0`/0+,`+*`0$%/`0.%,`.+1* `0$!`!0`3+.( L`3!`$2!`/!!*`/+)!`+"`0$!`/,!0/`0$0
)'!`!0`#.!0—%0/`+))1*%05`* `%0/`!+/5/0!)L`* `$+3`0+`+*0.%10!`0+`0$!)K

+1`(!.*! `$+3`0+`+,!*`*`%//1!`%"`5+1`"%* ``1#`%*`!0L`* `0$!`/0!,/`0+`0'!`0+`)'!`%0

!/%!.`"+.`%0/`+.!` !2!(+,!./`0+`"%4`%0K`+1`*+3`'*+3`0$!`!/0`,.0%!/`3$!*`)'%*#`+ !
+,!*`/+1.!L`* `0$!`!*!"%0/`* `0$!`.!/,+*/%%(%0%!/`0$0`+)!`3%0$`%0K

%*((5L`5+1`/3`$+3`!/5`%0`%/`0+`,1(%/$`,'#!/`+*`0$!`npm`.!#%/0.5L`* `$+3`0+`$++/!
0$!`.%#$0`2!./%+*`*1)!.`0+`2+% `.!'%*#`+0$!.`,!+,(!W/`+ !K

S`:8@`T
 2WKHU%RRNV<RX0D\(QMR\
"`5+1`!*&+5! `0$%/`++'L`5+1`)5`!`%*0!.!/0! `%*`0$!/!`+0$!.`++'/`5`'0M

1((_0'`!0`.+&!0/
$)` +-1!
M`@>?8>???:<<:;
!0`1,`5+1.` !2!(+,)!*0`!*2%.+*)!*0`* ` !2!(+,```,,(%0%+*
),(!)!*0`1/!.`10$!*0%0%+*`* `10$+.%60%+*`1/%*#` `!`+'!*/
1%( ``/+%(`)! %`,,(%0%+*`5`!40!* %*#`0$!`/%``,,(%0%+*
.!0!`*`+*(%*!`).'!0,(!`,,(%0%+*`3%0$`/$+,,%*#`.0`* `0.%,!
,5)!*0/
!2!(+,``)! %`/0.!)%*#`,,(%0%+*`1/%*#`+*#+` .% 
),(!)!*0`/!.2!._/% !`.!* !.%*#`3%0$` 0`0+`%),.+2!`
!0`1,`* `1/!`!0`:=7`0+` !2!(+,`1/!.`%*0!."!/`3%0$``,%(%0%!/
!.*`%* 1/0.5`!/0`,.0%!/`0+`)'!``/0'`,,(%0%+*/`.!(%(!`*
/((!
0$!.`++'/`+1`5`*&+5

* /_+*`1((_0'`!`!2!(+,)!*0`3%0$` .,$`* `!0

!/0%*` .!!
M`@>?8>?@8:;<97
!/+(2!` 0`".+)`)1(0%_0(!` 0/!`* `/5/0!)`.$%0!01.!/
1%( `` .,$` `5`%),(!)!*0%*#`)+ !(/`* `/$!)/`3%0$`,+((+`*
!-1!(%6!
!0`1,`*`,+((+`(%!*0`* `1%( `".+*0`!* `+),+*!*0/`1/%*#`!0
/!`+$`0+`0!/0`5+1.`"1((_/0'`,,(%0%+*
.%0!`+),(!4`!0`+),+*!*0/`* `/$.!` 0`.+//`0$!)
!,(+5`5+1.`,,(%0%+*`1/%*#`+'!.

S`:98`T
0$!.`++'/`+1`5`*&+5

/HDYHDUHYLHZOHWRWKHUUHDGHUVNQRZZKDW
\RXWKLQN
(!/!`/$.!`5+1.`0$+1#$0/`+*`0$%/`++'`3%0$`+0$!./`5`(!2%*#``.!2%!3`+*`0$!`/%0!`0$0`5+1
+1#$0`%0`".+)K` "`5+1`,1.$/! `0$!`++'`".+)`)6+*L`,(!/!`(!2!`1/`*`$+*!/0`.!2%!3
+*`0$%/`++'W/`)6+*`,#!K`$%/`%/`2%0(`/+`0$0`+0$!.`,+0!*0%(`.! !./`*`/!!`* `1/!
5+1.`1*%/! `+,%*%+*`0+`)'!`,1.$/%*#` !%/%+*/L`3!`*`1* !./0* `3$0`+1.
1/0+)!./`0$%*'`+10`+1.`,.+ 10/L`* `+1.`10$+./`*`/!!`5+1.`"!! '`+*`0$!`0%0(!`0$0
0$!5`$2!`3+.'! `3%0$`'0`0+`.!0!K` 0`3%((`+*(5`0'!``"!3`)%*10!/`+"`5+1.`0%)!L`10`%/
2(1(!`0+`+0$!.`,+0!*0%(`1/0+)!./L`+1.`10$+./L`* `'0K`$*'`5+1P

S`:99`T
 ,QGH[

FRPPXQLFDWLQJ90
$ FRPSRVLWLRQ52179
$LUEQE5HDFW-6;VW\OHJXLGH FRQGLWLRQDOV32
LPSOHPHQWLQJ4748 FRQWDLQHUFRPSRQHQWV98
DQLPDWLRQV FRQWDLQHUSDWWHUQ9397
DERXW151 FRQWH[W108109
FUHDWLQJ151152 &RQWH[W$3,
5HDFWPRWLRQ153 XVLQJ129130131132
$WRPLF&66PRGXOHV180181 FRQWLQXRXVLQWHJUDWLRQ
&LUFOH&,LPSOHPHQWLQJIRU300
% &RQWULEXWRU/LFHQVH$JUHHPHQW &/$
%DEHO21 DERXW312
%DEHO21 UHIHUHQFH312
%DEHOSOXJLQV231 FRQWUROOHGFRPSRQHQWV140141142
%LJ3LFWXUH*LW+XE FUHDWH&ODVVIDFWRU\56
UHIHUHQFH314 &66PRGXOHV
%ORFN(OHPHQW0RGLILHU %(0 PHWKRGRORJ\160 DERXW170
$WRPLF&66PRGXOHV180181
& ORFDOO\VFRSHG&66175177179180
FDPHO&DVHG26 SURMHFWVHWWLQJXS171172174
FKLOGSDUHQWFRPPXQLFDWLRQ 5HDFW&66PRGXOHV182183
ZLWKFDOOEDFNV115116 &66
FKLOGUHQ LQ-DYD6FULSW160161
DERXW91 FXUU\LQJ51
XVHGIRUFRPPXQLFDWLRQEHWZHHQFRPSRQHQWV
919293 '
&LUFOH&, GDWDIHWFKLQJ
FRQILJXULQJ303304 DERXW118119120121122123
(19YDULDEOHVFUHDWLQJLQ305306308309 H[DPSOH200201203
LPSOHPHQWLQJIRUFRQWLQXRXVLQWHJUDWLRQ299 GDWDIORZ
66+NH\DGGLQJWR301302 DERXW114115
FODVVHV FKLOGSDUHQWFRPPXQLFDWLRQ FDOOEDFNV 115116
FUHDWLQJ56 WKURXJKFRPPRQSDUHQW117
FRGHVW\OH40 GHDGFRGHHOLPLQDWLRQ161
FRGH GHFODUDWLYHSURJUDPPLQJ1011
GLVWULEXWLQJ314315316317 'HYHORSHU([SHULHQFH '; 17
FRPSRQHQWV 'LJLWDO2FHDQ'URSOHW
FUHDWLQJ277 ILUVWFODVVREMHFWV49
'LJLWDO2FHDQ IRUPV
DERXW277 DERXW135
UHIHUHQFHIRUUHJLVWUDWLRQ278 FRQWUROOHGFRPSRQHQWV140141
VLJQLQJXSRQ278279 -621VFKHPD142143144
'RFXPHQW2EMHFW0RGHO '20 9 XQFRQWUROOHGFRPSRQHQWV135136137139
'20HOHPHQWV IUDJPHQWV8687
SURSHUWLHVVSUHDGLQJRQ275276 )XQFWLRQDO&66180
'RPDLQ6SHFLILF/DQJXDJH '6/ 14 IXQFWLRQDOSURJUDPPLQJ )3
GRPDLQ EDVLFV49
DGGLQJWRGURSOHW295297298 FRPSRVLWLRQ52
'RQ W5HSHDW<RXUVHOI '5< 84 FXUU\LQJ51
GURSOHW ILUVWFODVVREMHFWV49
FUHDWLQJ280281282283 LPPXWDELOLW\50
GRPDLQDGGLQJWR295297298299 SXULW\50
WXUQLQJRII291 XVHULQWHUIDFHV52
)XQFWLRQ$V&KLOGFRPSRQHQW110111
(
HGJHFDVHV236 *
(GLWRU&RQILJ JLVWV118
DERXW40 *LW
FRQILJXULQJ40 FRQILJXULQJ285
UHIHUHQFH40 *LW+XE
(19YDULDEOHV FRQILJXULQJ287
FUHDWLQJLQ&LUFOH&,305306308309310
(6/LQWUXOHV +
UHIHUHQFH48 KLJKHURUGHUFRPSRQHQWV +R&V 36102103
(6/LQW 105
DERXW41 KLJKHURUGHUIXQFWLRQV +R)V 49102
FRQILJXULQJ4243 +70/YHUVXV-6;
*LWKRRNV4445 DERXW25
LQVWDOOLQJ41 DWWULEXWHV26
5HDFWSOXJLQ454647 %RROHDQDWWULEXWHV29
HYHQWEXEEOLQJ147 URRW2627
HYHQWGHOHJDWLRQ147 VSDFHV28
HYHQWVZLWFK VW\OH26
UHIHUHQFH146
HYHQWV ,
KDQGOLQJ144145146 LPPXWDELOLW\50230231
WHVWLQJ242243245 LPPXWDEOHGDWD230
([SUHVV189 LQGH[HV
XVLQJDVNH\272273274
) LQOLQHVW\OHV162163164166
)DFHERRN&RGHRI&RQGXFW LVRPRUSKLFDSSOLFDWLRQ189
UHIHUHQFH313 LVVXHVWDJJHGZLWKJRRGILUVWLVVXH

S`:9;`T
UHIHUHQFH313
1
- 1H[WMV204205
QJLQ[
-DYD6FULSWIDWLJXH16203
FRQILJXULQJ293
-DYD6FULSWWHPSODWLQJ30
LQVWDOOLQJ293
-HVW
1RGH3URGXFWLRQ3URFHVV0DQDJHU 30 292
DERXW234
1RGHMV
SDLQOHVV-DYD6FULSWWHVWLQJ236237238240
241 LQVWDOOLQJ285
-6;YHUVXV+70/ QSPSDFNDJH
DERXW25 SXEOLVKLQJ318
DWWULEXWHV26
%RROHDQDWWULEXWHV29 2
URRW2627 RSWLPL]DWLRQWHFKQLTXHV
VSDFHV28 DERXW211
VW\OH26 VKRXOG&RPSRQHQW8SGDWH213214215
-6; VWDWHOHVVIXQFWLRQDOFRPSRQHQWV216
DERXW2021 RZQHU90
FKLOGUHQ2425
'20HOHPHQWV24 3
+HOOR:RUOGSURJUDP23 SDLQOHVV-DYD6FULSWWHVWLQJ
SDWWHUQV30 ZLWK-HVW236237238240241
SURSV24 SDUDPHWHUV
5HDFWFRPSRQHQWV23 DGGLQJWRURXWHV255256258260262263
VSUHDGDWWULEXWHV29 264
SDWWHUQV-6;
. FRQGLWLRQDOV32333536
NH\V FRQWUROVWDWHPHQWV3738
DERXW210211 ORRSV37
LQGH[HVXVLQJDV272273274 PXOWLOLQH31
PXOWLSURSHUWLHV32
/ VXEUHQGHULQJ3940
SUHVHQWDWLRQDOFRPSRQHQW9598
OLQWHUV39
SUHVHQWDWLRQDOSDWWHUQ9397
ORFDOO\VFRSHG&66175177179180
SURSW\SHV7778
0 SURSHUWLHV
VSUHDGLQJRQ'20HOHPHQWV275276
PL[LQV XVHGIRULQLWLDOL]LQJVWDWH266267268269
DERXW98
ZRUNLQJZLWK99100
0RE;70
5
5DGLXP
PRGXOHEXQGOHUV171
ZRUNLQJ166167168170
PRWLRQFRPSRQHQW154
UHUHQGHULQJLVVXHVVROXWLRQV
0XVWDFKH14
DERXW216
FRQVWDQWSURSV222223224

S`:9<`T
IXQFWLRQVFUHDWLQJLQVLGHUHQGHUPHWKRG219 263264
220222
JRRGGHVLJQ224226228230 6
QRXSGDWHIRUFRPSRQHQWV217218 6FDODEOH9HFWRU*UDSKLFV 69* 155156
UHIDFWRULQJ224226227229 VHDUFKHQJLQHRSWLPL]DWLRQ 6(2 190
5HDFWFRQVWDQWHOHPHQWVWUDQVIRUPHU231 VHFWLRQV
5HDFW&66PRGXOHV182183 FUHDWLQJ249250251252253254255
5HDFW'HY7RROV 6HPDQWLF9HUVLRQLQJ 6HP9HU 318
XVLQJ245 VHUYHUVLGHDSSOLFDWLRQ
5HDFW'RFJHQ80 FUHDWLQJ193194195196198199
5HDFWKRRNV76 VHUYHUVLGHUHQGHULQJ 665
5HDFWLQOLQHHOHPHQWVWUDQVIRUP232 DERXW189
5HDFWPRWLRQ154 LPSOHPHQWDWLRQUHDVRQV190191192193
5HDFW5RXWHU VLQJOHHYHQWKDQGOHU145
DERXW248 VLQJOHJOREDOKDQGOHU147
FRQILJXULQJ249 VSUHDGDWWULEXWHRSHUDWRU29
LQVWDOOLQJ249 VSULQJIXQFWLRQ154
5HDFW6WRU\ERRN316 66+NH\
UHDFWPRWLRQOLEUDU\134 DGGLQJWR&LUFOH&,301302
UHDFWUHIHWFK VWDWH
ZRUNLQJ123125126127128129 DERXW70
5HDFW&RPSRQHQW DV\QFKURQRXV72
DXWRELQGLQJ606162 GHFODULQJ71
H[WHQGLQJ57 GHULYDEOHV74
SURSV5758 H[WHUQDOOLEUDULHV70
VWDWH5960 LQLWLDOL]LQJSURSHUWLHVXVHG266267268269
5HDFWMV PXWDWLQJ269270271272
UHIHUHQFH21 UHQGHUPHWKRG75
5HDFW XVLQJ73
DERXW248 VWDWHOHVVFRPSRQHQWV
FRQWULEXWLQJWR312 DERXW62
HOHPHQWV12 HYHQWKDQGOHUV64
UHFRPSRVHOLEUDU\ OD\RXWFRPSRQHQWV65666769
XVLQJ105106107 OLIHF\FOH64
UHFRQFLOLDWLRQ13209210 RSWLPL]DWLRQ65
5HGX[70 SURSV63
5HGX['HY7RROV UHIV64
XVLQJ246 VWDWH64
5HIV147148149150 WKLVNH\ZRUG64
5HVSRQVLYH0L[LQ101 VWDWHOHVVIXQFWLRQ55
UHXVDEOHFRPSRQHQWV82838690 VW\OHGFRPSRQHQWV184185186
UHYHUVHSUR[\VHUYHU
VHWWLQJXS294 7
URXWHV
WDJJHGWHPSODWHOLWHUDOV184
SDUDPHWHUVDGGLQJWR255256258260262
7HVWGULYHQGHYHORSPHQW 7'' 236

S`:9=`T
WHVWLQJ
EHQHILWV235 9
WKHPLQJ186 9LVXDO6WXGLR&RGH 96& 44

8 :
XQFRQWUROOHGFRPSRQHQWV134135136137 :HESDFN
XQLYHUVDODSSOLFDWLRQV189 XVLQJ171
8QLYHUVDO0RGXOH'HILQLWLRQ 80' 317