playlistduration

React tutorial for beginners ⚛️

by Bro Code · 20 videos

Total watch time

4h 43m

at 1× speed · exactly 4 hours, 43 minutes, 13 seconds at 1×

1×4h 43m 13s
1.25×3h 46m 34s
1.5×3h 8m 49s
1.75×2h 41m 50s
2×2h 21m 37s
Average video14m 10s
Longest26m 40s
Shortest7m 15s
Compare Open on YouTube JSON

Plan to finish

About 5 days at an hour a day

Pick a daily pace and the days you'll watch. Ticked videos are skipped.

Days

At one hour a day, every day, this playlist takes about 5 days. Turn on JavaScript to plan around your week.

Videos (20)

4h 43m in total · tick what you've watched

Tick videos you've watched — progress is saved in this browser.

Videos to
Watched
1 React tutorial for beginners ⚛️ 20:27 2023-10-09
2 React CARD components 🃏 11:59 2023-10-14
3 React js how to add CSS styles 🎨 8:16 2023-11-05
4 PROPS in React explained 📧 12:09 2023-10-15
5 How to CONDITIONAL RENDER in React ❓ 10:15 2023-10-24
6 How to render LISTS in React 📃 26:40 2023-10-31
7 Learn React Click Events 👆 12:21 2023-11-11
8 React useState() hook introduction 🎣 16:33 2023-11-20
9 Learn the React onChange event handler 🚦 14:40 2023-11-30
10 Build this color picker app with React! 🖌 10:16 2023-12-05
11 What are React updater functions? 🔄 7:15 2023-12-08
12 React JS how to update OBJECTS in state 🚗 9:10 2023-12-09
13 React JS how to update ARRAYS in state 🍎 9:01 2023-12-09
14 React JS update ARRAY of OBJECTS in state 🚘 12:48 2023-12-10
15 Build this to-do-list app with React! ☝ 22:35 2023-12-19
16 React useEffect() hook introduction 🌟 19:52 2024-01-06
17 Build this digital clock with React! 🕒 16:00 2024-01-07
18 React useContext() hook introduction 🧗‍♂️ 11:37 2024-01-09
19 React useRef() hook introduction 🗳️ 11:18 2024-01-12
20 Build this stopwatch with React! ⏱ 20:01 2024-01-14

Embed a badge

Show the watch time in a README or course description — it links back here and updates itself

Watch time: 4h 43m · 20 videos

Markdown
[![Watch time: 4h 43m · 20 videos](https://playlistduration.com/badge/playlist/PLZPZq0r_RZOMQArzyI32mVndGBZ3D99XQ.svg)](https://playlistduration.com/playlist/PLZPZq0r_RZOMQArzyI32mVndGBZ3D99XQ)
HTML
<a href="https://playlistduration.com/playlist/PLZPZq0r_RZOMQArzyI32mVndGBZ3D99XQ"><img src="https://playlistduration.com/badge/playlist/PLZPZq0r_RZOMQArzyI32mVndGBZ3D99XQ.svg" alt="Watch time: 4h 43m · 20 videos" width="203" height="20"></a>

Add ?speed=1.5 to the image URL for the time at that speed, ?label=Course to change the left text, or ?style=flat-square for square corners.

Want the numbers themselves? GET https://playlistduration.com/api/v1/playlist/PLZPZq0r_RZOMQArzyI32mVndGBZ3D99XQ returns them as JSON — free, no key. API docs →

Data from the YouTube Data API as of 2026-09-22 (cached). Private or deleted videos are excluded from totals.