AI-powered learning
Save this course
The Road to React: The One with Hooks
Gain insights into React fundamentals and Hooks. Delve into styling, app maintenance, and performance optimization. Discover hands-on experience by building a Hacker News app for your portfolio.
4.6
63 Lessons
25h
Updated 5 months ago
Join 2.9 million developers at
Join 2.9 million developers at
Learning Roadmap
1.
Introduction
Introduction
Get familiar with React fundamentals, practical applications, and building functional React apps.
2.
Fundamentals of React
Fundamentals of React
Walk through React fundamentals, JSX, state management, hooks, data fetching, and async handling.
Hello ReactExploring a React Project Directory StructureMeet the First React ComponentReact JSXLists in ReactMeet Another React ComponentReact Component InstantiationReact DOMReact Component Definition (Advanced)Handler Function in JSXReact PropsReact StateCallback Handlers in JSXLifting State in ReactReact Controlled ComponentsProps Handling (Advanced)React Side-EffectsReact Custom Hooks (Advanced)React FragmentsReusable React ComponentReact Component CompositionImperative ReactInline Handler in JSXReact Asynchronous DataReact Conditional RenderingReact Advanced StateReact Impossible StatesData Fetching with ReactData Re-Fetching in ReactMemoized Handler in React (Advanced)Explicit Data Fetching with ReactThird-Party Libraries in ReactAsync/Await in React (Advanced)Forms in React
3.
React Legacy
React Legacy
3 Lessons
3 Lessons
Examine the evolution and current state of React class components and imperative ref handling.
4.
Styling in React
Styling in React
3 Lessons
3 Lessons
Grasp the fundamentals of CSS methods, CSS Modules, and SVGs in React applications for styling.
5.
React Maintenance
React Maintenance
5 Lessons
5 Lessons
Map out the steps for maintaining React applications with performance optimization, TypeScript, testing, and project structure.
6.
React World (Advanced)
React World (Advanced)
10 Lessons
10 Lessons
Follow the process of advanced sorting, reverse order, memory of searches, avoiding duplicates, and paginated fetch in React.
7.
Deploying a React Application
Deploying a React Application
2 Lessons
2 Lessons
Master the steps to deploy a React application using create-react-app and Firebase Hosting.
9.
Appendix
Appendix
3 Lessons
3 Lessons
Get started with the author's background, vital FAQs, and setting up a local React project.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
This is a relaunch of my existing course, The Road to Learn React. A lot has changed in React since I first created this course, and so here I am to give you all the information you need to work with modern React. (If you’re looking for content on legacy React, the old course is still available as well.)
In this course you will take a deep dive into React fundamentals, covering all new React concepts including Hooks. I do address some legacy features in case you’re working with an older codebase, but the majority of this course will focus on working with modern React. You will learn how to style your app, techniques for maintaining your app, and some more advanced concepts like performance optimization.
Throughout the course, you will gain hands-on experience by building a Hacker News app, and by the end of this course, you will be prepared to build your own applications and have something to showcase in your portfolio.
ABOUT THE AUTHOR
Robin Wieruch
Every Educative resource is designed by our team of ex-MAANG software engineers and PhD computer science educators — subject matter experts who've shipped production code at scale and taught the theory behind it. No videos, no fluff.
Trusted by 2.9 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor


Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go


Future-proof Your Career
Get hands-on with in-demand skills


AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"




MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies


Free Resources