book

React Key Concepts - Second Edition

Name: React Key Concepts - Second Edition
Author: Maximilian Schwarzmüller
ISBN: 9781836202271

by Maximilian Schwarzmüller

January 2025

Beginner to intermediate

544 pages

13h 3m

English

Packt Publishing

Read now

Unlock full access

Contributors
About the AuthorAbout the ReviewersJoin Us on Discord
Preface
Who This Book Is ForWhat This Book CoversStaying Up to Date with This BookFollowing Along with the BookInstalling React.jsDownload the Example Code FilesDownload the Color ImagesConventions UsedGet in TouchShare Your ThoughtsDownload the Free PDF and Supplementary ContentDescription of Supplementary Content
React – What and Why
IntroductionWhat is React?The Problem with “Vanilla JavaScript”React and Declarative CodeHow React Manipulates the DOMIntroducing SPAsCreating a React Project with ViteSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Join Us on Discord
Understanding React Components and JSX
IntroductionWhat Are Components?Why Components?The Anatomy of a ComponentWhat Exactly Are Component Functions?What Does React Do with All These Components?Built-In ComponentsNaming ConventionsJSX vs HTML vs Vanilla JavaScriptUsing React without JSXJSX Elements Are Treated Like Regular JavaScript ValuesJSX Elements Must Have a Closing TagMoving Beyond Static ContentOutputting Dynamic ContentRendering ImagesWhen Should You Split Components?Summary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 2.1: Creating a React App to Present YourselfActivity 2.2: Creating a React App to Log Your Goals for This Book
Components and Props
IntroductionCan Components Do More? Using Props in ComponentsPassing Props to ComponentsConsuming Props in a ComponentComponents, Props, and ReusabilityThe Special “children” PropWhich Components Need Props?How to Deal with Multiple PropsSpreading PropsProp Chains/Prop DrillingSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 3.1: Creating an App to Output Your Goals for This Book
Working with Events and State
IntroductionWhat’s the Problem?How Not to Solve the ProblemA Better Incorrect SolutionImproving the Solution by Properly Reacting to EventsUpdating State CorrectlyA Closer Look at useState()A Look Under the Hood of ReactWorking with Multiple State ValuesUsing Multiple State SlicesManaging Merged State ObjectsUpdating State Based on Previous State CorrectlyTwo-Way BindingDeriving Values from StateWorking with Forms and Form SubmissionLifting State UpSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 4.1: Building a Simple CalculatorActivity 4.2: Enhancing the Calculator
Rendering Lists and Conditional Content
IntroductionWhat Are Conditional Content and List Data?Rendering Content ConditionallyDifferent Ways of Rendering Content ConditionallyUtilizing Ternary ExpressionsAbusing JavaScript Logical OperatorsGet Creative!Which Approach is Best?Setting Element Tags ConditionallyOutputting List DataMapping List DataUpdating ListsA Problem with List ItemsKeys to the Rescue!Summary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 5.1: Showing a Conditional Error MessageActivity 5.2: Outputting a List of Products
Styling React Apps
IntroductionHow Does Styling Work in React Apps?Using Inline StylesSetting Styles via CSS ClassesSetting Styles DynamicallyConditional StylesCombining Multiple Dynamic CSS ClassesMerging Multiple Inline Style ObjectsBuilding Components with Customizable StylesCustomization with Fixed Configuration OptionsThe Problem with Unscoped StylesScoped Styles with CSS ModulesThe styled-components LibraryUse the Tailwind CSS Library for StylingUsing Other CSS or JavaScript Styling Libraries and FrameworksSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 6.1: Providing Input Validity Feedback upon Form SubmissionActivity 6.2: Using CSS Modules for Style Scoping
Portals and Refs
IntroductionA World without RefsRefs versus StateUsing Refs for More than DOM AccessRefs in Custom ComponentsControlled versus Uncontrolled ComponentsReact and Where Things End up in the DOMPortals to the RescueSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You Have LearnedActivity 7.1: Extract User Input ValuesActivity 7.2: Add a Side Drawer
Handling Side Effects
IntroductionWhat’s the Problem?Understanding Side EffectsSide Effects Are Not Just about HTTP RequestsDealing with Side Effects with the useEffect() HookHow to Use useEffect()Effects and Their DependenciesUnnecessary DependenciesCleaning Up after EffectsDealing with Multiple EffectsFunctions as DependenciesAvoiding Unnecessary Effect ExecutionsEffects and Asynchronous CodeRules of HooksSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 8.1: Building a Basic Blog

Handling User Input & Forms with Form Actions
IntroductionHandling Form Submissions without ActionsExtracting User InputTracking StateRelying on RefsTaking Advantage of the event ObjectWhich Solution Is Best?Handling Form Submissions with ActionsSynchronous vs Asynchronous ActionsBehind the Scenes: Actions Are TransitionsManaging State Based on Form SubmissionsUpdating UI State with useActionState()Managing Pending UI State with useActionState()Handling Pending UI State with useFormStatus()Performing Optimistic UpdatesSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 9.1: Managing a Feedback Form
Behind the Scenes of React and Optimization Opportunities
IntroductionRevisiting Component Evaluations and UpdatesWhat Happens When a Component Function Is CalledThe Virtual DOM vs the Real DOMState BatchingAvoiding Unnecessary Child Component EvaluationsAvoiding Costly ComputationsUtilizing useCallback()Using the React CompilerAvoiding Unnecessary Code DownloadReducing Bundle Sizes via Code Splitting (Lazy Loading)Strict ModeDebugging Code and the React Developer ToolsSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 10.1: Optimize an Existing App
Working with Complex State
IntroductionA Problem with Cross-Component StateUsing Context to Handle Multi-Component StateProviding and Managing Context ValuesUsing Context in Nested ComponentsChanging Context from Nested ComponentsUsing the Context API EfficientlyGetting Better Code CompletionContext or Lifting State Up?Outsourcing Context Logic into Separate ComponentsCombining Multiple ContextsLimitations of useState( )Managing State with useReducer( )Understanding Reducer FunctionsDispatching ActionsSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 11.1: Migrating an App to the Context APIActivity 11.2: Replacing useState() with useReducer()
Building Custom React Hooks
IntroductionIntroducing Custom HooksWhy Would You Build Custom Hooks?A First Custom HookCustom Hooks: A Flexible FeatureCustom Hooks and ParametersCustom Hooks and Return ValuesA More Complex ExampleBuilding a First Version of the Custom HookMaking the Hook Useful by Returning ValuesImproving Reusability by Accepting an Input ParameterUsing Custom Hooks for Context AccessSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 12.1: Build a Custom Keyboard Input Hook
Multipage Apps with React Router
IntroductionOne Page Is Not EnoughGetting Started with React Router and Defining RoutesAdding Page NavigationWorking with Layouts & Nested RoutesFrom Link to NavLinkRoute Components versus “Normal” ComponentsFrom Static to Dynamic RoutesExtracting Route ParametersCreating Dynamic LinksNavigating ProgrammaticallyRedirectingHandling Undefined RoutesLazy LoadingSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 13.1: Creating a Basic Three-Page Website
Managing Data with React Router
IntroductionData Fetching and Routing Are Tightly CoupledSending HTTP Requests without React RouterLoading Data with React RouterGetting Access to Loaded DataLoading Data for Dynamic RoutesLoaders, Requests, and Client-Side CodeLayouts RevisitedReusing Data across RoutesHandling ErrorsOnward to Data SubmissionWorking with action() and Form DataReturning Data Instead of RedirectingControlling Which <Form> Triggers Which ActionReflecting the Current Navigation StatusSubmitting Forms ProgrammaticallyBehind-the-Scenes Data Fetching and SubmissionDeferring Data LoadingSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 14.1: A To-Dos App
Server-side Rendering & Building Fullstack Apps with Next.js
IntroductionWhat’s the Problem with Client-Side React Apps?Making Sense of Server-side Rendering (SSR)Adding SSR to a React ApplicationServer-side Data Fetching Is Not TrivialIntroducing Next.jsCreating Next.js ProjectsWorking with File-Based RoutesServer-side Rendering with Next.jsWorking with LayoutsManaging Internal NavigationHighlighting Active Links & Using the “use client” DirectiveCreating & Using Regular ComponentsHandling Dynamic RoutesOther Filename ConventionsDiving Deeper into Next.jsSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 15.1: Migrating a Vite-Based React Router App
React Server Components & Server Actions
IntroductionThe Problem with Server-side Data FetchingIntroducing RSCsMaking Sense of RSCsCreating & Using RSCsUnlocking RSCs in React ProjectsRSCs and Server Actions Can’t Be Used in All ProjectsRSCs vs Server-side RenderingRSCs vs Client ComponentsNot All Components Should Be RSCs‘use client’ Affects Child Components, Too!Combining RSCs and Client ComponentsAdvanced Data Fetching with Next.jsManaging Loading States with Next.jsFrom Data Fetching to Data MutationsHandling Data Mutations with Server ActionsUnlocking Server Actions in React ProjectsDefining and Triggering Server ActionsHandling User Input & Updating the UIServer Actions and useActionState()Storing Server Actions in Separate FilesSummary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 16.1: Build a Mini Blog
Understanding React Suspense & The use() Hook
IntroductionShowing Granular Fallback Content with SuspenseUsing Suspense for Data Fetching with Next.jsUsing Suspense in Other React Projects—Possible, But TrickySuspense Does Not Work with useEffect()Fetching Data while Rendering—the Incorrect WayGetting Suspense Support Is TrickyUsing Suspense for Data Fetching with Supporting Librariesuse()ing Data while RenderingSuspense Usage PatternsRevealing Content TogetherRevealing Content as Soon as PossibleNesting Suspended ContentShould You Fetch Data via Suspense or useEffect()?Summary and Key TakeawaysWhat’s Next?Test Your Knowledge!Apply What You LearnedActivity 17.1: Implement Suspense in the Mini Blog
Next Steps and Further Resources
IntroductionHow Should You Proceed?Become a Fullstack React DeveloperInteresting Problems to ExploreBuild a Shopping CartBuild an Application’s Authentication System (User Signup and Login)Build an Event Management WebsiteCommon and Popular React LibrariesUsing TypeScriptOther ResourcesBeyond React for Web ApplicationsFinal WordsJoin Us on Discord
Why Subscribe?
Other Books You May EnjoyShare Your Thoughts
Index
Download the Free PDF and Supplementary ContentDescription of Supplementary Content

Content preview from React Key Concepts - Second Edition

6 Styling React Apps

Learning Objectives

By the end of this chapter, you will be able to do the following:

Style JSX elements via inline style assignments or with the help of CSS classes
Set inline and class styles, both statically and dynamically or conditionally
Build reusable components that allow for style customization
Utilize CSS Modules to scope styles to components
Understand the core idea behind styled-components, a third-party CSS-in-JS library
Use Tailwind CSS to style React apps

Introduction

React.js is a frontend JavaScript library. This means that it’s all about building (web) user interfaces and handling user interaction.

Up to this point, this book has extensively explored how React can be used to add interactivity to a web ...

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

Publisher Resources

ISBN: 9781836202271

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

React Key Concepts - Second Edition

by Maximilian Schwarzmüller

6

Styling React Apps

Introduction

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.