Learn React Hooks By Building A Real Application

7h 14m 44s
English
Paid

Learn React Hooks by building key features of a realistic app. After teaching this content to thousands, we've packaged it up into and on-demand course just for you.

Read more about the course

Beginner Level

If all you've done is the official React tutorial then you are ready for this course. We'll be starting from the fundamentals and working our way into hooks basics pretty quickly. Hooks allow us to cover topics that are ordinarily advanced sooner. It might feel a little fast but that's what the pause button is for!

Intermediate/Advanced Level

If you're a seasoned React developer, there's no better way to get caught up on Hooks and what it means for your code and team than this course. You’ll get priceless insights into how hooks will help you build great abstractions for your team that will work in new and mature code-bases.

You’re not going to just watch some videos and type along with us, nah, that’s not how you learn. We teach a concept with real-world code, then hand it over to you to do an exercise on your own--which is where the real learning happens. When you’re done, we’ll solidify your understanding as we go deeper into the concepts in the solution videos. 

  • React's Fundamental Composition Model
  • All of the New Hooks
  • Thinking In Effects, Not Lifecycles
  • Composing and Sharing Non-Visual Behavior
  • Data Loading and Caching
  • App-Wide State Management
  • Realtime Updates and Subscriptions
  • Clientside Authentication
  • Performance Considerations and Optimizations
  • Animation

Watch Online Learn React Hooks By Building A Real Application

Join premium to watch
Go to premium
# Title Duration
1 01-hello-world 02:18
2 02-its-just-javascript 02:18
3 03-create-element-signature 02:28
4 04-back-to-jsx 01:58
5 05-using-components 01:30
6 06-defining-components 00:48
7 07-component-reuse-with-props 02:23
8 08-children-prop 03:28
9 09-data-flow.mp4 02:24
10 10-custom-events 03:03
11 11-code-a-long 04:56
12 12-what-declarative-means 03:59
13 13-use-state-intro 02:52
14 14-multiple-states 04:43
15 15-what-to-do-when-anything-happens 02:06
16 16-how-react-works 04:48
17 17-use-state-exercise 01:10
18 18-use-state-exercise-solution 03:55
19 19-phony-hooks 13:29
20 20-handling-an-event-without-react 05:16
21 21-use-ref 02:22
22 22-thinking-in-events 04:19
23 23-use-effect-intro 05:36
24 24-governing-side-effects 05:26
25 25-use-effect-parameters 08:35
26 26-making-our-own-hook 05:00
27 27-reusable-abstraction 01:57
28 28-composing-with-hooks 01:26
29 29-effects-exercise-intro 04:04
30 30-effects-exercise-overview 14:22
31 31-fetching-data 05:08
32 32-intro-to-cleanup-functions 04:36
33 33-how-to-use-a-cleanup-function 03:15
34 34-async-await-with-use-effect 03:00
35 35-subscription-style-async 03:36
36 36-mimicking-use-effect-with-render-props 08:48
37 37-comparing-hooks-and-render-props 03:31
38 38-composing-hooks-together 06:13
39 39-data-loading-exercise-intro 02:00
40 40-data-loading-exercise-overview 08:23
41 41-customize-component-render-positions 10:19
42 42-too-many-props 11:20
43 43-replacing-props-with-compound-components 15:53
44 44-share-state-with-context 05:05
45 45-adding-functions-to-context 01:17
46 46-adding-index-to-context 04:52
47 47-backwards-compatibility 07:40
48 48-children-module 02:25
49 49-compound-components-exercise-intro 05:10
50 50-compound-components-exercise-overview 10:34
51 51-why-we-need-reducers 03:36
52 52-what-is-a-reducer 04:29
53 53-using-usereducer 11:33
54 54-building-a-global-state 15:25
55 55-app-state-exercise-intro 01:51
56 56-app-state-exercise-overview 07:41
57 57-feed-exercise-intro 04:14
58 58-feed-exercise-part-1-solution 04:07
59 59-feed-exercise-part-2 01:35
60 60-feed-exercise-part-2-solution 06:53
61 61-feed-exercise-part-3 01:27
62 62-feed-exercise-part-3-solution 03:43
63 63-feed-exercise-part-4 01:14
64 64-feed-exercise-part-4-solution 05:02
65 65-feed-exercise-with-usereducer 07:45
66 66-feed-exercise-persistent-state 11:02
67 67-animation-and-interpolation-types 06:03
68 68-implementing-animation-hook 19:13
69 69-adding-sound-effects 02:27
70 70-using-react-spring 20:35
71 71-animating-a-non-react-element 03:04
72 72-lazy-refs 04:58
73 73-use-memo 13:10
74 74-memo 11:39
75 75-props-differentiation 05:53
76 76-use-callback 08:14
77 77-use-effect-vs-use-memo 01:24
78 78-goodbye-world 00:23

Similar courses to Learn React Hooks By Building A Real Application

React Front To Back 2022

React Front To Back 2022udemyBrad Traversy

Category: React.js
Duration 19 hours 57 minutes 45 seconds
Server Side Rendering with React and Redux

Server Side Rendering with React and ReduxudemyStephen Grider

Category: React.js, Redux
Duration 8 hours 14 minutes 30 seconds
Build a Shopping Cart App

Build a Shopping Cart AppReed Barger

Category: React.js, Node.js
Duration 1 hour 41 minutes 52 seconds
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Reduxudemy

Category: React.js, Spring Boot, Redux, Spring, Spring HATEOAS
Duration 5 hours 51 minutes 37 seconds
Working with React and Go (Golang)

Working with React and Go (Golang)udemy

Category: React.js, Golang (Google Go)
Duration 24 hours 48 minutes 43 seconds
React and Django: A Practical Guide with Docker

React and Django: A Practical Guide with Dockerudemy

Category: React.js, Docker, Django
Duration 6 hours 50 minutes 20 seconds
The Complete Guide to Advanced React Patterns (2020)

The Complete Guide to Advanced React Patterns (2020)udemy

Category: React.js
Duration 6 hours 1 minute 51 seconds
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

React, NodeJS, Express & MongoDB - The MERN Fullstack Guideudemy

Category: React.js, Node.js, MongoDB
Duration 18 hours 45 minutes 10 seconds
The Official React Query Course - query.gg

The Official React Query Course - query.ggui.dev (ex. Tyler McGinnis)

Category: React.js
Duration 4 hours 17 minutes 17 seconds
Redux

Reduxui.dev (ex. Tyler McGinnis)

Category: React.js, Redux
Duration 7 hours 13 minutes 23 seconds