book

React Programming: The Big Nerd Ranch Guide

Name: React Programming: The Big Nerd Ranch Guide
Author: Loren Klingman
ISBN: 9780137901777

by Loren Klingman

April 2023

Intermediate to advanced

483 pages

12h 12m

English

Big Nerd Ranch Guides

Read now

Unlock full access

Cover Page
About This eBook
Title Page
Copyright Page
Acknowledgements
Table of Contents
Introduction
Learning Web DevelopmentLearning ReactPrerequisitesHow This Book Is OrganizedHow to Use This BookTypographical conventionsUsing an eBookFor the More CuriousChallenges
The Necessary Tools
Installing Google ChromeInstalling Visual Studio CodeCrash Course in the Command LineFinding the current directoryChanging directoriesCreating a directoryListing filesGetting administrator privilegesQuitting a programInstalling Node.jsResourcesFinding Documentation and Help
1. Create React App
Create React AppRunning the Development ServerNavigating Your AppProject metadata and dependenciespublic directorysrc directoryCustomizing Your AppTitleFaviconAdding ElementsStylesThe Chrome Developer ToolsConclusionAre You More Curious?For the More Curious: npxFor the More Curious: %PUBLIC_URL%ChallengesBronze Challenge: SubtitleSilver Challenge: Canarygram
2. Components
App OrganizationHeader ComponentJSXPost ComponentReact Developer ToolsWhy name components?PropsReusing a ComponentObject destructuringRendering ListsKeysConclusionFor the More Curious: Testing Prop Changes in the DevToolsBronze Challenge: FooterSilver Challenge: Canarygram Footer

3. User Events
Adding SelectedItemUser EventsPassing ParametersConclusionFor the More Curious: Alternate file-naming conventionsFor the More Curious: Detaching Event HandlersBronze Challenge: Hello, GoodbyeSilver Challenge: Canary Alert
4. State
What Is State?useStateUpdating StateConclusionFor the More Curious: Components – Functions vs ClassesGold Challenge: Canary Shuffle
5. Linting
Creating a ProjectUpdating the Title and FaviconLinting OverviewLinting RulesInstalling and configuring Airbnb’s ESLintRunning ESLintAuto-fixing errorsOverriding ESLint rulesInstalling the ESLint Extension in Visual Studio CodeConclusionFor the More Curious: Shortcuts to Running ESLint in Visual Studio CodeFor the More Curious: Linting Before Committing
6. Prop Types
Adding ResourcesHeader ComponentWhitespace issuesAdding the component to App.jsStyling the headerThumbnail ComponentProp TypesInstalling the prop-types libraryThumbnail Prop TypesRendering ItemsHome ComponentReusing Prop TypesProp MismatchConclusionFor the More Curious: Why Pass Items as a Prop?For the More Curious: Inlining ImagesBronze Challenge: Add a Prop
7. Styles
Style ScopingResponsive DesignMedia QueriesHover EffectAnimating the hover effectConclusionFor the More Curious: Grid LayoutFor the More Curious: Styled ComponentsFor the More Curious: Compiled CSSSilver Challenge: Custom Effect
8. Interacting with a Server
Setting Up the ServerCreating a proxyAdding an HTTP request libraryuseEffectConfirming the Network RequestPromisesHow promises workConclusionFor the More Curious: Server EndpointsFor the More Curious: How to Set Up a Proxy in ProductionFor the More Curious: Cross-Origin Resource Sharing (CORS)For the More Curious: useEffect vs Lifecycle MethodsSilver Challenge: Promise Practice
9. Router
Creating RoutesUsing LinkCreating the Details Page and RouteNesting a routeIndex routeuseParamsNavigating Home from the HeaderNavigating from Thumbnails to DetailsConclusionSilver Challenge: More Routes
10. Conditional Rendering
Getting Additional Item InfoUndefined Itemsif StatementsInline Logical OperatorsFragmentsMore Logical OperatorsThe && operatorThe || operatorThe ?? operatorBoolean Type ConversionConclusionFor the More Curious: Truthy and Falsy ValuesSilver Challenge: Promote Sale Items
11. useReducer
useReducer vs useStateImplementing useReducerThe Reducer FunctionUpdating the QuantityDisplaying Information in the HeaderAdding Items to the CartAction CreatorsConclusion
12. Editing the Cart
Creating the Cart PageLinking to the cart pageViewing the Cart’s ContentsDisplaying the Cart ContentsDisplaying the item title and priceRemoving Items from the CartPassing dispatch as a propSetting up the remove buttonEmptying the CartDisplaying the SubtotalConclusionBronze Challenge: Increasing the QuantitySilver Challenge: Decreasing the Quantity
13. Forms
Building the FormonSubmitValue from InputsControlled ComponentsonChangeCalculating the TaxCalculating the TotalDisplaying the total conditionallyFormatting InputForm ValidationConclusionSilver Challenge: Coupon CodeGold Challenge: Maintaining the Cursor Position in the Phone NumberGold Challenge: Setting the Quantity
14. Local Storage and useRef
Local StorageuseRef vs useStateUsing setTimeout with useRefAccessing DOM ElementsAccessibility ConsiderationsConclusionSilver Challenge: Returning Focus to the Name Input
15. Submitting Orders
Submitting a Formasync/awaitComparing async/await and then/catchPreventing Inadvertent SubmissionsConclusionBronze Challenge: Reset the Cart StateSilver Challenge: How Many Orders Are in the Queue?
16. Component Composition
AlertConditionally Showing an AlertComponent Composition with PropsReusing AlertEmptying the CartConclusionGold Challenge: Closeable Alert
17. Context
Getting the Logged-In UserLogin ButtonAvoiding Prop DrillingPassing currentUser with ContextuseMemouseContextLogin ComponentuseNavigateLogout ButtonLogin ErrorConclusionFor the More Curious: Login CookieSilver Challenge: Items Context
18. Fulfilling Orders
Creating the Orders ComponentOrders LinkFetching and Displaying OrdersFulfilling OrdersRestricting Access with a Custom HookCustom hooksAdding to the dependency arrayCleaning Up useEffectGetting New OrdersProxying a websocketUsing the websocketClosing the websocketConclusionBronze Challenge: Smarter RedirectBronze Challenge: Import a Custom HookSilver Challenge: LoaderSilver Challenge: Error Display
19. Introduction to App Performance Optimization
React ProfilerMemoContext ChangesuseCallbackExpensive CalculationsComparing useCallback, useMemo, and memoCleaning UpConclusionSilver Challenge: Memoized UserDetails
20. Testing Overview
Deciding What Tests to UseWhy are you testing?What do you want to know?What does the future look like?Types of TestingStatic TestingUnit and Integration TestingUnit testing for functionsIntegration testing for componentsTesting the full appSnapshot testingEnd-to-End TestingEnd-to-end testing with a live back endEnd-to-end testing with a mocked back endWhich to use?Visual or Screenshot TestingConclusion
21. Testing with Jest and the React Testing Library
HousekeepingUnit TestingIntegration TestingTesting ThumbnailTesting HomeMocking the ServerTesting the Logged-In User’s UsernameTesting NavigationTesting the Add to Cart buttonTesting checkoutVerifying order submissionCheckout ErrorMocking console.errorConclusionFor the More Curious: File Structure for Test FilesFor the More Curious: React Testing Library QueriesBronze Challenge: Testing Removing an Item from the CartSilver Challenge: Additional cartReducer TestsSilver Challenge: Testing Phone Number FormattingSilver Challenge: Testing Tax DetailsGold Challenge: Additional Login Tests
22. End-to-End Testing
Installing and Configuring CypressConfiguring scriptsSetting up ESLint for CypressImporting commandsSetting the base URLTesting the Login FlowTesting the Checkout FlowInteracting with the serverTesting errors in the checkout flowTesting the Flow to View and Delete OrdersClearing the ordersFactoring Out Custom CommandsInvisible ElementsAvoiding Flaky TestsConclusionFor the More Curious: Cypress Media FilesFor the More Curious: Cypress Network RequestsSilver Challenge: Testing Phone Number FormattingSilver Challenge: Testing Cart DetailsSilver Challenge: Testing Removing an Item from the CartGold Challenge: Additional Tests
23. Building Your Application
ManifestBuilding the ApplicationDeploying Your ApplicationConclusion
24. Data Loading
Production BuildAnalysisLarge ImagesAnalyzing JavaScript FilesLazy LoadingNaming the bundlesOther ConsiderationsConclusionGold Challenge: Lazy Loading
25. Component Speed
Inspecting PerformanceTransitionsStoring Rendered ContentStoring a Rendered ComponentConclusionGold Challenge: Caching the Filtered Data
26. Afterword
The Final ChallengeShameless PlugsThank You
Index

Overview

React is today's most popular open-source JavaScript library for front-end web application development. React Programming: The Big Nerd Ranch Guide helps programmers with experience in HTML, CSS, and JavaScript master React through hands-on examples.

Based on Big Nerd Ranch's popular React Essentials bootcamp, this guide illuminates key concepts with realistic code, guiding you step by step through building a starter app and a complete, production-ready app, both crafted to help you quickly leverage Reacts remarkable power.

Use React to write reliable, declarative code, create carts and other e-commerce features, optimize performance, and gain experience with component and end-to-end testing. Along the way, you will learn to use tools like Create React App, functional components, hooks, ESLint, React Router, websockets, the React Testing Library, and Cypress.

Resources for the book can be downloaded at: https://www.bignerdranch.com/solutions/react-resources.zip

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Kotlin Programming: The Big Nerd Ranch Guide, 2nd Edition

Publisher Resources

ISBN: 9780137901777

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills