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

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

by Academind by Maximilian Schwarzmüller
Released May 2018
Publisher(s): Packt Publishing
ISBN: 9781789132229

Watch 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

Dive in and learn React from scratch! Learn Reactjs, Redux, React Routing, Animations, Next.js basics and way more!

About This Video

What's in the course?

  • The "What", "Why" and "How"
  • React basics (Base features, syntax and concepts)
  • How to output lists and conditional content
  • Styling of React components
  • A deep dive into the internals of React and advanced component features
  • How to access Http content from within React apps (AJAX)
  • Redux, Redux, Redux ... from basics to advanced!
  • Forms and form validation in React apps
  • Authentication
  • An introduction to unit testing
  • An introduction to Next.js
  • React app deployment instructions

In Detail

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.

Who this book is for

Students who want to learn how to build reactive and fast web apps. Anyone who's interested in learning an extremely popular technology used by leading tech companies like Netflix. Students who want to take their web development skills to the next level and learn a future-proof technology

Table of contents

  1. Chapter 1 : Getting Started
    1. Introduction
    2. What is React?
    3. Real-World SPAs React Web Apps
    4. Writing our First React Code
    5. Why Should we Choose React?
    6. React Alternatives
    7. Understanding Single Page Applications and Multi Page Applications
    8. Course Outline
  2. Chapter 2 : Refreshing Next Generation JavaScript
    1. Module Introduction
    2. Understanding "let" and "const"
    3. Arrow Functions
    4. Exports and Imports
    5. Understanding Classes
    6. Classes, Properties and Methods
    7. The Spread Rest Operator
    8. Destructuring
    9. Reference and Primitive Types Refresher
    10. Refreshing Array Functions
    11. Wrap Up
  3. Chapter 3 : Understanding the Base Features Syntax
    1. Module Introduction
    2. The Build Workflow
    3. Using Create React App
    4. Understanding the Folder Structure
    5. Understanding Component Basics
    6. Understanding JSX
    7. JSX Restrictions
    8. Creating a Functional Component
    9. Working with Components Re-Using Them
    10. Outputting Dynamic Content
    11. Working with Props
    12. Understanding the Children Property
    13. Understanding Using State
    14. Handling Events with Methods
    15. Manipulating the State
    16. Using the useState() Hook for State Manipulation
    17. Stateless vs Stateful Components
    18. Passing Method References between Components
    19. Adding Two Way Binding
    20. Adding Styling with Stylesheets
    21. Working with Inline Styles
    22. Assignment 1: Time to Practice - The Base Syntax
    23. [OPTIONAL] Base Syntax Assignment Solution
  4. Chapter 4 : Working with Lists and Conditionals
    1. Module Introduction
    2. Rendering Content Conditionally
    3. Handling Dynamic Content "The JavaScript Way"
    4. Outputting Lists (Intro)
    5. Outputting Lists
    6. Lists State
    7. Updating State Immutably
    8. Lists Keys
    9. Flexible Lists
    10. Wrap Up
    11. Assignment 2: Time to Practice - Lists and Conditions
    12. [OPTIONAL] Lists and Conditions Assignment Solution
  5. Chapter 5 : Styling React Components Elements
    1. Module Introduction
    2. Outlining the Problem Set
    3. Setting Styles Dynamically
    4. Setting Class Names Dynamically
    5. Adding and Using Radium
    6. Using Radium for Media Queries
    7. Introducing Styled Components
    8. More on Styled Components
    9. Styled Components Dynamic Styles
    10. Working with CSS Modules
    11. CSS Modules Media Queries
  6. Chapter 6 : Debugging React Apps
    1. Module Introduction
    2. Understanding Error Messages
    3. Finding Logical Errors by using Dev Tools Sourcemaps
    4. Working with the React Developer Tools
    5. Using Error Boundaries (React 16+)
    6. Wrap Up
  7. Chapter 7 : Diving Deeper into Components React Internals
    1. Module Introduction
    2. A Better Project Structure
    3. Splitting an App into Components
    4. Comparing Stateless and Stateful Components
    5. Class-based vs Functional Components
    6. class Component Lifecycle Overview
    7. Component Creation Lifecycle in Action
    8. Component Updating Lifecycle (for props Changes)
    9. Component Updating Lifecycle (for state Changes)
    10. Using useEffect() in Functional Components
    11. Controlling the useEffect() Behavior
    12. Cleaning up with Lifecycle Hooks useEffect()
    13. Cleanup Work with useEffect() - Ex
    14. Using shouldComponentUpdate for Optimization
    15. Optimizing Functional Components with React.memo()
    16. When should you optimize?
    17. PureComponents instead of shouldComponentUpdate
    18. How React Updates the DOM
    19. Rendering Adjacent JSX Elements
    20. Using React.Fragment
    21. Higher Order Components (HOC) - Introduction
    22. Another Form of HOCs
    23. Passing Unknown Props
    24. Setting State Correctly
    25. Using PropTypes
    26. Using Refs
    27. Refs with React Hooks
    28. Understanding Prop Chain Problems
    29. Using the Context API
    30. contextType useContext()
    31. Wrap Up
  8. Chapter 8 : A Real App: The Burger Builder (Basic Version)
    1. Module Introduction
    2. Planning an App in React - Core Steps
    3. Planning our App - Layout and Component Tree
    4. Planning the State
    5. Setting up the Project
    6. Creating a Layout Component
    7. Starting Implementation of the Burger Builder Container
    8. Adding a Dynamic Ingredient Component
    9. Adding Prop Type Validation
    10. Starting the Burger Component
    11. Outputting Burger Ingredients Dynamically
    12. Calculating the Ingredient Sum Dynamically
    13. Adding the Build Control Component
    14. Outputting Multiple Build Controls
    15. Connecting State to Build Controls
    16. Removing Ingredients Safely
    17. Displaying and Updating the Burger Price
    18. Adding the Order Button
    19. Creating the Order Summary Modal
    20. Showing Hiding the Modal (with Animation!)
    21. Implementing the Backdrop Component
    22. Adding a Custom Button Component
    23. Implementing the Button Component
    24. Adding the Price to the Order Summary
    25. Adding a Toolbar
    26. Using a Logo in our Application
    27. Adding Reusable Navigation Items
    28. Creating a Responsive Sidedrawer
    29. Working on Responsive Adjustments
    30. More about Responsive Adjustments
    31. Reusing the Backdrop
    32. Adding a Sidedrawer Toggle Button
    33. Adding a Hamburger Icon
    34. Improving the App: Introduction
    35. Prop Type Validation
    36. Improving Performance
    37. Using Component Lifecycle Methods
    38. Changing the Folder Structure
    39. Wrap Up
  9. Chapter 9 : Reaching out to the Web (Http / Ajax)
    1. Module Introduction
    2. Understanding Http Requests in React
    3. Understanding our Project and Introducing Axios
    4. Creating Http Request to GET Data
    5. Rendering Fetched Data to the Screen
    6. Transforming Data
    7. Making a Post Selectable
    8. Fetching Data on Update (without Creating Infinite Loops)
    9. POSTing Data to the Server
    10. Sending a DELETE Request
    11. Fixing a Bug
    12. Handling Errors Locally
    13. Adding Interceptors to Execute Code Globally
    14. Setting a Default Global Configuration for Axios
    15. Creating and Using Axios Instances
    16. Wrap Up
  10. Chapter 10 : Burger Builder Project: Accessing a Server
    1. Module Introduction
    2. Creating the Firebase Project
    3. Creating the Axios Instance
    4. Sending a POST Request
    5. Displaying a Spinner while Sending a Request
    6. Handling Errors
    7. Retrieving Data from the Backend
    8. Removing Old Interceptors
  11. Chapter 11 : Multi-Page-Feeling in a Single-Page-App: Routing
    1. Module Introduction
    2. Routing and SPAs
    3. Setting up Links
    4. Setting Up the Router Package
    5. Preparing the Project for Routing
    6. Setting Up and Rendering Routes
    7. Rendering Components for Routes
    8. Switching Between Pages
    9. Using Links to Switch Pages
    10. Using Routing-Related Props
    11. The "withRouter" HOC Route Props
    12. Absolute vs Relative Paths
    13. Styling the Active Route
    14. Passing Route Parameters
    15. Extracting Route Parameters
    16. Using Switch to Load a Single Route
    17. Navigating Programmatically
    18. Additional Information Regarding Active Links
    19. Understanding Nested Routes
    20. Creating Dynamic Nested Routes
    21. Redirecting Requests
    22. Conditional Redirects
    23. Using the History Prop to Redirect (Replace)
    24. Working with Guards
    25. Handling the 404 Case (Unknown Routes)
    26. Loading Routes Lazily
    27. Lazy Loading with React Suspense (16.6)
    28. Routing and Server Deployment
    29. Assignment 3: Time to Practice - Routing
    30. [OPTIONAL] Routing Assignment Solution
    31. Wrap Up
  12. Chapter 12 : Adding Routing to our Burger Project
    1. Module Introduction
    2. Building the Checkout Container
    3. Setting Up Routing Routes
    4. Navigating to the Checkout Page
    5. Navigating Back To Next Page
    6. Passing Ingredients via Query Params
    7. Navigating to the Contact Data Component
    8. Order Submission Passing Data between Pages
    9. Adding an Orders Page
    10. Implementing Navigation Links
    11. Fetching Orders
    12. Outputting the Orders
    13. Wrap Up
  13. Chapter 13 : Forms and Form Validation
    1. Module Introduction
    2. Analyzing the App
    3. Creating a Custom Dynamic Input Component
    4. Setting Up a JS Config for the Form
    5. Dynamically Create Inputs based on JS Config
    6. Adding a Dropdown Component
    7. Handling User Input
    8. Handling Form Submission
    9. Adding Custom Form Validation
    10. Fixing a Common Validation Gotcha
    11. Adding Validation Feedback
    12. Improving Visual Feedback
    13. Handling Overall Form Validity
    14. Wrap Up
    15. Fixing a Bug
  14. Chapter 14 : Redux
    1. Module Introduction
    2. Understanding State
    3. The Complexity of Managing State
    4. Understanding the Redux Flow
    5. Setting Up Reducer and Store
    6. Dispatching Actions
    7. Adding Subscriptions
    8. Connecting React to Redux
    9. Connecting the Store to React
    10. Dispatching Actions from within the Component
    11. Assignment 4: Time to Practice – Dispatching actions
    12. [OPTIONAL] Dispatching Actions Assignment Solution
    13. Passing and Retrieving Data with Action
    14. Switch-Case in the Reducer
    15. Updating State Immutably
    16. Updating Arrays Immutably
    17. Outsourcing Action Types
    18. Combining Multiple Reducers
    19. Understanding State Types
    20. Assignment 5: Time to Practice – Redux Basics
    21. [OPTIONAL] Redux basics Assignment Solution
    22. Combining Local UI State and Redux
    23. Wrap Up
  15. Chapter 15 : Adding Redux to our Project
    1. Module Introduction
    2. Installing Redux and React Redux
    3. Basic Redux Setup
    4. Finishing the Reducer for Ingredients
    5. Connecting the Burger Builder Container to our Store
    6. Working on the Total Price Calculation
    7. Redux UI State
    8. Adjusting Checkout and Contact Data
    9. Wrap Up
  16. Chapter 16 : Redux Advanced
    1. Module Introduction
    2. Adding Middleware
    3. Using the Redux Devtools
    4. Executing Asynchronous Code: Introduction
    5. Introducing Action Creators
    6. Action Creators Async Code
    7. Handling Asynchronous Code
    8. Restructuring Actions
    9. Where to Put Data Transforming Logic?
    10. Using Action Creators and Get State
    11. Using Utility Functions
    12. A Leaner Switch Case Statement
    13. An Alternative Folder Structure
    14. Diving Much Deeper
    15. Wrap Up
  17. Chapter 17 : Redux Advanced: Burger Project
    1. Module Introduction
    2. Installing the Redux Devtools
    3. Preparing the Folder Structure
    4. Creating Action Creators
    5. Executing Asynchronous Code
    6. Fetching Ingredients Asynchronously
    7. Initializing Ingredients in the BurgerBuilder
    8. Changing the Order of our Ingredients Manually
    9. Adding Order Actions
    10. Connecting Contact Data Container Actions
    11. The Order Reducer
    12. Working on Order Actions
    13. Redirect to Improve UX
    14. Combining Reducers
    15. Handling Purchases Updating the UI
    16. Resetting the Price after Purchases
    17. Fetching Orders (via Redux)
    18. Checking our Implemented Functionalities
    19. Refactoring Reducers
    20. Refactoring Reducers Continued
    21. Wrap Up
  18. Chapter 18 : Adding Authentication to our Burger Project
    1. Module Introduction
    2. Understanding Authentication in Single Page Applications
    3. Required App Adjustments
    4. Adding an Auth Form
    5. Adding Actions
    6. Getting a Token from the Backend
    7. Adding Sign-In
    8. Storing the Token
    9. Adding a Spinner
    10. Logging Users Out
    11. Accessing Protected Resources
    12. Updating the UI Depending on Auth State
    13. Adding a Logout Link
    14. Forwarding Unauthenticated Users
    15. Redirecting the User to the Checkout Page
    16. Persistent Auth State with localStorage
    17. Fixing Connect + Routing Errors
    18. Ensuring App Security
    19. Guarding Routes
    20. Displaying User Specific Orders
    21. Wrap Up
  19. Chapter 19 : Improving our Burger Project
    1. Module Introduction
    2. Fixing the Redirect to the Frontpage
    3. Using updateObject in the Entire App
    4. Sharing the Validation Method
    5. Using Environment Variables
    6. Removing console.log()s
    7. Adding Lazy Loading
    8. Wrap Up
  20. Chapter 20 : Testing
    1. Module Introduction
    2. What is Testing?
    3. Required Testing Tools
    4. What To Test?
    5. Writing our First Test
    6. Testing Components Continued
    7. Jest and Enzyme Documentations
    8. Testing Components Correctly
    9. Testing Containers
    10. How to Test Redux
    11. Wrap Up
  21. Chapter 21 : Deploying the App to the Web
    1. Module Introduction
    2. Deployment Steps
    3. Building the Project
    4. Example: Deploying on Firebase
    5. Wrap Up
  22. Chapter 22 : Bonus: Working with Webpack
    1. Module Introduction
    2. Introducing Webpack
    3. How Webpack works
    4. Basic Workflow Requirements
    5. Project npm Setup
    6. Creating a Basic Folder File Structure
    7. Creating the Basic React Application
    8. Installing Production Dependencies
    9. Setting Up the Basic Webpack Config
    10. Adding File Rules Babel
    11. Loading CSS Files
    12. Loading Images Injecting into HTML Page
    13. Production Workflow Wrap Up
  23. Chapter 23 : Bonus: Next.js
    1. Module Introduction
    2. Understanding Server Side Rendering
    3. Setting up a Project
    4. Understanding the Basics
    5. Next.js Components Pages
    6. Styling our App in Next.js
    7. Handling (404) Errors
    8. A Special Lifecyle Hook
    9. Deploying our App
  24. Chapter 24 : Bonus: Animations in React Apps
    1. Module Introduction
    2. Preparing the Demo Project
    3. Using CSS Transitions
    4. Using CSS Animations
    5. CSS Transition 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
  25. Chapter 25 : Bonus: A Brief Introduction to Redux Saga
    1. Module Introduction
    2. Installing Redux Saga
    3. Creating our First Saga
    4. Hooking the Saga Up (to the Store and Actions)
    5. Moving Logic from the Action Creator to a Saga
    6. Moving More Logic Into Sagas
    7. Handling Authentication with a Saga
    8. Handling Auto-Sign-In with a Saga
    9. Moving the BurgerBuilder Side Effects into a Saga
    10. Moving the Orders Side Effects into Sagas
    11. Why Sagas can be Helpful
    12. Diving Deeper into Sagas
  26. Chapter 26 : React Hooks
    1. Introduction
    2. What are "React Hooks"?
    3. The Starting Project
    4. Getting Started with useState()
    5. More on useState() State Updating
    6. Array Destructuring
    7. Multiple States
    8. Rules of Hooks
    9. Passing State Data Across Components
    10. Assignment 6: Time to Practice – Hooks Basics
    11. [OPTIONAL] Hook Assignment Solution
    12. Sending Http Requests
    13. useEffect() Loading Data
    14. Understanding useEffect() Dependencies
    15. More on useEffect()
    16. What's useCallback()?
    17. Working with Refs useRef()
    18. Cleaning Up with useEffect()
    19. Deleting Ingredients
    20. Loading Errors 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 Components
    27. Using the Custom Hook
    28. Wrap Up
  27. Chapter 27 : Using Hooks in the Burger Builder
    1. Introduction
    2. Converting
      1. Routing with React.lazy()
      2. Converting the Layout Component
      3. Converting withErrorHandler HOC
      4. Adjusting the Order Checkout Containers
      5. Add Hooks to ContactData
      6. Converting the BurgerBuilder Container
      7. Adjusting Auth Logout Components
      8. Using React.memo() More!
      9. Adding a Custom Error Handling Hook
      10. Setting the right useEffect() Dependencies
      11. Working with useSelector() and useDispatch()
      12. Wrap Up
    3. Chapter 28 : Bonus: Replacing Redux with React Hooks
      1. Module Introduction
      2. Starting Project Why You Would Replace Redux
      3. Alternative: Using the Context API
      4. Toggling Favorites with the Context API
      5. Context API Summary (and why NOT to use it instead of Redux)
      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
    4. Chapter 29 : Bonus: Building the Burger CSS
      1. Building the Burger CSS Code
    5. Chapter 30 : Next Steps and Course Roundup
      1. Module Introduction
      2. React Rocks! Where to find more Examples
      3. More Inspiration: Real-World Projects Built with React
      4. Static React Apps with Gatsby.js
      5. Introducing React Native
      6. Component Libraries (Example: Material UI)
      7. Smaller Apps with Preact
      8. Comparing React with Preact
      9. Congratulations

Product information

  • Title: React - The Complete Guide (incl. Hooks, React Router and Redux)
  • Author(s): Academind by Maximilian Schwarzmüller
  • Release date: May 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789132229