Learn React Hooks By Building A Real Application
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
| # | 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!udemy
Fullstack ASP.NET Core and React Masterclass | Learnify fullstack.io
Project React. Build a complex React project as a total beginnerCosden Solutions
React Three Fiber: The Ultimate Guide to 3D Web DevelopmenWawa Sensei
React Front To Back 2022udemyBrad Traversy
![Modern React with Redux [2023 Update]](https://cdn.courseflix.net/courses/200x112/modern-react-with-redux-2023-update-1.webp)
Modern React with Redux [2023 Update]udemyStephen Grider
Django with React | An Ecommerce WebsiteBrad Traversy
Server Side Rendering with React and ReduxudemyStephen Grider
