קורס React 2020 שיעור הפקד הראשון שלי על מכונת Windows


זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/react/lessons/windows

שלום, הקורס מוסבר מאוד יפה,תודה!
אני לא מסתדרת עם ההתקנה דרך הCMD. במיוחד של (npm install(node_moudles
אשמח לעזרה.

הי יעל,

בטח אשמח לעזור - איפה ההסתבכות? רוצה לספר קצת יותר פרטים מה ניסית לעשות ומה לא עבד?

אגב פה בפורום את יכולה להיכנס למסך עריכת הפרופיל ולבחור לך שם משתמש יותר מוצלח מ 11142

היי ינון,

אשמח להבין את ההבדל בין הפקודות לאיתחול פרויקט בריאקט:

npx webpack-dev-server

npx create react app - הרי זו כוללת בתוכה כבר את BABEL וWEBPACK אז למה השתמשת באפשרות הראשונה?

באיזה סיטואציות משתמשים בכל אחת? תודה! :slight_smile:

הי @Anael

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

הספריה create react app נועדה לאנשים שלא מכירים מספיק טוב וובפאק או שמעדיפים לא להגדיר בעצמם דברים לפני שמתחילים לעבוד. יש לה ייתרון שהיא משתמשת ב Defaults מאוד הגיוניים לרוב הפרויקטים, וחיסרון שהיא שמה (לדעתי) יותר מדי רכיבים וספריות כדי שהכל יעבוד ישר מהקופסא.

אני חושב שבקורס כדאי לקחת את תיקיית הדוגמאות שלי ולעבוד על פרויקטי הדוגמא, ולהשתמש בהם כבסיס לתרגילים. אני חושב שגם ממש שווה להסתכל לפחות בחלק מהשיעורים של קורס Webpack כאן באתר כדי להבין איך כל תהליך הבניה עובד. אחרי זה שווה לשחק עם create react app ולראות מה נותן לך מענה טוב יותר לפרויקט שלך.

היי ינון,
הקורס נראה מדהים, אך ההתקנה נכשלה לי.
אולי תוכל לעזור?
הפקודה npx webpack-dev-server -d החזירה error
תודה.

הי @chani

אם לקחת את תיקיית הדוגמאות מכאן:

אז בתיקיה הראשית של תיקיית הדוגמאות את צריכה להפעיל פעם אחת:

npm install

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

npx webpack-dev-server -d

לכל דוגמא ספציפית

תודה.
לקח לי זמן להבין את זה…

שלום,
הקורס מוסבר מעולה, תודה!
אני מנסה לפעול ע"פ השלבים לעיל,
הורדתי את הדוגמא, הרצתי install והכל עבד תקין,
כשאני מנסה להריץ את הפקודה npx webpack-dev-server -d --open
אני מקבלת את השגיאה:


אשמח מאד לעזרה!
תודה.

זה נראה שיש בעיה בקובץ package.json או package-lock.json. תוכלי לנסות למחוק את כל תיקיית node_modules ולהריץ מחדש npm install מהתיקיה הראשית כדי לוודא שאין שגיאות?

בנוסף תוכלי להדביק כאן את התוכן של שני הקבצים package.json ו package-lock.json מתיקיית הפרויקט?

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

התחלתי הכל מהתחלה,
הורדתי שוב את תיקיית הדוגמאות,
שידרגתי את NODE.JS לגירסה מתקדמת (כבר היה לי מותקן גירסה ישנה)
ואז פעלתי ע"פ הסדר בסרטון,
ואני מקבלת את השגיאה הזו:

אני כן רוצה להתקין את הסביבה אצלי ולא בענן,
כי אני מתחילה ללמוד את הקורס באופן מלא ועיקבי, כדי לעבוד בזה אח"כ,
אז זה חשוב לי,

אשמח מאד לעזרה!
תודה.

בצילום השני אני לא רואה שגיאה. יכולה להדביק צילום של המשך ההודעה?

זו הבעיה:

כן npm אוהב להתלונן על בעיות אבטחה בחבילות ותמיד הוא ימצא על מה לקטר, אבל זאת בדרך כלל לא בעיה.

מה קורה כשאת מריצה עכשיו:

npx webpack-dev-server -d

האם עדיין יש שגיאה?

אם כן, האם תוכלי להדביק כאן את התוכן של הקבצים package.json ו package-lock.json מתיקיית ההרצה?

שוב שגיאה:


זה ה json:

json-lock.txt (324 .1 ק״ב)

אני רואה שאת לא מריצה את הפרויקט מהתיקיה הנכונה

יש להפעיל npm install מהתיקיה הראשית,
ואת npx webpack-dev-server -d להפעיל מתיקיית דוגמה ספציפית (ממש מתיקיית before בתוך תיקיית הדוגמה)

נכון, טעות שלי,
עכשיו הרצתי מתוך התקיה הספציפית ויש שגיאה:

הי מלכה,

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

  1. אנחנו צריכים תיקיית node_modules אחת, קובץ package.json אחד וקובץ package-lock.json אחד בתיקיית הדוגמאות הראשית. בתוך תיקיה של דוגמה ספציפית אסור לשים אף אחד משלושת אלה.

  2. בתוך תיקיית הדוגמאות הראשית תמחקי את node_modules לגמרי, תמחקי את package-lock.json לגמרי וקחי את package.json מתיקיית הדוגמאות שלי בקישור הזה:
    https://github.com/tocodeil/react2020-course-examples/blob/master/package.json

  3. מתוך תיקיית הדוגמאות הראשית הפעילי npm install ותראי שהוא יוצר לך תיקיית node_modules וקובץ package-lock.json באותה תיקיה ראשית.

  4. אחרי שכל זה במקום את נכנסת לתיקיה של דוגמה ספציפית ושם מפעילה npx webpack-dev-server -d.

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

עכשיו עובד, תודה רבה!!
נ.ב. בתוך התיקיה before של שיעור 3
יש קובץ package.json, מחקתי אותו,
אולי זה עשה את הבעיות?

תודה.