React Course – Beginner’s Tutorial for React JavaScript Library [2022]

Ecommerce Empire Academy

Learn React by building eight real-world projects and solving 140+ coding challenges. You can also follow this course interactively on Scrimba:

React is one of the most popular front-end JavaScript libraries for building user interfaces. After completing this course, you will be able to build web apps in modern React, using patterns like functional components and hooks.

✏️ This teacher is Bob Ziroll, Head of Education at Scrimba.

Code is available on the Scrimba course page for each lesson.

Scrimba on YouTube:
Bob on Twitter:

0:00 Introduction
5:27 What we’ll learn
7:03 Fun facts about react link:
9:08 First react

17:13 First React Practice
19:04 Local Setup (the quick way)
21:03 Why React?
30:38 JSX
40:19 Goodbye, CDNs!
44:27 Thought Experiment
49:57 Project 1 Part 1 – MarkUp
57:44 Pop Quiz!
59:55 Components
1:33:07 Setup a local React environment w/ Create React App
1:33:53 Babel, Bundler, Build
1:34:47 Create React app:
1:35:56 How to install Node.js
1:36:06 Use nvm or nvm-windows
1:36:33 How to install Node.js
1:41:30 Styles and images with CRA

1:46:03 Quick Mental Outline of Project
1:50:00 Quick Figma Walkthrough

1:51:43 Project Setup

1:59:00 Navbar and Styling
2:06:18 Main Section
2:14:04 Color The Bullets
2:16:30 Add Background Logo
2:20:50 Section 1 Solo Project
2:22:23 Digital Business Card
2:24:05 Share your work
2:24:45 Section 1 Recap

Build an AirBnb Experiences Clone
2:27:26 Section intro & Figma File

2:31:40 Project Setup: NavBar & Hero
2:43:11 Project Card Component
2:50:32 Problem – Not Reusable
2:52:29 Props
3:18:42 Prop Quiz (Get it?)
3:23:10 Destructuring Props
3:27:05 Props practice
3:36:12 Passing in non-string Props
3:40:11 Project: Pass props to component
3:47:08 Review – Array.map()
3:55:37 React render array
4:00:10 Mapping Components
4:04:46 Map Quiz
4:08:26 Loading Images from .map()
4:10:02 Projects
4:32:34 Spread objects as props
4:36:30 Section 2 solo project
4:37:14 Travel journal:
4:39:24 Share your work
4:39:52 Section 2 recap

Build a Meme Generator
4:41:37 Section into and figma file

4:45:48 Meme Generator: Header & Form
4:57:13 Project Analysis
4:58:20 Event Listeners
5:04:31 Project: Get random meme
5:10:15 Our current conundrum
5:18:26 Props vs. State
5:32:13 useState
5:37:57 Changing State
5:41:03 useState – Counter Practice
5:45:51 useState – Changing state with a callback Function
5:51:12 hanging State Quiz!
5:53:44 Project: Ass images to the meme generator
5:56:43 Challenge: Ternary Practice & flipping State back and forth
6:06:37 Complex State
6:27:46 Project: Refactor State
6:31:59 Passing state as props
6:37:54 Setting state from child components
6:44:25 Passing data around
6:50:53 Boxes Challenge
7:28:46 Conditional Rendering
7:48:49 React forms intro
7:52:17 Watch for input changes in React
7:56:49 Form inputs practice
7:59:13 Forms state object
8:07:18 Controlled inputs
8:11:35 Forms in React
8:47:04 Project: add text to image
8:51:05 Making API Calls
8:55:08 Intro to useEffect

9:00:54 useEffect()
9:42:46 Project:get memes from API
9:33:00 State and Effect Practices
9:40:05 useEffect cleanup function
9:46:00 Using an sync function inside useEffect
9:49:14 Section3 recap

Build a Notes app and Tenzies Game
9:51:34 Section 4 Intro

9:54:09 Warm-up:Add Dark/Light modes to ReactFacts Site
10:00:50 Notes App Intro
10:10:47 Notes App Development
10:44:17 Tenzies Project Intro

10:45:38 Tenzies Setup & Game Development
11:24:35 Hold dice part 3
11:28:39 End game

11:40:31 Tenzies: New Game & Extra Credit ideas
11:44:15 Section 4 Solo Project
11:45:53 quiz
11:47:26 OTDB API
Check out the class components crash course:
11:49:32 Congrats on completing Module 1!

43 thoughts on “React Course – Beginner’s Tutorial for React JavaScript Library [2022]”

  1. i have actuallt took this course on scrimba, and tbh i can say he’s the best teacher i have ever seen in my life, i have learned sooo much about react from him, and forever will be greatfull <3333

  2. I attest to the quality of Bob’s teaching, I used his original course on Scrimba to advance my reactjs skills, thank you much sir.

    1. @Adeni Both old course and new are free, you should take the new course, link to the course is in this video description.

    2. Diestro Corleone

      He looks like an impossibly nice guy. I’m only 8 minutes in, and I know it’s gonna be great.

    3. Khalid Almufti

      Aside from the practical projects, and all the proper reactjs tricks I’ve learned along the way. For me were the challenges, not just allowed me to practice and apply what I’m learning, also they were a nice breather and cool way to experiment for a bit before moving on with the materials.

  3. The thing I like about Bob Ziroll’s teaching is spaced learning and repetition. I took one of his React course on scrimba a couple months back ( one of the best beginner friendly courses on React ) simplifies everything from state to props. He’s such a gem of a teacher.

    1. Yes, I’ve just finished his Scrimba course (Learn React for free) and I must say he is amazing teacher. My React skills skyrocketed in one week! 😮

  4. Many thanks for sharing our course, freeCodeCamp! ❤️⚡️

    The fully interactive version of the course is available here (it’s completely free!): 👉https://scrimba.com/learn/learnreact ⚛️

    We also share tutorials & career advice for new devs over on our YouTube channel, so give us a follow if that sounds like it’s up your street 🛣✨

    1. Hello there, thank you so much for this amazing tutorial, I will be forever grateful for it, however I cannot acces the scrimba website anymore I tried several times and still nothing please be advised

    2. SugTips Sports

      @Tyler Bryant they can make money by monetizing youtube videos and still can give all for free

    3. Hi, Is this tutorial full compatible with REACT 18 ??(current version released on 29th March 2022)

  5. KASHMIR TECH TV

    13:51 and I believe this is gonna be one of the best course as it seems we’ll learn like we do in school as the instructor is guiding what we have to do instead of just going all the way to the end just writing and reading code . ❤️❤️❤️

  6. React is one of the technologies I’d planned on learning this year after doing alot of backend work with python and some bootstraping and i think this course is just so much of a good thing that has happen so far to me. Thanks alot FCC and SCRIMBA we really appreciate.

  7. The way he teaches is amazing. I love how each topic flows so easily to the next, it answers the ‘why we should learn this’. I wish public schools would teach like this, you can tell a passionate teacher from those teaching for paycheck.

  8. Even though this is 12 hours and seemed intimidating it actually goes by really fast and the way this guy explains makes everything easy to learn in my experience so thanks a lot for this quality course, currently at 3 hours mark and going 😀

    1. yeah I’m doing it as well and lost track of time. I found out I was at the 6hr mark and it honestly felt like 2 hrs

  9. I can say Bob is the best constructor i’ve ever seen, by nature, i love challenges, and Bob teaches the way i like, not like other gurus who uploads hundreds of hours course materials for people to watch what they are doing out there. Hats off for you Bob Ziroll. I have practices my CSS skills also besides React))

  10. abdelrahman gamal

    I really appreciate the effort you put into teaching us React JS, really thanks from my Heart ❤

  11. Hands down the BEST react tutorial I have ever done
    it ultimately boils down to the teaching methods Bob uses
    Love the way Scrimba platform is set up too
    Couldn’t praise the Scrimba team enough!! Big ups!!

  12. I’am an hour into the course and i must this is one of the best courses on react that I’ve come across. It is nicely constructed and the pacing is balanced too. It’s not too fast or too slow. My thanks to the creator Bob Ziroll and freecodecamp.

  13. Hi, I was wondering if maybe you can add a section on how to integrate it with Node, mongoose and express as a backend? That will be super helpful thank you!

  14. This is insanely amazing, this free course quality is better than some paid course, many thanks <3

  15. Prasanna Sundaram

    Hi Bob, This teaching method is absolute magic. Takes me back to my school days to remember some of my teachers who taught with absolute passion. I would like to see tonnes of your courses in all aspects of full stack development. You have etched React in my memory for a life time. Bravo!!! Take a bow sir…

  16. This is honestly incredible. I’ve been following along for about 4hrs now and the pacing is perfect for new learners.

  17. Great course! I wish all tutorials on YT were this perfect.
    Hardest part for me was to figure out how to write code that moved updated note to the beginning of the array but after your explanation I was able to do code if myself. Thank you for doing such a great job!

  18. I must say, par excellence course. Basic to advance. God Bless you! Thank a ton!

  19. I really enjoyed Bob’s teaching. Helped me to understand React better. Based on this beginners course I am really thinking of buying advance react course!

  20. this guy really understands the art of learning and how information sticks. Very well done

Comments are closed.