كيفية التنقل في النظام البيئي React.js دون أن تضيع

الصورة من قبل غاريت باركر

غالبًا ما يكون من الصعب العثور على مسار مباشر لتعلم شيء جديد في عالم تطوير البرمجيات. يجب أن تقرأ كتابا؟ اتبع تعليمي؟ مشاهدة الفيديو؟ استشر؟

مع وجود العديد من المسارات والخيارات الممكنة التي يمكنك اتخاذها ، أصبح من السهل الضياع.

تعلم React.js واضح ومباشر ، وكل ما يتطلبه الأمر هو معرفة المسار الذي يجب اتباعه.

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

فيما يلي بعض الأشياء التي أوصي بها أن تدرك جيدًا قبل البدء في تعلم React.

تصوير أليس دونوفان روس

تأكد من حصولك على بعض فهم HTML و CSS

إلى حد كبير ، سيتطلب كل تطوير ويب شكلاً من أشكال المعرفة لهذين الاثنين. إذا كنت مبتدئًا مطلقًا في هذه المساحة ، فنوصيك بمراجعة مقاطع فيديو Travis Neilson مثل HTML5 Basics و CSS Basics. ثم انتقل إلى freeCodeCamp.org أو codeacademy.com لبعض الممارسات.

يجب أن يكون هدفك النهائي هو اتخاذ تصميم أو بنية أساسية لصفحة ويب ، وتحويلها إلى رمز ، ورؤية بصرية ما كنت تأمل أن تبدو عليه. من الناحية المثالية ، سوف تبدو مشابهة جدًا للتصميم الخاص بك.

احصل على فهم جيد لجافا سكريبت نفسها

لا أوصي بمحاولة تعلم الأطر والمكتبات قبل أن تقضي بعض الوقت في تعلم لغة JavaScript أولاً. هناك كمية هائلة من الموارد لتعلم جافا سكريبت اعتمادًا على تجربتك.

للمبتدئين المطلقين ، لدى freeCodeCamp مجموعة رائعة من الموارد ، بما في ذلك قائمة تشغيل فيديو لجميع أساسيات JavaScript ومكان تفاعلي للتعلم والممارسة مباشرة على موقعه على الويب.

أفضل طريقة لتعلم الكود هي كتابة الكود!

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

إذا لم تكن متأكدًا من أنك تعرف JavaScript ، فأراهن أنك لا تعرف JS. إنها في الواقع سلسلة كتب شهيرة مفيدة لأولئك منكم الذين يتطلعون إلى فهم اللغة بشكل أفضل.

"عندما تسعى جاهدة لفهم الكود الخاص بك ، فإنك تنشئ عملًا أفضل وتصبح أفضل فيما تفعله. الرمز لم يعد عملك فقط ، بل هو حرفتك ".
- جين لوكاس

إلى جانب تعلم جافا سكريبت الأساسية ، ستحتاج أيضًا إلى فهم جيد لبعض ميزات ECMAScript 2015 (ES6)

على وجه التحديد ، ركز على فهم ما يلي:

  • وحدات (استيراد / تصدير)
  • اسمحوا و const
  • وظائف السهم
  • الطبقات
  • الإتلاف
  • بقية / انتشار

هذه مضمونة لتظهر في رمز React الخاص بك وفهمك لها سيسمح لك باستهلاك الوثائق بشكل أسهل بكثير.

للحصول على بداية سريعة ، أوصي بـ Cheatsheet ES6 لـ LearnCode.academy أو أحد موارد Babel.

تعلم كيفية استخدام Node Package Manager (npm)

قم بتثبيت Node.js وسوف يأتي مع npm مغلفة به. في الوقت الحالي ، تعد npm واحدة من أفضل الطرق لتنزيل تبعيات تطوير JavaScript.

على سبيل المثال ، سيسمح لك هذا الأمر البسيط بتثبيت وتنزيل تطبيق React للمشروع:

تثبيت npm - حفظ رد فعل

معظم ما تحتاج إلى معرفته في البداية هو كيفية تثبيت الحزم. سيؤدي هذا وحده إلى فتح مجموعة واسعة من الأدوات والمكتبات التي ستتيح لك إنجاز المزيد في وقت أقل.

(اختياري) تعلم أساسيات البرمجة الوظيفية

على الرغم من أنه ليس مطلوبًا تعلم React ، إلا أن فهم مفاهيم البرمجة الوظيفية الأساسية سيكون مفيدًا مرات عديدة في تطوير React.

أوصي بفهم تكوين الوظيفة ، والنقاء ، والوظائف العليا. الهدف هنا ليس أن تكون خبيراً في الموضوع ، بل أن تكون على الأقل معرضاً له. لمقدمة سريعة ، إليك حديث رائع من متحدث رائع. أو يمكنك التعلم مباشرة من صندوق الوارد الخاص بك إذا كنت تريد ذلك.

الصورة لوقا بامر
"كل قمة جبل في متناول اليد إذا واصلت التسلق".
- باري فينلي

بناءً على تجربتك في التطوير ، يمكنك تعلم أساسيات React في غضون ساعات قليلة إلى بضعة أيام. علاوة على ذلك ، لا يتطلب الأمر سوى تجربة أكثر قليلاً وستكون قادرًا على إنشاء تطبيقات في أي وقت من الأوقات.

كيف يعقل ذلك؟ حسنا…

بادئ ذي بدء ، لا تتعلم Redux أو المكتبات الأخرى حتى الآن

أكبر خطأ يرتكبه الكثير من الناس عند تعلم React لأول مرة هو البحث عن قالب بداية أو برنامج تعليمي يتضمن بالفعل Redux ومجموعة من المكتبات الأخرى فيه.

يسألني الناس غالبًا ما هي أفضل طريقة لتعلم "التفاعل" لسبب ما ، لا يحدث لهم أن الوثائق الرسمية هي في الواقع مكان رائع للبدء لأنه يركز على تعليمك فقط التفاعل.

نسيان الإعادة الآن. قد لا تحتاج حتى ذلك.

نسيان المكتبات وغيرها من المراجل.

"تعلم التفاعل عن طريق نسخ المراجل يشبه تعلم الطبخ عن طريق تناول الطعام في المطاعم الفاخرة. إنه لا يعمل. عليك أن تبدأ بالأساسيات وأن تتجاهل الخوف من الضياع. "- دان أبراموف

ركز على التفاعل و التفاعل بمفردك.

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

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

إليك أسهل طريقة للبدء

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

يتيح لك حرية التركيز على تعلم React من تلقاء نفسه دون الحاجة إلى القلق بشأن تعلم وإعداد Webpack و Babel ومختلف التكوينات الأخرى.

npm install -g create-react-app
إنشاء رد فعل التطبيق بلدي التطبيق
مؤتمر نزع السلاح بلدي التطبيق
npm البداية

سوف تحصل هذه الأوامر الأربعة البسيطة على كل ما تحتاجه لبدء مشروع. ويشمل الأدوات التي من شأنها تحديث المتصفح الخاص بك عند تغيير التعليمات البرمجية الخاصة بك.

كما يوفر الأمر build الذي سيقوم بتجميع التعليمات البرمجية الخاصة بك إلى عدد قليل من الأصول الثابتة التي يمكنك نشرها بسهولة في أي مكان ودليل مستخدم رائع سيرشدك خلال هذه العملية.

أفكر في إنشاء رد فعل التطبيق كنوع من مثل أحذية المشي لمسافات طويلة. لا تحتاج بالضرورة إلى رفع أحذية المشي لمسافات طويلة لتسلق الجبال ، لكن من المؤكد أنها ستساعد وقد تجعل من الأسهل تسلق أسطح معينة. وإذا أدركت أنك لا تحتاج إليها ، يمكنك دائمًا "إخراجها" من قدميك!

من خلال استخدام الأدوات ، دعنا نعود إلى مسار تعلم React.

إتقان أساسيات رد الفعل

تحقق من هذا المنصب الكبير على المفاهيم الرئيسية للرد. في الواقع ليس هناك الكثير من الأشياء التي تحتاج إلى تعلمها.

بشكل عام ، يجب أن تفهم ما يلي:

  • JSX: ما هو عليه ، وكيف يختلف عن HTML التقليدي ، وكيفية إعداده تعريفيًا للتعامل مع التغييرات الديناميكية
/ * لاحظ كيف يجب عليك استخدام className بدلاً من class
    وكيف يسمح التعبير الموجود داخل المشابك المجعدة بذلك
    التعامل بشكل حيوي مع أي اسم يتم تمريره عبر الدعائم * /

مرحبًا ، {this.props.name}

  • تعلم كيفية كتابة المكونات الوظيفية عديمي الجنسية. إليكم السبب.
/ / هذه هي في الحقيقة وظائف بسيطة فقط ترجع JSX
وظيفة MyComponent (الدعائم) {
   return 

مرحبًا ، {props.name}

؛ }
// بدلاً من ذلك ، اكتبها باستخدام وظائف السهم
const MyComponent = (props) => (

مرحبًا ، {props.name}

) ؛
  • تعرف على كيفية كتابة المكونات باستخدام بناء جملة فئة ES6. يتيح لك كتابة مكونات أكثر تعقيدًا مع إمكانية الوصول إلى خطافات دورة الحياة والدولة المحلية
الطبقة MyComponent يمتد React.Component {
   يجعل() {
     return 

مرحبًا ، {this.props.name}

؛    } }
  • تأكد من أنك تتمتع بفهم جيد للحالة وكيفية استخدامها بشكل صحيح. إن فهم إيجابيات وسلبيات استخدام الدولة المحلية لأحد العناصر سيمنحك اللبنات الأساسية للعقد والوقت المناسب لاستخدام حل إدارة الدولة المختلف.
  • تعلم كيفية كتابة واستخدام خطاطيف دورة حياة المكون ومتى قد يكون كل منها مفيدًا
الطبقة MyComponent يمتد React.Component {
   // زوجان من الأمثلة على السنانير التي كنت مضطرًا لاستخدامها كثيرًا:
   componentDidMount () {
     / * مفيدة لتهيئة أو تشغيل الأحداث بعد
          يتم عرض المكون إلى DOM * /
   }
   
   shouldComponentUpdate () {
     / * مفيدة لأغراض الأداء ومنع التكرار
          إعادة تقديم * /
   }
   
   componentWillReceiveProps () {
     / * مفيد عندما تحتاج إلى تشغيل التغييرات عند الدعائم الجديدة
          ادخل */
   }
   
   يجعل() {
     return 

مرحبًا ، {this.props.name}

؛    } }
  • تعلم كيفية استخدام PropTypes. إنها طريقة سهلة لإضافة بعض أنواع التحقق الأساسية إلى مكوناتك
استيراد PropTypes من "أنواع prop" ؛
الطبقة MyComponent يمتد React.Component {
   يجعل() {
     return 

مرحبًا ، {this.props.name}

؛    } } Greeting.propTypes = {    الاسم: PropTypes.string }؛

تعلم كيفية هيكلة التعليمات البرمجية الخاصة بك

بمجرد الانتهاء من الأساسيات ، سترغب في البدء في التفكير في كيفية تنظيم الكود.

النظر في مفهوم حاوية والعناصر العرضية. إن القيام بذلك سوف يساعدك على فهم كيفية الفصل بشكل أفضل بين الاهتمامات داخل كود رد الفعل الخاص بك.

إذا قررت دمج حل إدارة الحالة في المستقبل ، مثل Redux ، فإن مكونات Container ستساعد في هذا الانتقال. ستعرف أن معظم البيانات التي تم تمريرها حول التطبيق الخاص بك تأتي من حاويات.

إذا لم تكن بالفعل ، فكر أيضًا في بنية المجلد. عند بدء نمو قاعدة الكود ، ضع في اعتبارك مدى جودة بنية المجلد لديك.

هل من السهل العثور على الملفات؟

إذا كنت تعمل مع فريق ، فهل بإمكانهم معرفة حدسي أين توجد مكونات محددة؟

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

أنا لست مبرمجًا رائعًا ؛ أنا مجرد مبرمج جيد مع عادات عظيمة. "
- كنت بيك

بناء تطبيق يحل مشكلة حقيقية

أفضل طريقة حقيقية لفهم React بعمق هي بناء شيء معها.

حاول أن تبني شيئًا ما يحفزك فعليًا على العمل عليه وتجنب إنشاء أشياء ربما تعرفها بالفعل.

  • حاول تضمين نوع من البيانات الخارجية (ربما إجراء مكالمة api) ومعرفة كيفية الحصول على تلك البيانات لتدفق بشكل صحيح خلال التطبيق الخاص بك ، والاستفادة الكاملة من الحالة والدعائم
  • فكر في دمج جهاز التوجيه التفاعلي بمجرد الحاجة إلى امتلاك صفحات متعددة للتطبيق
  • استخدم بعض المكتبات المكونة للنهوض وتشغيلها بسرعة من خلال المظهر والمظهر الأساسيين. اعلم أن نظام جافا سكريبت المدهش هذا الذي لدينا مع npm و Github يتيح لك دمج المكونات الجاهزة للاستخدام بسهولة في تطبيقك
  • نشر التطبيق الخاص بك في مكان ما. هناك العديد من الطرق المختلفة التي يمكنك من خلالها نشر الشفرة مجانًا. جرب واحدة خارج. لا يوجد شيء أكثر برودة من رؤية نشر عملك على الإنترنت والقدرة على مشاركة هذا الرابط مع شخص آخر
صورة لكالين إيمسلي

إذا وصلت إلى هذا الحد ، فهذا رائع! ننظر إلى الوراء في التقدم المحرز الخاص بك وتكون فخور به.

متعطش للمزيد؟ إليك بعض النصائح.

اختبار التعليمات البرمجية الخاصة بك!

تأكد من معرفة كيفية اختبار التعليمات البرمجية الخاصة بك في أقرب وقت ممكن. استخدم Jest (أو عداء الاختبار المفضل لديك) والإنزيم.

Jest و Enzyme سهل التعلم إلى حد ما ويمكنهما بالفعل مساعدتك على فهم كيفية عمل مكوناتك بمعزل عن غيرها.

علاوة على ذلك ، تجعل الاختبارات رمزك أكثر أمانًا لإعادة تشكيل وتحسين ، بينما يعمل أيضًا كوثائق حيوية للمكونات الخاصة بك.

استخدام الإدارة المتقدمة للدولة

هل تشعر وكأن إدارة الدولة الخاصة بك مع setState أصبحت معقدة للغاية؟ هل تمرر الدعائم باستمرار إلى مستويات متعددة من المكونات المنحدرة؟

حان الوقت لتعلم الإعادة أو نكهة أخرى من الجريان! ستحتاج إلى فهم الفوائد التي يجلبها نظام إدارة الحالة إلى الطاولة ، ومتى أو متى لا تستخدمها.

لا تكرر نفسك

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

الصورة بواسطة جوستين لوبكي

التسوية حتى

في الواقع ، القائمة لا تنتهي أبدا.

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

إذا ركزت على الأساسيات وقمت بمعظم ما سبق ، فأعتقد أنك ستكون على طريق جيد ليس فقط مع React ، ولكن أيضًا في تطوير الواجهة الأمامية وجافا سكريبت بشكل عام.

جافا سكريبت النظام البيئي يتغير باستمرار. تبقي نفسك في عقلية التعلم المستمر. استمر في تجربة الأشياء واكتشف ما هو الأفضل لك.

للمضي قدماً ، ستساعد تجربتك في إرشادك بشأن ما يجب القيام به بعد ذلك.

شكرا للقراءة! إذا وجدت هذه المشاركة مفيدة ، فقم بإفلات بعض هذه المشاركة حتى يتمكن الآخرون من العثور عليها!