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

Book Image

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

By : Academind GmbH

4.8 (9)

Book Image

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

4.8 (9)

By: Academind GmbH

Overview of this book

**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.

Free Chapter

Getting Started

Course Introduction

Welcome to the Course!

What Is React.js?

ReactJS Versus "Vanilla JavaScript": Why Use React?

Editing Our First React App

About This Course and Course Outline

The Two Ways (Paths) of Taking This Course

Getting the Most Out of This Course

Creating React Projects: Browser-Based Versus Local Development

Creating React Projects Locally

Using CodeSandbox for React Development (No Local Setup Required!)

JavaScript Refresher

Module Introduction

Starting Project

Adding JavaScript to a Page and How React Projects Differ

React Projects Use a Build Process

"import" and "export"

Revisiting Variables and Values

Revisiting Operators

Revisiting Functions and Parameters

Arrow Functions

Revisiting Objects and Classes

Arrays and Array Methods like map()

The Spread Operator

Revisiting Control Structures

Manipulating the DOM - Not With React!

Using Functions as Values

Defining Functions Inside Of Functions

Reference vs Primitive Values

React Basics and Working With Components

Module Introduction

What Are Components? And Why Is React All About Them?

React Code Is Written In A "Declarative Way"!

Creating a new React Project

Analyzing a Standard React Project

Introducing JSX

How React Works

Building a First Custom Component

Writing More Complex JSX Code

Adding Basic CSS Styling

Outputting Dynamic Data and Working with Expressions in JSX

Passing Data via "props"

Alternative Ways of Passing and Receiving / Handling "props"

Adding "normal" JavaScript Logic to Components

Splitting Components Into Multiple Components

React and Component Basics - Assignment Problem

React and Component Basics - Assignment Solution

The Concept of "Composition" ("children props")

A First Summary

A Closer Look At JSX

Organizing Component Files

An Alternative Function Syntax

Time to Practice: Component Basics

Module Introduction

The Starting Project and Your Tasks

Outputting Key Concepts Data

Identifying Possible Components

Creating and Using a Custom Component

Outsourcing Concept Items Into a Reusable Component

React State and Working with Events

Module Introduction

Listening to Events and Working with Event Handlers

How Component Functions Are Executed

Working with "State"

A Closer Look at the "useState" Hook

Adding Form Inputs

Listening to User Input

Working with Multiple States

Using One State Instead (And What's Better)

Updating State That Depends on the Previous State

Alternative: Creating a Shared Handler Function

Handling Form Submission

Adding Two-Way Binding

Child-to-Parent Component Communication (Bottom-Up)

Lifting the State Up

Working with Events and State - Assignment Problem

Working with Events and State - Assignment Solution

Derived / Computed State

Controlled Versus Uncontrolled Components and Stateless vs Stateful Components

Rendering Lists and Conditional Content

Module Introduction

Rendering Lists of Data

Using Stateful Lists

Understanding "Keys"

Working with Lists - Assignment Problem

Working with Lists - Assignment Solution

Outputting Conditional Content

Adding Conditional Return Statements

Conditional Content - Assignment Problem

Conditional Content - Assignment Solution

Demo App: Adding a Chart

Adding Dynamic Styles

Wrap Up and Next Steps

Styling React Components

Module Introduction

Setting Dynamic Inline Styles

Setting CSS Classes Dynamically

Introducing Styled Components

Styled Components and Dynamic Props

Styled Components and Media Queries

Using CSS Modules

Dynamic Styles with CSS Modules

Debugging React Apps

Module Introduction

Understanding React Error Messages

Analyzing Code Flow and Warnings

Working with Breakpoints

Using the React DevTools

Time to Practice: A Complete Practice Project

Module Introduction

The First Practice Project and Your Tasks

Splitting the App Into Components

Handling Events

Lifting the State Up

Outputting Results Conditionally

Adding CSS Modules

Introducing the Second Project

Adding a "User" Component

Adding a Reusable "Card" Component

Adding a Reusable "Button" Component

Managing the User Input State

Adding Validation and Resetting Logic

Adding a Users List Component

Managing a List of Users through State

Adding the "ErrorModal" Component

Managing the Error State

Diving Deeper: Working with Fragments, Portals, and "Refs"

Module Introduction

JSX Limitations and Workarounds

Creating a Wrapper Component

React Fragments

Introducing React Portals

Working with Portals

Working with "refs"

Controlled Versus Uncontrolled Components

Advanced: Handling Side Effects, Using Reducers, and Using the Context API

Module Introduction

What Are "Side Effects" and Introducing useEffect()

Using the useEffect() Hook

useEffect() and Dependencies

Using the useEffect() Cleanup Function

useEffect() Summary

Introducing useReducer() and Reducers in General

Using the useReducer() Hook

useReducer() and useEffect()

useReducer() Versus useState() for State Management

Introducing React Context

Using the React Context API

Tapping into Context with the useContext() Hook

Making Context Dynamic

Building and Using a Custom Context Provider Component

React Context Limitations

Learning the "Rules of Hooks"

Refactoring an Input Component

Diving into "Forward Refs"

Practice Project: Building a Food Order App

Module Introduction

Adding a "Header" Component

Adding the "Cart" Button Component

Adding a "Meals" Component

Adding Individual Meal Items and Displaying Them

Working on the "Shopping Cart" Component

Adding a Modal through a React Portal

Managing Cart and Modal State

Adding a Cart Context

Using the Context

Adding a Cart Reducer

Working with Refs and Forward Refs

Outputting Cart Items

Working on a More Complex Reducer Logic

Making Items Removable

Using the useEffect() Hook

A Look Behind the Scenes of React and Optimization Techniques

Module Introduction

How React Really Works

Component Updates in Action

A Closer Look at Child Component Re-Evaluation

Preventing Unnecessary Re-Evaluations with React.memo()

Preventing Function Recreation with useCallback()

useCallback() and Its Dependencies

A First Summary

A Closer Look at State and Components

Understanding State Scheduling and Batching

Optimizing with useMemo()

An Alternative Way of Building Components: Class-Based Components

Module Introduction

Adding the First Class-Based Component

Working with State and Events

The Component Lifecycle (Class-Based Components Only)

Lifecycle Methods in Action

Class-Based Components and Context

Class-Based Versus Functional Components: A Summary

Introducing Error Boundaries

Sending HTTP Requests

Module Introduction

How to Connect to a Database

Our Starting App and Backend

Sending a GET Request

Using Async/Await

Handling Loading and Data States

Handling HTTP Errors

Using useEffect() for Requests

Preparing the Project for the Next Steps

Sending a POST Request

Building Custom React Hooks

Module Introduction

What Are "Custom Hooks"?

Creating a Custom React Hook Function

Using Custom Hooks

Configuring Custom Hooks

Onward to a More Realistic Example

Building a Custom HTTP Hook

Using the Custom HTTP Hook

Adjusting the Custom Hook Logic

Using the Custom Hook in More Components

Working with Forms and User Input

Module Introduction

Our Starting Setup

What's So Complex about Forms?

Dealing with Form Submission and Getting User Input Values

Adding Basic Validation

Providing Validation Feedback

Handling the "was touched" State

React to Lost Focus

Refactoring and Deriving States

Managing the Overall Form Validity

Time to Practice: Forms - Problem

Time to Practice: Forms - Solution

Adding a Custom Input Hook

Reusing the Custom Hook

A Challenge for You!

Applying Our Hook and Knowledge to a New Form

Bonus: Using useReducer()

Practice Project: Adding HTTP and Forms to the Food Order App

Module Introduction

Moving "Meals" Data to the Backend

Fetching Meals through HTTP

Handling the Loading State

Handling Errors

Adding a Checkout Form

Reading Form Values

Adding Form Validation

Submitting and Sending Cart Data

Adding Better User Feedback

Diving into Redux

Module Introduction

Another Look at State in React Apps

Redux versus React Context

How Redux Works

Exploring the Core Redux Concepts

More Redux Basics

Preparing a New Project

Creating a Redux Store for React

Providing the Store

Using Redux Data in React Components

Dispatching Actions from Inside Components

Redux with Class-Based Components

Attaching Payloads to Actions

Working with Multiple State Properties

How to Work with Redux State Correctly

Redux Challenges and Introducing Redux Toolkit

Adding State Slices

Connecting Redux Toolkit State

Migrating Everything to Redux Toolkit

Working with Multiple Slices

Reading and Dispatching from a New Slice

Splitting Our Code

Advanced Redux

Module Introduction

Redux and Side Effects (And Asynchronous Code)

Refresher/Practice: Part 1

Refresher/Practice: Part 2

Redux and Async Code

Frontend Code Versus Backend Code

Where to Put Our Logic

Using useEffect() with Redux

Handling HTTP States and Feedback with Redux

Using an Action Creator Thunk

Getting Started with Fetching Data

Finalizing the Fetching Logic

Exploring the Redux DevTools

Building a Multi-Page SPA with React Router

Module Introduction

Routing: Multiple Pages in Single-Page Applications

Project Setup and Installing React Router

Defining Routes

Adding a Second Route

Exploring an Alternative Way of Defining Routes

Navigating Between Pages with Links

Layouts and Nested Routes

Showing Error Pages with errorElement

Working with Navigation Links (NavLink)

Navigating Programmatically

Defining and Using Dynamic Routes

Adding Links for Dynamic Routes

Understanding Relative and Absolute Paths

Working with Index Routes

Onward to a New Project Setup

Time to Practice: Problem

Time to Practice: Solution

Data Fetching with a loader()

Using Data from a Loader in the Route Component

More loader() Data Usage

Where Should loader() Code Be Stored?

When Are loader() Functions Executed?

Reflecting the Current Navigation State in the UI

Returning Responses in loader()s

Which Kind of Code Goes into loader()s?

Error Handling with Custom Errors

Extracting Error Data and Throwing Responses

The json() Utility Function

Dynamic Routes and loader()s

The useRouteLoaderData() Hook and Accessing Data from Other Routes

Planning Data Submission

Working with action() Functions

Submitting Data Programmatically

Updating the UI State Based on the Submission Status

Validating User Input and Outputting Validation Errors

Reusing Actions through Request Methods

Behind-the-Scenes Work with useFetcher()

Deferring Data Fetching with defer()

Controlling Which Data Should Be Deferred

Adding Authentication to React Apps

Module Introduction

How Authentication Works

Project Setup and Route Setup

Working with Query Parameters

Implementing the Auth Action

Validating User Input and Outputting Validation Errors

Adding User Login

Attaching Auth Tokens to Outgoing Requests

Adding User Logout

Updating the UI Based on Auth Status

Adding Route Protection

Adding Automatic Logout

Managing the Token Expiration

Deploying React Apps

Module Introduction

Deployment Steps

Understanding Lazy Loading

Adding Lazy Loading

Building the Code for Production

Deployment Example

Server-Side Routing and Required Configuration

An Introduction to Next.js

Module Introduction

What Is NextJS?

Key Feature 1: Built-In Server-Side Rendering (Improved SEO)

Key Feature 2: Simplified Routing with File-Based Routing

Key Feature 3: Build Fullstack Apps

Creating a New Next.js Project and App

Analyzing the Created Project

Adding First Pages

Adding Nested Paths and Pages (Nested Routes)

Creating Dynamic Pages (With Parameters)

Extracting Dynamic Parameter Values

Linking Between Pages

Onward to a Bigger Project

Preparing the Project Pages

Outputting a List of Meetups

Adding the New Meetup Form

The "_app.js" File and Layout Wrapper

Using Programmatic (Imperative) Navigation

Adding Custom Components and CSS Modules

How Pre-Rendering Works and Which Problem We Face

Data Fetching for Static Pages

Static Site Generation (SSG)

Exploring Server-side Rendering (SSR) with "getServerSideProps"

Working with Params for SSG Data Fetching

Preparing Paths with "getStaticPaths" and Working with Fallback Pages

Introducing API Routes

Working with MongoDB

Sending HTTP Requests to Our API Routes

Getting Data from the Database

Getting Meetup Details Data and Preparing Pages

Adding "head" Metadata

Deploying Next.js Projects

Using Fallback Pages and Redeploying

Animating React Apps

Module Introduction

Preparing the Demo Project

Using CSS Transitions

Using CSS Animations

CSS Transition and Animations Limitations

Using ReactTransitionGroup

Using the Transition Component

Wrapping the Transition Component

Animation Timings

Transition Events

The CSSTransition Component

Customizing CSS Classnames

Animating Lists

Alternative Animation Packages

Replacing Redux with React Hooks

Module Introduction

Starting Project and Why You Would Replace Redux

Alternative: Using the Context API

Toggling Favorites with the Context API

Context API Summary

Getting Started with a Custom Hook as a Store

Finishing the Store Hook

Creating a Concrete Store

Using the Custom Store

Custom Hook Store Summary

Optimizing the Custom Hook Store

Testing React Apps

Module Introduction

Understanding Different Kinds of Tests

What to Test and How to Test

Understanding the Technical Setup and Involved Tools

Running the First Test

Writing Our First Test

Grouping Tests Together with Test Suites

Testing User Interaction and State

Testing Connected Components

Testing Asynchronous Code

Working with Mocks

Summary and Further Resources

React and TypeScript

Module Introduction

Installing and Using TypeScript

Exploring the Base Types

Working with Array and Object Types

Understanding Type Inference

Using Union Types

Understanding Type Aliases

Functions and Function Types

Diving into Generics

Creating a React + TypeScript Project

Working with Components and TypeScript

Working with Props and TypeScript

Adding a Data Model

Time to Practice: Exercise Time!

Form Submissions in TypeScript Projects

Working with refs and useRef()

Working with "Function Props"

Managing State and TypeScript

Time to Practice: Removing a Todo

The Context API and TypeScript

Bonus: Exploring tsconfig.json

Optional: React Hooks Introduction and Summary

Module Introduction

What Are React Hooks?

The Starting Project

Getting Started with useState()

More on useState() and State Updating

Array Destructuring

Multiple States

Passing State Data Across Components

Time to Practice: Hooks Basics - Problem

Time to Practice: Hooks Basics - Solution

Sending HTTP Requests

useEffect() and Loading Data

Understanding useEffect() Dependencies

More on useEffect()

What's useCallback()?

Working with Refs and useRef()

Cleaning Up with useEffect()

Deleting Ingredients

Loading Errors and State Batching

Understanding useReducer()

Using useReducer() for the HTTP State

Working with useContext()

Performance Optimizations with useMemo()

Getting Started with Custom Hooks

Sharing Data Between Custom Hooks and Components

Using the Custom Hook

Optional: React Summary and Core Feature Walkthrough

Module Introduction

What Is React and Why Would You Use It?

React Projects - Requirements

Creating React Projects

Our Starting Project

Understanding How React Works

Building a First Custom Component

Outputting Dynamic Values

Reusing Components

Passing Data to Components with Props

CSS Styling and CSS Modules

Exercise and Another Component

Preparing the App for State Management

Adding Event Listeners

Working with State

Lifting State Up

The Special "children" Prop

State and Conditional Content

Adding a Shared Header and More State Management

Adding Form Buttons

Handling Form Submission

Updating State Based on Previous State

Outputting List Data

Adding a Backend to the React SPA

Sending a POST HTTP Request

Handling Side Effects with useEffect()

Handle Loading State

Understanding and Adding Routing

Working with Layout Routes

Refactoring Route Components and More Nesting

Linking and Navigating

Data Fetching through loader()s

Submitting Data with action()s

Course Roundup

What Now? Next Steps You Could Take!

Explore the React Ecosystem!

Finishing Thoughts

Customer Reviews

4.8 (9)

5 star

88.9%

4 star

0

3 star

11.1%

2 star

0

1 star

0

Chapter 1

Getting Started

Content Locked

Section 9

Creating React Projects: Browser-Based Versus Local Development

In this video, you will learn about creating React projects. We have two main options: creating projects locally on our system or using browser-based solutions like CodeSandbox. The advantages of a local setup include more configuration options and control, while browser-based setups offer a quick and hassle-free start. The video will cover creating a project locally and demonstrate how to create a project using CodeSandbox in the following lecture.