Learn React

Welcome to the ultimate React 101 course! Designed with MDN Web Docs, it’s the perfect place to learn modern React basics interactively. You’ll tackle 170+ coding challenges and build six projects, gaining confidence to create real-world applications.


Avatar of Bob Ziroll

Duration
15.1 hrs

Beginner
TierCommunity
Follow
Start Course
Content
About

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.

Meet your teacher

Avatar of Bob Ziroll

Bob Ziroll

@bobziroll

Head of Education at Scrimba. Passionate about learning 📚, helping others achieve their career goals 👩‍💻, tennis 🎾, woodworking 🪑, and my family 👨‍👩‍👦‍👦.

Testimonials

avatar
Alabi temitope
24 Nov 2024
Diving fully into JavaScript concepts today with Module 6 on @scrimba ! 🚀 It’s been an amazing learning journey so far—can’t wait to level up my skills even more! 💻✨
avatar
Vanessa M.
18 Nov 2024
"Days 15-17: I completed the 'Working with APIs' module! 🌐 Now I understand how to interact with data dynamically. Thank you, #Scrimba, for this amazing course. 🙌
avatar
Gopal Chandakk
26 Oct 2024
Wrapped up an amazing week! Spent 4-5 hours daily learning React JS on @scrimba . Their interactive environment is phenomenal! Anyone looking to dive into React, Scrimba's got you covered!
avatar
Gagan Suie
26 Oct 2024
Scrimba is incredible. Idk how they did it but tutorial videos combined with code??? Waaaahhhh
avatar
May Mariam
08 Oct 2024
Genuinely, joining @scrimba has been one of the best decisions I’ve made this year! 🎉 The learning experience has been nothing short of amazing! 🙌🤗
avatar
Vish Shing
27 Sep 2024
I've recommended @scrimba's React and JavaScript courses to so many people at #100Devs and at the @LearnToCodeLA meetups that I go to. @bobziroll is the best React teacher I've come across, and Scrimba's interface is unparalleled.
avatar
Monalika Patnaik
21 Sep 2024
beginners who want to learn react/js, start with scrimba, it has the best tutorials along with practical learning hands on!
avatar
Sergey Kaplich
04 Sep 2024
when I started learning to code, i was blown away by how awesome @scrimba is as an educational platform. three years later, i am still impressed and still use it to learn new tech
avatar
Mario
19 Aug 2024
🚀 I just built and deployed my first website using Netlify! 🌐✨ This project was part of @scrimba 's HTML and CSS course, and it was an amazing learning experience.
avatar
TK
13 Jul 2024
This is fantastic news for Scrimba! 😊 I was just about to start going over the materials again. It was already an amazing platform, and now it’s even better. Congratulations!
avatar
Aileen VL
17 May 2024
As a JS developer if your looking for amazing resources to get started with AI go to @scrimba they have created and curated amazing content that has definitely helped me in my knowledge.
avatar
EMRAN KHAN
16 Dec 2024
🚀 Level Up! I just completed the CSS Grid course from @scrimba and earned my certificate! A special note of gratitude to @perborgen , CEO of @scrimba and an exceptional teacher, for his incredible way of simplifying complex concepts and making the learning journey enjoyable.
avatar
JuicyDisorder
10 Dec 2024
Decided to dive into React today, which led me to some pricey courses where my wallet said “nope.” Luckily, that led me to a gem 💎: @scrimba , an awesome platform for learning. Their free React course by @bobziroll is super engaging. One hour in & I’m hooked. Highly recommend!
avatar
DOLLAR KID
07 Dec 2024
Big thanks to @scrimba for this awesome challenge! Perfect blend of UI/UX and holiday spirit 🎅
avatar
TBD
31 Oct 2024
Scrimba is awesome - being able to stop a presentation, change code and then resume helps a lot in understanding concepts by doing it yourself.
avatar
Gagan Suie
26 Oct 2024
Scrimba is incredible. Idk how they did it but tutorial videos combined with code??? Waaaahhhh
avatar
Blerand Gashi
06 Oct 2024
Today I started learning about CSS using @scrimba as a source, and I liked it a lot, also built a simple Google layout, feeling AMAZING 🌟💻
avatar
MoStackito.js
04 Aug 2024
On scrimba it’s an amazing platform honestly! PER is an amazing tutor! @scrimba
avatar
Emmett
13 Jul 2024
Definitely you will, scrimba's got amazing instructors. I went from a noob to a great frontend developer.
avatar
aditya
04 Jul 2024
scrimba has one of the best user learning experience i've ever seen. it's really incredible how you can just play vid and code in that vid lecture itself. it's like you're sitting beside the instructor irl. it's magic ✨
avatar
Lou Creemers
25 Apr 2024
Can I just thank @scrimba for a second? It's an absolute godsend for my students (and for me) for learning React. If you've never heard of Scrimba, you should definitely check it out 🤩
avatar
ADITYA SHARDA
06 Mar 2024
📱 Thanks to the amazing guidance of @rafidhoda and @perborgen . Special shoutout to Scrimba for the incredible platform! 🙌💻
avatar
Malik Girondin
07 Jul 2023
avatar
Joan Nyambura Njuguna
11 May 2021
avatar
Helen Stella
10 May 2021
avatar
Deepak Surya
09 May 2021
avatar
Catarina Santos
09 May 2021
avatar
Daniel Stace
08 May 2021
avatar
Ben
07 May 2021
avatar
David
07 May 2021
avatar
Colin Berg
07 May 2021
avatar
Robert Corrado
07 May 2021
avatar
Sergey Kaplich
when I started learning to code, i was blown away by how awesome @scrimba is as an educational platform. three years later, i am still impressed and still use it to learn new tech
avatar
Lesego Samane
I just completed my Digital Business Card project with @scrimba , taught by the awesome @perborgen ! It was a great learning experience in HTML and CSS.
avatar
Oskar Dragon
Scrimba is what got me hired and highly recommend it!