O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

React 16 - The Complete Guide (incl. React Router 4 and Redux) - Dive in and learn React from scratch!

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.

Table of Contents

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