Go Pro!Bootcamp

Bootcamp

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

Enroll for freeGet started!

Join 359173 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
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 and career 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 177 interactive scrims spread across 4 modules.

two girls
Build a meme generator

69 lessons5 hours 26 min

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

45 lessons3 hours 10 min

1. Section 4 Intro
2:33
2. Warm-up: Add Dark/Light modes to ReactFacts site
6:39
3. Notes App: Intro
9:55
4. Notes App: Features to add
1:25
5. Notes App: Sync notes with localStorage
5:59
6. Lazy State Initialization
5:12
7. Notes App: Note summary title
4:51
8. Notes App: Bump recent note to the top
6:49
9. Notes App: Delete note
8:57
10. Update to Notes app - adding Firebase! 🔥
2:17
11. Updating to Vite
3:53
12. Small refactors
3:01
13. Local Setup
2:47
14. Firebase Intro & Setup
4:28
15. Firebase Code Setup
3:09
16. onSnapshot - part 1
6:56
17. onSnapshot - part 2
3:03
18. Create new blank note
2:10
19. Delete Note
2:54
20. Update note - part 1
2:26
21. Update note - part 2
3:53
22. Challenge: createdAt and updatedAt
2:54
23. Challenge: sort notes
3:58
24. Debouncing updates - part 1
3:21
25. Debouncing updates - part 2
4:44
26. Debouncing updates - part 3
8:07
27. Tenzies Project Intro
1:18
28. Tenzies: Setup
3:26
29. Tenzies: Die components
6:50
30. Tenzies: Generate array of 10 random numbers
3:53
31. Tenzies: Map array to Die components
3:08
32. Tenzies: Roll dice button
4:41
33. Tenzies: Change dice to objects
4:32
34. Tenzies: Styling held dice
3:38
35. Tenzies: Hold dice part 1
5:17
36. Tenzies: Hold dice part 2
3:09
37. Tenzies: Hold dice part 3
4:01
38. Tenzies: End game part 1
2:35
39. Tenzies: End game part 2
4:55
40. Tenzies: End game part 3
4:15
41. Tenzies: New Game
3:12
42. Tenzies: Extra Credit Ideas
1:35
43. Solo Project (PRO) - Quizzical
6:27
44. Check out the class components crash course!
1:06
45. Congratulations on completing Learn React! 🤩
5:53

You'll learn

Local setup

Why React?

JSX

ReactDOM.render()

Custom components

Organizing components

Reusable components

JS inside JSX

Props

Destructuring props

Rendering arrays

Mapping components

Key prop

Passing objects as props

Spreading objects as props

Props vs state

useState

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

useEffect

Async functions inside useEffect

Local storage with React

Lazy state initialization

You'll build

screenshot
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.

screenshot
Solo project: Digital business card

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

screenshot
AirBnB Experiences clone

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

screenshot
Solo project: Travel journal

Your second Solo Project is a travel journal.

screenshot
Meme generator

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

screenshot
Notes app

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

screenshot
Tenzies game

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

screenshot
Solo Project: Quizzical

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

man

Prerequisites

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.