React handbook PDF

Preview

Summary

React book for web...

Description

TableofContents Introduction Overview IntroductiontoReact HowtoinstallReact ModernJavaScriptcoreconceptsyouneedtoknowtouseReact HowmuchJSyouneedtouseReact Variables Arrowfunctions WorkwithobjectsandarraysusingRestandSpread Objectandarraydestructuring Templateliterals Classes Callbacks Promises Async/Await ESModules ReactConcepts SinglePageApps Declarative Immutability Purity Composition TheVirtualDOM UnidirectionalDataFlow In-depth JSX Components State Props Presentationalvscontainercomponents

2

StatevsProps PropTypes Fragment Events Lifecycleevents Handlingforms ReferenceaDOMelement Serversiderendering ContextAPI Higher-ordercomponents RenderProps Hooks Codesplitting Styling CSSinReact SASSwithReact StyledComponents Tooling Babel Webpack Prettier Testing IntroductiontoJest TestingReactComponents AlookattheReactEcosystem ReactRouter Redux Next.js Gatsby Wrappingup

3

4

Introduction

Introduction

TheReactHandbookfollowsthe80/20rule:learnin20%ofthetimethe80%ofatopic. Ifindthisapproachgivesawell-roundedoverview.Thisbookdoesnottrytocovereverything underthesunrelatedtoReact.Ifyouthinksomespecifictopicshouldbeincluded,tellme. InthisbookImakeuseofReacthooks,soyouneedtosettherequiredversionsofReactand ReactDOMtouse 16.7.0-alpha.2(ifwhenyou'rereadingthisHooksarereleasedofficially, youdon'tneedtodothis).YoucandosoinCodeSandboxbyclicking"AddDependency"and searching reactandchoosing 16.7.0-alpha.2fromtheselect,andrepeatthisfor reactdom.Whenusing create-react-app,run npminstall[email protected][email protected]afteryoucreatetheproject.

Ihopethecontentsofthisbookwillhelpyouachievewhatyouwant:learnthebasicsof React. ThisbookiswrittenbyFlavio.Ipublishwebdevelopmenttutorialseverydayonmywebsite flaviocopes.com. YoucanreachmeonTwitter@flaviocopes.

5

Introduction

Enjoy!

6

IntroductiontoReact

IntroductiontoReact AnintroductiontotheReactviewlibrary

WhatisReact? ReactisaJavaScriptlibrarythataimstosimplifydevelopmentofvisualinterfaces. DevelopedatFacebookandreleasedtotheworldin2013,itdrivessomeofthemostwidely usedapps,poweringFacebookandInstagramamongcountlessotherapplications. Itsprimarygoalistomakeiteasytoreasonaboutaninterfaceanditsstateatanypointin time,bydividingtheUIintoacollectionofcomponents.

WhyisReactsopopular? Reacthastakenthefrontendwebdevelopmentworldbystorm.Why?

Lesscomplexthantheotheralternatives AtthetimewhenReactwasannounced,Ember.jsandAngular1.xwerethepredominant choicesasaframework.Boththeseimposedsomanyconventionsonthecodethatportingan existingappwasnotconvenientatall.Reactmadeachoicetobeveryeasytointegrateinto anexistingproject,becausethat'showtheyhadtodoitatFacebookinordertointroduceitto theexistingcodebase.Also,those2frameworksbroughttoomuchtothetable,whileReact onlychosetoimplementtheViewlayerinsteadofthefullMVCstack.

Perfecttiming Atthetime,Angular2.xwasannouncedbyGoogle,alongwiththebackwardsincompatibility andmajorchangesitwasgoingtobring.MovingfromAngular1to2waslikemovingtoa differentframework,sothis,alongwithexecutionspeedimprovementsthatReactpromised, madeitsomethingdeveloperswereeagertotry.

BackedbyFacebook BeingbackedbyFacebookobviouslyisgoingtobenefitaprojectifitturnsouttobe successful.

7

IntroductiontoReact

FacebookcurrentlyhasastronginterestinReact,seesthevalueofitbeingOpenSource,and thisisahugeplusforallthedevelopersusingitintheirownprojects.

IsReactsimpletolearn? EventhoughIsaidthatReactissimplerthanalternativeframeworks,divingintoReactisstill complicated,butmostlybecauseofthecorollarytechnologiesthatcanbeintegratedwith React,likeReduxandGraphQL. ReactinitselfhasaverysmallAPI,andyoubasicallyneedtounderstand4conceptstoget started: Components JSX State Props Allthese(andmore)areexplainedinthishandbook.

8

HowtoinstallReact

HowtoinstallReact HowtoinstallReactonyourdevelopmentcomputer HowdoyouinstallReact? Reactisalibrary,sosayinginstallmightsoundabitweird.Maybesetupisabetterword,but yougettheconcept. TherearevariouswaystosetupReactsothatitcanbeusedonyourapporsite.

LoadReactdirectlyinthewebpage ThesimplestoneistoaddtheReactJavaScriptfileintothepagedirectly.Thisisbestwhen yourReactappwillinteractwiththeelementspresentonasinglepage,andnotactually controlsthewholenavigationaspect. Inthiscase,youadd2scripttagstotheendofthe bodytag:

...  ...   

The 16.7.0-alpha.2versioninthelinkspointstothelatestAlphaof16.7(atthetimeof writing),whichhasHooksavailable.PleasechangeittothelatestversionofReactthatis available. HereweloadedbothReactandReactDOM.Why2libraries?BecauseReactis100% independentfromthebrowserandcanbeusedoutsideit(forexampleonMobiledeviceswith ReactNative).HencetheneedforReactDOM,toaddthewrappersforthebrowser.

9

HowtoinstallReact

AfterthosetagsyoucanloadyourJavaScriptfilesthatuseReact,oreveninlineJavaScriptin a scripttag:

 , document.getElementById('app') )

ABrowserRoutercomponentcanonlyhaveonechildelement,sowewrapallwe'regoingto addina divelement.

Link TheLinkcomponentisusedtotriggernewroutes.Youimportitfrom react-router-dom,and youcanaddtheLinkcomponentstopointatdifferentroutes,withthe toattribute: importReactfrom'react' importReactDOMfrom'react-dom' import{BrowserRouterasRouter,Link}from'react-router-dom' ReactDOM.render(    Dashboard About    , document.getElementById('app') )

Route Nowlet'saddtheRoutecomponentintheabovesnippettomakethingsactuallyworkaswe want:

178

ReactRouter

importReactfrom'react' importReactDOMfrom'react-dom' import{BrowserRouterasRouter,Link,Route}from'react-router-dom' constDashboard=()=>(  Dashboard ...  ) constAbout=()=>(  About ...  ) ReactDOM.render(    Dashboard About       , document.getElementById('app') )

CheckthisexampleonGlitch:https://flaviocopes-react-router-v4.glitch.me/ Whentheroutematches /,theapplicationshowstheDashboardcomponent. Whentherouteischangedbyclickingthe"About"linkto /about,theDashboardcomponent isremovedandtheAboutcomponentisinsertedintheDOM. Noticethe exactattribute.Withoutthis, path="/"wouldalsomatch /about,since /is containedintheroute.

Matchmultiplepaths Youcanhavearouterespondtomultiplepathssimplyusingaregex,because pathcanbea regularexpressionsstring:

179

ReactRouter

Inlinerendering Insteadofspecifyinga componentpropertyon Route,youcanseta renderprop: (  About ...  )} />

Matchdynamicrouteparameter Youalreadysawhowtousestaticrouteslike constPosts=()=>(  Posts ...  ) //...

Here'showtohandledynamicroutes: constPost=({match})=>(  Post#{match.params.id} ...  ) //...

InyourRoutecomponentyoucanlookupthedynamicparametersin match.params.

180

ReactRouter

matchisalsoavailableininlinerenderedroutes,andthisisespeciallyusefulinthiscase,

becausewecanusethe idparametertolookupthepostdatainourdatasourcebefore renderingPost: constposts=[ {id:1,title:'First',content:'Helloworld!'}, {id:2,title:'Second',content:'Helloagain!'} ] constPost=({post})=>(  {post.title} {post.content}  ) //... ( p.id===match.params.id)}/> )}/>

181

Redux

Redux Reduxisastatemanagerthat'susuallyusedalongwithReact,butit'snot tiedtothatlibrary.LearnReduxbyreadingthissimpleandeasytofollow guide

WhyyouneedRedux Reduxisastatemanagerthat'susuallyusedalongwithReact,butit'snottiedtothatlibraryitcanbeusedwithothertechnologiesaswell,butwe'llsticktoReactforthesakeofthe explanation. Reacthasitsownwaytomanagestate,asyoucanreadontheReactBeginner'sGuide, whereIintroducehowyoucanmanageStateinReact. Movingthestateupinthetreeworksinsimplecases,butinacomplexappyoumightfindyou aremovingalmostallthestateup,andthendownusingprops. Reactinversion16.3.0introducedtheContextAPI,whichmakesReduxredundantforthe usecaseofaccessingthestatefromdifferentpartsofyourapp,soconsiderusingtheContext APIinsteadofRedux,unlessyouneedaspecificfeaturethatReduxprovides. Reduxisawaytomanageanapplicationstate,andmoveittoanexternalglobalstore. Thereareafewconceptstograsp,butonceyoudo,Reduxisaverysimpleapproachtothe problem. ReduxisverypopularwithReactapplications,butit'sinnowayuniquetoReact:thereare bindingsfornearlyanypopularframework.Thatsaid,I'llmakesomeexamplesusingReactas itisitsprimaryusecase.

WhenshouldyouuseRedux? Reduxisidealformediumtobigapps,andyoushouldonlyuseitwhenyouhavetrouble managingthestatewiththedefaultstatemanagementofReact,ortheotherlibraryyouuse. Simpleappsshouldnotneeditatall(andthere'snothingwrongwithsimpleapps).

ImmutableStateTree

182

Redux

InRedux,thewholestateoftheapplicationisrepresentedbyoneJavaScriptobject,called StateorStateTree. WecallitImmutableStateTreebecauseitisreadonly:itcan'tbechangeddirectly. ItcanonlybechangedbydispatchinganAction.

Actions AnActionisaJavaScriptobjectthatdescribesachangeinaminimalway(withjustthe informationneeded): { type:'CLICKED_SIDEBAR' } //e.g.withmoredata { type:'SELECTED_USER', userId:232 }

Theonlyrequirementofanactionobjectishavinga typeproperty,whosevalueisusuallya string.

Actionstypesshouldbeconstants Inasimpleappanactiontypecanbedefinedasastring,asIdidintheexampleinthe previouslesson. Whentheappgrowsisbesttouseconstants: constADD_ITEM='ADD_ITEM' constaction={type:ADD_ITEM,title:'Thirditem'}

andtoseparateactionsintheirownfiles,andimportthem import{ADD_ITEM,REMOVE_ITEM}from'./actions'

Actioncreators ActionsCreatorsarefunctionsthatcreateactions. functionaddItem(t){

183

Redux

return{ type:ADD_ITEM, title:t } }

Youusuallyrunactioncreatorsincombinationwithtriggeringthedispatcher: dispatch(addItem('Milk'))

orbydefininganactiondispatcherfunction: constdispatchAddItem=i=>dispatch(addItem(i)) dispatchAddItem('Milk')

Reducers Whenanactionisfired,somethingmusthappen,thestateoftheapplicationmustchange. Thisisthejobofreducers.

Whatisareducer AreducerisapurefunctionthatcalculatesthenextStateTreebasedonthepreviousState Tree,andtheactiondispatched. ;(currentState,action)=>newState

Apurefunctiontakesaninputandreturnsanoutputwithoutchangingtheinputoranything else.Thus,areducerreturnsacompletelynewstatetreeobjectthatsubstitutestheprevious one.

Whatareducershouldnotdo Areducershouldbeapurefunction,soitshould: nevermutateitsarguments nevermutatethestate,butinsteadcreateanewonewith Object.assign({},...) nevergenerateside-effects(noAPIcallschanginganything) nevercallnon-purefunctions,functionsthatchangetheiroutputbasedonfactorsother thantheirinput(e.g. Date.now()or Math.random())

184

Redux

Thereisnoreinforcement,butyoushouldsticktotherules.

Multiplereducers Sincethestateofacomplexappcouldbereallywide,thereisnotasinglereducer,butmany reducersforanykindofaction.

Asimulationofareducer Atitscore,Reduxcanbesimplifiedwiththissimplemodel:

Thestate { list:[ {title:"Firstitem"}, {title:"Seconditem"}, ], title:'Grocerieslist' }

Alistofactions {type:'ADD_ITEM',title:'Thirditem'} {type:'REMOVE_ITEM',index:1} {type:'CHANGE_LIST_TITLE',title:'Roadtriplist'}

Areducerforeverypartofthestate consttitle=(state='',action)=>{ if(action.type==='CHANGE_LIST_TITLE'){ returnaction.title }else{ returnstate } } constlist=(state=[],action)=>{ switch(action.type){ case'ADD_ITEM': returnstate.concat([{title:action.title}]) case'REMOVE_ITEM': returnstate.map((item,index)=> action.index===index ?{title:item.title} :item

185

Redux

default: returnstate } }

Areducerforthewholestate constlistManager=(state={},action)=>{ return{ title:title(state.title,action), list:list(state.list,action) } }

TheStore TheStoreisanobjectthat: holdsthestateoftheapp exposesthestatevia getState() allowsustoupdatethestatevia dispatch() allowsusto(un)registerastatechangelistenerusing subscribe() Astoreisuniqueintheapp. HereishowastoreforthelistManagerappiscreated: import{createStore}from'redux' importlistManagerfrom'./reducers' letstore=createStore(listManager)

CanIinitializethestorewithserver-sidedata? Sure,justpassastartingstate: letstore=createStore(listManager,preexistingState)

Gettingthestate store.getState()

Updatethestate 186

Redux

store.dispatch(addItem('Something'))

Listentostatechanges constunsubscribe=store.subscribe(()=> constnewState=store.getState() ) unsubscribe()

DataFlow DataflowinReduxisalwaysunidirectional. Youcall dispatch()ontheStore,passinganAction. TheStoretakescareofpassingtheActiontotheReducer,generatingthenextState. TheStoreupdatestheStateandalertsalltheListeners.

187

Next.js

Next.js Next.jsisaverypopularNode.jsframeworkwhichenableseasyserver-side Reactrendering,andprovidesmanyotheramazingfeatures

WorkingonamodernJavaScriptapplicationpoweredbyReactisawesomeuntilyourealize thatthereareacoupleproblemsrelatedtorenderingallthecontentontheclient-side. First,thepagetakeslongertothebecomevisibletotheuser,becausebeforethecontent loads,alltheJavaScriptmustload,andyourapplicationneedstoruntodeterminewhatto showonthepage. Second,ifyouarebuildingapubliclyavailablewebsite,youhaveacontentSEOissue.Search enginesaregettingbetteratrunningandindexingJavaScriptapps,butit'smuchbetterifwe cansendthemcontentinsteadoflettingthemfigureitout. Thesolutiontobothofthoseproblemsisserverrendering,alsocalledstaticpre-rendering. Next.jsisoneReactframeworktodoallofthisinaverysimpleway,butit'snotlimitedtothis. It'sadvertisedbyitscreatorsasazero-configuration,single-commandtoolchainforReact apps. ItprovidesacommonstructurethatallowsyoutoeasilybuildafrontendReactapplication, andtransparentlyhandleserver-siderenderingforyou.

188

Next.js

Mainfeatures Hereisanon-exhaustivelistofthemainNext.jsfeatures: HotCodeReloading:Next.jsreloadsthepagewhenitdetectsanychangesavedtodisk. AutomaticRouting:anyURLismappedtothefilesystem,tofilesputinthe pages folder,andyoudon'tneedanyconfiguration(youhavecustomizationoptionsofcourse). SingleFileComponents:usingstyled-jsx,completelyintegratedasbuiltbythesame team,it'strivialtoaddstylesscopedtothecomponent. ServerRendering:youcan(optionally)renderReactcomponentsontheserverside, beforesendingtheHTMLtotheclient. EcosystemCompatibility:Next.jsplayswellwiththerestoftheJavaScript,Nodeand Reactecosystem. AutomaticCodeSplitting:pagesarerenderedwithjustthelibrariesandJavaScriptthat theyneed,nomore. Prefetching:the Linkcomponent,usedtolinktogetherdifferentpages,supportsa prefetchpropwhichautomaticallyprefetchespageresources(includingcodemissing

duetocodesplitting)inthebackground. DynamicComponents:youcanimportJavaScriptmodulesandReactComponents dynamically(https://github.com/zeit/next.js#dynamic-import). StaticExports:usingthe nextexportcommand,Next.jsallowsyoutoexportafully staticsitefromyourapp.

Installation Next.jssupportsallthemajorplatforms:Linux,macOS,Windows. ANext.jsprojectisstartedeasilywithnpm: npminstallnextreactreact-dom

orwithYarn: yarnaddnextreactreact-dom

Gettingstarted Createa package.jsonfilewiththiscontent:

189

Next.js

{ "scripts":{ "dev":"next" } }

Ifyourunthiscommandnow: npmrundev

thescriptwillraiseanerrorcomplainingaboutnotfindingthe pagesfolder.Thisistheonly thingthatNext.jsrequirestorun. Createanempty pagesfolder,andrunthecommandagain,andNext.jswillstartupaserver on localhost:3000. IfyougotothatURLnow,you'llbegreetedbyafriendly404page,withanicecleandesign.

Next.jshandlesothererrortypesaswell,like500errorsforexample.

Createapage Inthe pagesfoldercreatean index.jsfilewithasimpleReactfunctionalcomponent: exportdefault()=>(  HelloWorld!  )

Ifyouvisit localhost:3000,thiscomponentwillautomaticallyberendered.

190

Next.js

Whyisthissosimple? Next.jsusesadeclarativepagesstructure,whichisbasedonthefilesystemstructure. Simplyput,pagesareinsidea pagesfolder,andthepageURLisdeterminedbythepagefile name.ThefilesystemisthepagesAPI.

Server-siderendering Openthepagesource, View->Developer->ViewSourcewithChrome. Asyoucansee,theHTMLgeneratedbythecomponentissentdirectlyinthepagesource.It's notrenderedclient-side,butinsteadit'srenderedontheserver. TheNext.jsteamwantedtocreateadeveloperexperienceforserverrenderedpagessimilar totheoneyougetwhencreatingabasicPHPproject,whereyousimplydropPHPfilesand youcallthem,andtheyshowupaspages.Internallyofcourseit'sallverydifferent,butthe apparenteaseofuseisclear.

Addasecondpage Let'screateanotherpage,in pages/contact.js exportdefault()=>(   Contactus!   )

Ifyoupointyourbrowserto localhost:3000/contactthispage...