تثبيت React.js على نظام Mac

البرنامج عبارة عن مكتبة JavaScript أمامية مجانية ومفتوحة المصدر. في عام 2013 ، تم تأسيس React.JS بواسطة Facebook.

إنها مكتبة واجهة مستخدم (UI) تُستخدم لإنشاء مكونات واجهة المستخدم ومعالجتها. إنها حزمة تتيح للمطورين إنشاء تطبيقات SPA عالية الكفاءة تعتمد على البيانات.

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

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

دعونا نستكشف بعض المصطلحات من قبل-

NodeJS و NPM

• تحتاج أولاً إلى تثبيت NodeJS و NPM للحصول على تثبيت React على Mac.
• إنه محرك JavaScript يسمح لك بتشغيله خارج المتصفح.
• يتم استخدام NPM (مدير حزمة العقدة) في سطر الأوامر. هو تثبيت مكتبات مثل ReactJS.
• يمكنك تثبيت NodeJS من خلال موقعه الرسمي على الإنترنت. عند تثبيت NodeJS ، سيقوم أيضًا بتنزيل NPM نيابة عنك.
• بعد تنزيل NodeJS من موقع الويب الخاص بهم ، ابحث عن ملف ".pkg". ببساطة انقر نقرًا مزدوجًا فوق هذا. سيطلق نافذة منبثقة للتثبيت.
• سيتم توجيهك إلى عملية التثبيت. انقر فوق "تثبيت" أو "تعديل موقع التثبيت"
• عند اكتمال العملية ، ستتم مطالبتك برسالة أخيرة. تم تثبيت NodeJS و NPM.

تثبيت ReactJS على نظام MacOS

بعد تثبيت NodeJS و NPM ، يمكن تثبيت ReactJS. يتم ذلك عن طريق تنفيذ تثبيت npm - حفظ رد فعل رد فعل.

أنشئ مشروع ReactJS

نظرًا لأننا قمنا بتثبيت ReactJS ، يمكن للمرء إنشاء دليل مشروع رد فعل جديد. يتم ذلك عن طريق تشغيل npx create response project. إنشاء رد فعل التطبيق.

رد فعل- مقدمة

قبل الشروع في تثبيت React-Lib على نظام التشغيل Mac ، يجب أن نكتسب أولاً فهمًا أساسيًا لـ React.

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

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

خلف الكواليس ، يخضع مستند HTML لعملية تحويل تسمح بمشاركة الصفحة المعدلة.

كما ذكرنا سابقًا ، تمثل شجرة DOM مستند HTML. في الحالة السابقة ، يتطلب DOM بعض التعديلات ، والتي تشمل إدراج وحذف عقد HTML معينة.

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

قرار الشراء.

قد نرى DOM كشجرة لفهمها بشكل أفضل.

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

هناك عقوبة ذاكرة مرتبطة بعملية الإدراج والحذف هذه على HTML DOM. فيما يتعلق بعمليات تحديث DOM ، يعمل DOM الظاهري كمحسِّن للأداء.

يحتفظ بنسختين: واحدة من DOM الحقيقي (رد فعل DOM) وواحدة من التحديثات التي يتعين إجراؤها. يتم أيضًا البحث في عملية تقليل التعديل على كائن DOM التفاعلي كجزء من عملية التسوية.

Node.js & npm

يقوم Node.js بتنفيذ كود JavaScript. إنه مفتوح المصدر وعبر النظام الأساسي لبيئة وقت تشغيل JavaScript. يتم تشغيله بواسطة محرك Chrome V8. محرك Chrome V8 مكتوب بلغة C ++. Node متوافق مع Windows و Mac و Linux.

بعد تثبيت Node.js ، قد نقوم بتنفيذ التطبيق المستند إلى React محليًا على نظامنا أثناء التطوير. يسمح لنا هذا أيضًا بنشر برنامجنا على خادم الإنتاج.

يتضمن Node.js الميزات التالية:

• يستخدم JavaScript كلغته الأساسية
• الإدخال / الإخراج غير المحظور
• يدعم البرمجة غير المتزامنة
• يمكن إدارة العديد من طلبات الاتصال باستخدام خادم واحد.

Npmjs.org هو مستودع أكواد عبر الإنترنت لآلاف الوحدات (npm) يسمح لنا بتثبيت وحدات العقدة باستخدام أوامر بسيطة.

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

بدلاً من إنشاء وظائف من البداية ، يمكننا البحث عن وحدة وإعادة استخدامها وتوسيع وظائفها.

عادة ما تتضمن مبادرات المطورين قيودًا على الوقت والميزانية. عندما يتعلق الأمر بـ Node. يعد npmjs.org بمثابة شريان حياة لمجتمع المطورين.

لتلخيص

في هذا البرنامج التعليمي ، تعرفنا على React.js ونهج العمارة القائمة على المكونات في React.js. لقد حصلنا أيضًا على نظرة عامة عالية المستوى على DOM الافتراضي.

ناقشنا مفهوم التسوية ، واستخدام Node.js في عالم JavaScript ، وقدرته على إدارة مخرجات الإدخال / الإخراج غير المحظورة لتلبية طلبات اتصال العميل بشكل متزامن.

اختبرنا طريقتين لتثبيت Node.js: واحدة مع إدارة الحزم والأخرى بسطر الأوامر.

للبدء بسرعة في استخدام React.js ، استخدمنا وحدة إنشاء التطبيق. يمكننا أيضًا استخدام سطر الأوامر لتثبيت React.js.

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

اقرأ أيضا:

• فيروسات ماك على قيد الحياة اقتلهم وعيش في هدوء!