تعلم React.js من خلال إنشاء المشاريع - إنشاء تطبيق تذكير بعيد ميلاد

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

لذا ، في هذه السلسلة من المقالات العملية ، لن نبني واحدًا أو اثنين ، بل خمسة تطبيقات صغيرة من React.

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

جاهز للبدء؟

كيف سيعمل هذا

هذه المقالة مستوحاة بشكل كبير من الفيديو الخاص بـ freeCodeCamp هنا. ولكن بدلاً من مجرد مشاهدة الفيديو ، سيتعين عليك إكمال المشاريع بيديك.

خلال دورة سلسلة المدونات الصغيرة هذه ، ستقوم ببناء خمسة مشاريع صغيرة. ولكل مشروع بعض القواعد الأساسية:

  1. يجب عليك ترميز بعض (أو كل) جوانب الميزة
  2. عليك أن تجتاز الاختبارات المعطاة للتحديات
  3. يمكنك طلب المساعدة الخارجية. لكني أوصي بقضاء بعض الوقت مع الواجهة والتعليمات أولاً. هذا لأن الواجهة مصممة بناءً على كيفية قضاء وقتك على الأرجح كمطور في الأدوات القائمة على المطورين.

مجرد ملاحظة: يقوم codedamn بتدوير مثيل خادم لكل مستخدم ، لذلك من أجل استخدام الفصل الدراسي ، تحتاج إلى التسجيل / تسجيل الدخول.

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

لذا فلنبدأ بالمشروع الأول. إذا تلقيت تعليقات جيدة ، فسأواصل عمليات الكتابة والمشاريع.

كيفية إنشاء تطبيق تذكير بعيد ميلاد (المشروع رقم 1)

لأن هذا هو مشروعنا الأول ، سأبقي التعقيد منخفضًا جدًا. في هذا المشروع ، سنستخدم React لعرض قائمة بعناصر البيانات ، أي أعياد ميلاد عدد قليل من الأشخاص.

سيتم تقديم هذه البيانات من مصدر بيانات ثابت ويجب أن تساعدك على فهم كيفية استيراد البيانات واستخدامها / مسحها داخل الدولة. سنعمل داخل فصل دراسي قمت بإنشائه باستخدام مشروعي Codedamn. يمكنك بدء هذا الفصل الدراسي هنا.

أوصي بشدة باستكمال هذا الفصل وغيره من الفصول الدراسية بقدر ما تستطيع بنفسك. يمكنك (ويجب) استخدام منشور المدونة هذا كدليل.

إليك ما ستتعلمه في هذا الفصل الدراسي:

  1. كيف يبدو مشروع React الأساسي
  2. كيفية تحميل البيانات من ملف JS ثابت
  3. كيفية استخدام useState لتخزين البيانات
  4. كيفية مسح متغير الحالة ورؤية ذلك ينعكس في واجهة المستخدم

المعمل 1 - مقدمة عن المشروع

هذا هو الرابط إلى هذا المختبر.

يعرّفك هذا التحدي الأول على المشروع وهيكله. اقض بعض الوقت في تحديد موقع كل الأجزاء ذات الصلة في هذا ، وبمجرد الانتهاء ، اضغط ببساطة على "Run Tests" لاجتياز هذا التحدي. لا شيء رائع هنا :)

المعمل 2 - كيفية إنشاء حاوية عرض عيد الميلاد

إليك الرابط إلى مختبر التدريب هذا.

يمكنك أيضًا العثور على ملفات الإعداد الخاصة بالمختبر على GitHub هنا.

الآن بعد أن نظرت في كيفية تنظيم بنية المشروع والملفات ، حان الوقت لإنشاء بعض العروض الثابتة.

تذكر أنه يمكنك دائمًا إنشاء أصحاب بيانات ثابتة أولاً ثم ملؤها ببيانات ديناميكية لاحقًا.

هذا أسلوب نظيف للغاية لبناء مكونات ديناميكية ، حيث يسمح لك بجعل المكون جاهزًا قبل أن تملأه ديناميكيًا بالبيانات.

في هذا المعمل ، لديك التحديات التالية لإكمالها:

  • داخل ملف App.jsx ، أنشئ تسلسل HTML الهرمي التالي:
main > section.container > h3 + List
  • تلميح: يعني الاختصار أعلاه أن الهيكل الخاص بك يجب أن يبدو كما يلي:

  • h3يجب أن يحتوي على النص الخاص بك :
0 birthdays today
  • يجب أن يكون المكون الخاص بك هو List.jsxالمكون الذي تم استيراده في الأعلى.

لاجتياز جميع الاختبارات ، تأكد من القيام بما يلي:

  • يجب أن يكون عنصر "h3" موجودًا في ملف App.jsx
  • يجب أن تحتوي علامة "h3" الخاصة بك على "0 أعياد ميلاد اليوم" (بدون علامات اقتباس)
  • يجب تقديم مكون "القائمة" الخاص بك

إليك الحل لهذا التحدي:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { // Edit your return statement here to match the instructions return (   

0 birthdays today

) } export default App

المعمل 3 - كيفية تعبئة بيانات القائمة الثابتة

هذا هو الرابط إلى هذا المختبر.

يمكنك أيضًا العثور على ملفات الإعداد الخاصة بالمختبر على GitHub هنا.

لدينا واجهة المستخدم الأساسية المتاحة لنا. دعنا الآن نملأ البيانات الثابتة من data.jsالملف.

تم فتح هذا الملف بالفعل على الجانب الأيمن من المحرر. افحص هذا الملف وشاهد كيف تبدو بيانات JSON.

في هذا المعمل ، عليك القيام بالأمور التالية:

  • داخل ملفك App.jsx، يجب أن تستبدل الآن 0 Birthdays Todayبـ Birthdays Today. لذلك ، في البداية ، يجب أن تظهر 5 Birthdays Today. تذكر أن العدد يأتي من عدد العناصر داخل dataالمتغير الذي تم استيراده في الأعلى.
  • تلميح: يمكنك استخدام ملفات data.length
  • قم بتمرير dataالمتغير المستورد كخاصية Listللمكون. يجب استدعاء هذا الدعامةpeople
  • ملحوظة:
  • في Listالمكون ، استخدم هذه البيانات التي تم تمريرها لعرض أسماء الأشخاص فقط في الوقت الحالي. يمكنك mapتجاوز هؤلاء الناس وعرض أسمائهم.

إليك 3 اختبارات عليك اجتيازها:

  • يجب أن يعرض App.jsx الآن "5 أعياد ميلاد اليوم" حيث يأتي "5" من طول العناصر المستوردة في الأعلى
  • يجب أن تعرض شاشتك أسماء جميع الأشخاص الموجودين في القائمة
  • يجب استخدام خاصية "الأشخاص" في مكون القائمة لتمرير البيانات ويجب أن تعرض الأسماء

وهذا هو الحل لهذا التحدي.

ملف App.jsx:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { return (   {/* Make change to "0" here */} 

{data.length} birthdays today

{/* pass data to list component */} ) } export default App

ملف List.jsx:

import React from 'react' // accept props here const List = (props) => { const { people } = props // Map over prop "people" and display only the names in any way you like return people.map((item) => { return 

{item.name}

}) } export default List

المعمل 4 - كيفية عرض واجهة المستخدم الجديدة

هذا رابط لهذا المختبر

يمكنك أيضًا العثور على ملفات الإعداد الخاصة بالمختبر على GitHub هنا.

Now that we have the names of people from the static data, let's make the UI a little bit better. You can look through all the CSS in the css files first, and then we will simply start using the CSS classes directly.

In this challenge, you only have to build up from the last challenge and create a UI inside List component.

In this lab, you have to do the following things:

  • Inside your List.jsx file, iterate over the people prop and display the following HTML structure:

NAME_OF_USER

AGE_OF_USER years

  • Make sure you replace the placeholders appropriately. Also, CSS classes in React JSX are named className, just a reminder!

Here are 4 tests you have to pass:

  • Your List component should render the "article" tag as parent
  • Your List component should render the "img" tag inside "article" tag with the correct src and alt tag
  • Your List component should render the "div > h4" inside the "article" tag with the name of the person
  • Your List component should render the "div > p" inside the "article" tag with the age of the person

And here's the solution (List.jsx file):

import React from 'react' // accept props here const List = (props) => { const { people } = props // Map over prop "people" and code the right structure return people.map((person) => { const { id, name, age, image } = person return (  

{name}

{age} years

) }) } export default List

Lab 5 - How to add a Clear All button

Here's a link to this lab

You can also find the setup files of the lab on GitHub here.

In this final lab, let's now add a “Clear” button which will clear the records and reset it to 0 birthdays. The button is already available for you, you just have to make sure it functions properly.

In this lab, you have to do the following things:

  • Create a new state variable called people
  • The initial value of this state variable should be the imported data from the top.
  • Pass this state variable now in the List component.
  • When the Clear button is pressed, empty the state variable so that no record is displayed (Hint: set it to an empty array)

And these are the tests you have to pass:

  • There should be a "Clear All" button on the screen (already done for you)
  • Initially, all records should be visible
  • When the "Clear All" button is pressed, it should remove all records from the screen

Here's the App.jsx solution file for this lab:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { // create a state variable here const [people, setPeople] = useState(data) // this should clear all records function clearAllRecords() { setPeople([]) } return (   

{people.length} birthdays today

Clear All ) } export default App

And you're done! Congrats on completing a small project in React. Way to go :)

Conclusion

I hope you enjoyed this codedamn classroom. You can find many others in the React Mastery learning path on codedamn.

هناك الكثير من الفجوات التي يجب سدها حتى الآن ، ولكن هناك فرصة جيدة أن تبدأ بسلاسة كبيرة إذا كنت جديدًا.

تأكد من إخباري كيف كانت تجربتك على حسابي على Twitter ، حيث سيساعدني ذلك في تأطير الفصول الدراسية التدريبية التالية.