book

React: Up & Running, 2nd Edition

by Stoyan Stefanov

November 2021

Beginner to intermediate

230 pages

4h 49m

English

O'Reilly Media, Inc.

Read now

Unlock full access

About This BookConventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
SetupHello React WorldWhat Just Happened?React.createElement()JSXSetup BabelHello JSX WorldOn TranspilationNext: Custom Components
A Custom Function ComponentA JSX VersionA Custom Class ComponentWhich Syntax to Use?PropertiesProperties in Function ComponentsDefault PropertiesStateA textarea ComponentMake It StatefulA Note on DOM EventsEvent Handling in the Olden DaysEvent Handling in ReactEvent-Handling SyntaxProps Versus StateProps in Initial State: an AntipatternAccessing the Component from the OutsideLifecycle MethodsLifecycle Example: Log It AllParanoid State ProtectionLifecycle Example: Using a Child ComponentPerformance Win: Prevent Component UpdatesWhatever Happened to Function Components?
Data FirstTable Headers LoopTable Headers Loop, a Terse VersionDebugging the Console WarningAdding <td> ContentProp TypesCan You Improve the Component?SortingCan You Improve the Component?Sorting UI CuesEditing DataEditable CellInput Field CellSavingConclusion and Virtual DOM DiffsSearchState and UIFiltering ContentUpdate the save() MethodCan You Improve the Search?Instant ReplayCleaning Up Event HandlersCleaning SolutionCan You Improve the Replay?An Alternative Implementation?Download the Table DataFetching Data
A Quick Refresher: Function versus Class ComponentsRendering the DataThe State HookSorting the TableEditing DataSearchingLifecycles in a World of HooksTroubles with Lifecycle MethodsuseEffect()Cleaning Up Side EffectsTrouble-Free LifecyclesuseLayoutEffect()A Custom HookWrapping up the ReplayuseReducerReducer FunctionsActionsAn Example ReducerUnit Testing ReducersExcel Component with a Reducer
A Couple ToolsWhitespace in JSXComments in JSXHTML EntitiesAnti-XSSSpread AttributesParent-to-Child Spread AttributesReturning Multiple Nodes in JSXA WrapperA FragmentAn ArrayDifferences Between JSX and HTMLNo class, What for?style Is an ObjectClosing TagscamelCase AttributesNamespaced ComponentsJSX and FormsonChange Handlervalue Versus defaultValue<textarea> Value<select> ValueControlled and Uncontrolled Components
Create React AppNode.jsHello CRABuild and DeployMistakes Were Madepackage.json and node_modulesPoking Around the CodeIndicesJavaScript: ModernizedCSSMoving On
SetupStart CodingRefactoring the Excel ComponentVersion 0.0.1 of the New AppCSSLocal StorageThe ComponentsDiscoveryLogo and a BodyLogoBodyDiscoverable<Button> ComponentButton.jsclassnames PackageForms<Suggest><Rating> ComponentA <FormInput> “Factory”<Form><Actions>DialogsHeaderApp Config<Excel>: New and ImprovedThe Overall StructureRenderingReact.Strict and ReducersExcel’s Little Helpers
Updated App.jsDataFlow ComponentDataFlow BodyJob DoneWhinepad v2ContextNext StepsCircular DataProviding ContextConsuming ContextContext in the HeaderContext in the Data TableUpdating DiscoveryRoutingRoute ContextUsing the Filter URLConsuming the Route Context in the HeaderConsuming the Route Context in the Data TableuseCallback()The End

Overview

Hit the ground running with React, the open source technology from Facebook for building rich web applications fast. Updated for the latest React release, the second edition of this hands-on guide shows you how to build React components and organize them into maintainable large-scale apps. If you're familiar with JavaScript syntax, you're ready to get started.

Through the course of this book, author Stoyan Stefanov helps web developers and programmers build a complete single-page application. You'll quickly learn why some developers consider React the key to the web app development puzzle.

Set up React and write your first "Hello, World" web app
Create and use custom React components alongside generic DOM components
Build a data table component that lets you edit, sort, search, and export its contents
Master the JSX syntax
Use built-in Hooks and create your own custom ones
Manage the app's data flow with reducers and contexts
Use Create React App to take care of the build process and focus on React itself
Build a complete custom app that lets you store data on the client