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
7h 14m 44s
English
Paid
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
- Level
- All levels
- Language
- English
- Updated
- 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?
0:00
/ #1: 01-hello-world
All Course Lessons (78)
| # | 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 |
Unlock unlimited learning
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?
FreeUpdated 1y agoReact JS 19 Crash Course | Build an App and Master React in 2 Hours
By: JavaScript Mastery, Adrian HajdinThis course offers a practical approach: clear explanations, real tasks, and necessary tools, so you can not only understand but also immediately apply the new.2h 7m
UpdatedReact Testing Library and Jest: The Complete Guide
By: Udemy, Stephen GriderLearn to test React apps properly with React Testing Library and Jest, covering auth, data fetching, mocking, and real-world testing patterns.7h 40m
UpdatedGo Full Stack with Spring Boot and React
By: UdemyJava and Spring developers build their first full-stack app: a React frontend wired to a Spring Boot and Spring Security REST API with JWT.11h 43m5/5
Updated 2y agoStorybook for building React apps
By: Fullstack.ioYou're going to unlock skills that will help you develop UI faster, better, and with great quality. You will understand why it is important to learn Storybook i3h 16m
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
FreeUpdatedMERN STACK 2022 - Build Ultimate CMS (WordPress Clone)
By: UdemyFree course: build a full WordPress-style CMS from scratch using the MERN stack, with JavaScript across both frontend and backend.34h 4m
Updated 2y agoCrack the Frontend Interview with React
By: Zero To MasteryEnhance your React skills with a project-based course that prepares you for frontend engineering interviews. Build a star rating component while mastering1h 6m5/5
Frequently asked questions
What prior knowledge do I need before taking this course?
Before enrolling in this course, you should have a foundational understanding of JavaScript, as evidenced by lessons like 'its-just-javascript' and 'how-react-works'. Familiarity with JSX and component-based architecture would also be beneficial, given the focus on components in lessons such as 'defining-components' and 'using-components'.
What kind of application will I build during the course?
Throughout the course, you will build key features of a realistic application using React Hooks. While the course does not specify an exact application, it includes exercises like 'feed-exercise-part-1-solution' and 'data-loading-exercise-overview', which suggest a focus on managing state and data flow in applications.
Who is the ideal target audience for this course?
This course is ideal for JavaScript developers who are looking to enhance their skills by learning React Hooks. It is suitable for those who have a basic understanding of React and want to expand their knowledge into modern React practices, as seen in lessons like 'composing-with-hooks' and 'customize-component-render-positions'.
How does this course compare in depth to similar courses on React Hooks?
With 78 lessons, this course offers a comprehensive exploration of React Hooks. It covers fundamental concepts like 'use-state-intro' and 'use-effect-intro', as well as advanced topics such as 'building-a-global-state' and 'composing-hooks-together'. This breadth and depth make it suitable for both beginners looking to grasp the basics and intermediate learners aiming for a deeper understanding.
Which specific tools or libraries are covered in this course?
The course focuses on React Hooks as a core feature of the React library. It does not explicitly mention additional tools or libraries beyond React itself, as the lessons primarily concentrate on concepts like 'use-ref', 'use-effect', and 'use-reducer'.
What is not covered in this course?
This course does not cover aspects outside of React Hooks, such as server-side rendering, React Native, or testing frameworks like Jest. The focus is strictly on building and understanding applications using hooks as seen in lessons like 'handling-an-event-without-react' and 'subscription-style-async'.
What is the expected time commitment for this course?
Although the total runtime is not provided, the course consists of 78 lessons. The time commitment will vary depending on the pace at which you choose to work through the material. Given the number of lessons, a moderate estimate would be several weeks if studying part-time.