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

5. Class and Function Components

Activity 5.01: Creating a Comments Section

Solution:

  1. Structuring the app
  2. Looking at the data, the following structure might work:
    App
  |-CommentSection
    |-Comment

    The CommentSection component holds all the comments. It shows the heading and has a few associated styles.

    The comment component renders the comment.

  3. Creating the app

    In the command line, create the app and navigate to the folder. We can now start running the app by running the npm start or yarn start command. Open the folder using your favorite code editor:

    npx create-react-app comment-app
cd comment-app
yarn start
  4. Adding the data file and deleting src/logo.svg
  5. Delete src/logo.svg and add the src/comments.json file provided in the activity.
  6. Adding the CommentSection component in src/components/CommentSection/index.js

    Now, let's create our container component, which will act as a placeholder component for our comments. Since...

Previous Section
End of Section
Next Section