book

React Key Concepts

Name: React Key Concepts
Author: Maximilian Schwarzmüller
ISBN: 9781803234502

by Maximilian Schwarzmüller

December 2022

Beginner to intermediate

590 pages

10h 26m

English

Packt Publishing

Read now

Unlock full access

React Key Concepts
Preface
About the BookAbout the AuthorAudienceProspective Table of ContentsConventionsSetting Up Your EnvironmentInstalling React.jsDownloading the Code BundleGet in Touch Please Leave a Review Download A Free PDF Copy Of This Book
1. React – What and Why
IntroductionWhat Is React?The Problem with "Vanilla JavaScript"React and Declarative CodeHow React Manipulates the DOMIntroducing Single Page ApplicationsCreating a React ProjectSummary and Key TakeawaysWhat's Next?Test Your Knowledge!
2. 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 Be Self-ClosingOutputting Dynamic ContentWhen 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
3. Components and Props
IntroductionNot There YetUsing 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
4. Working with Events and State
IntroductionWhat's the Problem?How Not to Solve the ProblemA Better Incorrect SolutionProperly Reacting to EventsUpdating State CorrectlyA Closer Look at useState()A Look under the Hood of ReactNaming ConventionsAllowed State Value TypesWorking with Multiple State ValuesUsing Multiple State SlicesManaging Combined 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
5. 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
6. 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 LibraryUsing 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
7. Portals and Refs
IntroductionA World without RefsRefs versus StateUsing Refs for More than DOM AccessForwarding RefsControlled 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
8. 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

9. 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()Avoiding 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 9.1: Optimize an Existing App
10. 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 ComponentsGetting 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 10.1: Migrating an App to the Context APIActivity 10.2: Replacing useState() with useReducer()
11. Building Custom React Hooks
IntroductionWhy Would You Build Custom Hooks?What Are Custom Hooks?A First Custom HookCustom Hooks: A Flexible FeatureCustom Hooks and ParametersCustom Hooks and Return ValuesA More Complex ExampleSummary and Key TakeawaysWhat's Next?Test Your Knowledge!Apply What You LearnedActivity 11.1: Build a Custom Keyboard Input Hook
12. Multipage Apps with React Router
IntroductionOne Page Is Not EnoughGetting Started with React Router and Defining RoutesAdding Page NavigationFrom Link to NavLinkRoute Components versus "Normal" ComponentsFrom Static to Dynamic RoutesExtracting Route ParametersCreating Dynamic LinksNavigating ProgrammaticallyRedirectingNested RoutesHandling Undefined RoutesLazy LoadingSummary and Key TakeawaysWhat's Next?Test Your Knowledge!Apply What You LearnedActivity 12.1: Creating a Basic Three-Page WebsiteActivity 12.2: Enhancing the Basic Website
13. Managing Data with React Router
IntroductionData Fetching and Routing Are Tightly CoupledSending HTTP Requests without React RouterLoading Data with React RouterEnabling These Extra Router FeaturesLoading 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 13.1: A To-Dos App
14. Next Steps and Further Resources
IntroductionHow Should You Proceed?Interesting Problems to ExploreBuild a Shopping CartBuild an Application's Authentication System (User Signup and Login)Build an Event Management WebsiteCommon and Popular React LibrariesOther ResourcesBeyond React for Web ApplicationsFinal Words
Appendix
2. Understanding React Components & JSXActivity 2.1: Creating a React App to Present YourselfActivity 2.2: Creating a React App to Log Your Goals for This Book 3. Components & PropsActivity 3.1: Creating an App to Output Your Goals for This Book4. Working with Events & StateActivity 4.1: Building a Simple CalculatorActivity 4.2: Enhancing the Calculator5. Rendering Lists & Conditional ContentActivity 5.1: Showing a Conditional Error MessageActivity 5.2: Outputting a List of Products6. Styling React AppsActivity 6.1: Providing Input Validity Feedback upon Form SubmissionActivity 6.2: Using CSS Modules for Style Scoping7. Portals & RefsActivity 7.1: Extract User Input ValuesActivity 7.2: Add a Side-Drawer8. Handling Side EffectsActivity 8.1: Building a Basic Blog9. Behind the Scenes of React & Optimization Opportunities Activity 9.1: Optimize An Existing App10. Working with Complex StateActivity 10.1: Migrating an App to the Context APIActivity 10.2: Replacing useState() with useReducer()11. Building Custom React HooksActivity 11.1: Build a Custom Keyboard Input Hook12. Multipage Apps with React RouterActivity 12.1: Creating a Basic Three-Page WebsiteActivity 12.2: Enhancing the Basic Website13. Managing Data with React RouterActivity 13.1: A To-Dos App
Hey!

Content preview from React Key Concepts

5. Rendering Lists and Conditional Content

Learning Objectives

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

Output dynamic content conditionally.

Render lists of data and map list items to JSX elements.

Optimize lists such that React is able to efficiently update the user interface when needed.

Introduction

By this point in the book, you are already familiar with several key concepts, including components, props, state, and events, with which you have all the core tools you need to build all kinds of different React apps and websites. You have also learned how to output dynamic values and results as part of the user interface.

But there is one topic related to outputting dynamic data that has not yet been discussed ...

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: 9781803234502

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

React Key Concepts

by Maximilian Schwarzmüller

5. Rendering Lists and Conditional Content

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.