رد فعل البرنامج التعليمي الجزء 3: ملفات المكون ، هيكل المشروع

في هذه المقالة ، سنتحدث عن ملفات المكونات وهيكل مشاريع React.



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر

الدرس 8. ملفات المكونات ، هيكل مشاريع التفاعل

→ الأصل

Compon ملفات المكونات

إذا افترضنا أنك قمت بالمهمة من خلال الدرس العملي السابق باستخدام المشروع القياسي الذي تم إنشاؤه بواسطة create-react-app ، فإنه يستخدم ملف index.html من المجلد public ، ومحتوياته التي index.js وملف index.js من مجلد src ، الذي نكتب فيه الكود. على وجه الخصوص ، يبدو index.js الآن كما يلي:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

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

يتم إعطاء ملفات المكونات أسماء متوافقة مع أسماء المكونات التي تخزن ملفاتها هذه الكود. ضعها ، في حالة create-react-app ، في نفس مجلد src حيث يوجد ملف index.js . باستخدام هذا الأسلوب ، سيتم تسمية الملف مع مكون MyInfo MyInfo.js .

قم MyInfo.js ملف MyInfo.js ونقل رمز مكون MyInfo إليه وإزالته من index.js .

في هذه المرحلة ، سيبدو index.js كما يلي:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

سيكون رمز MyInfo.js كما يلي:

 function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } 

هذا هو كيف يبدو كل شيء في VSCode.


نقل رمز المكون إلى ملف جديد

لقد قمنا بنقل رمز المكون من index.js ، لكن البنية التي لدينا الآن لا تزال غير صالحة للعمل.

أولاً ، تذكر ما هو الأمر index.js أمر import React from "react" في index.js ، على الرغم من أننا لا نصل إلى React مباشرة هنا. سبب ذلك هو أنه بدون استيراد React ، لن تعمل آليات هذه المكتبة ، على وجه الخصوص ، JSX. بفضل أمر الاستيراد هذا ، تمكنا ، في الفصول السابقة ، من تمرير رمز ReactDOM.render() أسلوب ReactDOM.render() وإخراج علامة HTML التي تم إنشاؤها على أساسها إلى الصفحة. كل هذا يعني أننا في ملف MyInfo.js نحتاج أيضًا إلى استيراد React. هذه ممارسة شائعة لملفات المكونات.

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

 import React from "react" function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } export default MyInfo 

الآن دعونا نعمل على ملف index.js . وهي نحتاج إلى أن يتوفر مكون MyInfo في هذا الملف. يمكنك إتاحته في index.js استيراده.

ماذا لو حاولت كتابة أمر استيراد مكون استنادًا إلى react-dom استيراد index.js react react-dom في index.js ؟ على سبيل المثال ، أضف أمر الاستيراد التالي إلى الملف:

 import MyInfo from "MyInfo.js" //  

سيبحث النظام ، بعد رؤية مثل هذا الأمر ، بالاعتماد على حقيقة أنه لا يحتوي على معلومات حول المسار النسبي للملف ، على تبعية المشروع - الوحدة النمطية التي تحمل الاسم المحدد عند تسمية هذا الأمر ( فيما يلي كيفية تثبيت التبعيات في المشروعات التي تم إنشاؤها باستخدام create-react-app ؛ يمكن بعد ذلك استيراد هذه التبعيات إلى مشاريع React بنفس طريقة استيراد مكتبة React). لن تجد مثل هذه الوحدة ، ونتيجة لذلك ، لن يعمل أمر الاستيراد. لذلك ، يجب إعادة كتابة أمر استيراد الملف مع المسار إليه. في هذه الحالة ، نحن راضون عن إشارة الدليل الحالي ( ./ ) وسيأخذ أمر الاستيراد النموذج التالي:

 import MyInfo from "./MyInfo.js" //  

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

 import MyInfo from "./MyInfo" //  

عادة ، كتابة أوامر استيراد ملف JS بهذه الطريقة.

هنا هو index.js الملف index.js الكامل.

 import React from "react" import ReactDOM from "react-dom" import MyInfo from "./MyInfo" ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

▍ هيكل المشروع

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

إنشاء مثل هذا المجلد ونقل ملف MyInfo.js فيه. بعد ذلك ، ستحتاج إلى تحرير أمر الاستيراد لهذا الملف في index.js .

أي ، يشير المسار إلى MyInfo.js إلى أن هذا الملف موجود في نفس المكان مثل index.js ، ولكن في الواقع يوجد هذا الملف الآن في مجلد components الموجود في نفس المجلد مثل index.js . نتيجة لذلك ، فإن المسار النسبي لذلك في index.js سيبدو كما يلي: ./components/MyInfo . هنا هو رمز index.js المحدث:

 import React from "react" import ReactDOM from "react-dom" import MyInfo from "./components/MyInfo" ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

وهنا كيف يبدو كل شيء في VSCode.


مجلد لتخزين المكونات واستيراد مكون من هذا المجلد إلى VSCode

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

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

ملخص

في هذا الدرس ، تحدثنا عن تنسيق كود المكون كملفات منفصلة ، تصدير واستيراد الكود باستخدام ES6 ، وبنية مشاريع React. في المرة القادمة سوف نستمر في التعرف على قدرات المكونات.

أعزائي القراء! نسأل مطوري React ذوي الخبرة لتبادل الأفكار مع القادمين الجدد فيما يتعلق بتنظيم هيكل المشروع.