book

The React Workshop

Name: The React Workshop
ISBN: 9781838645564

by Brandon Richey, Ryan Yu, Endre Vegh, Theofanis Despoudis, Anton Punith, Florian Sloot, Daniel Bugl, Brandan Jones, SudarshanReddy Kurri, David Parker, Cihan Yakar

August 2020

Beginner

806 pages

12h 44m

English

Packt Publishing

Read now

Unlock full access

The React Workshop 
Preface
About the BookAudienceAbout the ChaptersConventionsBefore You BeginInstallation InstructionsNode.js/NPMYarnCreate React AppEditors/IDEsInstalling the Code Bundle
1. Getting Started with React
IntroductionProblems before ReactIntroducing ReactGetting Started with Create React AppSetting Up a Development Environment Tweaking Create React App's Options Using Create React App to Create Our ProjectExploring the Created ProjectExploring the Rest of the ScaffoldIntroduction to JSXDiving Deeper into JSXExercise 1.01: Implementing JSX Creating a React ComponentPreparing Our Code to Start Writing Our ComponentUnderstanding PropsExercise 1.02: Creating Our First React ComponentUnderstanding React RenderingBuilding Components with ClassesExercise 1.03: Implementing a Click Counter in React Using ClassesActivity 1.01: Design a React ComponentSummary
2. Dealing with React Events
Introduction – Talking to JavaScript with ReactDesigning the State of Our ApplicationQuick UI ExamplesGetting Started – Building Our Baseline ComponentExercise 2.01: Writing the Starter State for Our CodeEvent Handlers in ReactonClickExercise 2.02: Writing Our First Event HandleronBlurContext of Event HandlersIn-line Bind StatementsConstructor Bind StatementsExercise 2.03: Building our Username ValidatorExercise 2.04: Using Alternative Class Declarations to Avoid BindsForm Validation in ReactExercise 2.05: Creating a Validation for Input FieldsActivity 2.01: Create a Blog Post Using React Event HandlersSummary
3. Conditional Rendering and for Loops
IntroductionConditional RenderingExercise 3.01: Building Our First App Using Conditional RenderingNested Conditional RenderingExercise 3.02: Building a Conditional Quiz AppRendering Loops with ReactRendering LoopsExercise 3.03: Refining Our Quiz Display with LoopsActivity 3.01: Building a Board Game Using Conditional RenderingSummary
4. React Lifecycle Methods
IntroductionOverview of the Component Lifecycle Exercise 4.01: Implementing Lifecycle MethodsThe Mount Lifecycleconstructor()Exercise 4.02: Conditional Rendering and the Mount Lifecyclerender()componentDidMount()The Update Lifecyclerender()componentDidUpdate()Exercise 4.03: Simulating a Slow AJAX Request and Prerendering Your ComponentThe Unmount LifecyclecomponentWillUnmount()Exercise 4.04: Messaging on UnmountActivity 4.01: Creating a Messaging App Summary
5. Class and Function Components
IntroductionIntroduction to Thinking with React ComponentsAtomic DesignPragmatic ApproachBuilding React ComponentsData FlowState and PropsClass ComponentsExercise 5.01: Creating Profile Component as a Class ComponentFunction ComponentExercise 5.02: Changing the Loader Component as a Function ComponentDifferences between Class and Function ComponentsSyntaxHandling StateActivity 5.01: Creating a Comments SectionSummary
6. State and Props
IntroductionState in ReactInitializing and Using StateSetting StatesetStateCustom Methods and ClosureExercise 6.01: Building an App to Change the ThemeProps in ReactChildren PropProps are ImmutableExercise 6.02: Creating a Modal ScreenActivity 6.01: Creating a Products App PageSummary
7. Communication between Components
IntroductionGetting StartedPassing Data from Parent to Child ComponentsPassing Data to Direct Child ComponentsExample 1: Sending Data from a Parent Component to a Direct Child ComponentExample 2: Receiving Data in a Child Class ComponentExample 3: Receiving Data in a Child Function ComponentExample 4: Sending number and Boolean as Props from the Parent ComponentExample 5: Receiving number and boolean Values in Class-Based and Functional ComponentsDestructuring PropsExample 6: Destructuring Prop Values in a Child Class ComponentExample 7: Destructuring Prop Values in a Function ComponentExercise 7.01: Sending and Receiving Objects as Props from the Parent The {children} PropExercise 7.02: Sending Child Elements Using the children PropSending and Receiving an Array through PropsExercise 7.03: Sending, Receiving, and Displaying an Array from a Parent to a Child Passing Data to a Child Component Multiple Levels DownSplitting a Component into Smaller ComponentsExercise 7.04: Splitting into Smaller ComponentsPassing a Component through a PropExercise 7.05: Creating a Photo Function ComponentHigher-Order ComponentsExercise 7.06: Creating a HOC Function That Can Be Called with DonationColorRender Props Exercise 7.07: Adding donationColorPassing Data from Children to a ParentExercise 7.08: Passing Data from a Child to a Parent ComponentPassing Data Between Components at Any LevelExercise 7.09: Adding the addList Callback FunctionThe Context APIExercise 7.10: Creating the <AnimalCount> Component Using the React Context APIActivity 7.01: Creating a Temperature ConverterSummary
8. Introduction to Formik
IntroductionUncontrolled ComponentsExercise 8.01: Creating Our First Uncontrolled Form ComponentControlled ComponentsExercise 8.02: Converting Our Form Component from Uncontrolled to ControlledIntroduction to FormikAdvantages of FormikAnatomy of a Formik ComponentInitial Values and HandlersFormik Higher-Order ComponentsConnectValidating a FormExercise 8.03: Adding Field ValidatorsControlling When Formik Runs Validation RulesSchema ValidationExercise 8.04: Controlling Schema Validation PhasesSubmitting a FormActivity 8.01: Writing Your Own Form Using FormikSummary

9. Introduction to React Router
IntroductionUnderstanding Browser Routing Exercise 9.01: Building a Basic Router using the Location APIBasics of React RouterExercise 9.02: Implementing a Switch RouterAdding Params to Your RoutesExercise 9.03: Adding Params to RoutesAdding Page Not Found for RoutesExercise 9.04: Adding a NotFound RouteNesting RoutesExercise 9.05: Nested Routes and the Link ComponentActivity 9.01: Creating an E-Commerce ApplicationSummary
10. Advanced Routing Techniques: Special Cases
IntroductionReact Router Special CasesPassing URL Parameters between RoutesExercise 10.01: Creating URL ParametersMatching Unknown Routes with 404 PagesExercise 10.02: Creating Unknown RoutesRendering Nested RoutesExercise 10.03: Creating Nested RoutesProtecting RoutesPreventing OutBound TransitionsExercise 10.04: Protected RoutesPreventing Inbound TransitionsActivity 10.01: Creating Authentication Using Routing TechniquesSummary
11. Hooks – Reusability, Readability, and a Different Mental Model
IntroductionHooksuseStateExercise 11.01: Displaying an Image with the Toggle Button useEffect – from Life Cycle Methods to Effect HooksExercise 11.02: Creating a Login State Using useEffectComparing useEffect Hooks with Life Cycle MethodsComparing Hooks to Render PropsActivity 11.01: Creating a Reusable CounterSummary
12. State Management with Hooks
IntroductionuseState Hook: A Closer LookSetter Functions on ArraysExercise 12.01: Array Manipulation Using HooksEquality and Immutability for Objects in ReactLimitations of useStateUsing the useReducer HookReducer Function in ReactExercise 12.02: useReducer with a Simple FormEffects with CleanupActivity 12.01: Creating a Chat App Using HooksSummary
13. Composing Hooks to Solve Complex Problems
IntroductionContext API and HooksuseContext HookExercise 13.01: Adding Context to the ShoppingCart AppProps and ContextProps for CustomizationAnother Example: Theming as a ServiceExercise 13.02: Creating Context Using useContext and useEffectActivity 13.01: Creating a Recipe AppSummary
14. Fetching Data by Making API Requests
IntroductionRESTful API Five Common HTTP MethodsPUT versus PATCHHTTP Status CodesAccept Header and Content-Type HeaderDifferent Ways of Requesting DataXMLHttpRequestExercise 14.01: Requesting Data Using XMLHttpRequestFetch APIExercise 14.02: Requesting Data Using the Fetch APIAxiosExercise 14.03: Requesting Data Using AxiosComparison of XMLHttpRequest, the Fetch API, and AxiosAxios versus the Fetch APIBetter Response HandlingBetter Error HandlingTesting APIs with PostmanExercise 14.04: GET and POST Requests with PostmanExercise 14.05: PUT, PATCH, and DELETE Requests with PostmanMaking API Requests in ReactReact Boilerplate and AxiosExercise 14.06: Installing React Boilerplate and AxiosTesting the NASA API with PostmanExercise 14.07: Testing the Endpoint with PostmanFetching Data with ReactExercise 14.08: Creating a Controlled Component to Fetch DataActivity 14.01: Building an App to Request Data from UnsplashSummary
15. Promise API and async/await
IntroductionWhat Is the Promise API?Exercise 15.01: Fetching Data through PromisesWhat Is async/await?asyncawait then()error()finally()Better Error Handling with async/awaitExercise 15.02: Converting submitForm() to async/awaitasync/await within Loopsfor...offorEach()map()Activity 15.01: Creating a Movie AppSummary
16. Fetching Data on Initial Render and Refactoring with Hooks
IntroductionFetching Data upon Initial RenderingExercise 16.01: Fetching Popular Google Fonts on Initial RenderingFetching Data on UpdateInfinite LoopExercise 16.02: Fetching Trending Google FontsReact Hooks to Fetch DataExercise 16.03: Refactoring the FontList Component More Refactoring with Custom HookExercise 16.04: Refactoring a FontList Component with a Custom HookActivity 16.01: Creating an App Using Potter APISummary
17. Refs in React
IntroductionWhy React Refs?ReferencesExercise 17.01: Creating Custom Upload Buttons with RefsWays of Creating React RefsExercise 17.02: Measuring the Dimensions of a div Element in a Class-Based ComponentExercise 17.03: Measuring the Element Size in a Functional ComponentForwarding RefsExercise 17.04: Measuring Button Dimensions Using a Forwarded RefActivity 17.01: Creating a Form with an Autofocus Input ElementSummary
18. Practical Use Cases of Refs
IntroductionRecap of React Refs BasicsEncapsulation via PropsDOM Manipulation HelpersThe cloneElement function in ReactExercise 18.01: Cloning an Element and Passing It an onClick PropThe createPortal function in ReactDOMExercise 18.02: Creating a Global Overlay Using PortalsActivity 18.01: Portable Modals Using RefsSummary
Appendix
1. Getting Started with ReactActivity 1.01: Design a React Component2. Dealing with React Events Activity 2.01: Create a Blog Post Using React Event Handlers3. Conditional Rendering and for LoopsActivity 3.01: Building a Board Game Using Conditional Rendering4. React Lifecycle MethodsActivity 4.01: Creating a Messaging App 5. Class and Function ComponentsActivity 5.01: Creating a Comments Section6. State and PropsActivity 6.01: Creating a Products App Page7. Communication between ComponentsActivity 7.01: Creating a Temperature Converter8. Introduction to FormikActivity 8.01: Writing Your Own Form Using Formik9. Introduction to React RouterActivity 9.01: Creating an E-Commerce Application10. Advanced Routing Techniques: Special CasesActivity 10.01: Creating Authentication Using Routing Techniques11. Hooks – Reusability, Readability, and a Different Mental ModelActivity 11.01: Creating a Reusable Counter12. State Management with HooksActivity 12.01: Creating a Chat App Using Hooks13. Composing Hooks to Solve Complex ProblemsActivity 13.01: Creating a Recipe App14. Fetching Data by Making API RequestsActivity 14.01: Building an App to Request Data from Unsplash15. Promise API and async/awaitActivity 15.01: Creating a Movie App16. Fetching Data on Initial Render and Refactoring with HooksActivity 16.01: Creating an App Using Potter API17. Refs in ReactActivity 17.01: Creating a Form with an Autofocus Input Element18. Practical Use Cases of RefsActivity 18.01: Portable Modals Using Refs

Content preview from The React Workshop

16. Fetching Data on Initial Render and Refactoring with Hooks

Overview

This chapter will introduce you to the techniques of fetching data on initial rendering and fixing issues when a component falls into an infinite loop. You will be able to create class-based and functional component custom hooks and refactor the code further for simplicity and reusability. This chapter will give you a complete overview of how to fetch data on initial rendering and fix the common issue you will face with the infinite loop.

Introduction

In the previous chapter, we learned how to fetch data from servers using async/await and catch errors with the try/catch pattern. Also, we have further practiced how to use the async/await methods inside loops.

Now, let's ...

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

The JavaScript Workshop

Joseph Labrecque, Jahred Love, Daniel Rosenbaum, Nick Turner, Gaurav Mehla, Alonzo L. Hosford, Florian Sloot, Philip Kirkbride, Christer Johansson, Peter Lyons Kehl, Andrew Artajos, Shubham Shrivastava, Lior Avital, Archit Goyal, Gavin Orland, David Parker, Dixit Patel, Tarunkumar Bagmar

The Hidden Cost of AI-Assisted Creativity

Publisher Resources

ISBN: 9781838645564

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

The React Workshop

by Brandon Richey, Ryan Yu, Endre Vegh, Theofanis Despoudis, Anton Punith, Florian Sloot, Daniel Bugl, Brandan Jones, SudarshanReddy Kurri, David Parker, Cihan Yakar

16. Fetching Data on Initial Render and Refactoring with Hooks

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.