Go Pro!


Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Learn React

Unlock CourseGet started!

Join 261682 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Unlock Course
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses, bootcamps, paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
The course creator Bob Ziroll

with Bob Ziroll

Course level: Intermediate

The ultimate React 101 - the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects.

What's inside

This course contains 153 interactive screencasts spread across 4 modules.

two girls
Build a meme generator

64 lessons5 hours 7 min

1. Section Intro & Figma file
2. Meme Generator: Header
3. Meme Generator: Form
4. Project analysis
5. Event Listeners
6. Project: Get random meme
7. Our current conundrum
8. Props vs. State: Props
9. Props vs. State: State
10. Props vs. State Quiz!
11. useState
12. useState array destructuring
13. Changing state
14. useState - Counter practice
15. useState - Changing state with a callback function
16. Changing state quiz!
17. Project: Add images to the meme generator
18. Challenge: ternary practice
19. Challenge: flipping state back and forth
20. Complex state: arrays
21. Complex state: objects
22. Complex state: updating state objects
23. Project: Refactor state
24. Passing state as props
25. Setting state from child components
26. Passing data around
27. Boxes challenge part 1
28. Dynamic styles
29. Boxes challenge part 2
30. Boxes challenge part 3.1 - local state
31. Boxes challenge part 3.2 - unified state
32. Boxes challenge part 4
33. Boxes challenge part 5
34. Conditional rendering: &&
35. Conditional rendering: && practice
36. Conditional rendering: ternary
37. Conditional rendering practice
38. Conditional rendering quiz!
39. React forms intro
40. Watch for input changes in React
41. Form inputs practice
42. Forms state object
43. Form state object practice
44. Controlled inputs
45. Forms in React: Textarea
46. Forms in React: Checkbox
47. Forms in React: Radio buttons
48. Forms in React: Select & Option
49. Forms in React: Submitting the form
50. Forms quiz!
51. Sign up form practice
52. Project: Add text to image
53. Making API calls
54. Intro to useEffect
55. useEffect() syntax and default behavior
56. useEffect dependencies array
57. useEffect quiz!
58. useEffect for fetching data
59. useEffect: when to use dependencies
60. Project: Get Memes from API
61. State and Effect practices
62. useEffect cleanup function
63. Using an async function inside useEffect (Clone)
64. React Section 3 Recap

You'll learn

Local setup

Why React?



Custom components

Organizing components

Reusable components

JS inside JSX


Destructuring props

Rendering arrays

Mapping components

Key prop

Passing objects as props

Spreading objects as props

Props vs state


useState array destructuring

Changing state

Complex state

Refactoring state

Passing state as props

Local state

Unified state

Conditional rendering

React forms

Forms input

Forms state object

Submitting forms in React

Making API calls


Async functions inside useEffect

Local storage with React

Lazy state initialization

You'll build

React facts site

Your very first React app will be a static site about React! This gives you an intro to the basic principles of the library.

Solo project: Digital business card

You'll wrap up the first section by completing your first Solo Project - a digital business card.

AirBnB Experiences clone

You'll take your React skills to the next level by creating an AirBnB Experiences clone.

Solo project: Travel journal

Your second Solo Project is a travel journal.

Meme generator

In section 3, Bob guides you through building his classic meme generator, updated with the newest React features.

Notes app

You'll get to know even more features of React by building this handy notes app.

Tenzies game

Your first React game will be the popular dice game, Tenzies.

Solo Project: Quizzical

To finish up the course, you'll build a fun quiz app to consolidate everything you've learned.



Before taking this course, you should have a basic understanding of HTML, CSS, and JavaScript. Below are our suggested resource to get you up to speed. You do not need to have taken Bob's original React course.

Meet your teacher

The course creator

Bob Ziroll

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

Follow me on twitter

Why this course rocks

In this 143-part interactive tutorial, you'll learn how to build dynamic, interactive web applications with React.js.

With Scrimba’s head of education, Bob Ziroll as a guide, you’ll get to know all the bang-up-to-date features of React, and fix them firmly in your memory by using them to create hands-on projects.

React is a free and open-source front-end JavaScript library. It was created by the developers at Facebook for use in their own products, including Facebook, Instagram, and WhatsApp . React is also used by Netflix, The New York Times, AirBnb, Discord, DropBox, and many other big companies. In short, it is one of the most popular JavaScript libraries in the world.

This course is filled with coding challenges that you'll complete by writing React code directly inside the Scrimba screencasts. Before you know it, you'll have written eight interactive React applications!

You’ll be in fantastic company: over 100,000 students enrolled in Bob’s original React course. Many of them have taken to Twitter to tell the world how helpful they found it.

This course is designed to help you learn to code in a way that sticks - no more tutorial Hell.

We achieve this by stuffing the course full to the brim of interactive challenges, allowing you to develop the muscle memory you need to become a truly effective React developer.

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.

Don’t forget: learning should never be lonely - that’s why we’ve set up the Scrimba Discord server. Make sure you drop in, say hello, and share your goals and achievements. If you get stuck, there is even a dedicated React help channel.

Once you are done, you will feel confident in your React skills and be ready to continue your coding journey.

Advanced React bootcamp

Bob has also created a follow-up course that tackles more advanced React topics. Click here to check it out!

This course is also a part of our hugely popular Front-End Developer Career Path.

F to the A oracle to the Q
Why is React popular?

React initially skyrocketed 🚀 to fame because it made fetching and showing data in your JavaScript apps much easier than before. Because React is "just" a library instead of an elaborate framework, it was - and still is - relatively easy to learn.

Who uses React?

Facebook built React for their own products, which include Facebook, Instagram, and WhatsApp . React is also used by Netflix, The New York Times, AirBnb, Discord, DropBox, and many other big companies you've heard of.

What is React used for?

React is used for frontend web apps to detect user input, fetch data, and update the user interface with data. React does all this with maximum performance.

What can React do?

React mainly gives you a structured way to create reusable frontend UI components, handle user input, update UI components efficiently, and manage your data.

What isn't good about React?

You will find there is no predefined way to structure your app. To ensure you get the most from React, you'll need to spend a little more time researching and implementing popular and effective ways to structure your app.

Can I learn React without knowing JavaScript?

React doesn't rely on any advanced, mind-boggling JavaScript features but you absolutely should know the basics of JavaScript before attempting learning React; otherwise, you're in for a hard time.

Is React a framework or a library?

React is a library - a library of helpful functions and modules to pull into your app as and when you need them. This means you're in complete control of your app. A framework, by definition, is the essential support for your app, which you build on and operate within.

Can I use React with WordPress, Django, PHP, and other backend tools?

Yes, absolutely. In the early days, React probably worked best with Node.js but in 2021, it's free game. React is a fantastic candidate for any backend framework.

How much do React developers get paid?

Salaries can vary greatly from $40K to $100k and beyond. It depends on your aptitude, attitude, and location!

Do I need to have taken Bob's original React course before I do this one?

No. This course replaces Bob's original React course, and is designed to include all the need-to-know modern features of React.

What are Solo Projects?

Solo Projects are real-world projects that are tailored to your skill level as you progress through the course. Use them to stress-test your skills and get projects for your portfolio. Most of the Solo Projects on Scrimba are only accessible for Pro Members.

What if I'm half way through Bob's old course?

Do not worry! Anything you've already learned will still be useful, for example when dealing with legacy code. However we recommend you switch to this course so that you're learning the newest features of React.