Book Image

The React Workshop

By : Brandon Richey, Ryan Yu, Endre Vegh, Theofanis Despoudis, Anton Punith, Florian Sloot
5 (1)
Book Image

The React Workshop

5 (1)
By: Brandon Richey, Ryan Yu, Endre Vegh, Theofanis Despoudis, Anton Punith, Florian Sloot

Overview of this book

Are you interested in how React takes command of the view layer for web and mobile apps and changes the data of large web applications without needing to reload the page? This workshop will help you learn how and show you how to develop and enhance web apps using the features of the React framework with interesting examples and exercises. The workshop starts by demonstrating how to create your first React project. You’ll tap into React’s popular feature JSX to develop templates and use DOM events to make your project interactive. Next, you’ll focus on the lifecycle of the React component and understand how components are created, mounted, unmounted, and destroyed. Later, you’ll create and customize components to understand the data flow in React and how props and state communicate between components. You’ll also use Formik to create forms in React to explore the concept of controlled and uncontrolled components and even play with React Router to navigate between React components. The chapters that follow will help you build an interesting image-search app to fetch data from the outside world and populate the data to the React app. Finally, you’ll understand what ref API is and how it is used to manipulate DOM in an imperative way. By the end of this React book, you’ll have the skills you need to set up and create web apps using React.

Related Content you might be interested in

Current Title:

Small book image
The React Workshop
Brandon Richey | Ryan Yu | Endre Vegh | Theofanis Despoudis | Anton Punith | Florian Sloot
Aug, 2020 | 806 pages
Small book image
Create React App 2 Quick Start Guide
Brandon Richey
Feb, 2019 | 188 pages
Small book image
React Design Patterns and Best Practices.
Carlos Santana Roldaacuten
Mar, 2019 | 350 pages
Small book image
React Design Patterns and Best Practices
Michele Bertoli
Jan, 2017 | 318 pages
Table of Contents (20 chapters)
Preface
About the Book
1
1. Getting Started with React
1. Getting Started with React
Introduction
Problems before React
Introducing React
Using Create React App to Create Our Project
Introduction to JSX
Creating a React Component
Summary
Free Chapter
2
2. Dealing with React Events
2. Dealing with React Events
Introduction – Talking to JavaScript with React
Designing the State of Our Application
Quick UI Examples
Getting Started – Building Our Baseline Component
Event Handlers in React
Context of Event Handlers
Form Validation in React
Summary
3
3. Conditional Rendering and for Loops
3. Conditional Rendering and for Loops
Introduction
Conditional Rendering
Nested Conditional Rendering
Summary
4
4. React Lifecycle Methods
4. React Lifecycle Methods
Introduction
Overview of the Component Lifecycle
The Mount Lifecycle
The Update Lifecycle
The Unmount Lifecycle
Summary
5
5. Class and Function Components
5. Class and Function Components
Introduction
Introduction to Thinking with React Components
Building React Components
Class Components
Function Component
Differences between Class and Function Components
Summary
6
6. State and Props
6. State and Props
Introduction
State in React
Props in React
Summary
7
7. Communication between Components
7. Communication between Components
Introduction
Getting Started
Higher-Order Components
Render Props
The Context API
Summary
8
8. Introduction to Formik
8. Introduction to Formik
Introduction
Uncontrolled Components
Controlled Components
Introduction to Formik
Formik Higher-Order Components
Summary
9
9. Introduction to React Router
9. Introduction to React Router
Introduction
Understanding Browser Routing
Basics of React Router
Summary
10
10. Advanced Routing Techniques: Special Cases
10. Advanced Routing Techniques: Special Cases
Introduction
React Router Special Cases
Summary
11
11. Hooks – Reusability, Readability, and a Different Mental Model
11. Hooks – Reusability, Readability, and a Different Mental Model
Introduction
Hooks
Comparing useEffect Hooks with Life Cycle Methods
Comparing Hooks to Render Props
Summary
12
12. State Management with Hooks
12. State Management with Hooks
Introduction
useState Hook: A Closer Look
Limitations of useState
Using the useReducer Hook
Summary
13
13. Composing Hooks to Solve Complex Problems
13. Composing Hooks to Solve Complex Problems
Introduction
Context API and Hooks
Summary
14
14. Fetching Data by Making API Requests
14. Fetching Data by Making API Requests
Introduction
RESTful API
Different Ways of Requesting Data
Axios
Comparison of XMLHttpRequest, the Fetch API, and Axios
Testing APIs with Postman
Making API Requests in React
Fetching Data with React
Summary
15
15. Promise API and async/await
15. Promise API and async/await
Introduction
What Is the Promise API?
What Is async/await?
Summary
16
16. Fetching Data on Initial Render and Refactoring with Hooks
16. Fetching Data on Initial Render and Refactoring with Hooks
Introduction
Fetching Data upon Initial Rendering
Fetching Data on Update
React Hooks to Fetch Data
More Refactoring with Custom Hook
Summary
17
17. Refs in React
17. Refs in React
Introduction
Why React Refs?
Forwarding Refs
Summary
18
18. Practical Use Cases of Refs
18. Practical Use Cases of Refs
Introduction
Recap of React Refs Basics
DOM Manipulation Helpers
Summary
Appendix
1. Getting Started with React
2. Dealing with React Events
3. Conditional Rendering and for Loops
4. React Lifecycle Methods
5. Class and Function Components
6. State and Props
7. Communication between Components
8. Introduction to Formik
9. Introduction to React Router
10. Advanced Routing Techniques: Special Cases
11. Hooks – Reusability, Readability, and a Different Mental Model
12. State Management with Hooks
13. Composing Hooks to Solve Complex Problems
14. Fetching Data by Making API Requests
15. Promise API and async/await
16. Fetching Data on Initial Render and Refactoring with Hooks
17. Refs in React
18. Practical Use Cases of Refs

Introduction – Talking to JavaScript with React

In the previous chapter, we designed our first standalone basic React application. The React framework allows you to create rich interactive web applications where users expect an interface that responds quickly to their actions. Often, when you are designing such interactive web applications, there is proper feedback expected within a fraction of a second for even a simple button click. Visualize this scenario:

you click a submit button after filling out a form on a web application, but nothing visible happens after you click the button.

From there, you might do one of two things, either sit and wait for some sort of feedback or furiously hit the button repeatedly, waiting for some sort of feedback or acknowledgment.

Now, you might get some feedback if the form redirects to a new page, or you might receive an error message with the form being submitted multiple times. In either of those scenarios, the developer who created that application has now created a user experience that feels nearly hostile to the end user, one that robs the user of valuable feedback and a way for them to understand how to properly use the application.

The good news is that these are all easily solvable problems in React. We can build our applications in a way that allows the users to be aware of each interaction they have with the site by providing some sort of feedback to the user so that they stay interested and use your application instead of giving up in frustration. You can start giving the user real-time feedback, gently guiding them along as they fill out the form and click the submit button or when they move the focus or cursor away from a field.

In this chapter, we are going to focus on how to intertwine our React components and JavaScript events in a way that really allows for the rich user experience on the web that most people expect nowadays. We will set up event listeners and handlers in our JSX code, and we will build functions in our components that will allow us to handle those events appropriately and change the state of our components. We will start off by designing how we want our component to function before we move into developing the code for the component.

Previous Section
End of Section 2
Next Section