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

דיונים מקורסים
#47

תודה, אבדוק איך משנמכים (התקנתי אותו עכשיו תוך כדי המדריך)
זה תוכן הקובץ (לא עשיתי בו שום שינוי עד כמה שאני יודעת)

{
  "name": "my-react-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-react": "^7.6.3",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "flatpickr": "^4.6.3",
    "html-webpack-plugin": "^3.2.0",
    "immer": "^5.0.0",
    "jquery": "^3.4.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.12",
    "youtube-player": "^5.5.2"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.11.5",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^8.0.1",
    "babel-jest": "^26.3.0",
    "css-loader": "^3.2.1",
    "jest": "^26.4.2",
    "mini-css-extract-plugin": "^0.8.0",
    "tinycolor2": "^1.4.1",
    "webpack-dev-server": "^3.11.0"
  }
}
#48

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

#49

סליחה, קראתי לא נכון, בכל אופן אני לא מצליחה להדביק פה את הכל, יכולה לשלוח לך במייל אם תרצה, תודה!

#50

מהרצת הפקודה npm install התקבלה ההודעה הבאה :

npm install
npm install600×512 155 KB

ומהרצת הפקודה npx webpack-dev-server -d מתקבלת השגיאה הבאה :
בהעלאה: npx webpack-dev-server -d.jpg…

וכפי שעדי רשמה את הקובץ package-lock.jsonלא ניתן להעביר דרך כאן - קיימת דרך נוספת?
גם אצלי הותקן node18 אני אנסה במקביל לשנמך.

#51

סורי… רואה שנשמט מההודעה הקודמת-
מהרצת הפקודה npx webpack-dev-server -d מתקבלת השגיאה הבאה :

npx webpack-dev-server -d
npx webpack-dev-server -d950×770 364 KB

נראה ממש כמו אצל עדי.

#52

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

set NODE_OPTIONS=--openssl-legacy-provider

ורק אחרי זה את:

npx webpack-dev-server -d

ואז הכל צריך לעבוד

#53

עובד פיקס!

תודה רבה!

#54

image
image1426×243 15.4 KB

היי ינון, תוכל לעזור לי להבין את הבעיה ואיך לתקן אותה? Error: Option ‘-d, --devtool ’ argument missing

#55

הי נסי להריץ את הפקודה:

npc webpack-dev-server

בלי ה -d נראה אם זה מסתדר.

במקביל יש כלי נוסף שלהם ליצירת פרויקט על Windows שנקרא create-react-app ואפשר לנסות גם אותו (יש שיעור עליו כאן):
https://www.tocode.co.il/bundles/react/lessons/create-react-app?tab=video

ובמקביל יש כלי נוסף (לא שלהם) ליצירת פרויקט ריאקט על Windows שנקרא vite והקלטתי גם עליו שיעור כאן:
https://www.tocode.co.il/past_workshops/106

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

#56

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

image
image1685×458 26.4 KB

אלו בעצם קבצים שהיו אמורים להבנות ולא ניבנו ולכן אין מענה לשדה הבראוזר?

#57

איזה גירסת node.js מותקנת אצלך? והאם ביצעת npm install מהתיקיה הראשית של תיקיית הדוגמאות? יכולה להדביק כאן את הפלט של הרצת npm install ?

#58

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

גירסת node.js:
v18.16.0

image
image1005×544 16.8 KB

#59

היי לאחר שהרצתי את הפקודה npm install הופיעה לי התיקייה node_modules. הרצתי אחרי זה את הפקודה- npx webpack-dev-server -d וזאת השגיאה שהופיעה לי:
Untitled

#60

הי נסה בבקשה להריץ:

npx webpack-dev-server

בלי ה -d נראה אם זה יעבוד

#61

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

#62

הי

הפעלה של webpack-dev-server לא מייצרת את תיקיית dist אלא מפעילה שרת שמגיש את דף האינטרנט מהזיכרון.

בשביל לייצר את תיקיית dist אנחנו נכתוב:

npx webpack
#63

ההתקנה פה מדובר על התקנה ראשונה.
איך בכל פעם מריצים את הקוד?
מה בפועל הפקודות שצריך לבצע בכל הרצה של פרויקט שכבר קיים או אם לוקחים את תיקיית הbefore ועובדים עליה?

#64

הי בהתקנה ראשונה יש להריץ

npm install

ואחר כך בשביל להפעיל את השרת מפעילים:

npx webpack-dev-server

או בגירסת ה vite (בתיקיית after-vite) אנחנו מפעילים את שרת הפיתוח עם:

npm run dev
#65

מה ההבדל בין גרסת הVITE לגרסה השניה? מה צריך לעשות כדי שיהיה עם VITE?

כשני מריצה את הפקודה שאמרת מקבלת שגיאה:
C:\Windows\System32>cd C:\Avigail\React\05-jsx\before

C:\Avigail\React\05-jsx\before>npx webpack-dev-server
CLI for webpack must be installed.
webpack-cli (GitHub - webpack/webpack-cli: Webpack's Command Line Interface)

We will use “npm” to install the CLI via “npm install -D webpack-cli”.
Do you want to install ‘webpack-cli’ (yes/no): yes
Installing ‘webpack-cli’ (running ‘npm install -D webpack-cli’)…
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see Version Support - ESLint - Pluggable JavaScript Linter for other options.

added 366 packages, and audited 367 packages in 1m

121 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
Error: Cannot find module ‘webpack-cli/package.json’
Require stack:

  • C:\Users\C50-A\AppData\Local\npm-cache_npx\f4b38cee0017d5c3\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
    at Function.resolve (node:internal/modules/helpers:148:19)
    at runCli (C:\Users\C50-A\AppData\Local\npm-cache_npx\f4b38cee0017d5c3\node_modules\webpack-dev-server\bin\webpack-dev-server.js:85:27)
    at C:\Users\C50-A\AppData\Local\npm-cache_npx\f4b38cee0017d5c3\node_modules\webpack-dev-server\bin\webpack-dev-server.js:190:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
    code: ‘MODULE_NOT_FOUND’,
    requireStack: [
    ‘C:\Users\C50-A\AppData\Local\npm-cache\_npx\f4b38cee0017d5c3\node_modules\webpack-dev-server\bin\webpack-dev-server.js’
    ]
    }

C:\Avigail\React\05-jsx\before>

#66

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