React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition

React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition

by Academind by Maximilian Schwarzmüller
Released April 2022
Publisher(s): Packt Publishing
ISBN: 9781801812603

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

**This course is now updated for the latest version of React—React 18**

React.js is the most popular JavaScript library you can learn and use these days to build modern, reactive user interfaces for the web. In this course, you will dive into the core concepts of React, gaining a thorough understanding of its purpose and benefits. From building components and creating dynamic UIs to harnessing the full potential of React Hooks and working with state management using the Context API and React Redux, we have got you covered. Learn to build standalone React apps and connect them to backends using HTTP. Master routing and data fetching techniques with React Router. Implement user authentication in React apps and build full-stack applications with Next.js.

The course includes multiple demo projects, ensuring hands-on experience and practical application. Whether you prefer working locally or in a cloud development environment, we’ve got the flexibility you need.

We will also dive deep into advanced concepts such as debugging, styling with “Styled Components” and “CSS Modules,” working with Fragments and Portals, managing side effects, form handling with validation, incorporating Redux and Redux Toolkit, and leveraging React with TypeScript. Gain insights into animations and ensure robust code with comprehensive unit testing.

This updated version includes two new practice projects and an extensively revamped JS Refresher section. The JS Refresher section provides a comprehensive understanding of JavaScript, laying a solid foundation for building React applications.

By the end of this course, you will be equipped with the skills and knowledge to build robust web applications using React.js confidently.

What You Will Learn

  • Learn all about components, props, and dynamic data binding
  • Work with user events and states to create interactive apps
  • Learn all about React Hooks and React components
  • Understand class-based components and functional components
  • Explore the process of implementing user authentication in React app
  • Learn to combine React with TypeScript and add animations

Audience

Students who want to learn how to build reactive and fast web apps or want to take their web development skills to the next level can opt for this course.

This course starts with zero knowledge assumed. All you need is basic web development (HTML + CSS) and JavaScript knowledge. However, the course even includes a brief JavaScript refresher to ensure that we are all on the same page. ES6+ JavaScript knowledge is beneficial but not a must-have.

No prior React or any other JS framework experience is required!

About The Author

Academind by Maximilian Schwarzmüller:

Academind GmbH

Bundling the courses and the knowledge of successful instructors, Academind strives to deliver high-quality online education. The platform covers topics such as web development, data analysis, and more in a fun and engaging way.

Maximilian Schwarzmüller

Since the age of 13, he has never stopped learning new programming skills and languages. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects.

The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Table of contents

  1. Chapter 1 : Getting Started
    1. Course Introduction
    2. Welcome to the Course!
    3. What Is React.js?
    4. ReactJS Versus "Vanilla JavaScript": Why Use React?
    5. Editing Our First React App
    6. About This Course and Course Outline
    7. The Two Ways (Paths) of Taking This Course
    8. Getting the Most Out of This Course
    9. Creating React Projects: Browser-Based Versus Local Development
    10. Creating React Projects Locally
    11. Using CodeSandbox for React Development (No Local Setup Required!)
  2. Chapter 2 : JavaScript Refresher
    1. Module Introduction
    2. Starting Project
    3. Adding JavaScript to a Page and How React Projects Differ
    4. React Projects Use a Build Process
    5. "import" and "export"
    6. Revisiting Variables and Values
    7. Revisiting Operators
    8. Revisiting Functions and Parameters
    9. Arrow Functions
    10. Revisiting Objects and Classes
    11. Arrays and Array Methods like map()
    12. Destructuring
    13. The Spread Operator
    14. Revisiting Control Structures
    15. Manipulating the DOM - Not With React!
    16. Using Functions as Values
    17. Defining Functions Inside Of Functions
    18. Reference vs Primitive Values
  3. Chapter 3 : React Basics and Working With Components
    1. Module Introduction
    2. What Are Components? And Why Is React All About Them?
    3. React Code Is Written In A "Declarative Way"!
    4. Creating a new React Project
    5. Analyzing a Standard React Project
    6. Introducing JSX
    7. How React Works
    8. Building a First Custom Component
    9. Writing More Complex JSX Code
    10. Adding Basic CSS Styling
    11. Outputting Dynamic Data and Working with Expressions in JSX
    12. Passing Data via "props"
    13. Alternative Ways of Passing and Receiving / Handling "props"
    14. Adding "normal" JavaScript Logic to Components
    15. Splitting Components Into Multiple Components
    16. React and Component Basics - Assignment Problem
    17. React and Component Basics - Assignment Solution
    18. The Concept of "Composition" ("children props")
    19. A First Summary
    20. A Closer Look At JSX
    21. Organizing Component Files
    22. An Alternative Function Syntax
  4. Chapter 4 : Time to Practice: Component Basics
    1. Module Introduction
    2. The Starting Project and Your Tasks
    3. Outputting Key Concepts Data
    4. Identifying Possible Components
    5. Creating and Using a Custom Component
    6. Outsourcing Concept Items Into a Reusable Component
  5. Chapter 5 : React State and Working with Events
    1. Module Introduction
    2. Listening to Events and Working with Event Handlers
    3. How Component Functions Are Executed
    4. Working with "State"
    5. A Closer Look at the "useState" Hook
    6. Adding Form Inputs
    7. Listening to User Input
    8. Working with Multiple States
    9. Using One State Instead (And What's Better)
    10. Updating State That Depends on the Previous State
    11. Alternative: Creating a Shared Handler Function
    12. Handling Form Submission
    13. Adding Two-Way Binding
    14. Child-to-Parent Component Communication (Bottom-Up)
    15. Lifting the State Up
    16. Working with Events and State - Assignment Problem
    17. Working with Events and State - Assignment Solution
    18. Derived / Computed State
    19. Controlled Versus Uncontrolled Components and Stateless vs Stateful Components
  6. Chapter 6 : Rendering Lists and Conditional Content
    1. Module Introduction
    2. Rendering Lists of Data
    3. Using Stateful Lists
    4. Understanding "Keys"
    5. Working with Lists - Assignment Problem
    6. Working with Lists - Assignment Solution
    7. Outputting Conditional Content
    8. Adding Conditional Return Statements
    9. Conditional Content - Assignment Problem
    10. Conditional Content - Assignment Solution
    11. Demo App: Adding a Chart
    12. Adding Dynamic Styles
    13. Wrap Up and Next Steps
  7. Chapter 7 : Styling React Components
    1. Module Introduction
    2. Setting Dynamic Inline Styles
    3. Setting CSS Classes Dynamically
    4. Introducing Styled Components
    5. Styled Components and Dynamic Props
    6. Styled Components and Media Queries
    7. Using CSS Modules
    8. Dynamic Styles with CSS Modules
  8. Chapter 8 : Debugging React Apps
    1. Module Introduction
    2. Understanding React Error Messages
    3. Analyzing Code Flow and Warnings
    4. Working with Breakpoints
    5. Using the React DevTools
  9. Chapter 9 : Time to Practice: A Complete Practice Project
    1. Module Introduction
    2. The First Practice Project and Your Tasks
    3. Splitting the App Into Components
    4. Handling Events
    5. Managing State
    6. Lifting the State Up
    7. Outputting Results Conditionally
    8. Adding CSS Modules
    9. Introducing the Second Project
    10. Adding a "User" Component
    11. Adding a Reusable "Card" Component
    12. Adding a Reusable "Button" Component
    13. Managing the User Input State
    14. Adding Validation and Resetting Logic
    15. Adding a Users List Component
    16. Managing a List of Users through State
    17. Adding the "ErrorModal" Component
    18. Managing the Error State
  10. Chapter 10 : Diving Deeper: Working with Fragments, Portals, and "Refs"
    1. Module Introduction
    2. JSX Limitations and Workarounds
    3. Creating a Wrapper Component
    4. React Fragments
    5. Introducing React Portals
    6. Working with Portals
    7. Working with "refs"
    8. Controlled Versus Uncontrolled Components
  11. Chapter 11 : Advanced: Handling Side Effects, Using Reducers, and Using the Context API
    1. Module Introduction
    2. What Are "Side Effects" and Introducing useEffect()
    3. Using the useEffect() Hook
    4. useEffect() and Dependencies
    5. Using the useEffect() Cleanup Function
    6. useEffect() Summary
    7. Introducing useReducer() and Reducers in General
    8. Using the useReducer() Hook
    9. useReducer() and useEffect()
    10. useReducer() Versus useState() for State Management
    11. Introducing React Context
    12. Using the React Context API
    13. Tapping into Context with the useContext() Hook
    14. Making Context Dynamic
    15. Building and Using a Custom Context Provider Component
    16. React Context Limitations
    17. Learning the "Rules of Hooks"
    18. Refactoring an Input Component
    19. Diving into "Forward Refs"
  12. Chapter 12 : Practice Project: Building a Food Order App
    1. Module Introduction
    2. Starting Setup
    3. Adding a "Header" Component
    4. Adding the "Cart" Button Component
    5. Adding a "Meals" Component
    6. Adding Individual Meal Items and Displaying Them
    7. Adding a Form
    8. Working on the "Shopping Cart" Component
    9. Adding a Modal through a React Portal
    10. Managing Cart and Modal State
    11. Adding a Cart Context
    12. Using the Context
    13. Adding a Cart Reducer
    14. Working with Refs and Forward Refs
    15. Outputting Cart Items
    16. Working on a More Complex Reducer Logic
    17. Making Items Removable
    18. Using the useEffect() Hook
  13. Chapter 13 : A Look Behind the Scenes of React and Optimization Techniques
    1. Module Introduction
    2. How React Really Works
    3. Component Updates in Action
    4. A Closer Look at Child Component Re-Evaluation
    5. Preventing Unnecessary Re-Evaluations with React.memo()
    6. Preventing Function Recreation with useCallback()
    7. useCallback() and Its Dependencies
    8. A First Summary
    9. A Closer Look at State and Components
    10. Understanding State Scheduling and Batching
    11. Optimizing with useMemo()
  14. Chapter 14 : An Alternative Way of Building Components: Class-Based Components
    1. Module Introduction
    2. What and Why
    3. Adding the First Class-Based Component
    4. Working with State and Events
    5. The Component Lifecycle (Class-Based Components Only)
    6. Lifecycle Methods in Action
    7. Class-Based Components and Context
    8. Class-Based Versus Functional Components: A Summary
    9. Introducing Error Boundaries
  15. Chapter 15 : Sending HTTP Requests
    1. Module Introduction
    2. How to Connect to a Database
    3. Our Starting App and Backend
    4. Sending a GET Request
    5. Using Async/Await
    6. Handling Loading and Data States
    7. Handling HTTP Errors
    8. Using useEffect() for Requests
    9. Preparing the Project for the Next Steps
    10. Sending a POST Request
    11. Wrap Up
  16. Chapter 16 : Building Custom React Hooks
    1. Module Introduction
    2. What Are "Custom Hooks"?
    3. Creating a Custom React Hook Function
    4. Using Custom Hooks
    5. Configuring Custom Hooks
    6. Onward to a More Realistic Example
    7. Building a Custom HTTP Hook
    8. Using the Custom HTTP Hook
    9. Adjusting the Custom Hook Logic
    10. Using the Custom Hook in More Components
  17. Chapter 17 : Working with Forms and User Input
    1. Module Introduction
    2. Our Starting Setup
    3. What's So Complex about Forms?
    4. Dealing with Form Submission and Getting User Input Values
    5. Adding Basic Validation
    6. Providing Validation Feedback
    7. Handling the "was touched" State
    8. React to Lost Focus
    9. Refactoring and Deriving States
    10. Managing the Overall Form Validity
    11. Time to Practice: Forms - Problem
    12. Time to Practice: Forms - Solution
    13. Adding a Custom Input Hook
    14. Reusing the Custom Hook
    15. A Challenge for You!
    16. Applying Our Hook and Knowledge to a New Form
    17. Summary
    18. Bonus: Using useReducer()
  18. Chapter 18 : Practice Project: Adding HTTP and Forms to the Food Order App
    1. Module Introduction
    2. Moving "Meals" Data to the Backend
    3. Fetching Meals through HTTP
    4. Handling the Loading State
    5. Handling Errors
    6. Adding a Checkout Form
    7. Reading Form Values
    8. Adding Form Validation
    9. Submitting and Sending Cart Data
    10. Adding Better User Feedback
    11. Summary
  19. Chapter 19 : Diving into Redux
    1. Module Introduction
    2. Another Look at State in React Apps
    3. Redux versus React Context
    4. How Redux Works
    5. Exploring the Core Redux Concepts
    6. More Redux Basics
    7. Preparing a New Project
    8. Creating a Redux Store for React
    9. Providing the Store
    10. Using Redux Data in React Components
    11. Dispatching Actions from Inside Components
    12. Redux with Class-Based Components
    13. Attaching Payloads to Actions
    14. Working with Multiple State Properties
    15. How to Work with Redux State Correctly
    16. Redux Challenges and Introducing Redux Toolkit
    17. Adding State Slices
    18. Connecting Redux Toolkit State
    19. Migrating Everything to Redux Toolkit
    20. Working with Multiple Slices
    21. Reading and Dispatching from a New Slice
    22. Splitting Our Code
    23. Summary
  20. Chapter 20 : Advanced Redux
    1. Module Introduction
    2. Redux and Side Effects (And Asynchronous Code)
    3. Refresher/Practice: Part 1
    4. Refresher/Practice: Part 2
    5. Redux and Async Code
    6. Frontend Code Versus Backend Code
    7. Where to Put Our Logic
    8. Using useEffect() with Redux
    9. Handling HTTP States and Feedback with Redux
    10. Using an Action Creator Thunk
    11. Getting Started with Fetching Data
    12. Finalizing the Fetching Logic
    13. Exploring the Redux DevTools
    14. Summary
  21. Chapter 21 : Building a Multi-Page SPA with React Router
    1. Module Introduction
    2. Routing: Multiple Pages in Single-Page Applications
    3. Project Setup and Installing React Router
    4. Defining Routes
    5. Adding a Second Route
    6. Exploring an Alternative Way of Defining Routes
    7. Navigating Between Pages with Links
    8. Layouts and Nested Routes
    9. Showing Error Pages with errorElement
    10. Working with Navigation Links (NavLink)
    11. Navigating Programmatically
    12. Defining and Using Dynamic Routes
    13. Adding Links for Dynamic Routes
    14. Understanding Relative and Absolute Paths
    15. Working with Index Routes
    16. Onward to a New Project Setup
    17. Time to Practice: Problem
    18. Time to Practice: Solution
    19. Data Fetching with a loader()
    20. Using Data from a Loader in the Route Component
    21. More loader() Data Usage
    22. Where Should loader() Code Be Stored?
    23. When Are loader() Functions Executed?
    24. Reflecting the Current Navigation State in the UI
    25. Returning Responses in loader()s
    26. Which Kind of Code Goes into loader()s?
    27. Error Handling with Custom Errors
    28. Extracting Error Data and Throwing Responses
    29. The json() Utility Function
    30. Dynamic Routes and loader()s
    31. The useRouteLoaderData() Hook and Accessing Data from Other Routes
    32. Planning Data Submission
    33. Working with action() Functions
    34. Submitting Data Programmatically
    35. Updating the UI State Based on the Submission Status
    36. Validating User Input and Outputting Validation Errors
    37. Reusing Actions through Request Methods
    38. Behind-the-Scenes Work with useFetcher()
    39. Deferring Data Fetching with defer()
    40. Controlling Which Data Should Be Deferred
    41. Module Summary
  22. Chapter 22 : Adding Authentication to React Apps
    1. Module Introduction
    2. How Authentication Works
    3. Project Setup and Route Setup
    4. Working with Query Parameters
    5. Implementing the Auth Action
    6. Validating User Input and Outputting Validation Errors
    7. Adding User Login
    8. Attaching Auth Tokens to Outgoing Requests
    9. Adding User Logout
    10. Updating the UI Based on Auth Status
    11. Adding Route Protection
    12. Adding Automatic Logout
    13. Managing the Token Expiration
  23. Chapter 23 : Deploying React Apps
    1. Module Introduction
    2. Deployment Steps
    3. Understanding Lazy Loading
    4. Adding Lazy Loading
    5. Building the Code for Production
    6. Deployment Example
    7. Server-Side Routing and Required Configuration
  24. Chapter 24 : An Introduction to Next.js
    1. Module Introduction
    2. What Is NextJS?
    3. Key Feature 1: Built-In Server-Side Rendering (Improved SEO)
    4. Key Feature 2: Simplified Routing with File-Based Routing
    5. Key Feature 3: Build Fullstack Apps
    6. Creating a New Next.js Project and App
    7. Analyzing the Created Project
    8. Adding First Pages
    9. Adding Nested Paths and Pages (Nested Routes)
    10. Creating Dynamic Pages (With Parameters)
    11. Extracting Dynamic Parameter Values
    12. Linking Between Pages
    13. Onward to a Bigger Project
    14. Preparing the Project Pages
    15. Outputting a List of Meetups
    16. Adding the New Meetup Form
    17. The "_app.js" File and Layout Wrapper
    18. Using Programmatic (Imperative) Navigation
    19. Adding Custom Components and CSS Modules
    20. How Pre-Rendering Works and Which Problem We Face
    21. Data Fetching for Static Pages
    22. Static Site Generation (SSG)
    23. Exploring Server-side Rendering (SSR) with "getServerSideProps"
    24. Working with Params for SSG Data Fetching
    25. Preparing Paths with "getStaticPaths" and Working with Fallback Pages
    26. Introducing API Routes
    27. Working with MongoDB
    28. Sending HTTP Requests to Our API Routes
    29. Getting Data from the Database
    30. Getting Meetup Details Data and Preparing Pages
    31. Adding "head" Metadata
    32. Deploying Next.js Projects
    33. Using Fallback Pages and Redeploying
    34. Summary
  25. Chapter 25 : Animating React Apps
    1. Module Introduction
    2. Preparing the Demo Project
    3. Using CSS Transitions
    4. Using CSS Animations
    5. CSS Transition and Animations Limitations
    6. Using ReactTransitionGroup
    7. Using the Transition Component
    8. Wrapping the Transition Component
    9. Animation Timings
    10. Transition Events
    11. The CSSTransition Component
    12. Customizing CSS Classnames
    13. Animating Lists
    14. Alternative Animation Packages
    15. Wrap Up
  26. Chapter 26 : Replacing Redux with React Hooks
    1. Module Introduction
    2. Starting Project and Why You Would Replace Redux
    3. Alternative: Using the Context API
    4. Toggling Favorites with the Context API
    5. Context API Summary
    6. Getting Started with a Custom Hook as a Store
    7. Finishing the Store Hook
    8. Creating a Concrete Store
    9. Using the Custom Store
    10. Custom Hook Store Summary
    11. Optimizing the Custom Hook Store
    12. Wrap Up
  27. Chapter 27 : Testing React Apps
    1. Module Introduction
    2. What and Why?
    3. Understanding Different Kinds of Tests
    4. What to Test and How to Test
    5. Understanding the Technical Setup and Involved Tools
    6. Running the First Test
    7. Writing Our First Test
    8. Grouping Tests Together with Test Suites
    9. Testing User Interaction and State
    10. Testing Connected Components
    11. Testing Asynchronous Code
    12. Working with Mocks
    13. Summary and Further Resources
  28. Chapter 28 : React and TypeScript
    1. Module Introduction
    2. What and Why?
    3. Installing and Using TypeScript
    4. Exploring the Base Types
    5. Working with Array and Object Types
    6. Understanding Type Inference
    7. Using Union Types
    8. Understanding Type Aliases
    9. Functions and Function Types
    10. Diving into Generics
    11. Creating a React + TypeScript Project
    12. Working with Components and TypeScript
    13. Working with Props and TypeScript
    14. Adding a Data Model
    15. Time to Practice: Exercise Time!
    16. Form Submissions in TypeScript Projects
    17. Working with refs and useRef()
    18. Working with "Function Props"
    19. Managing State and TypeScript
    20. Adding Styling
    21. Time to Practice: Removing a Todo
    22. The Context API and TypeScript
    23. Summary
    24. Bonus: Exploring tsconfig.json
  29. Chapter 29 : Optional: React Hooks Introduction and Summary
    1. Module Introduction
    2. What Are React Hooks?
    3. The Starting Project
    4. Getting Started with useState()
    5. More on useState() and State Updating
    6. Array Destructuring
    7. Multiple States
    8. Rules of Hooks
    9. Passing State Data Across Components
    10. Time to Practice: Hooks Basics - Problem
    11. Time to Practice: Hooks Basics - Solution
    12. Sending HTTP Requests
    13. useEffect() and Loading Data
    14. Understanding useEffect() Dependencies
    15. More on useEffect()
    16. What's useCallback()?
    17. Working with Refs and useRef()
    18. Cleaning Up with useEffect()
    19. Deleting Ingredients
    20. Loading Errors and State Batching
    21. Understanding useReducer()
    22. Using useReducer() for the HTTP State
    23. Working with useContext()
    24. Performance Optimizations with useMemo()
    25. Getting Started with Custom Hooks
    26. Sharing Data Between Custom Hooks and Components
    27. Using the Custom Hook
    28. Wrap Up
  30. Chapter 30 : Optional: React Summary and Core Feature Walkthrough
    1. Module Introduction
    2. What Is React and Why Would You Use It?
    3. React Projects - Requirements
    4. Creating React Projects
    5. Our Starting Project
    6. Understanding How React Works
    7. Building a First Custom Component
    8. Outputting Dynamic Values
    9. Reusing Components
    10. Passing Data to Components with Props
    11. CSS Styling and CSS Modules
    12. Exercise and Another Component
    13. Preparing the App for State Management
    14. Adding Event Listeners
    15. Working with State
    16. Lifting State Up
    17. The Special "children" Prop
    18. State and Conditional Content
    19. Adding a Shared Header and More State Management
    20. Adding Form Buttons
    21. Handling Form Submission
    22. Updating State Based on Previous State
    23. Outputting List Data
    24. Adding a Backend to the React SPA
    25. Sending a POST HTTP Request
    26. Handling Side Effects with useEffect()
    27. Handle Loading State
    28. Understanding and Adding Routing
    29. Adding Routes
    30. Working with Layout Routes
    31. Refactoring Route Components and More Nesting
    32. Linking and Navigating
    33. Data Fetching through loader()s
    34. Submitting Data with action()s
    35. Dynamic Routes
    36. Module Summary
  31. Chapter 31 : Course Roundup
    1. What Now? Next Steps You Could Take!
    2. Explore the React Ecosystem!
    3. Finishing Thoughts

Product information

  • Title: React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition
  • Author(s): Academind by Maximilian Schwarzmüller
  • Release date: April 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781801812603