book

React and React Native - Fourth Edition

by Adam Boduch, Roy Derks, Mikhail Sakhniuk

May 2022

Intermediate to advanced

606 pages

11h

English

Packt Publishing

Read now

Unlock full access

React and React NativeFourth EditionContributorsAbout the authorsAbout the reviewers
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesDownload the color imagesConventions usedGet in touch
What is React?React is just the view layerSimplicity is goodDeclarative UI structuresData changes over timePerformance mattersThe right level of abstractionWhat's new in React 18?Automatic batchingState transitionsSummaryFurther reading
Technical requirementsYour first JSX contentHello JSXDeclarative UI structuresRendering HTMLBuilt-in HTML tagsHTML tag conventionsDescribing UI structuresCreating your own JSX elementsEncapsulating HTMLNested elementsNamespaced componentsUsing JavaScript expressionsDynamic property values and textMapping collections to elementsBuilding fragments of JSXUsing wrapper elementsUsing fragmentsSummaryFurther reading
Technical requirementsWhat is component state?What are component properties?Setting component stateSetting initial component stateCreating component stateMerging component statePassing property valuesDefault property valuesSetting property valuesStateless componentsPure functional componentsDefaults in functional componentsContainer componentsProviding and consuming contextSummaryFurther reading
Technical requirementsMaintaining state using HooksInitial state valuesUpdating state valuesPerforming initialization and cleanup actionsFetching component dataCanceling requests and resetting stateOptimizing side-effect actionsSharing data using context HooksSharing fetched dataUpdating stateful context dataUsing reducer Hooks to scale state managementUsing reducer actionsHandling state dependenciesSummary
Technical requirementsDeclaring event handlersDeclaring handler functionsMultiple event handlersImporting generic handlersUsing event handler context and parametersGetting component dataHigher-order event handlersDeclaring inline event handlersBinding handlers to elementsUsing synthetic event objectsUnderstanding event poolingSummaryFurther reading
Technical requirementsReusable HTML elementsThe difficulty with monolithic componentsThe JSX markupInitial stateEvent handler implementationRefactoring component structuresStarting with the JSXImplementing an article list componentImplementing an article item componentImplementing an add article componentMaking components functionalRender propsRefactoring class components using hooksRendering component treesFeature components and utility componentsSummaryFurther reading
Technical requirementsWhy components need a life cycleInitializing properties and stateFetching component dataInitializing state with propertiesUpdating state with propertiesOptimizing rendering efficiencyTo render or not to renderUsing metadata to optimize renderingRendering imperative componentsRendering jQuery UI widgetsCleaning up after componentsCleaning up asynchronous callsContaining errors with error boundariesSummaryFurther reading

Technical requirements Knowing what to expectPromoting portable componentsSimple property validatorsBasic type validationRequiring valuesAny property valueType and value validatorsThings that can be renderedRequiring specific typesRequiring specific valuesWriting custom property validatorsSummaryFurther reading
Technical requirementsDeclaring routesHello routeDecoupling route declarationsHandling route parametersResource IDs in routesOptional parametersUsing link componentsBasic linkingURL and query parametersSummaryFurther reading
Technical requirementsUsing the lazy APIDynamic imports and bundlesMaking components lazyUsing the Suspense componentTop-level Suspense componentsSimulating latencyWorking with spinner fallbacksAvoiding lazy componentsExploring lazy pages and routesSummary
Technical requirementsWhat is isomorphic JavaScript?The server is a render targetInitial load performanceSharing code between the server and the browserRendering to stringsBackend routingFrontend reconciliationFetching dataSummary
Technical requirementsLayout and organizationUsing containersBuilding responsive grid layoutsUsing navigation componentsNavigating with drawersNavigating with tabsCollecting user inputCheckboxes and radio buttonsText inputs and select inputsWorking with buttonsWorking with styles and themesMaking stylesCustomizing themesSummary
Technical requirementsBatching state updatesPrioritizing state updatesHandling asynchronous state updatesSummary
Technical requirementsWhat is RN?React and JSX are familiarThe mobile browser experienceAndroid and iOS – different yet the sameThe case for mobile web appsSummaryFurther reading
Technical requirementsExploring React Native architectureThe state of web and mobile apps in the pastReact Native current architectureReact Native future architectureExplaining JS and Native modulesReact NavigationUI component librariesSplash screenIconsHandling errorsPush notificationsOver the air updatesJS librariesExploring React Native components and APIsSummary
Technical requirementsExploring React Native CLI toolsInstalling and using the Expo command-line toolViewing your app on your phoneViewing your app on Expo SnackSummary
Technical requirementsIntroducing FlexboxIntroducing React Native stylesUsing the Styled Components libraryBuilding Flexbox layoutsSimple three-column layoutImproved three-column layoutFlexible rowsFlexible gridsFlexible rows and columnsSummaryFurther reading
Technical requirementsNavigation basicsRoute parametersThe navigation headerTab and drawer navigationSummaryFurther reading
Technical requirementsRendering data collectionsSorting and filtering listsFetching list dataLazy list loadingImplementing pull to refreshSummaryFurther reading
Technical requirementsUnderstanding progress and usabilityIndicating progressMeasuring progressExploring navigation indicatorsStep progressSummaryFurther reading
Technical requirementsUsing Location APIRendering the MapAnnotating points of interestPlotting pointsPlotting overlaysSummaryFurther reading
Technical requirementsCollecting text inputSelecting from a list of optionsToggling between on and offCollecting date/time inputSummaryFurther reading
Technical requirementsImportant informationGetting user confirmationDisplaying a success confirmationError confirmationPassive notificationsActivity modalsSummaryFurther reading
Technical requirementsScrolling with your fingersGiving touch feedbackUsing Swipeable and cancellable componentsSummaryFurther reading
Technical requirementsUsing React Native ReanimatedAnimated APIReact Native ReanimatedInstalling the React Native Reanimated libraryAnimating layout components Animating styling componentsSummaryFurther reading
Technical requirementsLoading imagesResizing imagesLazy image loadingRendering iconsSummaryFurther reading
Technical requirementsDetecting the state of the networkStoring application dataSynchronizing application dataSummaryFurther reading
Technical requirementsApplication containersHeaders and footersUsing layout componentsCollecting input using form componentsSummaryFurther reading
Technical requirementsOrganizing state in ReactUnidirectionalitySynchronous update roundsPredictable state transformationsUnified information architectureImplementing ContextCreating ContextContext providerReducer functionsThe Home componentPreventing unwanted re-rendersManaging state in mobile appsScaling the architectureSummaryFurther reading
Approaching state with GraphQLUnderstanding some verbose vernacular about GraphQLDeclarative data fetchingMutating application stateSummaryFurther reading
Technical requirementsCreating a Todo appConstructing a GraphQL schemaBootstrapping the Apollo ClientAdding todo itemsRendering todo itemsCompleting todo itemsSummaryFurther reading
Other Books You May EnjoyPackt is searching for authors like you

Overview

Master the art of developing cross-platform applications with "React and React Native". This comprehensive guide covers the essentials of React development, from components and hooks to React Native for building mobile apps, ensuring a solid grasp of both in one resource.

What this Book will help me do

Understand the fundamentals of React components, state, and properties.
Develop efficient and interactive user interfaces using modern React features.
Learn to create mobile applications using React Native and native APIs.
Explore GraphQL and Apollo for building scalable data architectures.
Gain expertise in implementing cross-platform designs with tools like NativeBase.

Author(s)

Adam Boduch, Roy Derks, and Mikhail Sakhniuk are seasoned JavaScript developers and expert users of React. With years of experience and hands-on expertise, they deliver a balanced guide filled with practical recommendations and best practices.

Who is it for?

This book is perfect for JavaScript developers venturing into React or React Native development. Experience in JavaScript is recommended to grasp the concepts and start building practical applications tailored for web and mobile platforms.