The Complete React Course with Projects 2026 [Arabic]

Name: The Complete React Course with Projects 2026 [Arabic]
Rating: 4.8 (9 reviews)

Master modern React from beginner to advanced! Create real-world Projects. Includes Context API, Axios, Router 6,Query5

Created byFakhredine Ouahaqi

Last updated 4/2026

Arabic

What you'll learn

Become an advanced, confident, and modern React developer from scratch
React fundamentals: components, JSX, props, events, state, forms
Build reusable, composable, and versatile components
Build single-page applications with React Router (including v6.4+ with data loading
Practice your skills with many challenges, exercises, and practice projects
Style your apps with Tailwind CSS, CSS Modules, Styled Components (CSS-in-JS)

Course content

4 sections • 98 lectures • 10h 19m total length

Intro4:05
Main Course Repository0:02
What is React5:13
Goals2:31
Requirements2:00
Dev Environment2:08
Nodejs2:19
CreateReactApp8:13

Folder Structure8:06
Remove Boilerplate1:33
First Component10:47
Extensions and Settings6:35
Create Element Function5:22
JSX Rules8:35
Nest Components3:33
React Developer Tools2:17
BookList10:06
CSS6:50
JSX CSS4:53
JSX Javascript6:16
Props Basic Setup9:59
Props Somewhat Dynamic Setup4:59
Props Multiple Approaches4:37
Children Prop3:31
Simple List7:30
Proper List6:27
Key Prop4:52
Object as a Prop10:54
Event Basics11:37
Form Submission5:44
Form Submission Button Example2:24
Anonymous Function arrow3:54
Components Feature4:41
Prop Drilling6:05
Complex Example Intro1:58
Complex Example Bug5:35
Complex Example Fix2:54
ES6 Modules10:07
Local Images src folder7:27
Numbers Challenge6:53
Title Challenge2:15
Build Folder3:14
Deployment3:40

Intro1:16
Setup1:57
Overview8:14
Error Example6:18
UseState Fundamentals13:39
Initial Render and Rerenders1:20
General Rules of React Hooks3:18
UseState Array Example Setup8:18
UseState Array Example Complete11:09
UseState Object Example Setup7:27
Auto Batching Info1:29
UseState Object Example Complete6:21
UseState Set Function Gotcha4:24
UseState Functional Update Form5:49
UseState SetTimeout Example4:27
Code Example7:06
UseEffect Fundamentals7:16
UseEffect Multiple Effects4:24
UseEffect Fetch Challenge Intro3:01
UseEffect Fetch Challenge Complete11:24
Multiple Returns7:48
Multiple Returns Fetch Data Setup4:37
Multiple Returns Fetch Data12:28
Order Matters4:04
Fetch Function Location1:58
React Hooks Rules1:41
Short Circuit Overview7:48
Short Circuit Examples7:18
Ternary Operator6:08
Toggle Challenge9:24
User Challenge6:35
Forms Setup5:26
Controlled Inputs11:28
User Challenge Setup3:42
User Challenge Add New User14:18
User Challenge Remove User3:37
Multiple Inputs13:25
Checkbox Input5:20
Select Input6:08
FormData API12:52
Custom Hooks Toggle8:42
Custom Hooks Fetch Person7:52
Context API Prop Drilling17:38
Context API Solution8:33
Context API Global Setup14:57
UseReducer Intro2:42
UseReducer Challenge6:04
UseReducer Setup8:15
Reducer Basics10:16
Actions and Default State6:49
Reset List1:46
Remove Person4:30
UseTransition Hook9:57

Requirements

NO React experience necessary! I take you from beginner to expert!
Strong Knowledge of HTML, CSS, JS is Required. ES6 is optional.
Any computer and OS will work — Windows, macOS or Linux

Description

Mastering React: Building Modern Web Applications

Dive into the dynamic world of front-end development with our comprehensive course on React 18, a cutting-edge JavaScript library used for creating engaging user interfaces. Developed and maintained by Facebook, React has become a cornerstone in building both single-page and mobile applications.

Why Learn React?

High Demand: React's popularity makes it a valuable skill for job seekers in the tech industry.

Efficiency and Performance: React's use of a virtual DOM ensures fast, scalable, and efficient application development.

Flexibility and Reusability: The library's design allows for reusable components, simplifying the development process and making code maintenance easier.

Course Coverage:

React Fundamentals: Understand the core principles of React.

Latest Features: Get hands-on with React.

Hooks & State Management: Deep dive into useState, useEffect, useRef, useReducer, useCallback, useMemo, and custom hooks.

Advanced Concepts: Learn about conditional rendering, prop drilling, context API, and more.

Navigation and Routing: Explore React Router 6 for seamless app navigation.

Data Handling: Utilize axios and redux-toolkit for efficient data management.

Project-Based Learning: Build real-world projects including a Birthday Reminder, E-Commerce Site, Quiz App, and a GitHub Users Explorer.

Ideal For:

Aspiring and experienced front-end developers looking to master React and elevate their web development skills. Whether you're aiming to boost your career prospects or build high-performance web applications, this course is your gateway to becoming a proficient React developer.

Who this course is for:

Frontend Developers who wants to master ReactJs

The Complete React Course with Projects 2026 [Arabic]

What you'll learn

Explore related topics

Course content

Introduction8 lectures • 27min

React Fundamentals35 lectures • 3hr 26min

VITE2 lectures • 14min

React Hooks and Advanced Topics53 lectures • 6hr 13min

Requirements

Description

Who this course is for: