PracticU

הסבר על Material UI

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › הסבר על Material UI
מילון מושגים:
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
ספרייה - אוסף קוד מוכן, כמו פונקציות ומחלקות, שמפתחים משתמשים בו בתוכניותיהם במקום לכתוב הכול מחדש.
פריימוורק - מסגרת תוכנה שמספקת מבנה וכלים מוכנים לפיתוח יישומים, כדי לחסוך כתיבת קוד חוזר.

הסבר על Material UI
יש ספריות שמציעות רכיבים מוכנים ומעוצבים יפה, וב-React נפוצה במיוחד הספרייה Material UI. ההרצאה היא הצצה באתר שלה, לפני שמתחילים להשתמש בה.
מה רואים באתר
1. חיפוש ואתר רשמי: מחפשים Material UI בגוגל. התוצאה היא "popular React UI framework", ואז נכנסים לאתר הרשמי ול-Get Started.
2. רשימת קומפוננטות: בצד האתר יש רשימת קומפוננטות. כשנכנסים ל-Components ומחפשים לחצנים, רואים לחצנים בצבעים שונים.
3. אפקטים: בלחיצה על לחצן מופיע אפקט גל שנקרא Ripple Effect. גם ל-checkbox יש אנימציה, והאתר מציג עוד אפשרויות רבות לעיצוב.
4. רכיבים מוכנים: כל הרכיבים האלה מוכנים לשימוש, ובסרטונים הבאים נלמד איך משתמשים בהם.
עכשיו ברור מה Material UI מציעה ולמה היא פופולרית באפליקציות React.
השיעור הבא בקורס: התקנת Material UI

פרקי ההרצאה: הסבר על Material UI

  1. 00:00

    ספריית רכיבים מעוצבים בריאקט

  2. 00:42

    לחצנים ואפקט Ripple

  3. 01:21

    רכיבים מוכנים לשימוש באפליקציה

תמלול ההרצאה: הסבר על Material UI

הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Material UI» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    אנחנו מגיעים לשימוש בספרייה ממש מגניבה, מכילה רכיבים מוכנים לשימוש שהם מעוצבים בצורה ממש אסתטית. למעשה יש כל מיני ספריות כאלה, ובריאקט מאוד נפוץ להשתמש בספרייה שנקראת Material UI. בואו קודם כל ניכנס לגוגל ונחפש Material UI, ואנחנו רואים פה את

  2. 00:28

    פופולר React UI Framework, בואו ניכנס אליה. וזה האתר הרשמי שלהם. אנחנו יכולים להיכנס ל-Get Started ויש לנו כאן בצד כל מיני קומפוננטות שאנחנו יכולים להסתכל עליהן.

  3. 00:44

    בואו נלך רגע לקומפוננטס ובואו נחפש לדוגמה לחצנים ואז אנחנו יכולים לראות איך לחצנים נראים. אנחנו יכולים לעצב לחצנים בכל מיני צבעים וכשאני לוחץ עליהם אז אני רואה שיש לי את האפקט של הגל הזה שנקרא Ripple Effect.

  4. 01:02

    הנה עוד לחצן שכתוב עליו איזה משהו וזה רק לחצנים ויש פה עוד המון המון אפשרויות לעצב אותם. אנחנו יכולים לחפש ולראות איך צ'קבוקס נראה לדוגמה ואנחנו יכולים לראות שיש לו איזה גרפיקה של אנימציה כזאת שמתלווה אליו וכל הרכיבים האלה זה רכיבים ממש מוכנים שאנחנו יכולים להשתמש בהם.

  5. 01:27

    אז כאן בסדרת הסרטונים הבאים אנחנו רוצים לראות איך אנחנו משתמשים הספרייה הזאת שהיא נקראת Material UI והיא מאוד מאוד פופולרית באפליקציות React.

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: יצירת Styled Components דינמי

ההרצאה הבאה: התקנת Material UI

הרצאות קשורות מקורסים אחרים

  • הסבר על Material Design

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS