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.
Learn React Hooks By Building A Real Application
Learn React Hooks By Building A Real Application is a 78-lesson 7 hours 14 minutes self-paced course by Ryan Florence (React Training). Learn React Hooks by building key features of a realistic app.
Course facts
- Lessons
- 78
- Duration
- 7 hours 14 minutes
- Language
- English
- Instructor
- Ryan Florence (React Training)
- Price
- Premium
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
Who teaches Learn React Hooks By Building A Real Application? Ryan Florence (React Training)
Ryan Florence is a US developer best known as a co-creator of React Router — the dominant routing library for React applications since the framework's early years — and as a co-founder of Remix (now part of React Router after the 2024 unification). He runs React Training as the long-running paid React workshop platform.
His CourseFlix listing carries Learn React Hooks By Building A Real Application — a comprehensive treatment of React's hooks model through a complete project build, taught by one of the people who has shaped React's API direction for over a decade.
Material is paid and aimed at React developers ready to deepen their understanding of the modern hooks-based React paradigm. For broader content, see CourseFlix's React.js category page.
What lessons are included in Learn React Hooks By Building A Real Application?
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 01-hello-world Demo | 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 |
Get instant access to all 77 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionWhat courses are similar to Learn React Hooks By Building A Real Application?
UpdatedNFT Marketplace in React, Typescript & Solidity - Full Guide
By: UdemyBuild a full ERC721 NFT marketplace with React, Next.js, TypeScript, and Solidity, including IPFS metadata storage via Pinata.16h 20m
Updated 2y agoTesting React with Jest and Testing Library
By: UdemyReact Testing Library has become an extremely popular option for testing React, and with good reason! This detailed, comprehensive course7h 41m
Updated 2y agoBuild Product Hunt with ReactJS and Firebase
By: Code4StartupIn this course, you will be learning how to build ReactJS app in ES6 syntax (a modern version of Javascript) with Firebase, a real-time back-end by cloning Prod4h 47m
UpdatedClassic React
By: Build UIA 54-lesson React course from Build UI moving from core concepts like state and props through to building complete applications.4h 10m5/5
FreeUpdatedThe Complete Guide to Advanced React Patterns (2020)
By: UdemyFree course: master advanced, reusable React component patterns by rebuilding the Medium clap component with hooks and compound components.6h 1m
Updated 3y agoFull Stack Spring Boot & React
By: Nelson Djalo (Amigoscode)Netflix recently switched their entire backend to Spring Boot 2. It was a no brainer really. Spring Boot 2 is the best framework to build applications. Weather10h 1m5/5
Updated 2y agoProject React. Build a complex React project as a total beginner
By: Cosden SolutionsProject React is a course featuring a unique application that will guide you step by step in creating large and complex applications using React. No prior exper16h 31m5/5
Updated 2y agoMastering Next.js - 50+ Lesson Video Course on React and Next
By: Mastering NuxtThe premiere video course for building static and server-side rendered applications with Next.js and React. Sign up now and get two videos instantly!5h 9m