book

React Quickly, Second Edition

Name: React Quickly, Second Edition
ISBN: 9781633439290

by Morten Barklund, Azat Mardan

December 2023

Beginner to intermediate

456 pages

12h 17m

English

Manning Publications

Audiobook available

Read now

Unlock full access

inside front cover
Praise for the First Edition
React Quickly
Copyright
dedication
contents
front matter
prefaceacknowledgmentsabout this bookAudienceRoadmapSource codeliveBook discussion forum software requirementsabout the authorsabout the cover illustration
1 Meeting React
1.1 Benefits of using React1.1.1 Simplicity1.1.2 Speed and testability1.1.3 Ecosystem and community1.2 Disadvantages of React1.3 How React can fit into your website1.3.1 Single-page applications and React1.3.2 The React stack1.4 Your first React app: Hello World1.4.1 The result1.4.2 Writing the application1.4.3 Installing and running a web server1.4.4 Going to the local website1.5 QuizQuiz answersSummary
2 Baby steps with React
2.1 Creating a new React app2.1.1 React project commands2.1.2 File structure2.1.3 Templates2.1.4 Pros and cons2.2 A note about the examples in this book2.3 Nesting elements2.3.1 Node hierarchy2.3.2 Simple nesting2.3.3 Siblings2.4 Creating custom components2.5 Working with properties2.5.1 A single property2.5.2 Multiple properties2.5.3 The special property: children2.6 Application structure2.7 QuizQuiz answersSummary
3 Introduction to JSX
3.1 Why do we use JSX?3.1.1 Before and after JSX3.1.2 Keeping HTML and JavaScript together3.2 Understanding JSX3.2.1 Creating elements with JSX3.2.2 Using JSX with custom components3.2.3 Multiline JSX objects3.2.4 Outputting variables in JSX3.2.5 Working with properties in JSX3.2.6 Branching in JSX3.2.7 Comments in JSX3.2.8 Lists of JSX objects3.2.9 Fragments in JSX3.3 How to transpile JSX3.4 React and JSX gotchas3.4.1 Self-closing elements3.4.2 Special characters3.4.3 String conversion3.4.4 The style attribute3.4.5 Reserved names: class and for3.4.6 Multiword attributes3.4.7 Boolean attribute values3.4.8 Whitespace3.4.9 data- attributes3.5 QuizQuiz answersSummary

4 Functional Components
4.1 The shorter way to write React components4.1.1 An example application4.1.2 Destructuring properties4.1.3 Default values4.1.4 Pass-through properties4.2 A comparison of component types4.2.1 Benefits of functional components4.2.2 Disadvantages of functional components4.2.3 Nonfactors between component types4.2.4 Choosing the component type4.3 When not to use a functional component4.3.1 Error boundary4.3.2 Codebase is class-based4.3.3 Library requires class-based components4.3.4 Snapshot before updating4.4 Conversion from a class-based to a functional component4.4.1 Version 1: Render only4.4.2 Version 2: Class method as utility4.4.3 Version 3: Real class method4.4.4 Version 4: Constructor4.4.5 More complexity equals harder conversion4.5 QuizQuiz answersSummary
5 Making React interactive with states
5.1 Why is React state relevant?5.1.1 React component state5.1.2 Where should I put state?5.1.3 What kind of information do you store in component state?5.1.4 What not to store in state5.2 Adding state to a functional component5.2.1 Importing and using a hook5.2.2 Initializing the state5.2.3 Destructuring the state value and setter5.2.4 Using the state value5.2.5 Setting the state5.2.6 Using multiple states5.2.7 State scope5.3 Stateful class-based components5.3.1 Similarities with the useState hook5.3.2 Differences from the useState hook5.4 QuizQuiz answersSummary
6 Effects and the React component life cycle
6.1 Running effects in components6.1.1 Running an effect on mount6.1.2 Running an effect on mount and cleanup on unmount6.1.3 Running cleanup on unmount6.1.4 Running an effect on some renders6.1.5 Running an effect and cleanup on some renders6.1.6 Running an effect synchronously6.2 Understanding rendering6.2.1 Rendering on mount6.2.2 Rendering on parent render6.2.3 Rendering on state update6.2.4 Rendering inside functions6.3 The life cycle of a class-based component6.3.1 Life cycle methods6.3.2 Legacy life cycle methods6.3.3 Converting life cycle methods to hooks6.4 QuizQuiz answersSummary
7 Hooks to fuel your web applications
7.1 Stateful components7.1.1 Simple state values with useState7.1.2 Creating complex state with useReducer7.1.3 Remembering a value without re-rendering with useRef7.1.4 Easier multicomponent state with useContext7.1.5 Low-priority state updates with useDeferredValue and useTransition7.2 Component effects7.3 Optimizing performance by minimizing re-rendering7.3.1 Memoizing any value with useMemo7.3.2 Memoizing functions with useCallback7.3.3 Creating stable DOM identifiers with useId7.4 Creating complex component libraries7.4.1 Creating component APIs with useImperativeHandle7.4.2 Better debugging of hooks with useDebugValue7.4.3 Synchronizing non-React data with useSyncExternalStore7.4.4 Running effect before rendering with useInsertionEffect7.5 The two key principles of hooks7.6 QuizQuiz answersSummary
8 Handling events in React
8.1 Handling DOM events in React8.1.1 Basic event handling in React8.2 Event handlers8.2.1 Definition of event handlers8.2.2 Event objects8.2.3 React event objects8.2.4 Synthetic event object persistence8.3 Event phases and propagation8.3.1 How phases and propagation work in the browser8.3.2 Handling event phases in React8.3.3 Unusual event propagation8.3.4 Nonbubbling DOM events8.4 Default actions and how to prevent them8.4.1 The default event action8.4.2 Preventing default8.4.3 Other default events8.5 React event objects in summary8.6 Event handler functions from properties8.7 Event handler generators8.8 Listening to DOM events manually8.8.1 Listening for window and document events8.8.2 Dealing with unsupported HTML events8.8.3 Combining React and DOM event handling8.9 QuizQuiz answersSummary
9 Working with forms in React
9.1 Controlled vs. uncontrolled inputs9.2 Managing controlled inputs9.2.1 Filtered input9.2.2 Masked input9.2.3 Many similar inputs9.2.4 Form submission9.2.5 Other inputs9.2.6 Other properties9.3 Managing uncontrolled inputs9.3.1 Opportunities9.3.2 File inputs9.4 QuizQuiz answersSummary
10 Advanced React hooks for scaling
10.1 Resolving values across components10.1.1 React Context10.1.2 Context states10.1.3 React Context deconstructed10.2 How to handle complex state10.2.1 Interdependent state10.3 Custom hooks10.3.1 When is something a custom hook?10.3.2 When should I use a custom hook?10.3.3 Where can I find custom hooks?10.4 QuizQuiz answersSummary
11 Project: Website menu
11.1 Scaffolding for the menu11.1.1 HTML output11.1.2 Component hierarchy11.1.3 Icons11.1.4 CSS11.1.5 Template11.1.6 Source code11.1.7 In the browser11.2 Rendering a static menu11.2.1 The goal of this exercise11.2.2 Desired HTML output11.2.3 Component tree11.2.4 Source code11.2.5 In the browser11.3 Homework: A dynamic menu11.3.1 Goal for this step11.3.2 Hints for solving this step11.3.3 Component hierarchy11.3.4 What now?11.4 Homework: Retrieving items from context11.4.1 Goal for this step11.4.2 Hints for solving this step11.4.3 Component hierarchy11.4.4 What now?11.5 Homework: Optional link11.5.1 Goal for this step11.5.2 Hints for solving this step11.5.3 Component hierarchy11.5.4 What now?11.6 Final thoughtsSummary
12 Project: Timer
12.1 Scaffolding for the timer12.1.1 HTML output12.1.2 Component hierarchy12.1.3 Project structure12.1.4 Source code12.1.5 Running the application12.2 Adding a simple play/pause timer12.2.1 The goal of this exercise12.2.2 Component hierarchy12.2.3 Updated project structure12.2.4 Source code12.2.5 Running the application12.3 Homework: Initializing the timer to a custom time12.4 Homework: Resetting timers12.5 Homework: Multiple timersSummary
13 Project: Task manager
13.1 Scaffolding for the task manager13.1.1 Component hierarchy13.1.2 Project structure13.1.3 Source code13.1.4 Running the application13.2 A simple list of tasks13.2.1 The goal of this exercise13.2.2 Component hierarchy13.2.3 Updated project structure13.2.4 Source code13.2.5 Running the application13.3 Homework: Task steps and progress13.4 Homework: Prioritization of steps13.5 Homework: Drag and drop13.6 ConclusionSummary
index
inside back cover

Content preview from React Quickly, Second Edition

6 Effects and the React component life cycle

This chapter covers

Running effects inside components
A complete guide to the React component life cycle
Mounting, unmounting, and rendering components
Introducing life cycle methods for class-based components

React components use JavaScript XML (JSX) to send information to the user in the form of HTML. But components need to do a lot more than that to be useful in an application. In React, everything that happens, happens in some component, so if your application wants to set a cookie, load some data, handle form input, display the user’s camera, start or stop a timer, or a myriad of other dynamic capabilities, you need more than just JSX.

If you want your component to load some data from a server, ...

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: 9781633439290Publisher Support Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

React Quickly, Second Edition

by Morten Barklund, Azat Mardan

6 Effects and the React component life cycle

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.