تعلم React بالطريقة الصحيحة

ما هي React؟

React هي مكتبة JavaScript مجانية ومفتوحة المصدر لبناء واجهات مستخدم معقدة من خلال تقسيم التطبيق الخاص بك إلى مكونات أصغر. تتم صيانتها بواسطة Facebook ومجتمع من المطورين.

 

المتطلبات المسبقة لتعلم React

قبل تعلُّم React أو محاولة تعلُّم React ، أود أن أقول يجب أن تتعرَّف على HTML و CSS و JavaScript. يمكنك تعلُّم HTML و CSS في غضون 2-3 أسابيع حيث تُستخدَم لإنشاء تخطيطات لتطبيق الويب الخاص بك. يستغرق جافا سكريبت بعض الوقت للتخفيف لأنها لغة برمجة. اقض شهرًا أو شهرين على الأقل في تعلم JavaScript. لا تتعلم فحسب ، بل أنشئ أيضًا مشاريع صغيرة لتنفيذ المعرفة التي اكتسبتها. يمكنك إنشاء بعض المشاريع الصغيرة مثل قوائم مهمات، حاسبة، الخ...

جافا سكريبت

أثناء تعلم JavaScript ، عليك تجنب بعض الأخطاء التي ارتكبتها. عندما كنت أتعلم JavaScript ، اعتقدت أنه يجب أن أصبح سيدًا مطلقًا في JavaScript لكتابة رمز React (وهو أمر غير منطقي). لقد بدأت في تعلم المفاهيم المتقدمة (رغم كوني مبتدئ) ، وحين فشلت في ذلك اعتقدت أنني لست جيدًا بما يكفي. لكن دعني أخبرك ، كمبتدئ ، عليك أن تتعلم ما يكفي فقط ، حتى تتمكن من إنشاء مشاريع أساسية في Vanilla JavaScript. إليك بعض الموضوعات التي يجب تعلمها وفهمها بعمق هي:

• المتغيرات
• الشروط if / else / switch
• الفرق بين var و let & const
• الدوال
• المصفوفات
• أمور متعلقة بالمصفوفات مثل filter, map, reduce  الخ
• مفاهيم ES6
• Promises الوعود
• عمليات الاسترجاعات Callbacks
• غير متزامن / متزامن Async/await
  
• الفئات classes ومفاهيم OOPs
• التعامل مع واجهات برمجة التطبيقات، لا تتعلم فحسب ، بل تطبق !! 

 

React

في هذا الوقت ، عندما تكون قد تعلمت أساسيات JavaScript ، فقد حان الوقت لتغوص في React. يمكنك البدء في تعلم React من خلال إلقاء نظرة على React Official Docs أو من خلال أخذ دروس React الرسمية للحصول على فكرة عن كيفية عمل React. تمت كتابة مستندات React بشكل جيد وهي تغطي أساسيات React. تعلم هذه الموضوعات جيدًا لفهم React بشكل أساسي.

• JSX
• المكونات (الوظيفية والفئة)
• دورة حياة المكون
  
• البيانات State
  
• الدعائم Props
• التعامل مع الأحداث
• نماذج Forms
  
• التحديث المشروط Conditional Rendering
• العمل مع واجهات برمجة تطبيقات الطرف الثالث. بمجرد أن تكتسب فهمًا لهذه الموضوعات ، فقد حان الوقت لإنشاء مشاريع من أجل تنفيذها. يمكنك إنشاء مشاريع جديدة أو إعادة صنع تلك التي قمت بإنشائها أثناء تعلم Vanilla JavaScript باستخدام React.

React Router

React router عبارة عن مكتبة لـReact  والتي ستساعدك على التنقل عبر صفحات مختلفة في تطبيق React الخاص بك. تعرف على كيفية تحميل محتوى صفحة معينة ، وتمرير المعلمات في عنوان URL ، وإعادة التوجيه وما إلى ذلك. أيضًا ، افهم أن جهاز توجيه التفاعل ليس جزءًا من React ، بل هو مكتبة توجيه مصممة لـ React.

أمور متقدمة في  React

لديك الآن فهم لأهم أمور الأساسية في React، لذا فقد حان الوقت لتعلم بعض المفاهيم المتقدمة مثل خطاف Hooks ، السياق Context الخ...

لذا  فالنلقي نظرة على مستندات React ونتعلم هذه المفاهيم.

• السياق Context
• Hooks
• حدود الخطأ Error Boundaries
• مكونات الترتيب الأعلى Higher Order Components
  
• تقسيم الكود Code Splitting
  
•  المراجع refs
• إعادة توجيه المراجع Forwarding Refs
• تقديم الدعائم Render props
  

بعض الأمور الاضافية!

يمكنك أيضا معرفة بعض المكتبات إضافية مثل reactstrap ، tailwindcss ، material UI الخ، ومرة ستساعدك هذه المكتبات كثيرا  مع React . ومع ذلك ، فإن تعلم كل شيء ليس إلزاميًا ، يمكنك تجربته وتعلمه بمجرد الانتهاء من أساسيات React ويمكنك إنشاء مشاريع.

مبروك

أنت الآن مطور React. عليك فقط صقل مهاراتك عن طريق إنشاء مشاريع وزيارة React Docs كثيرًا وتعلم أشياء جديدة.

بعض المصادر لتعلم React

• React JS Crash Course 2021 by Traversy Media
• Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks By FreeCodeCamp
• Full Modern React Playlist by The Net Ninja

بعض النصائح المفيدة

• لا تحاول أن تتعلم كل شيء في وقت واحد ، افهم وتقبل حقيقة أنك مبتدئ وتقضي وقتًا كافيًا لتعلم هذه المفاهيم.

• لا تخف من كتابةكود سيء . كما ذكرت سابقًا ، أنت مبتدئ ، في مرحلة ما يكون الجميع كذلك.

  تجنب الجحيم التعليمي 🤯 . يشير Tutorial Hell إلى المصطلح الذي تتبعه عند اتباع برنامج تعليمي بعد البرنامج التعليمي ، وتعتقد أنك تتعلم ، بينما في الحقيقة لا تتعلم شيئًا. إذا كنت تشاهد دروس Youtube ، فلا تشاهد الفيديو بعد الفيديو فقط. أدرك أنك عالق في Tutorial Hell وتوقف عن مشاهدة المزيد من مقاطع الفيديو وابدأ في إنشاء مشاريعك الخاصة.

• اجعل Google و StackOverflow والمقالات والمدونات أفضل صديق لك. ابدأ في البحث عن أسئلتك على Google ، فهناك احتمال كبير بأن مشكلتك / خطأك قد تم حله بالفعل بواسطة شخص آخر على الإنترنت.

 

ترجمة للمقال:  How to learn React - The Effective way -الكاتب: Shaan Alam