كيف تتعلم التفاعل - خارطة طريق من المبتدئين إلى المتقدمين

مرحبا يا اصدقاء!

هذا الدليل مخصص للأشخاص الذين بدأوا بـ React. لقد قمت برعاية أفضل مقاطع الفيديو والمقالات بعناية في كل قسم لتسهيل التعلم.

ملاحظة: أنا غير مرتبط بأي من المواقع المذكورة أدناه. إنها وجهة نظري البحتة.

المتطلبات الأساسية

1. معرفة أساسية بـ HTML و CSS و JavaScript.
2. الفهم الأساسي لميزات ES6. إليك مقالتي التي تشرح بعض ميزات ES6.

   للبدء ، يجب أن تعرف الميزات التالية على الأقل:

   1. اسمحوا

   2. Const

   3. وظائف السهم

   4. الواردات والصادرات

   5. فئات

3. الفهم الأساسي لكيفية استخدام npm.

ابدء

يمكنك استخدام برامج تحرير التعليمات البرمجية عبر الإنترنت للتدرب ، أو يمكنك استخدام تطبيق Create React.

لقد قمت بإعداد بيئة تطوير في JSFiddle و Codepen.

لفهم جميع أساسيات React ، يمكنك البدء بالدروس التالية:

رد على الوثائق الرسمية من خلال React

دليل المبتدئين إلى React بواسطة Kent C. Dodds

أساسيات رد الفعل لسامر بونا

الآن ، يجب أن تكون لديك فكرة أساسية عن أساسيات React. يكفي البدء في تطوير تطبيقات ويب بسيطة في React.

الآن ، ألق نظرة على البرنامج التعليمي الرسمي لـ React:

رد تعليمي رسمي من React

إنها مقالة مكتوبة جيدًا تغطي أساسيات React. كما أنه يشرح الموضوعات المحددة بوضوح شديد.

أخيرًا وليس آخرًا ، تعرف على كيفية الاتصال بواجهات برمجة التطبيقات باستخدام تطبيقات React:

جلب API مع React.js بواسطة Ethan Jarrell

ابدأ ببناء بعض المشاريع

1. بسيط التطبيق
2. تطبيق آلة حاسبة بسيط
3. بناء عربة التسوق
4. اعرض إحصائيات مستخدم GitHub باستخدام واجهة برمجة تطبيقات GitHub

رد فعل راوتر

يساعدك جهاز React Router على إنشاء مسارات لتطبيقات الصفحة الواحدة. إنه قوي جدًا وسهل الاستخدام مع تطبيق React الخاص بك.

للبدء:

برنامج React Router التعليمي بواسطة Paul Sherman

React Router ومقدمة إلى SPA من Learn Code Academy

توجيه تطبيقات React بواسطة Scotch.io

هذه المقالات أكثر من كافية لكي تبدأ في توجيه React.

المشاريع

1. تطبيق CURD بسيط
2. استنساخ هاكر نيوز

إذا كنت مهتمًا حقًا بمعرفة الكثير عن جهاز التوجيه ، فراجع الدليل التالي:

دليل React Router الكامل بواسطة React Training

حزمة الويب

Webpack عبارة عن مجمّع وحدات JavaScript مشهور. يساعدك Webpack في الحفاظ على التبعيات كملفات ثابتة لمشروعك حتى لا يضطر المطورون إلى القيام بذلك.

Webpack يأتي أيضًا مع لوادر. تساعد اللوادر في تشغيل مهام محددة حول مشروعك.

لمعرفة المزيد حول Webpack ، اتبع الدروس التالية.

متى ولماذا تستخدم Webpack بواسطة Andrew Ray

برنامج Webpack التعليمي من Learn Code Academy

لإعداد بيئة React المحلية الخاصة بك باستخدام Webpack ، يمكنك الرجوع إلى GitHub repo التالي:

React SPA بواسطة Hanif Roshan

أعتقد أن البرامج التعليمية المذكورة أعلاه كافية لبدء استخدام Webpack. ومع ذلك ، للحصول على معرفة متعمقة ، يمكنك الرجوع إلى الأدلة التالية:

مقدمة Webpack بواسطة SurviveJS

مستندات Webpack الرسمية

تقديم الخادم

يُعد عرض الخادم أحد أروع الميزات في React. يمكن استخدامه مع أي من التقنيات الخلفية.

يساعدك التقديم الجانبي للخادم (SSR) في React على إنشاء مكونات في الخادم وتقديمها بتنسيق HTML في متصفحك. وعندما يتم تنزيل جميع وحدات JavaScript النمطية في المتصفح ، تأخذ React المسرح. بسيط!

بادئ ذي بدء ، ألق نظرة على واجهة برمجة تطبيقات React-DOM:

React-DOM API بواسطة React

واتبع البرامج التعليمية أدناه للحصول على معرفة متعمقة:

رد فعل الخادم من قبل تايلر ماكجينيس

رد فعل عرض خادم الموجه بواسطة Roilan Salinas

دليل العرض الجانبي لخادم React بواسطة دينيس بروتزكي

إعادة

Redux هي مكتبة JavaScript تم تطويرها للحفاظ على حالات التطبيق. عندما تقوم ببناء تطبيق معقد ، فإنه سيضيف حملًا لإدارة الحالات عبر المكونات. يساعدك Redux على تخزين جميع حالاتك في مصدر واحد. وبالطبع ، فإن React تلعب بشكل جيد مع Redux :)

للبدء:

إعادة البرنامج التعليميبواسطة Learn Code Academy

إعادة البرنامج التعليمي للمبتدئين من فالنتينو جاجلياردي

رد فعل Redux بواسطة CSS Tricks

هذه البرامج التعليمية أكثر من كافية لبدء استخدام Redux. ومع ذلك ، لا يمكنني مقاومة ذكر البرنامج التعليمي أدناه أيضًا. انه يستحق ذلك :)

البدء مع Redux بواسطة Dan Abramov

مصادر

رد فعل رائع

إذا أعجبك المقال ، فلا تنس مشاركته :)