Redux Advanced: Burger Project | React - The Complete Guide (incl. Hooks, React Router and Redux)

Book Overview & Buying
Table Of Contents

React - The Complete Guide (incl. Hooks, React Router and Redux)

By : Academind by Maximilian Schwarzmüller GmbH

Buy this Video

React - The Complete Guide (incl. Hooks, React Router and Redux)

By: Academind by Maximilian Schwarzmüller GmbH

Buy this Video

Overview of this book

Learn React or dive deeper into it. Learn the theory, solve assignments, practice on demo projects and build one big application which is improved throughout the course: The Burger Builder! JavaScript is the major driver of modern web applications since it's the only programming language which runs in the browser and hence allows you to provide highly reactive apps. You'll be able to achieve mobile-app like user experiences in the web. But using JavaScript can be challenging - it quickly becomes overwhelming to create a nice web app with vanilla JavaScript and jQuery only. React to the rescue! React is all about components - basically custom HTML elements - with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it (or listen to your own events!) and re-use it as often as needed. Need to display a list of users in your app? It's as simple as creating a "User" component and outputting it as often as needed. By the end of the course, you will be able to build amazing React (single page) applications! A short refresher about the most important next-gen features is provided in the course. The code bundle for this course is available at https://github.com/PacktPublishing/React---The-Complete-Guide-incl.-Hooks-React-Router-and-Redux-First-Edition- The second edition of this video course, React - The Complete Guide (includes Hooks, React Router, and Redux) Second Edition [2021 Updated], is now available.

Getting Started

Introduction

What is React?

Real-World SPAs & React Web Apps

Writing our First React Code

Why Should we Choose React?

React Alternatives

Understanding Single Page Applications and Multi Page Applications

Course Outline

Refreshing Next Generation JavaScript

Module Introduction

Understanding "let" and "const"

Arrow Functions

Exports and Imports

Understanding Classes

Classes, Properties and Methods

The Spread & Rest Operator

Destructuring

Reference and Primitive Types Refresher

Refreshing Array Functions

Wrap Up

Understanding the Base Features & Syntax

Module Introduction

The Build Workflow

Using Create React App

Understanding the Folder Structure

Understanding Component Basics

Understanding JSX

JSX Restrictions

Creating a Functional Component

Working with Components & Re-Using Them

Outputting Dynamic Content

Working with Props

Understanding the Children Property

Understanding & Using State

Handling Events with Methods

Manipulating the State

Using the useState() Hook for State Manipulation

Stateless vs Stateful Components

Passing Method References between Components

Adding Two Way Binding

Adding Styling with Stylesheets

Working with Inline Styles

Assignment 1: Time to Practice - The Base Syntax

[OPTIONAL] Base Syntax Assignment Solution

Working with Lists and Conditionals

Module Introduction

Rendering Content Conditionally

Handling Dynamic Content "The JavaScript Way"

Outputting Lists (Intro)

Outputting Lists

Lists & State

Updating State Immutably

Lists & Keys

Flexible Lists

Wrap Up

Assignment 2: Time to Practice - Lists and Conditions

[OPTIONAL] Lists and Conditions Assignment Solution

Styling React Components & Elements

Module Introduction

Outlining the Problem Set

Setting Styles Dynamically

Setting Class Names Dynamically

Adding and Using Radium

Using Radium for Media Queries

Introducing Styled Components

More on Styled Components

Styled Components & Dynamic Styles

Working with CSS Modules

CSS Modules & Media Queries

Debugging React Apps

Module Introduction

Understanding Error Messages

Finding Logical Errors by using Dev Tools & Sourcemaps

Working with the React Developer Tools

Using Error Boundaries (React 16+)

Wrap Up

Diving Deeper into Components & React Internals

Module Introduction

A Better Project Structure

Splitting an App into Components

Comparing Stateless and Stateful Components

Class-based vs Functional Components

class Component Lifecycle Overview

Component Creation Lifecycle in Action

Component Updating Lifecycle (for props Changes)

Component Updating Lifecycle (for state Changes)

Using useEffect() in Functional Components

Controlling the useEffect() Behavior

Cleaning up with Lifecycle Hooks & useEffect()

Cleanup Work with useEffect() - Ex

Using shouldComponentUpdate for Optimization

Optimizing Functional Components with React.memo()

When should you optimize?

PureComponents instead of shouldComponentUpdate

How React Updates the DOM

Rendering Adjacent JSX Elements

Using React.Fragment

Higher Order Components (HOC) - Introduction

Another Form of HOCs

Passing Unknown Props

Setting State Correctly

Using PropTypes

Using Refs

Refs with React Hooks

Understanding Prop Chain Problems

Using the Context API

contextType & useContext()

Wrap Up

A Real App: The Burger Builder (Basic Version)

Module Introduction

Planning an App in React - Core Steps

Planning our App - Layout and Component Tree

Planning the State

Setting up the Project

Creating a Layout Component

Starting Implementation of the Burger Builder Container

Adding a Dynamic Ingredient Component

Adding Prop Type Validation

Starting the Burger Component

Outputting Burger Ingredients Dynamically

Calculating the Ingredient Sum Dynamically

Adding the Build Control Component

Outputting Multiple Build Controls

Connecting State to Build Controls

Removing Ingredients Safely

Displaying and Updating the Burger Price

Adding the Order Button

Creating the Order Summary Modal

Showing & Hiding the Modal (with Animation!)

Implementing the Backdrop Component

Adding a Custom Button Component

Implementing the Button Component

Adding the Price to the Order Summary

Adding a Toolbar

Using a Logo in our Application

Adding Reusable Navigation Items

Creating a Responsive Sidedrawer

Working on Responsive Adjustments

More about Responsive Adjustments

Reusing the Backdrop

Adding a Sidedrawer Toggle Button

Adding a Hamburger Icon

Improving the App: Introduction

Prop Type Validation

Improving Performance

Using Component Lifecycle Methods

Changing the Folder Structure

Wrap Up

Reaching out to the Web (Http / Ajax)

Module Introduction

Understanding Http Requests in React

Understanding our Project and Introducing Axios

Creating Http Request to GET Data

Rendering Fetched Data to the Screen

Transforming Data

Making a Post Selectable

Fetching Data on Update (without Creating Infinite Loops)

POSTing Data to the Server

Sending a DELETE Request

Fixing a Bug

Handling Errors Locally

Adding Interceptors to Execute Code Globally

Setting a Default Global Configuration for Axios

Creating and Using Axios Instances

Wrap Up

Burger Builder Project: Accessing a Server

Module Introduction

Creating the Firebase Project

Creating the Axios Instance

Sending a POST Request

Displaying a Spinner while Sending a Request

Handling Errors

Retrieving Data from the Backend

Removing Old Interceptors

Multi-Page-Feeling in a Single-Page-App: Routing

Module Introduction

Routing and SPAs

Setting up Links

Setting Up the Router Package

Preparing the Project for Routing

Setting Up and Rendering Routes

Rendering Components for Routes

Switching Between Pages

Using Links to Switch Pages

Using Routing-Related Props

The "withRouter" HOC & Route Props

Absolute vs Relative Paths

Styling the Active Route

Passing Route Parameters

Extracting Route Parameters

Using Switch to Load a Single Route

Navigating Programmatically

Additional Information Regarding Active Links

Understanding Nested Routes

Creating Dynamic Nested Routes

Redirecting Requests

Conditional Redirects

Using the History Prop to Redirect (Replace)

Working with Guards

Handling the 404 Case (Unknown Routes)

Loading Routes Lazily

Lazy Loading with React Suspense (16.6)

Routing and Server Deployment

Assignment 3: Time to Practice - Routing

[OPTIONAL] Routing Assignment Solution

Wrap Up

Adding Routing to our Burger Project

Module Introduction

Building the Checkout Container

Setting Up Routing & Routes

Navigating to the Checkout Page

Navigating Back & To Next Page

Passing Ingredients via Query Params

Navigating to the Contact Data Component

Order Submission & Passing Data between Pages

Adding an Orders Page

Implementing Navigation Links

Fetching Orders

Outputting the Orders

Wrap Up

Forms and Form Validation

Module Introduction

Analyzing the App

Creating a Custom Dynamic Input Component

Setting Up a JS Config for the Form

Dynamically Create Inputs based on JS Config

Adding a Dropdown Component

Handling User Input

Handling Form Submission

Adding Custom Form Validation

Fixing a Common Validation Gotcha

Adding Validation Feedback

Improving Visual Feedback

Handling Overall Form Validity

Wrap Up

Fixing a Bug

Redux

Module Introduction

Understanding State

The Complexity of Managing State

Understanding the Redux Flow

Setting Up Reducer and Store

Dispatching Actions

Adding Subscriptions

Connecting React to Redux

Connecting the Store to React

Dispatching Actions from within the Component

Assignment 4: Time to Practice – Dispatching actions

[OPTIONAL] Dispatching Actions Assignment Solution

Passing and Retrieving Data with Action

Switch-Case in the Reducer

Updating State Immutably

Updating Arrays Immutably

Outsourcing Action Types

Combining Multiple Reducers

Understanding State Types

Assignment 5: Time to Practice – Redux Basics

[OPTIONAL] Redux basics Assignment Solution

Combining Local UI State and Redux

Wrap Up

Adding Redux to our Project

Module Introduction

Installing Redux and React Redux

Basic Redux Setup

Finishing the Reducer for Ingredients

Connecting the Burger Builder Container to our Store

Working on the Total Price Calculation

Redux & UI State

Adjusting Checkout and Contact Data

Wrap Up

Redux Advanced

Module Introduction

Adding Middleware

Using the Redux Devtools

Executing Asynchronous Code: Introduction

Introducing Action Creators

Action Creators & Async Code

Handling Asynchronous Code

Restructuring Actions

Where to Put Data Transforming Logic?

Using Action Creators and Get State

Using Utility Functions

A Leaner Switch Case Statement

An Alternative Folder Structure

Diving Much Deeper

Wrap Up

Redux Advanced: Burger Project

Module Introduction

Installing the Redux Devtools

Preparing the Folder Structure

Creating Action Creators

Executing Asynchronous Code

Fetching Ingredients Asynchronously

Initializing Ingredients in the BurgerBuilder

Changing the Order of our Ingredients Manually

Adding Order Actions

Connecting Contact Data Container & Actions

The Order Reducer

Working on Order Actions

Redirect to Improve UX

Combining Reducers

Handling Purchases & Updating the UI

Resetting the Price after Purchases

Fetching Orders (via Redux)

Checking our Implemented Functionalities

Refactoring Reducers

Refactoring Reducers Continued

Wrap Up

Adding Authentication to our Burger Project

Module Introduction

Understanding Authentication in Single Page Applications

Required App Adjustments

Adding an Auth Form

Adding Actions

Getting a Token from the Backend

Adding Sign-In

Storing the Token

Adding a Spinner

Logging Users Out

Accessing Protected Resources

Updating the UI Depending on Auth State

Adding a Logout Link

Forwarding Unauthenticated Users

Redirecting the User to the Checkout Page

Persistent Auth State with localStorage

Fixing Connect + Routing Errors

Ensuring App Security

Guarding Routes

Displaying User Specific Orders

Wrap Up

Improving our Burger Project

Module Introduction

Fixing the Redirect to the Frontpage

Using updateObject in the Entire App

Sharing the Validation Method

Using Environment Variables

Removing console.log()s

Adding Lazy Loading

Wrap Up

Testing

Module Introduction

What is Testing?

Required Testing Tools

What To Test?

Writing our First Test

Testing Components Continued

Jest and Enzyme Documentations

Testing Components Correctly

Testing Containers

How to Test Redux

Wrap Up

Deploying the App to the Web

Module Introduction

Deployment Steps

Building the Project

Example: Deploying on Firebase

Wrap Up

Bonus: Working with Webpack

Module Introduction

Introducing Webpack

How Webpack works

Basic Workflow Requirements

Project & npm Setup

Creating a Basic Folder & File Structure

Creating the Basic React Application

Installing Production Dependencies

Setting Up the Basic Webpack Config

Adding File Rules & Babel

Loading CSS Files

Loading Images & Injecting into HTML Page

Production Workflow & Wrap Up

Bonus: Next.js

Module Introduction

Understanding Server Side Rendering

Setting up a Project

Understanding the Basics

Next.js & Components & Pages

Styling our App in Next.js

Handling (404) Errors

A Special Lifecyle Hook

Deploying our App

Bonus: Animations in React Apps

Module Introduction

Preparing the Demo Project

Using CSS Transitions

Using CSS Animations

CSS Transition & 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

Wrap Up

Bonus: A Brief Introduction to Redux Saga

Module Introduction

Installing Redux Saga

Creating our First Saga

Hooking the Saga Up (to the Store and Actions)

Moving Logic from the Action Creator to a Saga

Moving More Logic Into Sagas

Handling Authentication with a Saga

Handling Auto-Sign-In with a Saga

Moving the BurgerBuilder Side Effects into a Saga

Moving the Orders Side Effects into Sagas

Why Sagas can be Helpful

Diving Deeper into Sagas

React Hooks

Introduction

What are "React Hooks"?

The Starting Project

Getting Started with useState()

React - The Complete Guide (incl. Hooks, React Router and Redux)

By : Academind by Maximilian Schwarzmüller GmbH

React - The Complete Guide (incl. Hooks, React Router and Redux)

By: Academind by Maximilian Schwarzmüller GmbH

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access