הצגת Global State בתוך MobX
create fc יוצרים area בשם grocery list area ובתוכו שלוש קומפוננטות: GroceryList ראשית, AddGroceryItem להוספה ו-ViewGroceryList להצגה. בכל אחת כותרת h2 לפי תפקידה.display: grid ו-grid-template-columns של שני חלקים שווים, כדי שהקומפוננטות יופיעו זו לצד זו. גם כותרות ממורכזות עם קו תחתון.ViewGroceryList בונים table עם thead שמכיל כותרות עבור הפריט ועבור הכמות, ו-tbody.groceryList.items.map ומציגים שורה לכל פריט, עם שם וכמות. כיוון שאין מזהה ייחודי, ה-key הוא האינדקס. שם לא מתאים כי עלולים להיות שני פריטים עם אותו שם.overflow: auto לקומפוננטה, margin: auto, רוחב 100 אחוז, text-align: center וגבול של 1px solid black.פרקי ההרצאה: הצגת Global State בתוך MobX
תמלול ההרצאה: הצגת Global State בתוך MobX
הטקסט המלא של הדקות הראשונות בהרצאה «הצגת Global State בתוך MobX» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שבנינו את הגלובל סטייט שאנחנו רוצים לנהל על ידי מוביקס אנחנו רוצים לבנות את ה-UI בכדי להציג אותו. בואו נפתח לעצמנו איזשהו טרמינל ובואו נוסיף create fc נבנה איזשהו area נפרד grocery list area ובתוכו נבנה לעצמנו איזשהו קומפוננטה ראשית נקראת grocery list
ובתוכה יהיו שתי קומפוננטות האחת תכיל את האפשרות להוספה של פריט ואחת תכיל את האפשרות לצפייה בכל הפריטים בואו נוסיף קומפוננטה של add grocery item נקרא לה ובואו נוסיף עוד אחת של view grocery list יופי הוספנו את שלושת הקומפוננטות אנחנו רוצים להציג אותם כאן.
קודם כל בואו נכתוב בהם אולי משהו בואו ניקח את add ונוסיף פה איזה h2 של add item ונוסיף ב-view איזה h2 של grocery list וניגש ונשים את שניהם פה.
אז יש לנו כאן את Add Grocery Item ויש לנו את View Grocery List. נגדיר האמת שכל אחד מהם הוא Box, גם הצפייה וגם ההוספה, ואז אנחנו רוצים לשלב את זה גם במנגנון הראוטינג וגם בתפריט.
הנה ה-Layout, הנה מנגנון הראוטינג, בואו נוסיף איזשהו Route, נניח אחרי האמפלואיז ולפני הספורט פה ראוט נגדיר שהפאת שלו זה גרוסרי ליסט קומפוננט זה גרוסרי ליסט והוא יציג בתוכו את שני הקומפוננטות האחרות וניגש ונבנה תפריט שמכיל את זה הנה המניו אנחנו רוצים פה את גרוסרי ליסט בצורה כזאת.
בואו נבדוק איך זה נראה, הנה יש לנו גרוסרי ליסט והוא קורס לי, למה הוא קורס לי, בואו נראה רגע למה הוא קורס לנו, אוי שיש לי פה שני סלאשים בטעות, בואו נבדוק עכשיו, נראה יותר טוב, יופי, הנה אד אייטם, הנה גרוסרי ליסט,
בואו נגדיל אותם קצת יותר, נעשה את זה בתוך הגרוסרי, ליסט קונטיינר שלהם בואו נגדיר כאן שיש לנו הייט תן לי 100 אחוז כמה שאתה יכול דיספליי גריד ונגיד שיש לנו גריד טמפלייט קולומס ריפיט פעמיים של יחידת מידה אחת one fraction זה אמור לעשות אותם סייד ביי סייד הנה יש לנו פה את האזור של ה-add item הנה יש לנו פה את האזור של ה-grocery list
אולי נגדיר לכל אחד, אולי נגדיר בגלובליה, האמת, שאם יש לנו איזשהו h2, טקסט עליין סנטר, זה נראה לי טוב שיהיה לכולם.
בואו נבדוק. יופי, שניהם באמצע, אולי נשים אנדרליין גם? טקסט דקוריישן אנדרליין, יאללה, סבבה. גוד. אנחנו כרגע רוצים להציג את הליסט, אנחנו רוצים להציג אותה כאן.
בהמשך נכתוב את ההוספה, בואו נעשה את זה כאן באיזושהי טבלה. אז בתוך view grocery list כאן אנחנו רוצים לייצר לעצמנו טייבל ואנחנו רוצים שיהיה לנו את האזור של ה-head ובאזור של ה-head יש לנו שורה אחת.
בשורה יש לנו TH של איזה פריט ועוד TH של כמה ה-amount שלו.