ابدأ مع React


الدرس: ابدأ مع إنشاء تطبيق React


الصفحة السابقة
لقد بدأت في إتقان أساسيات و كيفية عمل React؟ جيد جدا ! سنمر إلى المستوى الأعلى في هذا الجزء ، لنبني أول تطبيق كامل لدينا.

اكتشف Create React App (CRA)



python

فهم أهمية الأدوات الآلية


تعلمنا كيفية استخدام روابط CDN الخاصة بـ React و ReactDOM وإعداد Babel في CodePen لإنشاء تطبيق React بسرعة. لكن هذه التقنية نادراً ما تستخدم في الحياة اليومية للمطور.

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

  • إدارة التبعيات المختلفة (المكتبات) التي يستخدمها تطبيقنا ؛
  • تحسين تحميل الكود الخاص بنا في المتصفحات ؛
  • استيراد CSS والصور ؛
  • إدارة الإصدارات المختلفة من JavaScript ؛
  • تسهيل تجربة التطوير ، وإعادة تحميل الصفحة عند تغيير الكود.

اكتشف CRA


تم إنشاء تطبيق Create React App  أيضًا بواسطة فرق Facebook ، وهو أداة ستساعدك على القيام بكل ما ذكرته للتو. إذا كانت هناك أدوات أخرى ( Next ، Gatsby ، Parcel ، إلخ) ، فإن إنشاء تطبيق React يظل المرجع ، خاصة لمستخدمي React الجدد.

سيسمح لك إنشاء تطبيق React بإنشاء هيكل للتعليمات البرمجية لتطبيقك . يأتي مزودًا بعدد من الأدوات التي تم تكوينها مسبقًا ، مثل Webpack و Babel و ESLint ، من أجل ضمان أفضل تجربة تطوير ممكنة لك.

قم بتثبيت وتشغيل CRA

لمعالجة إنشاء تطبيق React هنا ، سنحتاج إلى مدير حزم في الجهاز. هنا سأستخدم  yarn  . إذا كنت تستخدم إصدارًا آخر ، مثل npm ، فإنني أنصحك بالرجوع إلى دليل مستخدم Create React App بواسطة Facebook ، على Github  .

بالمناسبة ، إذا كنت تريد معرفة المزيد حول سبب اختيار npm أو Yarn ، فإنني أوصي بهذا المنشور الممتاز في المدونة الذي يقارن بين الاثنين . 

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

لتهيئة مشروعك ، سنقوم بما يلي:


npx create-reaction-app the-jungle-house
 
و   npx في كل هذا ؟! ما هو ؟
لذلك ، لا داعي للخوض في التفاصيل هنا ، لأن هذه ستكون المرة الوحيدة التي ستستخدمها فيها ، ولكن هذا هو الأمر الذي أوصت به Create React App لتهيئة مشروع ، دون الحاجة إلى تثبيت CRA عالميًا. ، أو محليًا.

يااااي! لديك مشروعك الأول الذي تم إنشاؤه باستخدام تطبيق Create React!

اكتشف الملفات



الآن بعد أن تمت تهيئة مشروعك ، حان الوقت للتعمق في واستكشاف الملفات التي قمت بإنشائها. ندخل المشروع معها   cd la-maison-jungle  في المحطة الخاصة بك.

من هناك يمكنك فتح محرر النصوص المفضل لديك (أنا استعمل  VS Code من  جانبي 😎) لإلقاء نظرة. بمجرد أن تصبح جاهزًا ، دعنا نستكشف الملفات معًا في هذه الشاشة:

بيئة عملك مهمة بشكل خاص. يجب أن تشعر بالراحة مع الأدوات التي تستخدمها. يسمح لك VS Code بتثبيت الامتدادات التي تمنحك وظائف إضافية. عادة ، بالنسبة لمشروع React ، فإن امتدادات Prettier و ESLint مفيدة جدًا!

ستجد ثلاثة مجلدات 📁:

  • node_modules  : هذا هو المكان الذي يتم فيه تثبيت جميع تبعيات الكود الخاص بنا. يمكن أن يصبح هذا الملف كبيرًا جدًا بسرعة.
  • public  : في هذا المجلد ، ستجد ملفك index.html والملفات   الأخرى المتعلقة بمراجع الويب لصفحتك.
  • src  : لقد دخلت للتو في قلب الحدث. ستكون معظم الملفات التي تنشئها وتحررها هناك .
والآن دعونا نلقي نظرة على الملفات المهمة:
  • package.json : يقع في جذر مشروعك ، ويسمح لك بإدارة التبعيات (جميع الأدوات المستخدمة لبناء مشروعك) ، والبرامج التي يُنفذها yarn، وما إلى ذلك. إذا ألقيت نظرة على محتوياتها ، يمكنك رؤية التبعيات التي تعرفها: React و ReactDOM :
    • ستجد هناك react-scripts ، تم إنشاؤه بواسطة Facebook ، والذي يسمح لك بتثبيت Webpack و Babel و ESLint وغيرها لجعل حياتك أسهل ؛
  • في  /publicتجد  index.html . هذا هو قالب التطبيق الخاص بك . هناك الكثير من أسطر التعليمات البرمجية ، لكن هل لاحظت ذلك  
     ؟ كما في الفصول السابقة ، سنثبت تطبيق React هنا ؛
  • في    /src، هناك   index.js  يسمح بتهيئة تطبيق React الخاص بنا ؛
  • وأخيرًا ، في    /src، تكتشف   App.js  أي مكون React الأول لدينا .
أرى   dependencies  و   devDependencies . لكن ما الفرق بين الاثنين؟
في الواقع ،   dependencies  التبعيات ضرورية لعمل الكود الخاص بنا ، محليًا وفي الإنتاج. ومع ذلك ،   devDependencies   نحتاجها فقط لمرحلة التطوير. يتم تثبيت كلاهما من مدير الحزم الخاص بك ، بالنسبة لنا   yarn، مع تحديد خيار مختلفyarn add  :    لـ dependencies و     yarn add --dev   لـ     devDependencies .

ملفان لن نستخدمهما بشكل مباشر ولكن لا يضر الاحتفاظ بهما:
  • و  README.md   الذي يسمح لك بعرض صفحة الشرح إذا وضعت كود على GitHub، على سبيل المثال،
  • والملف  .gitignore   الذي يحدد ما لا يجب وضعه على GitHub ، عادةً ما يكون ملف  node_modules .
تحتوي قاعدة التعليمات البرمجية التي تمت تهيئتها باستخدام تطبيق Create React على تعليمات برمجية وأدوات لن يتم استخدامها في هذه الدورة ، خاصةً كل ما يتعلق بجزء الاختبار. الملفات التي لم أذكرها أعلاه ، يمكنك حذفها. سيسمح لك بالاحتفاظ بما هو ضروري.

تحكم في تطبيقك باستخدام عناصر التحكم


عندما تكون في جذر مشروعك ، يمكنك تشغيل  yarn start   والذي سيُشغّل تطبيقك في وضع التطوير .

يمنحك هذا شيئًا من هذا القبيل (على الرغم من أن عنوان IP الخاص بك سيكون على الأرجح مختلفًا) :

React
يجب أن يتم فتح علامة تبويب في متصفحك على عنوان URL http://localhost:3000/. إذا لم يكن كذلك ، افتحها بنفسك.

! 🎉🎉🎉

لديك شعار React  الجميل يعمل في متصفحك!

هناك أوامر أخرى:

  • yarn run build    سيسمح لك بإنشاء  build  باستخدام الكود المحول والمصغر ، إذا كنت بحاجة إلى نشر التطبيق الخاص بك في الإنتاج (ضعه على الإنترنت ، على سبيل المثال) ؛
  • yarn test   لإجراء الاختبارات.
يمكنك أيضًا إنشاء أوامرك الخاصة إذا قمت بإضافتها في الجزء   scripts .

تنظيم التعليمات البرمجية الخاصة بك



سنقوم الآن بتعديل قاعدة الكود الخاص بنا بحيث تكون أشبه بمشروعنا. هناك العديد من الطرق لتنظيم التعليمات البرمجية الخاصة بك ، ومن المهم التفكير في كيفية تنظيمها. سنقوم هنا بفصل الملفات حسب نوعها: المكونات / النمط / الصور ، إلخ.

سنبدأ عن طريق إنشاء مجلد   /components   في   /src، حيث سنضع كل المكونات التي لدينا. نضع هناك App.js  وننتهز   الفرصة لتغيير مسار الاستيراد    index.js .

لنقم الآن بإنشاءBanner    ملف جافا سكريبت الخاص بنا  من الفصل السابق في ملف JavaScript منفصل يمكننا ان نُسمّيه به    Banner.js .


function Banner() {
    return <h1>La maison jungle</h1>
}
export default Banner
 
هل لاحظت التدوين   export default   ؟ هذا هو بناء الجملة المقدم في ES6 ، والذي سيوفر لك من استخدام الأقواس عند الاستيراد. 

يمكننا الآن تكييف الكود   App.js   عن طريق إزالة الكود الأساسي واستيراد Banner  .


import Banner from './Banner'
function App() {
    return <Banner />
}
export default App
 
مما يعطينا:
React
يتم عرض لافتة لدينا في المتصفح

تهانينا! لقد أعدت استخدام الكود الخاص بك من الفصل السابق!

React
قم باستيراد المكونات الخاصة بك باستخدام Webpack

لقد ذكرتها من قبل ، ولكن هنا Webpack  هو الذي يسمح لنا باستيراد مكوننا بسهولة ، باستخدام   import . هذه الأداة المفيدة بشكل خاص ضرورية لربط الملفات معًا ، بحيث يمكن تفسيرها بواسطة المستعرض. والاعتقاد بأن Create React App سمح لنا بتثبيته دون إجراء أي تكوين. إذا لم يكن هذا هو الحظ! 🍀

الممارسة


React
يمكنك بدء التمرين من قاعدة الكود التي أنشأناها مع App Create React .

مهمتك هي كما يلي: استيراد المكون Cart  الذي قمت بإنشائه في التمرين في الفصل السابق إلى ملف منفصل ، في المجلد   /components .

ستجد حل التمرين في فرع فرع P2C1-Solution   .

باختصار


  • يستخدم المطورون أدوات آلية لتسهيل تجربة التطوير الخاصة بهم.
  • إنشاء تطبيق React (CRA) هو صندوق الأدوات الذي أنشأه Facebook ، والذي لا يزال يمثل المرجع لبدء مشروع React .
  • دائمًا ما يحتوي المشروع الذي بدأ مع CRA على: 
    • ملف  index.html   يمثل القالب الذي سيعيش فيه تطبيق React الخاص بنا ؛
    • ملف  package.json   يسرد التبعيات والنصوص ؛
    • ملف index.js    يتم فيه تهيئة تطبيق React الخاص بنا ، وتطعيمه بتنسيق   HTML .
  • تعمل CRA بمساعدة مدير الحزم (في هذه الدورة التدريبية   yarn ) .
  • يجعل Webpack من السهل استيراد الملفات فيما بينها.
إذن ، هل أعجبك بدء تطبيقك باستخدام CRA؟ ماذا لو أخبرتك أننا الآن بصدد إضافة بعض الأناقة؟ اراك قريبا ! 👋