Menu
Coddy logo textTech
ابدأ التعلم
flag Ar iconالعربيةdown icon
جديدرحلة

تعلّم React - دورة تفاعلية مجانية

أتقن React بكتابة مكوّنات حقيقية من الدرس الأول: JSX وprops والحالة والأحداث، ثم واصل إلى Next.js - التوجيه عبر نظام الملفات، والتخطيطات، ومكوّنات الخادم، وجلب البيانات، وserver actions. كل شيء يعمل في متصفحك مع تلميحات ذكاء اصطناعي عندما تتعثر، وتحصل على شهادة مجانية عند الإنهاء.

ابدأ التعلم(مجاني)
عرض المنهج

1,000+ من الـ codders مسجلون

89 درسًا69 تحديات164 أسئلة الاختبار

  • مناسب للمبتدئين
  • sparkles iconمساعدة برمجية بالذكاء الاصطناعي
  • hint iconدروس تفاعلية عملية
  • volume On iconتعليق صوتي في كل درس
  • quiz iconاختبارات لقياس معرفتك
  • certificate iconشهادة إتمام مجانية

المنهج

2 أقسام1 مشاريع89 درسًا69 تحديات164 أسئلة الاختبار
  1. قسم 1

    الأساسيات

    ابدأ القسمابدأتوسيعطي    تعلم كيفية بناء واجهات المستخدم باستخدام React: المكونات (components)، وJSX، وprops، والحالة (state)، والأحداث (events)، بدءًا من أول مكون لك وحتى تطبيق صغير يعمل بفعالية.42 درسًا37 تحديات65 أسئلة

    التعرف على React

    5 درسًا513

    تعبيرات JSX

    5 درسًا58

    المكونات

    5 درسًا48

    الـ Props

    6 درسًا510

    الحالة والأحداث

    6 درسًا59

    النماذج المدخلات

    5 درسًا47

    الشروط والمصفوفات

    6 درسًا510

    مشروع: بطاقة الملف الشخصي

    4 درسًا4
  2. قسم 2

    أساسيات Next.jsصفحة مخصصة

    ابدأ القسمابدأتوسيعطي    انتقل من مكونات React إلى تطبيق حقيقي: التوجيه عبر نظام الملفات (file-system routing)، والتخطيطات (layouts)، ومكونات الخادم والعميل (server and client components)، وجلب البيانات (data fetching)، وإجراءات الخادم (server actions)، ومشروع Next.js مكتمل.47 درسًا32 تحديات99 أسئلة1 مشروع

    لماذا Next.js

    4 درسًا39

    التوجيه والروابط

    6 درسًا516

    التخطيطات والبيانات الوصفية

    6 درسًا515

    الخادم والعميل (Server & Client)

    6 درسًا515

    البيانات على الخادم

    6 درسًا516

    إجراءات الخادم (Server Actions)

    5 درسًا413

    التنقل من جانب العميل

    5 درسًا515

    مشروع: كودي يأكل (Coddy Eats)

    مشروع9 درسًا
ما الذي تحصل عليه
كل ما ستستخدمه لتتعلّم البرمجة

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

لماذا تتعلم React مع Coddy

  • اكتب JSX في متصفحك من الدرس الأول. لا تثبيت لـ Node ولا create-react-app ولا إعداد للبناء - كل درس يمنحك كود مكوّن حقيقيًا لتعديله وتشغيله.
  • منهج ينتهي بتطبيقات حقيقية: المكوّنات وprops والحالة والأحداث والخطافات في قسم الأساسيات، ثم قسم Next.js كامل - التوجيه والتخطيطات ومكوّنات الخادم والعميل وجلب البيانات وserver actions.
  • تلميحات ذكاء اصطناعي تقرأ كودك الفعلي. عندما لا يُعرض مكوّن أو لا تتحدث الحالة، تحصل على إشارة تدلّك على الخطأ دون كشف الحل.
  • شهادة React مجانية عند الإنهاء - إشارة قوية لوظائف الواجهة الأمامية، حيث تظل React مكتبة الواجهات الأكثر طلبًا.

أسئلة شائعة حول تعلّم React

ما هي React؟

React مكتبة JavaScript لبناء واجهات المستخدم من مكوّنات - دوال صغيرة قابلة لإعادة الاستخدام تُرجع ترميزًا. أنشئت في Meta وتشغّل جزءًا هائلًا من الويب الحديث، من Facebook وInstagram إلى منتجات ملايين الشركات الناشئة، وهي باستمرار مهارة الواجهة الأمامية الأكثر طلبًا في إعلانات الوظائف.

هل أحتاج إلى معرفة JavaScript قبل تعلّم React؟

ينبغي أن تكون مرتاحًا مع أساسيات JavaScript - المتغيرات والدوال والمصفوفات والكائنات. تقدّم الدورة أنماط JavaScript التي تعتمد عليها React (الدوال السهمية، والتفكيك، وmap) عند ظهورها، فلا حاجة لأن تكون خبيرًا. وإن كنت جديدًا تمامًا على البرمجة، فابدأ برحلة JavaScript أولًا.

هل تعلّم React صعب؟

الأفكار الأساسية - المكوّنات وJSX وprops - تترسخ سريعًا لأنها تشبه ما تعرفه بالفعل: الدوال وHTML. أما الحالة والتأثيرات وتدفق البيانات فتحتاج مزيدًا من التمرين، ولهذا يجعلك كل درس هنا تكتب كود مكوّنات حقيقيًا وتشغّله بدلًا من الاكتفاء بالقراءة.

ما الفرق بين React وNext.js؟

React هي مكتبة الواجهات: المكوّنات والحالة والعرض. أما Next.js فهو إطار عمل مبني فوق React يضيف ما تحتاجه التطبيقات الحقيقية: التوجيه عبر نظام الملفات، والتخطيطات، والعرض على الخادم، وجلب البيانات، وserver actions. تعلّمك الدورة أساسيات React أولًا، ثم يأخذك قسم مخصص لـ Next.js من المكوّنات إلى تطبيق كامل.

هل يمكنني تعلّم React عبر الإنترنت مجانًا؟

نعم. دورة React التفاعلية مجانية: دروس عملية، وتحديات برمجية بتغذية راجعة فورية، وتلميحات مدعومة بالذكاء الاصطناعي، واختبارات قصيرة. كل شيء يعمل في متصفحك، فلا شيء للتثبيت ويمكنك البدء فورًا.

هل أحصل على شهادة بعد دورة React؟

نعم. عند إنهاء الدورة تحصل على شهادة إتمام مجانية يمكنك إضافتها إلى LinkedIn أو سيرتك الذاتية. ومع المكوّنات والتطبيقات التي تبنيها خلال الرحلة، تشكّل دليلًا حقيقيًا على مهارات عملية في React وNext.js.
Coddy programming languages illustration

تعلم React مع Coddy

ابدأ الآن