مقدمة

أولاً ، أقدم نفسي ، اسمي إيديك ، أنا مطور ويب Full Stack. الاتجاهات الرئيسية لـ Laravel & React.js، Vue.js. تعلم GoLang و Swift.

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

لتنظيم البيانات ، سيتم تقديم المعلومات على شكل سلسلة من المقالات مقسمة إلى فصول .

أكتب هذه الملاحظات لنفسي وقررت مشاركتها مع العالم كله. لذلك لا تكن قاسيا. وهكذا ، دعنا نذهب!

الفصل 1. مرحبا بكم في رد فعل

React هي مكتبة شائعة تُستخدم لإنشاء واجهات مستخدم . تم إنشاؤه على Facebook لحل عدد من المشاكل المرتبطة بالمواقع واسعة النطاق.

تفاعل كمكتبة

من الجدير بالذكر أن المكتبة ليست كبيرة الحجم وتستخدم فقط لجزء واحد من العمل بأكمله. القرارات الرئيسية حول أدوات النظام البيئي التي يتم استخدامها بواسطة المطورين. رد فعل هو الوحيد "V" في عالم "MVC" .

بناء جديد ECMAScript

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

جافا سكريبت شائع وظيفيا

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

قبل أن تبدأ في العمل مع React ، أوصي بأن تتعرف على أساسيات نموذج البرمجة الوظيفية.

جافا سكريبت مملة

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

مستقبل مكتبة رد فعل

سيتضمن الإصدار التالي من المكتبة أداة Fiber - تطبيق جديد لخوارزمية React الأساسية ، التي تهدف إلى زيادة سرعة عرض الصورة على الشاشة . ترتبط العديد من التغييرات بالأجهزة المستهدفة. لا تنس أن React لا يزال يستخدم في React Native.

العمل مع الملفات

رد فعل أدوات المطور

هناك العديد من الأدوات التي يمكن تثبيتها كإضافات أو وحدات متصفح إضافية وتكون ذات فائدة لنا:

React-detector هو امتداد لمتصفح Chrome يتيح لك معرفة المواقع التي تستخدم React .

show-me-the- response أداة أخرى للكشف عن التفاعل .

React Developer Tools عبارة عن وحدة إضافية تعمل على توسيع وظائف أدوات المتصفح . ينشئ علامة تبويب جديدة في أدوات المطور حيث يمكنك عرض عناصر التفاعل بالتفصيل .

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

قم بتثبيت Node.js

Node.js - لغة JavaScript بدون متصفح (JS من جانب الخادم). هذه هي بيئة وقت التشغيل المستخدمة لإنشاء تطبيقات JavaScript على كل من العميل والخادم . يمكن تثبيته على أنظمة التشغيل Windows و MacOS و Linux والأنظمة الأساسية الأخرى.

يمكنك العثور على تفاصيل التثبيت على موقع Node.js الرسمي.

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

للتحقق مما إذا تم تثبيت العقدة في النهاية الطرفية ، أدخل node -v . يجب أن تشاهد نسخة العقدة الخاصة بك.

 $ node -v v.10.13.0 

بديل للآلية الوقائية الوطنية

البديل الإضافي لـ NPM هو الغزل . تم إصدار هذه الأداة بواسطة Facebook بالتعاون مع Exponent و Google & Tilde. يساعد على إدارة تبعيات التطبيق بشكل أكثر موثوقية . عند العمل مع Yarn ، ستلاحظ أنه أسرع من NPM.

تثبيت الغزل سهل للغاية. بعد تثبيت العقدة ، أدخل:

 $ npm install -g yarn 

يمكنك العثور على تفاصيل التثبيت على موقع Yarn الرسمي.

وبعد ذلك ، سيكون كل شيء جاهزًا لتثبيت الحزم. عند تثبيت التبعيات من packege.json ، يمكنك تشغيل الغزل بدلاً من npm install .

إضافة حزمة باستخدام غزل:

 $ yarn add [_] 

إزالة حزمة باستخدام الغزل:

 $ yarn remove [_]