About the Course
This is the ideal starting point for anyone eager to learn modern React basics in the most interactive, hands-on way possible.
Throughout this course, you'll tackle over 170 interactive coding challenges and build six exciting projects. If you're tired of React courses that leave you staring blankly at an empty editor screen, you're in the right place! Here, you'll **actually build React projects by the end**, giving you the confidence and skills to tackle real-world applications.
Section 1: Static pages (project: ReactFacts site)
In this introductory section, you'll get familiar with React basics, including components, JSX, and styling. You’ll create a simple ReactFacts site, learning about composable and declarative code, React elements, and best practices for building static pages in React.
Topics covered:
- Intro to React
- Why React?: Composable & Declarative
- React Elements
- JSX
- Creating custom components
- Fragments
- Styling with Classes
Section 2: Data-Driven React (project: Travel Journal)
Next, you’ll discover how to make your React apps dynamic by introducing reusable components, props, and data-driven rendering. In the inspiring Travel Journal project, you’ll map data to components, handle static assets, and use props to personalize the user experience.
Topics covered:
- Reusable components
- Props
- Evaluating JS inside JSX
- Handling static assets
- Mapping data to components
Section 3: React State (project: Chef Claude)
This module introduces you to React's state management, allowing you to handle events, manage complex state, and create responsive forms. The Chef Claude project will help you see the difference between props and state, implement conditional rendering, and dynamically style components based on user interaction.
Topics covered:
- Event listeners
- Props vs. State
- Creating & changing state
- Complex state
- Forms & form actions
- Conditional rendering
- Setting state from children
- Dynamic styles
Section 4: Side effects (project: Meme Generator)
Explore side effects in React with this module on data fetching, controlled components, and refs. In the Meme Generator project, you’ll practice managing side effects, optimizing dependencies, and cleaning up resources, giving you a robust foundation for handling external data and effects.
Topics covered:
- Controlled components/forms
- Functional programming in React
- Fetching data
- Handling side effects
- Side effect dependencies
- Cleaning up side effects
- Refs
Section 5: Capstone project 1: Tenzies game
This capstone project challenges you to put everything you've learned into action by building a complete Tenzies game. Through step-by-step challenges, you'll improve your skills by learning lazy state initialization and accessibility, creating a polished, interactive experience.
Topics covered:
- Series of challenges to build the capstone project
- Lazy state initialization
- Accessibility improvements
Section 6: Capstone project 2: Assembly: Endgame
In this final capstone, you'll face a series of challenges to build a complex, multi-featured app. By the end of Assembly: Endgame, you’ll have gained real-world experience in problem-solving and combining all the React skills you've developed throughout the course.
Topics covered:
Series of challenges to build the capstone project
Why this course?
This course is filled with coding challenges that you'll complete by writing React code directly inside the browser! Before you know it, you'll have written six interactive React applications!
You’ll also benefit from spaced learning and repetition in this course. Make sure you give yourself time (days/weeks) to finish it, and include lots of breaks. Don't try cramming it all in at once.
Once you are done, you will feel confident in your React skills and be ready to continue your coding journey.
Top reviews
AS
Jan 1, 2024
Brilliant course, absolutely masterpiece! If you're new to React and know basic JS and and proficient in anyone language, THIS course is THE BEST Place to start your journey!
H
Jul 10, 2023
Very Interactive extremely helpful in making sure we use what we learn in real life scenarios and some pretty good coding practices are also touched upon.
Filter by:
51 - 55 of 55 Reviews for Learn React
By Asif A
•Dec 8, 2023
Informative
By Ionel G
•Jan 5, 2024
Excelent !
By Rahul K S
•Aug 25, 2023
awesome!
By Arif S
•Jan 2, 2024
Good.
By Martin M
•May 25, 2024
Overall a good course, some issues with duplicated / missing lessons is leading to a lower score. I believe a good chunk of this course is being re-made with the new version of React so this may change in time