Learn React for free

Unlock Course Get started!

Join 171730 other students

Log in to get

Access to 30+ free courses

Interactive hands-on content

Challenge weeks - code to win!

Join a friendly community

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

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 149 interactive screencasts spread across 4 modules.

Build a React info site

30 lessons2 hours 26 min

1. Welcome to an Introduction to React!

2. What we'll learn

4. First React Practice

5. Local setup (the quick way)

6. Why React? It's Composable!

7. Why React? It's declarative

9. Goodbye, CDNs!

10. Thought experiment: use .append() instead of ReactDOM.render()?

11. Project part 1 - markup

13. Custom Components

14. Custom Components part 2

15. Custom Components Quiz

16. Parent/Child Components

17. Styling with Classes

18. Organize components

19. Set up a local React environment with Create React App

20. Styles and images with CRA

21. Quick mental outline of project

22. Project setup

23. Quick Figma Walkthrough

24. Navbar & Styling

25. Main Section

26. Color the bullets

27. Add background logo

28. React Section 1 Solo Project

29. Get a code review!

30. React Section 1 Recap

Build an AirBnb Experiences clone

27 lessons2 hours 12 min

1. Section intro & Figma file

2. Project setup: Navbar

3. Project setup: Hero

4. Project: Card Component

5. Problem - not reusable

6. Props Part 1: Understanding the Concept

7. Props Part 2: Reusable Components

8. Aside: JS inside JSX

9. Props part 3: Create a contact component

10. Props part 4: receiving props in a component

11. Prop quiz! (Get it?? 😆)

12. Destructuring props

13. Props practice

14. Passing in non-string props

15. Project: pass props to card component

16. Review - array .map()

17. React renders arrays

18. Mapping components

20. Loading images from .map()

21. Project: Map experiences data into components

22. Project: key prop

23. Project: Sold Out Badge

24. Project: Pass object as props

25. Project: Spread object as props

26. React Section 2 Solo Project

27. React Section 2 Recap

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!

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

Build a notes app and Tenzies game

28 lessons2 hours 2 min

1. Section 4 Intro

2. Warm-up: Add Dark/Light modes to ReactFacts site

3. Notes App: Intro

4. Notes App: Features to add

5. Notes App: Sync notes with localStorage

6. Lazy State Initialization

7. Notes App: Note summary title

8. Notes App: Bump recent note to the top

9. Notes App: Delete note

10. Tenzies Project Intro

11. Tenzies: Setup

12. Tenzies: Die components

13. Tenzies: Generate array of 10 random numbers

14. Tenzies: Map array to Die components

15. Tenzies: Roll dice button

16. Tenzies: Change dice to objects

17. Tenzies: Styling held dice

18. Tenzies: Hold dice part 1

19. Tenzies: Hold dice part 2

20. Tenzies: Hold dice part 3

21. Tenzies: End game part 1

22. Tenzies: End game part 2

23. Tenzies: End game part 3

24. Tenzies: New Game

25. Tenzies: Extra Credit Ideas

26. React Section 4 Solo Project

27. Check out the class components crash course!

28. Congratulations on completing Learn React! 🤩

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.

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.

Learn JavaScript for free

165 lessons | 7 hours 58 min

with Per Harald Borgen

Per Harald Borgen

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.