PracticU

מבנה קבצים בפרויקט של React

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › מבנה קבצים בפרויקט של React
מילון מושגים:
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.
TypeScript - שפת תכנות המרחיבה את JavaScript בהוספת טיפוסים, ומתקמפלת ל-JavaScript רגיל.
npm - מנהל החבילות של Node.js, המשמש להתקנה ולניהול ספריות JavaScript בפרויקט.
GitHub - שירות ענן לאחסון מאגרי קוד מבוססי Git, המאפשר שיתוף פעולה, מעקב גרסאות וניהול פרויקטים.
קומפיילר - תוכנה שממירה קוד מקור שנכתב בשפת תכנות לקוד שהמחשב יכול להריץ, ומדווחת על שגיאות תחביר.
root - משתמש העל במערכות Linux, בעל הרשאות מלאות לכל פעולה. גם הרמה העליונה בעץ של תיקיות או נתונים.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
מבנה קבצים בפרויקט של React
סיור בקבצים של פרויקט React חדש, כדי להבין מה כל אחד עושה ובאיזה מהם כותבים קוד.
הקבצים והתיקיות
1. node_modules: כל התשתית של הספריות שהותקנו. לא נוגעים בה.
2. package-lock.json: מתאר את מה שיש בתיקייה הקודמת. שימוש פנימי של המערכת.
3. package.json: קובץ חשוב של פרויקט Node.js. הוא כולל את שם הפרויקט, הגרסה וה-dependencies, כלומר הספריות שהפרויקט משתמש בהן, כמו React ו-TypeScript. התקנות נוספות במהלך הקורס יתווספו אליו. בחלק scripts מוגדר מה מריץ npm start.
4. README ו-.gitignore: ה-README מוצג אם מעלים ל-GitHub. ה-.gitignore קובע מה לא להעלות, למשל node_modules.
5. tsconfig: קובץ הגדרות לקומפיילר של TypeScript.
6. public: כולל את index.html, הדף היחיד של ה-Single Page Application. בגוף שלו תגית שמוצגת רק אם JavaScript כבוי, ו-div עם id שהוא root, שאליו מוזרקות הקומפוננטות. יש שם גם Favicon ולוגואים.
7. src: כאן כותבים את הקוד, ובכלל לא ב-public. ברירת המחדל כוללת קומפוננטה App, בשלושה קבצים. CSS ואנימציה מסתובבת, קובץ בדיקות וקובץ App.tsx.
8. סיומת tsx: בפרויקט JavaScript היא הייתה jsx. ה-x מציין שהקובץ יכול להכיל גם HTML בתוך הקוד.
9. index.tsx: הקובץ הראשון שרץ. הוא משתמש ב-document.getElementById כדי לשתול את App בתוך root, כשהיא עטופה בתגית של React לאיתור שגיאות. הוא מזריק גם את ה-CSS הראשי של האתר.
10. לוגו SVG: תמונת הלוגו המסתובב. קבצים רבים יימחקו בהמשך.
אחרי ההרצאה ברור איזה קובץ מפעיל את האפליקציה, איפה כותבים קוד ומה כל קובץ בפרויקט.
השיעור הבא בקורס: שחזור node modules

פרקי ההרצאה: מבנה קבצים בפרויקט של React

  1. 00:00

    קבצי הפרויקט ותיקיית node_modules

  2. 01:00

    הקבצים package-lock ו-package.json

  3. 02:14

    README, .gitignore ו-tsconfig

  4. 02:52

    תיקיית public וקובץ index.html

  5. 03:51

    תיקיית src וקומפוננטת App

  6. 05:03

    הסיומת tsx מול jsx

תמלול ההרצאה: מבנה קבצים בפרויקט של React

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

  1. 00:02

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

  2. 00:21

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

  3. 00:37

    אז מה בעצם הקבצים שמשתתפים פה בפרויקט הזה? אז קודם כל כל התשתית כולה של ספריית React שהגיעה בהתקנה נמצאת ב-Node Modules. ה-Node Modules זה תיקייה ידועה של Node.JF שמכילה את כל הספריות שהותקנו ואת כל התשתית של המערכת.

  4. 00:56

    אנחנו לא באמת נוגעים בתיקייה הזאת. כאן אנחנו רואים Package Lock, זה בעצם קובץ שמתאר את מה שיש בתיקייה הזאת, גם בו אנחנו לא משתמשים כרגע, זה שימוש פנימי של המערכת.

  5. 01:11

    יש לנו Package.Json זה קובץ מאוד חשוב והוא שייך לפרויקט Node.js, הרי React התשתית שלה עובדת עם פרויקט Node.js מבחינת הפיתוח עצמו וכאן אנחנו רואים את השם של הפרויקט וכרגע את הגרסה שלו ושהפרויקט לא מיועד כרגע להפצה וזה הדבר הכי חשוב.

  6. 01:33

    איזה dependencies נתמכים פה בפרויקט וזה התשתית שכרגע התקנו. התקנו כל מיני ספריות טייפ סקריפט והתקנו את React וריאקט דום וכולי. כל הדבר הזה מתאר אילו ספריות נוספות הותקנו והפרויקט משתמש בהן.

  7. 01:49

    יש לנו פה עוד כל מיני הגדרות. סקריפטס לדוגמה, כאשר אנחנו רושמים npm start אז הוא בעצם מריס לנו את מה שכתוב פה. React Scripts Starts. וזה קובץ מאוד חשוב.

  8. 02:04

    כאשר אנחנו נתקין שוב ושוב התקנות נוספות תוך כדי הקורס, אז הם יתווספו כאן בדיפנדנסיז. זה package.json. יש פה איזה readme, שאם אנחנו מעלים את הפרויקט ל-github, אז מה שכתוב ב-readme אפשר לקרוא.

  9. 02:20

    גיט איגנור, האם אנחנו רוצים להתעלם? ממה אנחנו בעצם רוצים להתעלם כאשר אנחנו מעלים פרויקט ל-github? ואנחנו לא רוצים להעלות את הדברים, כמובן אנחנו לא רוצים להעלות את node modules, אז אנחנו רואים שהוא אישית יתעלם ממנו.

  10. 02:37

    TS-Config זה קובץ קונפיגורציה עבור הקומפיילר של טייפ סקריפט. יש פה הגדרות קומפילטיביות של טייפ סקריפט, אנחנו נשתמש בו בהמשך.

  11. 02:49

    ומכאן אנחנו רואים שתי תיקיות חשובות: Public, זאת התיקייה שמכילה את קובץ ה-Index HTML. אמרנו שכל פרויקט React הוא Single Page Application ויש לו רק Index HTML, אז זה הקובץ האחד והיחיד.

  12. 03:04

    אנחנו רואים שיש לו כל מיני הגדרות לסקריפטים ולסי אס אסים וכל מה שיש לו בבאדי זה קודם כל תגית אחת ששייכת לעולם התגיות של html ומוצגת ליוזר רק אם javascript לא פעילה אצלו במחשב כי אנחנו חייבים את javascript ואם javascript כן פעילה הכוונה בדפדפן אז היא לא תהיה מוצגת אז זה בסדר ויש לנו כאן רק div אחת עם id root

  13. 03:34

    שבתוכה אנחנו מזריקים את הקומפוננטות שאנחנו בונים. לפחות קומפוננטה אחת הולכת להיות בתוכה. יש לנו פה את ה-Favicon שזה האייקון שמופיע לנו למעלה, אנחנו יכולים לראות אותו.

  14. 03:48

    כאן זה האייקון הקטנצ'יק הזה שמופיע פה למעלה, זה נקרא Favicon, Favorite Icon, כל מיני לוגוים אחרים שאנחנו כרגע לא באמת צריכים.

  15. 03:59

    ויש לנו את איקיית ה-SRC. ה-SRC זה ה-Source Code שלנו, אנחנו כותבים רק בתוך ה-SRC, אנחנו אפילו לא כותבים בתוך ה-Public שום דבר. רק בתוך ה-SRC אנחנו כותבים, ומה שיש לנו פה זה קומפוננטה אחת שקיבלנו, היא נקראת App, אנחנו יכולים לראות את קובץ ה-CSS שלה, יש לנו פה קוד CSS מוכן, וזה בעצם מה שאנחנו רואים מבחינת העיצוב פה,

  16. 04:26

    רקע שחור וגרפיקה כזאת מסתובבת, אנימציה מסתובבת, מן האנימיישן וזה מה שנמצא ב-CSS. יש לנו את ה-Test TSX שזה UMI טסטינג, זה בדיקות, אם אנחנו רוצים לעשות בדיקות לקומפוננטה שלנו אז זה קובץ בדיקות.

  17. 04:44

    יש לנו את קובץ TSX שזה בעצם קובץ הקומפוננטה עצמה. שוב, קיבלנו Out of the Box, קומפוננטה אחת שנקראת Up ואנחנו כמובן ניכנס לעומק ונראה איך בונים קומפוננטות ונבנה הרבה קומפוננטות בעצמנו.

  18. 05:01

    אבל שלושת הקבצים האלה זה קומפוננטה אחת. למה הקובץ הזה מסתיים ב-tsx? אז אם היינו בונים את הפרויקט בלי טייפסקריפט, רק ג'אווה סקריפט, אז הסיומת שלו הייתה jsx גם כאן וגם כאן.

  19. 05:16

    css כמובן היה נשאר css. ברגע שאנחנו בונים פרויקט בטייפסקריפט אז הוא נקרא tsx.

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

ההרצאה הקודמת: יצירת פרויקט חדש ב-React

ההרצאה הבאה: שחזור node modules

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

  • מבנה קבצים ותיקיות בפרויקט
  • מבנה תיקיות בפרויקט Maven
  • ניהול קבצים בפרויקט MVC
  • מבנה טבלאות

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

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