رد فعل تعليمي ، الجزء 5: البدء باستخدام تطبيق TODO ، التصميم الأساسي

اليوم ، في الجزء التالي من ترجمة دورة 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: مشروع المقرر

الدرس 11. ورشة العمل. تطبيق TODO. المرحلة رقم 1

→ الأصل

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

سوف نعمل على هذا التطبيق لبعض الوقت ، لذلك ، إذا كنت تستخدم تطبيق create-react-app ، فمن المستحسن إنشاء مشروع منفصل له.

ob الوظيفة

• إنشاء تطبيق React جديد.
• اعرض المكون <App /> على الصفحة باستخدام ملف index.js .
• يجب أن يقوم المكون <App /> بإنشاء رمز لعرض الإشارات من 3 إلى 4 مع بعض النص الذي يتبعها. يمكن تنسيق النص باستخدام علامات <p> أو <span> . ما يمكنك القيام به يجب أن يشبه قائمة المهام التي تم فيها إدخال بعض الإدخالات بالفعل.

olution الحل

رمز ملف index.js :

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

App.js ملف App.js :

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

إليك ما يبدو عليه مشروع create-react-app تفاعلي قياسي في VSCode في هذه المرحلة من العمل.


المشروع في VSCode

هذا ما يعرضه تطبيقنا الآن على الصفحة.


مظهر التطبيق في المتصفح

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

الدرس 12. التصميم في التفاعل باستخدام فئات CSS

→ الأصل

سنعمل الآن على التطبيق الذي تم إنشاؤه كنتيجة لورشة العمل في الدرس 10. إليك ما يعرضه التطبيق على الشاشة.


صفحة التطبيق في المتصفح

نود أن نمط عناصر الصفحة. React لديها العديد من أساليب التصميم. نحن نستخدم الآن النهج الذي من المحتمل أن تكون على دراية به. وهو يتكون في تطبيق فئات CSS وقواعد CSS المعينة لهذه الفئات. دعنا نلقي نظرة على هيكل هذا المشروع والتفكير في العناصر التي تحتاج إلى تعيين فصول سيتم استخدامها لتصميمها.


المشروع في VSCode

الملف index.js مسؤول عن تقديم مكون App . يعرض مكون App عنصر <div> ، والذي يحتوي على ثلاثة مكونات أخرى - Header و MainComponent و Footer . ويعرض كل من هذه المكونات ببساطة عنصر JSX واحد مع النص. في هذه المكونات سوف نشارك في التصميم. دعونا نعمل على مكون Header . تذكر أنه في هذه المرحلة من عمله ، يبدو رمزه كما يلي:

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

عادةً ، عندما يتعاملون مع تعليمات HTML البرمجية ويريدون تعيين فصل دراسي لعنصر معين ، يتم ذلك باستخدام سمة class . لنفترض أننا سنخصص هذه السمة لعنصر <header> . ولكن هنا يجب ألا ننسى أننا لا نعمل مع كود HTML ، ولكن مع JSX. وهنا لا يمكننا استخدام السمة class (في الواقع ، يمكنك استخدام السمة بهذا الاسم ، لكن هذا غير مستحسن). بدلاً من ذلك ، className سمة باسم className . تقول العديد من المنشورات أن السبب في ذلك هو أن class هو كلمة أساسية JavaScript محجوزة. ولكن ، في الواقع ، يستخدم JSX واجهة برمجة تطبيقات JavaScript المعتادة للعمل مع DOM. للوصول إلى العناصر التي تستخدم واجهة برمجة التطبيقات هذه ، يتم استخدام تصميم مألوف للنموذج التالي:

 document.getElementById("something") 

لإضافة فصل جديد إلى عنصر ، تابع ما يلي:

 document.getElementById("something").className += " new-class-name" 

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

في الواقع ، بالنسبة لتعيين فئات لعناصر JSX ، يكفي أن نعرف أنه حيثما يتم استخدام الكلمة الأساسية class في HTML ، يجب استخدام الكلمة الأساسية className في JSX.

قم بتعيين فئة شريط التنقل إلى navbar <header> :

 import React from "react" function Header() {   return (       <header className="navbar">This is the header</header>   ) } export default Header 

الآن ، في مجلد components ، قم بإنشاء ملف Header.css . ضع الكود التالي فيه:

 .navbar { background-color: purple; } 

الآن قم بتوصيل هذا الملف بـ Header.js باستخدام أمر import "./Header.css" (مع هذا الأمر ، مع توسيع إمكانيات أمر import القياسي ، نقول ل Webpack bundler ، والذي يستخدم في المشاريع التي تم إنشاؤها باستخدام create-react-app ، أننا نريد استخدم Header.css في Header.js ).

هذه هي الطريقة التي سيبدو بها في VSCode.


ملف النمط واتصاله في VSCode

كل هذا سيؤدي إلى حقيقة أن ظهور السطر العلوي الذي يعرضه التطبيق على الصفحة يتغير.


تغيير نمط الخط العلوي

هنا استخدمنا أسلوبًا بسيطًا للغاية. Header.css محتويات ملف Header.css يلي:

 .navbar {   height: 100px;   background-color: #333;   color: whitesmoke;   margin-bottom: 15px;   text-align: center;   font-size: 30px;   display: flex;   justify-content: center;   align-items: center; } 

بالإضافة إلى ذلك ، افتح ملف index.css الموجود بالفعل في المشروع ووضع النمط التالي فيه:

 body {   margin: 0; } 

index.js هذا الملف في index.js مع أمر import "./index.css" . نتيجة لذلك ، سوف تأخذ صفحة التطبيق النموذج الموضح في الشكل التالي.


تغيير نمط الصفحة

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

في الواقع ، على افتراض أنك معتاد بالفعل على CSS ، يمكننا أن نقول أننا هنا نستخدم بالضبط نفس كود CSS المستخدم لنمط عناصر HTML العادية. الشيء الرئيسي الذي يجب مراعاته عند تصميم العناصر مع الفئات في React هو أنه بدلاً من سمة عنصر class المستخدم في HTML ، className استخدام className .

بالإضافة إلى ذلك ، تجدر الإشارة إلى أنه لا يمكن تخصيص الفئات إلا لعناصر React - مثل <header> أو <p> أو <h1> . إذا حاولت تعيين اسم فئة لمثيل مكون - مثل <Header /> أو <MainContent /> ، <MainContent /> النظام بشكل مختلف تمامًا عما تتوقع. سنتحدث عن هذا لاحقا. في غضون ذلك ، فقط تذكر أن الفئات في تطبيقات React تم تعيينها إلى عناصر ، وليس إلى مكونات.

إليك شيء آخر قد تجد صعوبة في بدء React. نحن نتحدث عن عناصر التصميم التي لها مستويات مختلفة من التسلسل الهرمي على الصفحة. دعنا نقول أن هذا يحدث عند استخدام تقنيات CSS Flexbox أو CSS Grid للتصميم. في مثل هذه الحالات ، على سبيل المثال ، عند استخدام تخطيط Flex ، يجب أن تعرف أي الكيان هو الحاوية المرنة وأي الكيانات هي عناصر flex. وهي قد يكون من الصعب فهمها - كيف بالضبط عناصر النمط ، وأي العناصر لتطبيق أنماط معينة. لنفترض ، على سبيل المثال ، أن العنصر <div> من مكون App بنا يجب أن يكون حاوية مرنة:

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

في هذه الحالة ، يتم عرض العناصر المرنة عن طريق مكونات " Header و " MainContent و " Footer . ألقِ نظرة ، على سبيل المثال ، على رمز مكون Header :

 import React from "react" import "./Header.css" function Header() {   return (       <header className="navbar">           This is the header       </header>   ) } export default Header 

يجب أن يكون العنصر <header> سليلًا مباشرًا للعنصر <div> من مكون App . ينبغي أن يكون منمق كعنصر مرن.

من أجل فهم أسلوب إنشاء مثل هذه الإنشاءات ، تحتاج إلى النظر في شكل كود HTML الذي تم إنشاؤه بواسطة التطبيق. سنفتح علامة تبويب " Elements في أدوات مطور Chrome للصفحة التي تظهر في المتصفح عند العمل مع مشروع تم إنشاؤه باستخدام تطبيق create-react-app .


كود الصفحة

إن العنصر <div> ذو root المعرف هو ذلك العنصر من صفحة index.html التي نشير إليها في طريقة ReactDOM.render() تسمى في ملف index.js . يتم عرض الترميز الذي تم إنشاؤه بواسطة مكون App فيه ، أي العنصر <div> التالي ، والذي يحتوي على عناصر <header> و <main> و <footer> المشكلة بواسطة المكونات المقابلة.

أي من خلال تحليل رمز تطبيق React المذكور أعلاه ، يمكننا افتراض أن <Header /> build في مكون App تم استبدالها بـ <header className="navbar">This is the header</header> . يتيح لك فهم هذه الحقيقة استخدام مخططات معقدة لتصميم عناصر الصفحة.

وبهذا نختتم أول مقدمة لتطبيقات التصميم React. يوصى بتجربة ما اكتشفته للتو. على سبيل المثال ، حاول <MainContent /> عناصر الإخراج بواسطة مكونات <MainContent /> و <Footer /> <MainContent /> .

ملخص

بدأنا اليوم تطوير أول مشروع تدريبي - تطبيقات TODO ، كما تعرفنا على تطبيقات React من خلال استخدام فصول CSS. سنتحدث في المرة القادمة عن ميزات نمط الشفرة التي يلتزم بها مؤلف هذه الدورة ، وكذلك بعض الأشياء حول JSX و JavaScript.

أعزائي القراء! هل لديك بالفعل فكرة لتطبيق ترغب في إنشائه باستخدام React؟