יצירת פרויקט חדש ב-React
cd, או פשוט לכתוב cmd בשורת הכתובת של סייר הקבצים ולהקיש Enter.create-react-app ואחריה שם הפרויקט, בדוגמה Northwind. את השם אי אפשר לתת באותיות גדולות או רק באותיות קטנות, אלא בצורה שמקובלת ב-React. אחר כך אפשר לשנות את שם התיקייה.--template typescript. ההתקנה נמשכת כמה דקות.code . בשורת פקודה בתוך התיקייה. או קליק ימני על התיקייה ו-"open with code".npm start. הדפדפן נפתח לבד עם אייקון React מסתובב.npm start פותח את דפדפן ברירת המחדל של המערכת, ובדוגמה שונתה ההגדרה ב-Chrome כך שיהיה ברירת המחדל.פרקי ההרצאה: יצירת פרויקט חדש ב-React
תמלול ההרצאה: יצירת פרויקט חדש ב-React
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת פרויקט חדש ב-React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כעת אנחנו רוצים לבנות פרויקט React חדש מ-0 ולהתחיל לעבוד איתו. לצורך כך אנחנו מתקינים את הפרויקט מ-NPM, Node Package Manager, השרתים של Node.JF שמאפשרים לנו להתקין ספריות ומערכות אצלנו במחשב.
אז ראשית אנחנו צריכים להגיע לאיזושהי תיקייה אצלנו במחשב בכדי לבצע את ההתקנה בתוכה. אז בואו קודם כל נפתח תיקייה, ניגש לסייר הקבצים, ניגש לכונן C בוא נניח, אתם יכולים לפתוח אותה איפה שאתם רוצים.
אני אצור תיקייה חדשה ואני אקרא לה React. ובתוך התיקייה הזאת אני רוצה לבנות פרויקט חדש, כאן. פרויקט כמובן הולך להיות תיקייה נפרדת, כאן.
אז אני רוצה ראשית לפתוח את המקום הזה, את C React בעזרת ה-Command Line. אז יש לי שתי שיטות לעשות את זה, שיטה ראשונה ללכת והנה ה-Command Line כאן, או שאני רושם CMD.
ו-enter זה כמובן במערכות Windows, ב-Linux או ב-Mac, בטח יש את השיטות שלהם לפתוח את ה-Command Line או Terminal, זה נקרא ככה.
וכאן אני רוצה to navigate בדיוק ל-react. אז אנחנו יכולים לבצע cd, Change Directory, ל-conanC, וב-conanC אנחנו רוצים את react, והנה הגענו בדיוק למקום הזה, וכאן אנחנו יכולים להריץ את הפקודה, שתכף נראה, שיוצרת לנו פרויקט React חדש בדיוק פה.
אבל אני רוצה להראות טכניקה נוספת שבעזרתה אפשר להגיע דרך ה-Command Line למקום מסוים, אז אני אצא מה-Command Line הזה. והטכניקה פשוט אומרת, לכו לפה, לאזור הזה בסייר הקבצים, תקליקו ופשוט תרשמו את המילה cmd, ללחוץ Enter, ואז אוטומטית נפתח לכם במיקום הזה.
גם כן אותו הדבר, קצת יותר קל. כעת אנחנו רוצים לכתוב פקודה שבונה לנו פרויקט React בדיוק במקום הזה. היא כמובן תבנה לנו תיקייה שבתוכה יש את כל הפרויקט הדרוש.
אנחנו התקנו מקודם את React במחשב פעם אחת. המערכת שהתקנו נקראת Create React App ואנחנו רוצים לכתוב Create מקף React מקף App ואז את השם של הפרויקט.
אז אם אני בונה אתר לחנות חיות אז אני בטח אקרא לו animal store ואם אני בונה אתר עבור מוסך מכוניות אולי אני אקרא לו car garage או משהו כזה. אנחנו הולכים לבנות אתר שנקרא Northwind.
Northwind זה דאטאבייס, למעשה זה חברה פיקטיבית כזאת שמייקרוסופט יצרה או קנתה בתחילת שנות התשעים ומה שיפה בחברה הזאת זה שיש לה מאגר נתונים מוכן ואנחנו רוצים לעבוד עם המאגר הנתונים המוכן שיש לה.
אז אני כאילו בונה בכל הקורס הזה אתר עבור חברת Northwind. אין לה באמת אתר אינטרנט, אנחנו הולכים לבנות לה ולמוצרים שלה ולעובדים שלה ולעוד כל מיני דברים שיש בחברה הזאת, אנחנו הולכים לבנות אתר אינטרנט. ולכן זה הפרויקט שאני פותח.
שימו לב שאתם לא יכולים, לפחות לא היום, לקרוא לפרויקט עם אותיות גדולות או רק אותיות קטנות זה React לא מאשרת. אחר כך אפשר לשנות את השם של התקייה אבל כשאני יוצר את הפרויקט אני חייב ליצור אותו בצורה כזאת.
אז למעשה יש לנו create מכף react מכף up רווח ושם הפרויקט עכשיו זה מספיק בכדי לבנות פרויקט React ב-JavaScript אם אני לוחץ עכשיו enter הפרויקט שייווצר לי יהיה פרויקט React מן המניין אבל בשפת JavaScript.
רגע, אז באיזה שפה אנחנו הולכים לתכנת? אנחנו הולכים בקורס הזה לבנות React בטייפסקריפט, לא בג'אווה סקריפט. זה הרבה יותר נכון, הרבה יותר פופולרי, הרבה יותר חדשני, הרבה יותר מתקדם, והתעשייה עוברת כל הזמן לפיתוח בטייפסקריפט, ולאט לאט יורדים מנייטיב ג'אווה סקריפט. טייפסקריפט הופכת את עצמה בסופו של דבר לג'אווה סקריפט,
אבל לי בתור מתכנת יש המון המון יתרונות בעבודה עם טייפסקריפט על פני ג'אווה סקריפט. אז ראשית מה אני צריך לעשות בשביל להתקין את הפרויקט בטייפסקריפט?
אז עכשיו אני מוסיף כאן מינוס מינוס טמפלייט רווח טייפסקריפט זאת כל הפקודה אני לוחץ enter ויש לנו פה גלישה לשרתי npm והתקנה של פרויקט react. הדבר הזה בטח לוקח איזה 2-3 דקות ובסיום הפרויקט מוכן ואז נוכל לפתוח אותו בעזרת Visual Studio Code ולהריץ אותו.
והנה אנחנו רואים שהוא סיים, בואו נבצע אקזיט. זה הפרויקט, אם אני נכנס אליו אני רואה את מגוון הקבצים שיש לנו, אנחנו עוד מעט נעבור ונראה מה זה הקבצים האלה, אבל אני רוצה כרגע לפתוח את הפרויקט הזה בעזרת Visual Studio Code, יש לי שלוש שיטות לצורך כך.
שיטה ראשונה, אני פשוט הולך, מחפש את Visual Studio, הנה הוא כאן, והדבר שאני צריך לפתוח, פייל אופן פולדר תיקייה רגילה הוא היה בקונן סי כאן היה לנו ריאקט הדבר שאני צריך לפתוח זה בדיוק את התיקייה בעלת שם הפרויקט שהתקנתי אם אני התקנתי פרויקט נורת'ווינד אז אני צריך לפתוח
תיקיית נורת'ווינד לבחור אותה ולעשות סלקט פולדר לא לבחור אחד מעל אני לא בוחר את ריאקט כתיקיית מעל אוקיי כי זה בלבול מסוים שיכול להיות לכם ואז כמובן הפרויקט עוד לא ייפתח אני לא נכנס לתוך התיקייה ובוחר איזושהי תיקייה אחרת