You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/pages/learn/start-a-new-react-project.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,30 +4,30 @@ title: Start a New React Project
4
4
5
5
<Intro>
6
6
7
-
בין אם אתה לומד ריאקט או שוקל להשתמש בספרייה בפרויקט קיים, תוכל להתחיל מיד על ידי [הוספת ריאקט לדף HTML באמצעות תגית script](/learn/add-react-to-a-website). אם הפרויקט שלך יהיה זקוק להרבה קומפוננטות וקבצים, יהיה עדיף לשקול את האופציות בהמשך העמוד.
7
+
בין אם אתה לומד ריאקט או שוקל להשתמש בריאקט בפרויקט קיים, תוכל להתחיל מיד על ידי [הוספת ריאקט לדף HTML באמצעות תגית script](/learn/add-react-to-a-website). אם הפרויקט שלך יהיה זקוק להרבה קומפוננטות וקבצים, עדיף יהיה לשקול את האופציות בהמשך העמוד.
8
8
9
9
</Intro>
10
10
11
11
## בחר את הדרך שלך {/*choose-your-own-adventure*/}
12
12
13
-
ריאקט היא ספרייה שנותנת לנו לארגן קוד UI על ידי הפרדתו לחלקים שנקראים קומפוננטות. ריאקט לא מטפלת בשבילנו בניתוב(routing) או בניהול מידע. בשביל לנתב או לנהל מידע, נצטרך להתקין ספריות צד שלישי או לכתוב פתרונות משלנו. זה אומר שישנם כמה דרכים להתחיל פרויקט ריאקט חדש:
13
+
ריאקט היא ספרייה שמאפשרת לנו לארגן קוד UI על ידי הפרדתו לחלקים שנקראים קומפוננטות. ריאקט לא מטפלת בשבילנו בניתוב(routing) או בניהול מידע. בשביל לנתב או לנהל מידע, נצטרך להתקין ספריות צד שלישי או לכתוב פתרונות משלנו. זה אומר שישנם כמה דרכים להתחיל פרויקט ריאקט חדש:
14
14
15
15
* להתחיל עם **סט כלים מינימלי**, ולהוסיף פיצ׳רים לפרוייקט כשנצטרך אותם.
16
-
* להתחיל עם **פריימוורק**שמכיל בתוכו פיצ׳רים נפוצים.
16
+
* להתחיל עם **פריימוורק**עם פיצ׳רים מובנים כמו data fetching ו-routing.
17
17
18
18
בין אם אתה רק מתחיל, מנסה לבנות משהו גדול, או רוצה לבנות סט כלים משלך, המדריך הזה יכוון אותך לדרך הנכונה.
19
19
20
20
## להתחיל עם סט כלים של ריאקט {/*getting-started-with-a-react-toolchain*/}
21
21
22
-
אם אתה רק מתחיל עם ריאקט, אנחנו ממליצים על [Create React App](https://create-react-app.dev/), שהיא דרך פופולרית לנסות פיצ׳רים של ריאקט ולבנות אפליקציית צד לקוח. Create React App הוא סט כלים שעוצב במיוחד בשביל ריאקט. כלים כמו CRA עוזרים לנו בדברים כמו:
22
+
אם אתה רק מתחיל עם ריאקט, אנחנו ממליצים על [Create React App](https://create-react-app.dev/), שהיא דרך פופולרית להתנסות עם ריאקט ולבנות אפליקציית צד לקוח. Create React App הוא סט כלים שעוצב במיוחד בשביל ריאקט. כלים כמו CRA עוזרים לנו בדברים כמו:
23
23
24
24
* ניהול מספר רב של קבצים וקומפוננטות
25
25
* שימוש בספריות צד שלישי מ-npm
26
26
* הימנעות מטעויות נפוצות כבר מההתחלה
27
27
* שינוי בלייב של CSS וקוד JS בזמן פיתוח
28
28
* אופטימיזציה של הקוד לפרודקשן
29
29
30
-
ניתן להתחיל לכתוב ריאקט עם Create React App באמצעות השורה הבאה בטרמינל (**וודא שיש לך [Node.js](https://nodejs.org/) מותקן!**)
30
+
ניתן להתחיל לכתוב ריאקט עם Create React App באמצעות הפקודה הבאה בטרמינל (**וודא שיש לך [Node.js](https://nodejs.org/) מותקן!**)
31
31
32
32
<TerminalBlock>
33
33
@@ -46,29 +46,29 @@ npm start
46
46
47
47
למידע נוסף, [קרא את הדוקומנטציה הרשמית](https://create-react-app.dev/docs/getting-started).
48
48
49
-
Create React App לא מטפלת בלוגיקה של הבקאנד, הכלי רק יוצר frontend build pipeline. זה אומר שניתן להשתמש באיזה בקאנד שנרצה עם CRA. אם אתה מחפש פיצ׳רים נוספים כמו ניתוב ולוגיקת צד שרת, תמשיך לקרוא!
49
+
> שים לב ש-Create React App לא מטפל בלוגיקת בקאנד או במסדי נתונים. ניתן להשתמש בכל בקאנד שרוצים עם CRA. כשמתחילים פרוייקט, מקבלים תיייה עם HTML סטטי, CSS ו-JS. בגלל שלCRA אין דרך להשתמש בסרבר, זה לא נותן לנו את הביצועים הכי טובים. אם אתה מחפש זמני טעינה מהירים יותר ופיצ׳רים כמו ניתוב והרצת קוד בצד שרת, אנחנו ממליצים להשתמש בפרימוורק.
50
50
51
51
### אופציות נוספות {/*other-options*/}
52
52
53
-
Create React App היא מעולה כדי להתחיל לעבוד עם ריאקט, אבל אם תרצה סט כלים יותר קטן, תוכל לנסות את אחד הכלים הבאים:
53
+
אלטרנטיבות פופולריות:
54
54
55
55
*[Vite](https://vitejs.dev/guide/)
56
56
*[Parcel](https://parceljs.org/)
57
57
58
-
## כתיבת אפליקציה עם ריאקט ופריימוורק {/*building-with-react-and-a-framework*/}
58
+
## פיתוח עם פריימוורק {/*building-with-react-and-a-framework*/}
59
59
60
-
אם אתה מחפש להתחיל פרוייקט גדול יותר שיכול לרוץ בפרוקדשן, [Next.js](https://nextjs.org/) היא מקום מעולה להתחיל ממנו. Next.js הוא פריימוורק פופולרי שנועד לכתיבת אפליקציות סטטיות ואפליקציות server-rendered עם ריאקט. הפריימוורק מכיל פיצ׳רים כמו ניתוב, styling, ורינדור צד שרת, מה שמאפשר להרים פרוייקט במהירות.
60
+
אם אתה מחפש להתחיל פרויקט שיכול לרוץ בפרוקדשן, שימוש ב-[Next.js](https://nextjs.org/) היא אופציה נהדרת. Next.js הוא פריימוורק פופולרי שנועד לכתיבת אפליקציות סטטיות ואפליקציות שמרונדרות בצד שרת עם ריאקט. הפריימוורק מכיל פיצ׳רים כמו ניתוב, styling, ורינדור צד שרת, מה שמאפשר להרים פרוייקט במהירות.
61
61
62
-
[התחל עם Next.js](https://nextjs.org/docs/getting-started)עם המדריך הרשמי.
62
+
המדריך [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) הוא נקודת התחלה טובה לפיתוח עם ריאקט ו-Next.js.
63
63
64
64
### אופציות נוספות {/*other-options-1*/}
65
-
66
-
*נותן לכתוב אתרים סטטיים באמצעות ריאקט ו-GraphQL. [Gatsby](https://www.gatsbyjs.org/)
67
-
*[Razzle](https://razzlejs.org/) הוא פריימוורק עם רינדור בצד שרת שלא דורש קונפיגורציה, אבל מאפשר יותר גמישות מ-Next.js.
65
+
*[Gatsby](https://www.gatsbyjs.org)
66
+
*[Remix](https://remix.run)
67
+
*[Razzle](https://razzlejs.org)
68
68
69
69
## Custom toolchains {/*custom-toolchains*/}
70
70
71
-
יכול להיות שאתה מעדיף ליצור ולקנפג סט כלים משלך. סט כלים ב-JavaScript מכיל בדרך כלל:
71
+
יכול להיות שאתה מעדיף ליצור ולקנפג סט כלים משלך. סט כלים מכיל בדרך כלל:
72
72
73
73
***מנהל חבילות**- מאפשר להתקין, לעדכן ולנהל ספריות צד שלישי. [Yarn](https://yarnpkg.com/) ו-[npm](https://www.npmjs.com/) הם שני מנהלי חבילות פופולריים.
74
74
***באנדלר**- מאפשר לנו לכתוב קוד מודולרי ואורז אותו לתוך חלקים קטנים, מה שמוריד את זמני הטעינה. [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/), ו-[Parcel](https://parceljs.org/) הם באנדלרים פופולריים (הערת המתרגם - גם [vite](https://vitejs.dev/) אחלה).
0 commit comments