رد الفعل: دليل المبتدئين الكامل الخاص بك لاستخدام ReactJS

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

ما هو ReactJS؟

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

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

موصى به لك: 5 نصائح مهمة لتحسين أداء تطبيق React Native.

لماذا تستخدم ReactJS؟

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

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

تثبيته في المستعرض

قبل أن تتمكن من استخدام React في متصفح ، تحتاج إلى تثبيته. لحسن الحظ ، إنها عملية بسيطة بفضل npm و Browserify. باستخدام العقدة أو بيئة أخرى من جانب الخادم؟ يمكنك أيضًا استخدام npm و Browserify لذلك أيضًا. بمجرد تثبيت كل شيء ، قم بإنشاء ملف HTML باستخدام محرر النصوص المفضل لديك. بخلاف ذلك ، استخدم مُنشئًا معياريًا مثل Create-React-App الذي ينشئ مشروعًا مبدئيًا أساسيًا لك والذي تم بالفعل إعداد كل هذه الأشياء.

تحويل App.js لاستخدام ReactJS

كل الكود الخاص بنا موجود حاليًا في ملف واحد يسمى App.js. لكن هذا يجعل من الصعب اختبارها. لذا ، دعنا نقسمها إلى ملفات متعددة. سنبدأ بتحويل مكون واحد من مكتوب في ES6 إلى مكتوب في JSX. يكون الأمر أسهل إذا احتفظنا بجميع مكونات React الخاصة بنا في دليل واحد (وهو ما يجب عليك فعله). لذلك ، دعنا ننشئ دليل src / Components فارغًا وننقل App.js إليه: mv app / App.js src / element / app-reaction.js. ثم أعد تسميته إلى app-reaction.js.

لاستخدام React بدلًا من ES6 فقط ، غيّر استخدام strict ؛ في الجزء العلوي من الملف الخاص بك لاستخدام بابل ؛ ستحتاج أيضًا إلى تثبيت Babel عبر تثبيت npm –save babel-CLI babel-preset-es2015 babel-preset-reaction ، مما سيجعل Babel يترجم بناء جملة JSX الجديد.

ابدأ البناء باستخدام نموذج التطبيق الخاص بنا

هناك العديد من الطرق لبدء استخدام React ، ولكن إحدى الطرق المفضلة لدينا هي إنشاء تطبيق To-Do List بسيط. لتحريكك بسرعة وتجنب العديد من الأخطاء الشائعة ، قمنا ببناء نموذج تطبيق حيث كل ما عليك فعله هو تبديل التعليمات البرمجية الخلفية ومكونات الواجهة الأمامية. تأتي مجهزة بكل ما تحتاجه - بما في ذلك الصور - للتأكد من أنها تبدو جيدة كما تعمل.

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

مثال أساسي عن استخدام المكونات

إذا نظرت إلى أي تطبيق ويب ، فإن أول ما ستلاحظه هو أن كل عنصر منفصل. في صفحة نموذجية ، توجد رؤوس وتذييلات وشعارات وأزرار مختلفة. ومع ذلك ، عند العمل مع React.js ، بدلاً من استخدام عناصر HTML متعددة لكل مكون في صفحتك ، يمكنك استخدام عنصر HTML واحد لتمثيلها جميعًا. قد يبدو هذا غير بديهي. بعد كل شيء ، أليس هذا ما كنا نفعله منذ سنوات؟

قد ترغب في: Facebook JavaScript Engine (Hermes) Boosts React Native على Android.

مقدمة في بناء جملة JSX

JSX ليست لغة برمجة مثل JavaScript أو TypeScript ، ولكنها بناء جملة تم تصميمه كملحق لجافا سكريبت. لهذا السبب ، من المهم للمطورين الجدد فهم كيفية عملها وأين يمكنك استخدامها. تمت كتابة كود JSX بطريقة تشبه إلى حد كبير HTML ، مما يجعل كود JSX خطوة أولى رائعة للمطورين الجدد الذين يتعلمون اللغتين في وقت واحد. لمزيد من المعلومات حول ما يجعل JSX فريدًا وكيف يمكنك إتقانه بسهولة ، اقرأ البرنامج التعليمي الكامل لـ ReactJS!

لبدء بناء مشروع React الأول ، أنشئ دليلًا جديدًا عن طريق كتابة mkdir reaction_tutorial داخل جهازك. بمجرد الانتهاء من تشغيل ذلك ، انتقل إلى الدليل الذي تم إنشاؤه حديثًا عن طريق كتابة cd reaction_tutorial. ثم افتح الجهاز الطرفي وابدأ تشغيل Node.js بكتابة node -v.

يجب أن ترى v10.x مدرجًا بجوار Node إذا كان لديك Node مثبتًا بنجاح. إذا لم يكن الأمر كذلك ، فحاول استخدام nvm install 10 إذا كنت تستخدم macOS أو Linux. إذا لم ينجح ذلك أيضًا ، فيجب أن تكون Google قادرة على المساعدة في اكتشاف الخطأ الذي يحدث هناك! بمجرد تثبيت Node بشكل صحيح مع الإصدار 10+ ، نحن على استعداد للمضي قدمًا في إنشاء مشروعنا من البداية!

Static مقابل Dynamic مقابل PureComponent

عند إنشاء تطبيقات ويب باستخدام JavaScript حديث ، لديك ثلاثة خيارات رئيسية لإنشاء مكونات واجهة المستخدم. يتضمن ذلك HTML الثابت (ترميز التفاعل) وطلبات AJAX الديناميكية (بيانات التفاعل) وإعادة استخدام عناصر DOM الموجودة (تفاعل-خالص). كل طريقة لها مزاياها الخاصة ويمكن تطبيقها بشكل مختلف حسب حالة الاستخدام المحددة الخاصة بك.

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

طرق دورة الحياة في مكونات ReactJS

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

حالة المناولة في المكونات

الطريقة التي تتعامل بها Reacts مع إدارة الحالة فريدة إلى حد ما. لفهم سبب وجوب التفكير أولاً في كيفية تعامل معظم الأطر مع الدول.

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

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

تمرير البيانات من المكون الرئيسي إلى المكون الفرعي

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

قد يعجبك أيضًا: ما هي التحسينات التي تقدمها React JS في WordPress بلا رأس؟

خاتمة

عندما تقوم بتعيين مطور ReactJS ، تأكد من اختيار مترجم مستقل لديه خبرة في العمل مع JavaScript و CSS و HTML و Node.js لأكثر من 5 سنوات. من المهم أن يتمكن المطور لديك من إظهار خبرته من خلال تقديم نماذج للمشاريع وتصميم المشاريع ذات الصلة بمتطلباتك الخاصة. سيساعدهم ذلك على فهم أهداف وغايات عملك بسهولة.

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

 هذا المقال بقلم راهول كالساريا من شركة Tagline Infotech LLP.