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

Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!udemy

Category: JavaScript, React.js, HTML, CSS
Duration 12 hours 13 minutes 30 seconds
Fullstack ASP.NET Core and React Masterclass | Learnify

Fullstack ASP.NET Core and React Masterclass | Learnify fullstack.io

Category: React.js, C Sharp (C#)
Duration 20 hours 40 minutes 31 seconds
Project React. Build a complex React project as a total beginner

Project React. Build a complex React project as a total beginnerCosden Solutions

Category: React.js
Duration 8 hours 26 minutes 25 seconds
React Three Fiber: The Ultimate Guide to 3D Web Developmen

React Three Fiber: The Ultimate Guide to 3D Web DevelopmenWawa Sensei

Category: React.js, Three.js
Duration 9 hours 18 minutes 15 seconds
React Front To Back 2022

React Front To Back 2022udemyBrad Traversy

Category: React.js
Duration 19 hours 57 minutes 45 seconds
Modern React with Redux [2023 Update]

Modern React with Redux [2023 Update]udemyStephen Grider

Category: React.js, Redux
Duration 37 hours 44 minutes 46 seconds
Django with React | An Ecommerce Website

Django with React | An Ecommerce WebsiteBrad Traversy

Category: React.js
Duration 18 hours 6 minutes 7 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
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete GuideudemyAcademind Pro

Category: React.js, Next.js
Duration 36 hours 13 minutes 15 seconds