Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
103 Lessons (12h 59m)
    • 1. What You’ll Get From Taking this Course

      7:27
    • 2. A 7m Overview of Web Development and React

      7:18
    • 3. Welcome to React | First React Application

      2:51
    • 4. Set up the Portfolio App

      4:22
    • 5. Run the React App and the React Project Structure

      9:56
    • 6. 05 elements jsx reactdom amped

      5:52
    • 7. ReactDOM, Elements, and JSX

      6:15
    • 8. Classes - Overview

      3:25
    • 9. Classes, Inheritance, and a Closer Component Look

      10:54
    • 10. State

      9:12
    • 11. SetState

      9:46
    • 12. A React Rule: Never Directly Modify State

      6:44
    • 13. Class Properties and Initializers

      3:40
    • 14. Component 2: Projects

      12:25
    • 15. Props and Project Component

      8:40
    • 16. Challenge: Social Profiles Component

      4:28
    • 17. Code: Social Profiles Component

      6:52
    • 18. Wrap up with Low-Hanging Styling Fruit

      11:59
    • 19. Breaking down React | React and Web Development

      3:39
    • 20. React from Scratch

      10:26
    • 21. Compiling, Bundling, and a Closer Look at JSX

      11:25
    • 22. Refactor the Portfolio to use Parcel

      9:44
    • 23. The Necessity of Bundlers and Transpilers Review

      4:59
    • 24. The DOM and React’s Virtual DOM

      7:37
    • 25. Continued Main React Concepts

      2:22
    • 26. Lifecycle Methods and componentDidMount

      10:04
    • 27. ComponentWillUnmount

      6:09
    • 28. [Optional] HTTP Overview

      8:58
    • 29. Fetch and a Jokes Component

      11:31
    • 30. Challenge and Code: Ten More Jokes

      8:30
    • 31. Stateless Functional Components

      8:42
    • 32. [Optional] HTTP Overview

      4:52
    • 33. Fetch Under the Hood: Promises

      12:00
    • 34. React Router

      8:37
    • 35. Header Component

      8:16
    • 36. Higher Order Components

      8:21
    • 37. Core React Project: MusicMaster 2.0

      3:22
    • 38. Set up Music Master and Your Own React App Template

      9:07
    • 39. Track User Input in the State

      7:19
    • 40. Challenge and Code: Search an Artist’s Top Tracks

      10:33
    • 41. Challenge and Code: Artist Component

      9:12
    • 42. Tracks Component

      13:14
    • 43. Search Component and Lifting State Up in Callback Props

      8:20
    • 44. Styling Finishing Touches

      10:40
    • 45. Include Music Master in Portfolio

      4:42
    • 46. Core React Review

      6:57
    • 47. Redux and more Advanced React

      3:11
    • 48. Redux Overview

      6:14
    • 49. Set Up Evens or Odds and the Redux Store

      4:27
    • 50. Reducers

      4:09
    • 51. Actions

      11:25
    • 52. Action Creators

      5:52
    • 53. Root Reducer Update and the Spread Operator

      9:29
    • 54. Split the Redux Layers

      5:46
    • 55. Connect React Components to Redux

      5:53
    • 56. 52 redux based ui amped

      6:54
    • 57. Map Dispatch to Props

      3:32
    • 58. Challenge and Code: Interactive Instructions

      12:58
    • 59. Fetch Deck of Cards

      10:20
    • 60. CORS and Same Origin Policy

      10:39
    • 61. Async Actions

      6:54
    • 62. Redux Middleware

      5:48
    • 63. Handle Fetch Cases

      13:27
    • 64. Split up and Combine Reducers

      7:17
    • 65. DrawCard Component

      5:23
    • 66. Challenge and Code: Draw Card Redux Flow

      13:57
    • 67. Challenge and Code: Card Component

      5:26
    • 68. Challenge and Code: Guess Redux Logic and Component

      12:24
    • 69. Track Correct Guesses

      9:31
    • 70. Correct Guess Record and Local Storage

      10:25
    • 71. Include Evens or Odds in Portfolio

      5:59
    • 72. Redux Project: Reaction

      2:37
    • 73. Publish/Subscribe with Redux

      4:03
    • 74. Set Up the Reaction App

      5:21
    • 75. PubNub Exploration

      10:20
    • 76. PubSub Class and Redux Connection

      8:28
    • 77. Messages Redux Flow

      9:19
    • 78. Publish Message Component

      7:55
    • 79. React Context

      10:07
    • 80. Redux Devtools

      2:59
    • 81. Challenge and Code: Message Board Component

      5:47
    • 82. Challenge and Code: Username in Redux

      9:22
    • 83. Username in Messages

      4:52
    • 84. CreateReaction Component

      6:08
    • 85. Reactions Redux Flow

      8:51
    • 86. Publish Reaction

      6:33
    • 87. MessageReactions Component

      6:39
    • 88. Include Reaction in Portfolio

      5:41
    • 89. Redux Review

      7:07
    • 90. Create Backend APIs for React Apps

      2:55
    • 91. Set Up News App and Express Server

      6:44
    • 92. GET Stories and Nodemon

      8:03
    • 93. Express Middleware and CORS

      6:17
    • 94. Request an API within an API

      7:09
    • 95. Error Handler

      10:23
    • 96. Top Story Items

      11:30
    • 97. Spotlight: Deck of Cards and Spotify Wrapper APIs

      4:11
    • 98. Set up News React Client and Serve a React App with Express

      10:24
    • 99. Challenge and Code: Fetch and Display Stories

      5:44
    • 100. Deploy Your React Applications

      0:52
    • 101. Github Walkthrough

      8:27
    • 102. Heroku Deployment

      14:31
    • 103. Congratulations

      1:06
27 students are watching this class

Project Description

There are plenty of ways you can extend the projects from this course:

  • Build a new React and Redux project from one or more of the APIs from this excellent resource: https://github.com/toddmotto/public-apis
  • Extend the Music Master project to build a store of favorite tracks designated by the user. One approach would be to use localStorage.
  • Implement a game of War using the Deck of Cards API, with similar code approaches from the evens-or-odds app.
  • Extend the Reaction project to implement private messaging between users.
  • Add POST requests to your APIs, and store records within a database.


If you start any of these, feel free to reach out to me for further ideas! You can connect with me on my personal website: http://davidtkatz.com/#/about

Student Projects