فتح ندوة عبر الإنترنت "إنشاء تطبيق على Webpack + React + Express"

مرحبا بالجميع!

في يوليو 2018 ، عقد مدرسنا في دورة مطوري JavaScript ، Yuri Dvorzhetsky ، ندوة مفتوحة على الويب حول موضوع "إنشاء تطبيق على Webpack + React + Express" ، ومع ذلك ، كجزء من الدورة الثانية ، حيث يعمل كمدرس في إحدى الوحدات المخصصة لـ JavaScript. في هذه المادة ، يمكنك التعرف على الفيديو وإعادة سرد موجز للفئة الرئيسية السابقة.

تم عمل الدرس المفتوح وفق الخطة التالية:

1. تقديم Node JS و Express JS.
2. نقدم لكم Webpack.
3. إدخال رد فعل.

لذا دعنا نذهب!

العقدة شبيبة

مع ظهور معيار ES6 الجديد ، زادت شعبية JavaScript بشكل ملحوظ ، كما يتضح من نفس الإحصائيات حول عدد طلبات السحب على GitHub لعام 2017 ، حيث تحتل JS المركز الأول.

كان Node JS أحد برامج تشغيل JS ، وهو نظام أساسي برمجي يعتمد على محرك V8 (ترجمة جافا سكريبت إلى رمز آلة) وتحويل جافا سكريبت من لغة متخصصة للغاية إلى لغة للأغراض العامة. كثير من الناس يسمون جافا سكريبت Node JS "من جانب الخادم" ، ولكن هنا يكون تعريف "الخادم" بدلاً من "الخادم" هو الأنسب على سبيل المثال ، تتمتع Node JS ببيئة غنية جدًا ، بما في ذلك مدير الحزم الخاص بها المسمى npm ، والذي يمكنك تشغيله بأمان على جهازك (المستودع متوفر على npmjs.com). وهذا ليس مدير الحزم الوحيد ، فهناك آخرون. ملف التكوين هو package.json ومن السهل تخمين تكوينه بتنسيق JSON.

كجزء من مقدمة Node JS ، طُلب من المستخدمين إكمال الخطوات التالية:

• قم بتنزيل NodeJS من الموقع الرسمي nodejs.org/en/ ؛
• التثبيت على جهاز الكمبيوتر والتحقق من الإصدار ؛
• تأكد من أن العقدة –v تعمل في وحدة التحكم.

الخطوة التالية هي إنشاء مشروع Node JS الأول. يمكنك القيام بذلك بإحدى طريقتين:

• أمر npm init (تابع الموافقة على كل شيء بالضغط على مفتاح الإدخال) ؛
• عن طريق تنزيل المستودع من الرابط الموجود على GitHub وتقديم الأمر git checkout 0.

الخطوة التالية هي التعرف على Express JS.

التعبير عن شبيبة

Express JS هو خادم ويب شهير لبيئات Node JS. من حيث Python ، إنه شيء مثل Django ، هناك فقط ، في الواقع ، لا يوجد سوى طرق REST. تعتبر Express JS مثالية لإنشاء خدمات REST التي تقبل JSON وترسلها ، ولكنها بشكل عام زاهدة تمامًا ، لذلك يتم قبول كل ما تحتاجه ، كما يقولون ، "ثمل". بالمناسبة ، يتم إجراء خوادم الويب الأخرى أيضًا على أساسها. في هذه الحالة ، عليك أن تفهم أن Express هو شيء يشبه الارتباط الوسيط (الوسيطة) ، والذي لا يزال بحاجة إلى تكوينه وملؤه بالمنطق.
كجزء من البرنامج التعليمي على الويب ، تم تثبيت Express JS باستخدام الأمر npm install express مع إضافة رمز التبديل - حفظ. يمكنك أيضًا تسجيل الخروج في git (git checkout 1) مع تثبيت npm. نتيجة لذلك ، تم إنشاء مجلد / مجلد node_modules ، وتغيرت محتويات package.json (ظهرت التبعيات المقابلة).

بعد العمل التحضيري ، حان الوقت لكتابة الخادم نفسه:

1. إنشاء ملف /server.js في جذر المشروع.
2. وضع فيه كود معين مكتوب بلغة جافا سكريبت. الغرض من هذا البرنامج النصي هو:

- التعبير عن العقدة "الغامضة" / ؛
- إضافة معالج إلى URL / ؛
- تشغيل Node JS (باستخدام الأمر node server.js أو npm start).

يمكنك أيضًا التحقق من العلامة رقم 2 (git checkout 2).

شبيبة ، ES6 والترجمة

كما ذكرنا سابقًا ، ES6 هو معيار JS الحالي. إنها مجموعة من الميزات التي لا يدعمها أي متصفح بشكل كامل (جزء فقط من المجموعة مدعوم). ونتيجة لذلك ، يطرح السؤال: ماذا لو كنا نريد الكتابة على ES6 الحديث ، ويدعم فقط ES5.1 في المتصفحات؟ هنا يأتي الإنقاذ للإنقاذ. فكرته كما يلي:

1. لدينا كود مكتوب بلغة ES6 ؛
2. نقوم بتجميعها (يتم تحويل ES6 إلى ES5.1) ؛
3. يمكن وضع JS-ku الناتج على صفحات المتصفح.

ونتيجة لذلك ، يصبح من الممكن استخدام ليس فقط ES6 ، ولكن أيضًا لهجات وإضافات مختلفة ، وبالتالي زيادة قوة JS ، على سبيل المثال:

• "مكتوب" JavaScript TypeScript (TS) ؛
• JSX - XHTML في JS (إطار التفاعل) ؛
• تدفق - مدقق نوع ثابت.

بابل هي واحدة من أكثر الشعارات انتشارًا وقوة. كان هو الذي استُخدم لحل مشاكل الدرس المفتوح.

فوائد التجميع:

• يمكنك جمع جميع ملفات JS في حزمة واحدة ؛
• يمكن تقليل الحزم وتعتيمها ؛
• يمكنك تشغيل LESS-> CSS في وقت واحد ، إلخ.

حزمة الويب

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

على سبيل المثال ، تم عرض webpack.config.js لمستمعي الويبينار وتم فحص كل سطر من الملف بالتفصيل لفهم المصطلحات ككل.

والخطوة التالية هي إنشاء عميل باستخدام React و Webpack المهيئين مسبقًا (npx ، عميل تفاعل بسيط أو أمر git checkout 3 للأشخاص البطيئين). بعد ذلك ، يمكنك الانتقال إلى عميل / مجلد القرص المضغوط الذي تم إنشاؤه بهذه الطريقة وفتح ملف webpack.config.js ، والذي تم عرض جزء منه قبل ذلك بقليل.

رد فعل

تدريجياً ، حان الوقت للتعرف على React - مكتبة JavaScript مفتوحة المصدر لتطوير واجهات المستخدم.

لإلقاء نظرة أولية على React والاندماج "البسيط" في بيئتها ، طُلب من الطلاب فتح Client / src / index.js ، وإذا لم يحدث شيء ، افتح client / src / element / app.js.
جوهر React هو JSX. هذه لهجة من JS و XHTML مكتوبة في JS. على الرغم من حقيقة أنه يمكن استخدام React بدون JSX ، فإن كل قوته موجودة بدقة في JSX. أما بالنسبة لـ React نفسها ، فهي واحدة من أكثر الأطر شيوعًا وفقًا لـ Hackernoon ، بناءً على نهج مكون. لديها عدد كبير من حزم الدعم والبنية التحتية الضخمة. التطبيق نفسه عبارة عن مجموعة من المكونات التي تحتوي على ترميزها وسلوكها.

ميزات رد الفعل:

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

بعد التعرف على React ، استمر الجزء العملي من الندوة عبر الإنترنت ، ونتيجة لذلك تم اتباع الخطوات التالية:

1. تشغيل webpack في مجلد العميل (client / npm run dev) ؛
2. كتابة المكون البسيط الخاص بك وفقًا لتعليمات المعلم أو من خلال git checkout 4 (تعذر إيقاف Webpack).

بعد ذلك ، طُلب من الطلاب استخدام كائنات الدعائم والقيام بعرض نموذجي (git checkout 5).
الفروق الدقيقة في الدعائم:

• تحتوي على خصائص المكونات
• لا يمكنك فقط نقل السلاسل ، ولكن أيضًا الكائنات.
• من الناحية المثالية ، يعتمد الاتصال على خط مكون التفاعل دائمًا على الدعائم.

في المرحلة الأخيرة من التدريب العملي ، تم توصيل الواجهة الخلفية وخادم الويب (git checkout 6).

النهاية

شكرا لكم على اهتمامكم ، وكالعادة نحن في انتظار تعليقاتكم واقتراحاتكم.