Learn React for free

Unlock CourseGet started!

Join 105103 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

Consider this course React 101 - this is the perfect starting point for any React beginner. You'll learn key React features while building two apps and practice what you learn through interactive coding challenges and exercises along the way.

What's inside

This course contains 59 interactive screencasts

two girls
Learn React for free

59 lessons - 5 hours

1. Course Introduction & Learning Philosophy
2. What we'll be building
3. Introducing The Frontend Developer Career Path
4. Why use React?
5. ReactDOM & JSX
6. ReactDOM & JSX Practice
7. React Functional Components
8. React Functional Components Practice
9. OUT NOW: The React Bootcamp 🔥
10. Move Components into Separate Files
11. React Parent/Child Components
12. React Parent/Child Component Practice
13. React Todo App - Phase 1
14. Styling React with CSS Classes
15. Some Caveats
16. JSX to JavaScript and Back
17. React Inline Styles with the Style Property
18. React Todo App - Phase 2
19. React Props Part 1: Understanding the Concept
20. React Props Part 2: Reusable Components
21. React Props
22. React Props and Styling Practice
23. Mapping Components in React
24. Mapping Components Practice
25. React Todo App: Phase 3
26. Class-based Components
27. Class-based Components Practice
28. React State
29. React State Practice
30. React State Practice 2
31. React Todo App: Phase 4
32. Handling Events in React
33. React Todo App: Phase 5
34. React setState: Changing the State
35. React Todo App: Phase 6
36. React Todo App: Phase 6.1 😑🙄
37. React Lifecycle Methods Part 1
38. React Lifecycle Methods Part 2
39. Lifecycle Methods Part 3 - componentDidUpdate
40. React Conditional Render
41. React Conditional Render Part 2
42. React Conditional Render Practice
43. React Todo App: Phase 7
44. API Update: Please watch before proceeding
45. Fetching data from an API with React
46. React Forms Part 1
47. React Form Part 2
48. React Form Practice
49. React Container & Component Architecture
50. React Meme Generator Capstone Project
51. Writing Modern React Apps
52. Hooks Intro
53. useState() Part 1 - Creating State
54. useState() Part 2 - Changing State
55. useEffect() Part 1
56. useEffect() Part 2
57. React Project Ideas for Practicing
58. Conclusion - React Tutorial
59. Congratulations on Completing Learn React for Free 🥳

You'll learn

Learn JSX

Props and state

Conditional rendering

Functional components

Class components

Styling components

Lifecycle methods

Fetching data from APIs

Handling events

Forms in React

Controlled components

Writing modern React

Local dev setup

React Hooks

You'll build


Todo MVC

In this project you'll create an awesome todo app. It's a classic app which introduces you to the most important concepts of React.


Meme Generator App

Memes are awesome so let's build a meme generator! It let's you speficy and image and a text and generated a meme.



Before taking this course, you should have a basic understanding of HTML, CSS, and JavaScript. Here’s our suggested resources to get you up to speed.

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

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

React is a JavaScript library for creating user interfaces. It has been created by the developers at Facebook and it excels in creating fast web applications using web components built with a simple-to-understand API.

The course is also 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 two first React JS applications!

You’ll be in good company: over 97,000 students have enrolled in this course so far. Many of them have pointed out on Twitter that this course is the best React tutorial they've taken.

Bob’s learning philosophy

As the head of education at Scrimba, Bob has formulated some philosophies about learning:

1. Learning should never be lonely - Take the course with friends if possible, and make use of the Q&A option to ask questions!

2. Learn by doing - Take advantage of Scrimba by frequently pausing the lesson and playing with the code. Then try to build things from your own computer using the stuff you just learned. And don't skip the practices!

3. Spaced learning and repetition is key - Give yourself time (days/weeks) to finish this course, and include lots of breaks. Don't try cramming it all in.

Contact Bob All constructive feedback is welcome! Feel free to tweet at me (@bobziroll) to let me know your thoughts.

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. In 2020, we love React for its mobile support through React Native, excellent developer tools, and helpful community.

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.

Should I learn React in 2020?

Yes! React is the most popular frontend library in 2020 for numerous reasons. We are willing to bet that someone from the React team is preparing an update for React or, at least, a React tool as you're reading this. React is very relevant in 2020 and not likely to go out of style anytime soon.

Should I learn React or Angular?

Ah, the age old question! Anything you can build with React, you can build with Angular, and vice versa. Which you pick to learn is mostly preference. While React is best described as a library, Angular is an elaborate framework. With React, you'll pick and choose additional libraries that suit your project whereas, with Angular, you're expected to include the libraries you're given (they're pretty good).

What isn't good about React?

React is not without its downsides. When compared with a framework like Angular, 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.

How long does it take to learn React?

React is a small library built on clever design patterns and ideas. With a React course or tutorial, you could build your first app today but it will likely take you a few more days of practice to fully understand the core React concepts and unlock their full power. This, of course, depends on your experience and how much time you can commit.

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 for backend?

No, not really. For that, you'll need a server-side tool like Node and a server-side Node framework like Express. React does occasionally appear in backend frameworks like Next.js to do something advanced called server-side rendering, which is a smart way to improve page load time and SEO.

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 2020, 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!

Built with Imba