Learn React for free (updated)

Unlock CourseGet started!

Join 111451 other students

Log in to get

Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
Unlock Course
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
New courses monthly
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 147 interactive screencasts spread across 4 modules.

two girls
Build a meme generator

64 lessons - 5 hours

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

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, creating cool stuff, and helping others achieve their career goals.

Follow me on twitter

Why this course rocks

NOTE: This course is an updated version of our Learn React course. If you're looking for the old version, please click here.

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.

Learn React for Free 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 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.

Built with Imba