התקנה של ריאקט - React
npm (Node Package Manager) להורדת ספריות. מורידים מ-nodejs.org את הגרסה ה-recommended, ההתקנה היא Next, Next, ואין צורך בכלים הנוספים. הגרסה בהרצאה היא 14.15.4.node --version.files.autoSave אחרי 1000 מילי-שניות, ומוסרים חלונות שתופסים מקום כמו Outline. ההרצאה משתמשת בערכת נושא בהירה, ומחיקת השורה הרלוונטית הופכת אותה לכהה.Code Spell Checker מסמן שגיאות איות באנגלית עם קו מתולתל. Auto Import משלים פקודות import בלבד, ולדברי המרצה הוא עובד ב-98% מהמקרים.npm install -g create-react-app (או npm i) מתקינה גלובלית, פעם אחת ברמת המחשב, כי הספרייה מספקת פקודות Command Line. ספרייה של פרויקט מסוים מתקינים בלי -g בתוך התיקייה.create-react-app --version הציגה 4.0.2.פרקי ההרצאה: התקנה של ריאקט - React
תמלול ההרצאה: התקנה של ריאקט - React
הטקסט המלא של הדקות הראשונות בהרצאה «התקנה של ריאקט - React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אילו התקנות אנחנו צריכים בכדי להתחיל לעבוד עם React? התקנה הראשונה שאנחנו צריכים להתקין זה התקנה של Node.js.
Node.js זה בעצם סביבת הרצה של JavaScript בסרבר סייד, כשבונים Back-end. אנחנו לא בונים Back-end כרגע, אנחנו בונים Front-end, React בונה לנו אפליקציות Front-end.
למה אנחנו צריכים את Node.js? אנחנו הולכים לתכנת Node.js אז התשובה היא לא אנחנו לא הולכים לתכנת Node.js אנחנו לא הולכים לתכנת Backend בקורס הזה אבל התשתית של React עובדת עם Node.js. Node.js מאפשרת גם לפתח דברים אפילו שאנחנו בונים Frontend עדיין יש ל-Node.js שירותים שהיא מספקת לי היא מספקת לי בעצם איזשהו סרבר דמו כזה שאני יכול להריץ ולבדוק את האתר עליו היא מספקת מערכת
שנקראת npm Node Package Manager בכדי להוריד ספריות ולהתקין אותן. React עובדת עם המערכות האלה עם npm של Node.js ועם הסרבר הזה של Node.js מריצה ולכן חשוב וחיוני ביותר שיהיה לנו במחשב את Node.js.
אנחנו נכנסים ל-nodejs.org יש כאן את ה-recommended version ויש את ה-latest version אני תמיד נוהג להתקין את ה-recommended ל-A-Test עדיין הם לא סיימו את כל הבדיקות בטא שלהם.
אני אישית אוהב להתקין את ה-Recommended, אתם יכולים לעשות גם את ה-Current אם אתם רוצים. אז אני לוחץ פה כרגע ב-14.15.4, ברגע שהוא סיים להתקין, פשוט נריץ את זה ונתקין.
אין כאן משהו מיוחד בהתקנה, זה בעצם הכל Next, Next, Next. בסיום ההתקנה יש לנו את Node.js. אז בואו נלחץ על Next, נאשר נקסט נקסט עוד נקסט אחד מה הוא רוצה פה tools לא רוצה להתקין tools אחרים נקסט אינסטול וברגע שהוא סיים פיניש ויש לנו את התקנת Node.js בואו נבדוק רק שבאמת התקנה הצליחה אנחנו פותחים command line ואנחנו רושמים node++ version וזאת ההתקנה
14.15.4 14.15.4 בדיוק כמו שהתקנו יש לנו את node.js בוא נעשה פה exit ונצא ואנחנו רוצים את ההתקנה הבאה אם אנחנו כבר באינטרנט ההתקנה הבאה זה התקנה של סביבת פיתוח אנחנו הולכים לעבוד בקורס הזה עם visual studio code בואו ניגש לvisual studio code download אתם יכולים אבל לבחור איזה סביבת פיתוח שאתם רוצים ניגש כאן visual studio code download אתם יכולים להוריד
את זה לפי מערכת ההפעלה שלכם בואו נלך כאן לwindows והנה אנחנו רואים שהוא מוריד לנו את הקובץ והנה אנחנו רואים שהוא סיים אז בואו נתקין אותו, נאשר, נקסט, נקסט, ויש פה משהו חשוב לדעתי, זה הייתי מסמן, Add open-width code action to Windows Explorer Directory context menu.
אם יש לנו תיקייה ואנחנו לוחצים הקשי מניע לתיקייה, אנחנו רוצים שיהיה לנו את האפשרות בתפריט לפתוח את התיקייה הזאת עם Visual Studio Code, זה לפי דעתי משהו שעוזר, ונבצע Next, Install.
הינה הוא סיים, אנחנו לא צריכים to launch כרגע, ו-Finish. הדבר הבא שאנחנו צריכים לבצע זה לבצע קונפיגורציה ל-Visual Studio Code.
אפשר לסגור את הדפדפן. אנחנו רוצים לפתוח את Visual Studio Code, הינה הוא כאן. By default ככה הוא נראה.
יש לנו פה את החלונית הזאת, ולפעמים כשאני כותב יש פה עוד איזה חלונית, חלונית שתופסת לי קצת מקום וvisual studio code by default לא מבצעת לי auto save ועוד כל מיני הגדרות defaultיות של visual studio code שדרך אגב היא סביבת פיתוח ממש ממש טובה וממש פופולרית אבל היא נותנת לי לבצע קונפיגורציה כמו שצריך למראה שלה ויש לי כאן קובץ שהכנתי שיהיה לכם
ביחד עם כל הקבצים של הקורס והוא בעצם מכיל הגדרות עבור Visual Studio Code. אז אני פשוט לוקח אותו פולו כולל הסוגריים האלה ופורמט את ג'ייסון, מעתיק, סוגר, הולך ל-Visual Studio Code, File, Preferences, יש לנו פה Settings, כאן אני הולך לאייקון הזה שמאפשר לי לכתוב
את הג'ייסון בעצמי, מוחק את הסוגריים היריקים האלה, זה פשוט מדביק את כל הכובד שמקודם העתקתי. הנקודה הזאת שאתם רואים כאן, ואומר שזה עדיין לא שמור.
אז אני פשוט מבצע פעם אחת save, edit, לא edit, file, save, וזאת הפעם האחרונה שאני צריך לעשות save, מפני שיש לנו פה הגדרה של auto save איפשהו.
הנה הוא פה, files.auto save, after delay, אחרי 1000 מילי, תמיד המערכת שומרת לנו את הקובץ ועוד הרבה הגדרות אחרות למראה של ויז'ל סטודיו. אם אתם לא אוהבים את המראה הלבן ואתם אוהבים יותר את המראה השחור, פשוט אפשר למחוק את השורה הזאת ואחרי שנייה הוא אוטומטית שומר וכל המראה הופך להיות שחור.
אני אוהב יותר את הלבן אז אני אשאר עם הלבן, יותר ברור בסרטונים וכאלה לפי דעתי. זה ההגדרות של ויז'ל סטודיו, את זה אפשר לסגור.
בואו ננסה לפתוח איזה תיקייה ולראות אולי יש פה הגדרות נוספות שאנחנו צריכים. יש לי פה תיקיית טסט, אני פותח אותה. כן, יש פה את שני החבר'ה האלה שהייתי רוצה להיפטר מהם.
Outline, אני לא רוצה לראות. ואוטומטית אם אני פותח קובץ, Index.HTML, אז זה הדבר היחידי שאני רואה כאן. כאן אני רואה את הפרויקט שפתחתי, את התיקייה ליתר דיוק, וזה הקובץ. אני לא צריך באמת לפתוח את התיקייה הזאת, זה היה רק לצורך בדיקה.
אז אפשר להיפטר מזה לחלוטין. בואו נעשה רגע File Close Folder וסגרנו וניפטר מהתיקייה הזאת. זו ההגדרה של Visual Studio Preferences.
הדבר הבא שאנחנו צריכים לבצע זה ללכת ל-View Extensions ומה שאנחנו רוצים זה להתקין Extensions שאנחנו נעבוד איתם.
Extensions האלה, Extension 1 זה Extension כללי שכדאי לעבוד איתו בכל מערכת שמפתחים וזה נקרא CodeSpellChecker, בואו נחפש אותו, והנה הוא פה, CodeSpellChecker, בואו נעשה לו Install, והדבר הזה פשוט מכיר את המילים שיש במילון, וגם את המילים שקשורות בפיתוח תוכנה, את רובן למעשה, וברגע שאנחנו טועים מבחינת האנגלית, הוא ישר
ייתן לנו מעין סקוויגלינג ליין כזה מתחת למילה, ואז אנחנו נוכל לדעת שטעינו, זה ממש עוזר. הדבר הבא שאנחנו צריכים וזה כן חשוב לגבי React זה extension שנקרא auto import.
הינה הוא פה. auto import זה extension שמשלים לנו פקודות בכדי שאנחנו לא נצטרך לכתוב את כל הפקודות האלה בעצמנו.
זה לא snippet, snippet זה פקודות מוכנות שאנחנו שותלים בקוד, הוא משלים לנו פקודות import בלבד. אנחנו נראה בהמשך מה זה אומר import.
אז זה חשוב מפני שאם אני משתמש באיזושהי פקודה חיצונית אני צריך להגדיר אימפורט של הפקודה הזאת בראש הקובץ שלי.
אני לא רוצה להתחיל ללכת לראש הקובץ ולהתחיל לכתוב את כל האימפורט בעצמי, כי לפעמים גם אני לא יודע מאיפה מגיע האימפורט הזה.
אז התוסף הזה פשוט מגלה אוטומטית מאיפה זה מגיע ומתקין את זה. Installing, בוא נגיד שהוא עובד ב-98% מהמקרים, נתקלתי בכמה מקרים שהוא לא עובד, אז שימו לב, אם הוא לא עובד אתם תצליחו לכתוב בעצמכם, אבל ברוב המקרים הוא עושה את העבודה.
אלו שני תוספים שאנחנו צריכים להתקין ופה סיימנו עם כל מה שקשור לויז'ואל סטודיו. טיפה יוריד רזולוציה, פייל ואפשר אפילו לסגור את זה ויש לנו כרגע את כל ההתקנות של ויז'ואל סטודיו מוכנות.
הדבר הבא שאנחנו צריכים להתקין זה את React. פה אנחנו פותחים Command Line רגיל ואנחנו רוצים לכתוב פקודה של NPM, Node Package Manager בכדי לבצע התקנה גלובלית במחשב של React.
Node Package Manager זה בעצם מערכת שנקראת Package Manager של Node.JF שמאפשרת להתקין ספריות בתוך המחשב שלנו בשני מודים ליתר דיוק, או שני מצבים.
אחד זה התקנה גלובלית, את זה אנחנו מתקינים פעם אחת ברמת המחשב כאשר הספרייה כוללת פקודות CLI. פקודות CLI זה פקודות Command Line. אם אנחנו מתקינים ספרייה שזה התפקיד שלה לאפשר לנו פקודות Command Line, אז אנחנו צריכים להתקין אותה פעם אחת גלובלית במחשב.
והתקנה של React זה בדיוק זה. זו ספרייה שמכילה פקודות Command Line שאנחנו רוצים להתקין אותה פעם אחת ברמת המחשב. אם ההתקנה זו ספרייה שקשורה לפרויקט ספציפי שאנחנו עושים, זה מוד אחר של התקנה וזה לא גלובלי.
כאן בתוך תקייה ספציפית אנחנו רוצים להתקין עכשיו את React כל התקנה של npm מתחילה ב-npm install אנחנו יכולים גם npm high שזה קיצור ל-install אם ההתקנה גלובלית הזו היא מוסיף מינוס g זה אומר שההתקנה עכשיו היא גלובלית פעם אחת ברמת המחשב ואת השם של ההתקנה שאני רוצה את השם של הספרייה ואנחנו רוצים להתקין ספרייה שנקראת create מקף react מקף קריאייט ריאקט אפ עם הכפים גו.