Playlist Duration

Playlist · أكاديمية ترميز

كورس رياكت | React JS Course

by أكاديمية ترميز · 130 videos (1 unavailable)

Total watch time

1d 3h 50m

at 1× speed · exactly 1 day, 3 hours, 50 minutes, 8 seconds at 1×

At an hour a day you'd finish in 28 days

The shape of the course

130 videos in blocks of 10 · each column is a block's total, to scale

1h 31m
1h 57m
1h 41m
2h
2h 54m
2h 15m
1h 28m
2h 5m
2h 16m
3h 22m
2h 8m
2h 11m
1h 57m
5m 32s

WatchedTo watch

Compare Open on YouTube JSON

Next time, skip the copying: change youtube.com to playlistduration.com in any playlist, video or channel address and it opens here. Or see the total on YouTube itself, with our extension for Chrome, Firefox or Edge.

Your plan

Plan to finish

About 28 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 28 days. Turn on JavaScript to plan around your week.

Videos (131)

1d 3h 50m in total · tick what you've watched

Tick videos you've watched — progress is saved in this browser. Titles open on YouTube in a new tab.

Videos to
Watched
1 كورس رياكت | React JS Course Intro 5:45 2024-01-20
2 هدية رمضان؟ ما الجديد بخصوص كورس رياكت React JS؟ 4:21 2025-02-28
3 1: عن كورس رياكت | المتطلبات | طريقة التعلم | about React course 5:30 2024-01-20
4 1.5: كيف تحصل على كل أكواد الكورس من github 9:45 2024-01-20
5 1.6: الحصول على الأكواد و التعامل معها باستخدام git 5:41 2024-01-20
6 2: ما هو رياكت ؟ | What is React JS 8:27 2024-01-20
7 3: التجربة الأولى ل React 9:16 2024-01-20
8 4: تجهيز بيئة العمل و إنشاء مشروع React جديد 10:50 2024-01-20
9 5: فهم هيكلة مشاريع React 14:02 2024-01-20
10 6: بناء ال component الأول في React 17:46 2024-01-20
11 7: ما هو ال component في React؟ | شرح نظري 5:46 2024-01-20
12 8: مقدمة إلى ال JSX 11:06 2024-01-20
13 9: إضافة Style لعناصر ال JSX 10:20 2024-01-20
14 10: إضافة ال Classes في ال JSX 12:00 2024-01-20
15 11: تحدي بناء ال Components 3:37 2024-01-22
16 12: حل تحدي ال Components في React 28:41 2024-01-22
17 13: إرسال ال props في ال Components 19:07 2024-01-22
18 14: إرسال ال JSX كـ Props إلى ال Component 14:03 2024-01-22
19 15: تحدي ال Props 1:53 2024-01-22
20 16: حل تحدي ال Props 10:41 2024-01-22
21 17: Conditional Rendering in React 12:20 2024-01-22
22 18: Rendering List in React 15:22 2024-01-22
23 Private video —
24 19: تحدي ال List Rendering 1:53 2024-01-22
25 20: حل تحدي ال List Rendering 15:40 2024-01-22
26 21: مقدمة إلى ال State في رياكت | Intro to State in React 8:19 2024-01-27
27 22: مشكلة تعديل ال State من ال Component 6:19 2024-01-27
28 23: ما هو ال React DOM و كيف يعمل؟ 8:21 2024-01-27
29 24: useState Hook in React 18:39 2024-01-27
30 25: إدارة ال State مع المدخلات | Managing State with Input in React 13:58 2024-01-27
31 26: State with Forms in React 17:54 2024-01-27
32 27: حل مشكلة ال Object State في ال Form 13:59 2024-01-27
33 28: Other Form Fields with State 16:18 2024-01-27
34 29: Select & Radio Inputs with State 10:39 2024-01-27
35 30: تحدي تحديث ال State Object 4:23 2024-01-27
36 31: حل تحدي تحديث ال Object State 10:27 2024-02-03
37 32: Using Arrays as State in the Component in React JS 17:22 2024-02-03
38 33: التعديل و الحذف في ال Array State في رياكت 17:26 2024-02-03
39 34: التعديل في ال Array State 9:42 2024-02-03
40 35: تحدي تحديث ال Array State 2:07 2024-02-03
41 36: حل تحدي تحديث ال Array State 14:03 2024-02-17
42 37: التحديث المتكرر لل state في رياكت 15:05 2024-02-17
43 38: تحدي التحديث المتتالي لل State 3:22 2024-02-17
44 39: حل تحدي التحديث المتتالي لل State 5:22 2024-02-17
45 40: عرض مشروع Loan Application Form 6:00 2024-02-17
46 41: المشروع الأول: بناء الواجهات و ال Components 35:07 2024-03-11
47 42: المشروع الأول: بناء المنطق البرمجي 38:22 2024-03-11
48 المشروع الأول: إظهار ال Modal و إكمال المشروع 28:05 2024-03-11
49 44: Communication using (Props) 15:46 2025-03-01
50 45: Sending the event handler to the props 12:30 2025-03-01
51 47: Prop Drilling Issue 11:20 2025-03-01
52 48 : Using (useContext) to Fix The Prop Drilling Issue 23:48 2025-03-01
53 49: Using (useContext) to Share Data in The APP 14:27 2025-03-01
54 50 : Context Challenge 3:45 2025-03-01
55 51 : Context Challenge Solution 11:41 2025-03-05
56 52 : Intro To React Router 17:33 2025-03-05
57 53 : Using (Link) To Navigate To Other Pages 9:49 2025-03-05
58 54 : Dynamic Routes 19:57 2025-03-05
59 55 : Extracting Params From The Dynamic Routes 12:41 2025-03-05
60 56 : 404 page إظهار صفحة الخطأ 9:53 2025-03-05
61 57 : Nested Routes - الروابط المتداخلة 11:41 2025-03-05
62 58 : SSR vs CSR - SPA? ما هي مواقع الصفحة الواحدة؟ 8:59 2025-03-11
63 59 : البدء في استخدام أطر العمل التصميمية في رياكت 17:37 2025-03-11
64 60 : تخصيص التصميم الكلي للمشروع 10:36 2025-03-11
65 61 : Material UI تخصيص و ترتيب الصفحة في 10:45 2025-03-11
66 62 : icons استخدام ال 6:00 2025-03-11
67 63 : Material UI تحدي الـ 1:47 2025-03-11
68 64 : Material UI حل تحدي الـ 10:10 2025-03-11
69 65 : مقدمة لمشروع قائمة المهام 6:19 2025-03-11
70 66 : استعراض مشروع قائمة المهام 4:01 2025-03-11
71 67 : تنزيل المكتبات و البدء في المشروع 6:22 2025-03-11
72 68 : Todo List تصميم الهيكل العام لل 16:17 2025-03-11
73 69 : Todo Component بناء الـ 14:44 2025-03-11
74 70 : Todo Component إكمال بناء ال 7:55 2025-03-11
75 71 : إضافة خطوط خارجية للمشروع 19:51 2025-03-17
76 72 : إكمال التصميم الخاص بإضافة مهمة جديدة 8:33 2025-03-17
77 73 : في قائمة المهام Todos إظهار مجموعة 8:31 2025-03-17
78 74 : إضافة مهمة جديدة 9:06 2025-03-17
79 75 : إضافة مهمة للمهام المنجزة 21:08 2025-03-17
80 76 : Context (useContext hook) الاعتماد على ال 12:21 2025-03-17
81 77 : حذف المهام من قائمة المهام 19:10 2025-03-17
82 78 : تعديل مهمة في قائمة المهام 21:14 2025-03-17
83 79 : localStorage تخزين المهام في ال 14:52 2025-03-17
84 80 : useEffect in React and how to retrieve data from localStorage 13:26 2025-03-17
85 81 : Retrieving The Todos From Local Storage 7:59 2025-03-19
86 82 : تصنيف المهام المنجزة / غيرالمنجزة 18:20 2025-03-19
87 83 : إضافة اللمسات الأخيرة على المشروع 10:03 2025-03-19
88 84 : Project Deployment - رفع المشروع 11:26 2025-03-19
89 85 : مقدمة لتنظيف أكواد المشروع 3:42 2025-03-19
90 86 : Caching The Computations Using useMemo 15:54 2025-03-19
91 87 : Moving The Dialog Modals Up (lifting the state up) 29:56 2025-03-19
92 88 : Adding Toast as Providers 10:36 2025-03-19
93 89 : Adding Toast Logic With Context 15:15 2025-03-19
94 90 : Turning The Context Into Provider 26:07 2025-03-19
95 90.1 : تصحيح كود الدرس الأخير 3:31 2025-03-19
96 91 : Introduction To Use Reducer 36:35 2025-03-19
97 92 : Applying useReducers to Todo App 24:04 2025-03-19
98 93 : Applying useReducer on Update / Delete 19:36 2025-03-19
99 94 : Combining Reducer With Context 25:53 2025-03-19
100 95 : Fixing The Mutation Problem 10:15 2025-03-19
101 96 : useState - useEffect - useMemo - useContext - useReducer مراجعة عامة 21:42 2025-03-22
102 96 : useState - useEffect - useMemo - useContext - useReducer مراجعة عامة 4:12 2025-03-19
103 97 : API Section مقدمة إلى ال 2:43 2025-03-22
104 98 : استعراض مشروع الطقس 3:40 2025-03-22
105 99 : تنزيل المكتبات و الخطوط 12:46 2025-03-22
106 100 : بناء الواجهات 30:07 2025-03-22
107 101 : و فهمه api استعراض ال 9:24 2025-03-22
108 102 : API Request in React 12:56 2025-03-22
109 103 : useEffect Cleanup 18:12 2025-03-22
110 104 : في الصفحة API تعبئة بيانات ال 12:16 2025-03-22
111 105 : using moment library for data and time 7:25 2025-03-22
112 106 : translation using i18next in react 12:36 2025-03-24
113 107 : تغيير اللغة من خلال الضغط على الزر 12:15 2025-03-24
114 108 : تغيير اتجاه الموقع بناء على اللغة المحددة 5:26 2025-03-24
115 109 : اختتام و رفع المشروع 5:38 2025-03-24
116 110 : Redux مقدمة إلى فصل 4:49 2025-03-24
117 111 : Redux - شرح نظري 14:32 2025-03-29
118 112 : Redux with React البدء باستخدام 45:51 2025-03-29
119 113 : Using Redux for Subtraction 9:33 2025-03-29
120 114 : . مطابقة الشرح النظري و التطبيق العملي 12:32 2025-03-29
121 115 : Redux تحدي 1:23 2025-03-29
122 116 : Redux حل تحدي 4:00 2025-03-29
123 117 : Redux Dev Tool 8:34 2025-03-29
124 118 : The Problem of Async Logic in Redux 12:43 2025-03-29
125 119 : Async Logic in Redux - شرح نظري 4:36 2025-03-29
126 120 : Using Redux with API 16:40 2025-03-29
127 121 : Adding the Async Logic to Redux 13:44 2025-03-29
128 122 : Adding Async Logic to the Redux Code 25:00 2025-03-29
129 123 : Completing the Integration with Redux 12:03 2025-03-29
130 124 : Redux & Async Logic with Redux Revision 18:20 2025-03-29
131 خاتمة السلسلة | ماذا بعد رياكت؟ 5:32 2025-03-29
For your README

Embed a badge

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

Watch time: 1d 3h 50m · 130 videos

Markdown
[![Watch time: 1d 3h 50m · 130 videos](https://playlistduration.com/badge/playlist/PLYyqC4bNbCIdSZ-JayMLl4WO2Cr995vyS.svg)](https://playlistduration.com/playlist/PLYyqC4bNbCIdSZ-JayMLl4WO2Cr995vyS)
HTML
<a href="https://playlistduration.com/playlist/PLYyqC4bNbCIdSZ-JayMLl4WO2Cr995vyS"><img src="https://playlistduration.com/badge/playlist/PLYyqC4bNbCIdSZ-JayMLl4WO2Cr995vyS.svg" alt="Watch time: 1d 3h 50m · 130 videos" width="228" 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/PLYyqC4bNbCIdSZ-JayMLl4WO2Cr995vyS returns them as JSON — free, no key. API docs →

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