React JS and Redux Bootcamp | David Katz | Skillshare
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
43 students are watching this class

About This Class

Want to learn React and Redux applications the right way?

Give my five minutes of your time, and I’ll explain why this course is the best time investment you can make to learn how to code React and Redux apps.

*****

When I was first learning web development and software engineering, I used courses, tutorials, stackoverflow threads, and public github projects. It was invigorating - teaching myself the skills that would start a career.

But I often found that tutorials only showed me what methods to use. I had to piece together examples, trying to figure out why examples were working - why bugs were popping up. Even when I found a code fix, there was often that missing layer of how the update addressed the problem.

It was a grind. The learning process could have been more efficient with better resources.

Fast forward five years, and I’m working as a full-stack software engineer at Zendesk in San Francisco. I often think back to those first couple years teaching myself web development.

The resources should have given me not only what to write, but why the fix addresses the issue, and how the code works under the hood.

So that is what I’ve created in this course. A React and Redux learning experience that will give you all three of those important aspects to understanding code: what methods to use, why to use those methods, and how those methods work under the hood.

*****

Why take this course from me?

As mentioned before, I’m a full-stack software engineer working at Zendesk in San Francisco. I’ve also released 15 courses (a lot of them on React), with more than 180,000 students from 192 countries so far.

I’ve applied the best practices of software I’ve learned in my career, and the feedback from my thousands of reviews, to craft the best learning experience possible for you in this course. You’ll find a healthy balance of conceptual theory, and practical hands-on experience. You’ll gain skills right from the get-go in the first section. And you’ll build interesting and relevant projects throughout the course.

*****

In this course, you will:

  • Dive into React code right away. You will gain relevant experience as soon as the first section. Time is precious. And I want to make sure that you’ll never feel like you’re wasting it in this course. So in a matter of minutes, you will be writing React code in the first section, with a fully completed app by the end of it.
  • Understand how React fits in the big picture of web development. In the second section, you will take an important step back and examine how React fits in the big picture of web development. You’ll build a React project from scratch - discovering all the layers that are in between the supplies that supports the React app, and the browser which displays the React app.
  • Create relevant and compelling React apps. I’m betting you’ll find the apps both useful and interesting. Useful ones like the portfolio app will help you both learn React, and be valuable as a completed project for your software engineering and web developer profile. Fun ones like “Music Master”, will make coding lively, giving you apps you want to show off to your friends and family.
  • Learn Redux the right way, breaking it down. Redux is a must with React. But it has a much higher learning curve, since the concepts are more complex. In this course, every Redux method is going to be taken one step at a time. You’ll dig deeper into how the methods work under the hood. You’ll learn more than what methods to use. You’ll learn how those methods work individually and together. And you’ll learn why methods are written in a certain way, and when they should be applied. That way, you have the deep understanding that will empower you to write React and Redux apps long into the future.
  • Build more awesome apps! As you learn redux in the later sections, the projects will remain interesting and relevant. You’ll make a mini React game, using an external API. And you’ll create a React app that has multi-user functionality! Supporting multiple users is a staple of so many web applications - but can be surprisingly hard to pull off. But you’ll find the solution in this course both elegant and extendable.
  • Explore backend web development. I think it’s important to learn essential backend skills as a React and web application developer. With React app, you’re often using APIs to supply the content of your application. So having the ability to create your own backends, and APIs, will give you the capability to make React apps of any kind, for your own unique use cases, long after you complete this course.
  • Deploy your React applications. The projects you create in this course will be deployed to production. That way, you can share your the products of your work with anyone you like!

*****

In summary, you should take this course if you want to learn React and Redux in a time-efficient way, while building relevant and engaging projects. Even if you only complete the first handful of videos, I think you’ll gain a lot of valuable knowledge. A fifth into the course, and you’ll already have built a complete app!

Ok, see you there!

367

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

David Katz

Software Engineer - Coding Instructor

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

See full profile

Report class