البدء مع React
These docs are old and won’t be updated. Go to react.dev for the new React docs.
The new Quick Start teaches modern React and includes live examples.
تلقي هذه الصفحة نظرة شاملة على مستندات React والمصادر المرتبطة بها.
تعدُّ React مكتبةٌ من مكتبات الجافاسكريبت المخصَّصة لبناء واجهات المستخدم. انتقل إلى الصفحة الرئيسية لمستندات React أو إلى الدليل التطبيقي لمعرفة المزيد عنها.
جرب React
صُمِّمت React من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد قليلا على React أو بقدر ما تحتاج إليها. سواءً أردت تجريب React بشكل مبسَّط، أو إضافة بعض التفاعل إلى صفحة HTML بسيطة، أو البدء بإنشاء تطبيق React معقَّد، فستساعدك الروابط في هذا القسم للوصول إلى ذلك.
التجربة على الإنترنت
إن كنت مهتمًا بتجربة React والتعامل معها، يمكنك استخدام بيئة جاهزة لتجربة الشيفرة على الإنترنت. جرّب مثال “أهلًا بالعالم” (Hello World) على موقع CodePen أو موقع CodeSandbox أو موقع Stackblitz.
إن كنت تُفضِّل استخدام مُحرِّر النصوص الخاص بك، يمكنك تحميل ملف HTML هذا وتعديله ومن ثمّ فتحه عن طريق نظام الملفّات المحلّي في متصفّحك. يُؤدِّي هذا إلى بطء في تحويل الشّيفرة أثناء زمن التنفيذ لذلك لا تستخدم هذه الطريقة أثناء إنتاجك لمشاريع حقيقيّة.
إضافة React إلى موقع ويب
يمكنك إضافة React إلى صفحة HTML في دقيقة. يمكنك بعدئذٍ إمَّا أن توسِّع استعمال React تدريجيًّا، أو تقتصر في استعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets).
إنشاء تطبيق React جديد
عند بدء مشروع React، قد لا يزال خيار استعمال صفحة HTML بسيطة الوسوم <script>. خيارًا مفضَّلًا، إذ يأخذ دقيقةً واحدةً لإعداده!
مع نمو التطبيق الخاص بك ، قد ترغب في النظر في إعداد أكثر تكاملاً. هناك العديد من أدوات جافا سكريبت التي نوصي بها للتطبيقات الأكبر حجمًا. يمكن لكل منهم العمل دون أي تغيير يذكر ، ويتيح لك الاستفادة الكاملة من نظام React البيئي الغني. تعلم كيف.
تعلم React
الأشخاص الذين يأتون إلى React هم ذوي خلفيات شتَّى وأساليب تعلُّم مختلفة. سواءً أكنت تفضل الأسلوب النظري، أم الأسلوب العملي، نأمل أن تجد في هذا القسم العون على رحلتك في تعلم React.
- إذا كنت تفضل أن تتعلم عبر التجريب فابدأ بهذا الدليل التطبيقي.
- أمَّا إن كنت تفضل تعلم المفاهيم النظرية أولًا فابدأ رحلتك من بداية دليل المفاهيم الأساسية.
مثل أي تقنية غير مألوفة، تملك React مسارًا تعليميًّا مخصصًّا بها. بقليل من الممارسة والصبر، ستُتْقن React وتحصل على ما تريده بالتأكيد.
الأمثلة الأولى
الصفحة الرئيسية لمستندات React بضعة أمثلة سهلة عن React. حتى إن لم تعرف أي شيء عن React بعد، جرب تشغيل الأمثلة ثم تعديلها مع ملاحظة التغيير الذي سيحصل للمخرجات.
React للمبتدئين
إن كنت تشعر أن مستندات React تتدرج بالصعوبة بوتيرة أسرع مما تخيلتها، ألقِ نظرة على هذه المقالة عن React لصاحبها Tania Rascia. إنَّها تعرِّف أكثر المفاهيم أهميةً في React بالتفصيل وبطريقة سهلة ومبسَّطة تناسب المبتدئين. عند الانتهاء منها، عد إلى المستندات وأعطها فرصة جديدة.
React للمصممين
إن كنت قادمًا إلى React من بيئة تصميمة أخرى، هذا المرجع هو أفضل مكان يمكنك البدء منه.
مصادر حول الجافاسكريبت
تفترض مستندات React أنَّك تملك خبرة برمجية مسبقة بلغة الجافاسكريبت. لا يُطلَب منك أن تكون خبيرًا محنَّكًا ولكن من الصعب تعلم React والجافاسكريبت في الوقت نفسه.
ننصح بالاطلاع على مستندات الجافاسكريبت والإلمام بمعظمها للتحقق من وصولك للمستوى المطلوب. نعلم أنَّها قد تأخذ منك بعض الوقت، ولكن ذلك سيعزز تعلمك لـ React.
نصيحة
كلما شعرت بحيرة حول أي شيء مكتوب بلغة الجافاسكريبت ننصحك بمراجعة موقع MDN و javascript.info. أضف إلى ذلك أنَّ منديات دعم المجتمع مستعدون دائمًا لمساعدتك.
التعلم عبر التطبيق العملي
إن كنت تفضل أن تتعلم بالممارسة, ابدأ بالدليل التطبيقي أولًا. ستتعلم في هذا الدليل كيفيّة بناء لعبة إكس-أو (اسمها بالإنجليزيّة tic-tac-toe) باستخدام React. ربّما قد ترغب بتخطي هذا الدليل لأنّك لا تريد بناء الألعاب، ولكن أعطه فرصة. إنّ التقنيات التي ستتعلمها في هذا الدليل أساسيّة لبناء أي تطبيق React، وسيعطيك إتقانها فهمًا أعمق لمكتبة React.
تعلم المفاهيم خطوة بخطوة
إن كنت تفضل تعلم المفاهيم النظرية أولًا, فمستندات React من البداية خطوة بخطوة هي المكان الأمثل للبدء. كل فصل لاحق فيها يُبني على المعرفة التي اكتسبتها في الفصل السابق، لذا لن يفوتك أي شيء إن بدأت في قراءتها من البداية وحتى النهاية بالترتيب.
أسلوب التفكير في React
أغلب مستخدمي React يقدِّرون قراءة أسلوب التفكير في React بالشيء الثمين، إذ يشعرون في تلك اللحظة أنَّ React قد أصبحت شربة ماءٍ بالنسبة لهم. تعدُّ تلك الصفحة أقدم مدخل إلى React ولا تزال إلى الآن على صلةٍ وثيقةٍ بأحدث إصدار من React.
دورات تعليمية يوصى بها
قد يجد البعض أحيانًا أنَّ الكتب والفيديوهات الموفَّرَة من طرف ثالث أكثر نفعًا وفائدةً لهم من المستندات الرسمية. إليك قائمة ببعض المراجع الخارجية التي يُوصى بها لتعلم React.
مفاهيم متقدمة
متى ما شعرت أنَّ المفاهيم الأساسية أصبحت سهلةً لك وبدأت بممارسة React وشعرت أنَّك تطلب المزيد، فأنت حينئذٍ بحاجة إلى الانتقال إلى مستوى متقدم. هذا القسم سيقدم لك ميزات متقدمة في React وقوية ولكن أقل استخدامًا مثل السياق و refs.
مرجع إلى الواجهة البرمجية
هذا القسم مفيد إن أردت تعلم المزيد من التفاصيل حول واجهة برمجية محددة في React. على سبيل المثال مرجع الواجهة البرمجية حول React.Component يمكن أن يزودك بتفاصيل أوسع حول كيفية عمل setState() وما هي أفضل توابع دورة الحياة المختلفة لاستعمالها معه.
المصطلحات والأسئلة الشائعة
يحوي قسم المصطلحات شرحًا مفصّلًا لأهم المصطلحات التي ستراها في مستندات React. هنالك أيضًا قسمٌ مخصص للإجابة عن الأسئلة الشائعة حول مواضيع محدَّدة في React مثل استخدام AJAX مع React حالة المكوّن و بنية ملفات المشروع.
ابق على اطلاع
مدونة React هي المصدر الرسمي لنشر التحديثات من فريق React. سينشر أي شيء مهم بما في ذلك الملاحظات حول الإصدارات أو ملاحظات الإهمال في تلك المدونة أولًا.
يمكن أيضًا متابعتنا على حساب تويتر @reactjs ولكن لن يفوتك أي شيء إن تابعت المدونة فقط.
لا يمكن الاكتفاء بمنشورات المدونة لمعرفة كل تفاصيل الإصدار الجديد من React؛ يمكنك العثور على معلومات مفصلة عن سجل التغييرات لكل إصدار في الملف CHANGELOG.md في مستودع React وكذلك في صفحة الإصدارات أيضًا.
مستندات الإصدار
تعكس هذه المستندات أحدث إصدار مستقر من React. منذ الإصدار 16، يمكنك العثور على مستندات الإصدارات الأقدم في صفحة منفصلة. انتبه إلى أنَّ تلك المستندات للإصدارات القديمة قد بقت على حالها منذ تاريخ نشر الإصدار ولن يجري تحديثها.
أتفقد شيئًا آخر؟
إن كنت تبحث عن شيء آخر ولم تجده في المستندات، أو إن وجدت بعض أجزاء هذه المستندات مربكة، نرجو منك أن تخبرنا عن ذلك عبر فتح مشكلة (issue) في مستودع المستندات على GitHub عبر ذكر اقتراحاتك للتطوير. يمكنك أيضًا أن تنشر تغريدة بذلك على حسابنا. يسعدنا حقًا أن نسمع اقتراحتك!