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
+32-36Lines changed: 32 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,40 +4,38 @@ title: Start a New React Project
4
4
5
5
<Intro>
6
6
7
-
If you're starting a new project, we recommend to use a toolchain or a framework. These tools provide a comfortable development environment but require a local Node.js installation.
7
+
בין אם אתה לומד ריאקט או שוקל להשתמש בספרייה בפרויקט קיים, תוכל להתחיל מיד על ידי [הוספת ריאקט לדף HTML באמצעות תגית script](/learn/add-react-to-a-website). אם הפרויקט שלך יהיה זקוק להרבה קומפוננטות וקבצים, יהיה עדיף לשקול את האופציות בהמשך העמוד.
8
8
9
9
</Intro>
10
10
11
-
<YouWillLearn>
11
+
## בחר את הדרך שלך {/*choose-your-own-adventure*/}
12
12
13
-
* How toolchains are different from frameworks
14
-
* How to start a project with a minimal toolchain
15
-
* How to start a project with a fully-featured framework
16
-
* What's inside popular toolchains and frameworks
13
+
ריאקט היא ספרייה שנותנת לנו לארגן קוד UI על ידי הפרדתו לחלקים שנקראים קומפוננטות. ריאקט לא מטפלת בשבילנו בניתוב(routing) או בניהול מידע. בשביל לנתב או לנהל מידע, נצטרך להתקין ספריות צד שלישי או לכתוב פתרונות משלנו. זה אומר שישנם כמה דרכים להתחיל פרויקט ריאקט חדש:
17
14
18
-
</YouWillLearn>
15
+
* להתחיל עם **סט כלים מינימלי**, ולהוסיף פיצ׳רים לפרוייקט כשנצטרך אותם.
16
+
* להתחיל עם **פריימוורק** שמכיל בתוכו פיצ׳רים נפוצים.
19
17
20
-
## Choose your own adventure {/*choose-your-own-adventure*/}
18
+
בין אם אתה רק מתחיל, מנסה לבנות משהו גדול, או רוצה לבנות סט כלים משלך, המדריך הזה יכוון אותך לדרך הנכונה.
21
19
22
-
React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. This means there are several ways to start a new React project:
20
+
## להתחיל עם סט כלים של ריאקט {/*getting-started-with-a-react-toolchain*/}
23
21
24
-
*[Start with an **HTML file and a script tag**.](/learn/add-react-to-a-website) This doesn't require Node.js setup but offers limited features.
25
-
* Start with a **minimal toolchain,** adding more features to your project as you go. (Great for learning!)
26
-
* Start with an **opinionated framework** that has common features like data fetching and routing built-in.
22
+
אם אתה רק מתחיל עם ריאקט, אנחנו ממליצים על [Create React App](https://create-react-app.dev/), שהיא דרך פופולרית לנסות פיצ׳רים של ריאקט ולבנות אפליקציית צד לקוח. Create React App הוא סט כלים שעוצב במיוחד בשביל ריאקט. כלים כמו CRA עוזרים לנו בדברים כמו:
27
23
28
-
## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/}
24
+
* ניהול מספר רב של קבצים וקומפוננטות
25
+
* שימוש בספריות צד שלישי מ-npm
26
+
* הימנעות מטעויות נפוצות כבר מההתחלה
27
+
* שינוי בלייב של CSS וקוד JS בזמן פיתוח
28
+
* אופטימיזציה של הקוד לפרודקשן
29
29
30
-
If you're **learning React,** we recommend [Create React App](https://create-react-app.dev/). It is the most popular way to try out React and build a new single-page, client-side application. It's made for React but isn't opinionated about routing or data fetching.
31
-
32
-
First, install [Node.js](https://nodejs.org/en/). Then open your terminal and run this line to create a project:
30
+
ניתן להתחיל לכתוב ריאקט עם Create React App באמצעות השורה הבאה בטרמינל (**וודא שיש לך [Node.js](https://nodejs.org/) מותקן!**)
33
31
34
32
<TerminalBlock>
35
33
36
34
npx create-react-app my-app
37
35
38
36
</TerminalBlock>
39
37
40
-
Now you can run your app with:
38
+
עכשיו אפשר להריץ את הקוד שלנו באמצעות:
41
39
42
40
<TerminalBlock>
43
41
@@ -46,38 +44,36 @@ npm start
46
44
47
45
</TerminalBlock>
48
46
49
-
For more information, [check out the official guide](https://create-react-app.dev/docs/getting-started).
47
+
למידע נוסף, [קרא את הדוקומנטציה הרשמית](https://create-react-app.dev/docs/getting-started).
48
+
49
+
Create React App לא מטפלת בלוגיקה של הבקאנד, הכלי רק יוצר frontend build pipeline. זה אומר שניתן להשתמש באיזה בקאנד שנרצה עם CRA. אם אתה מחפש פיצ׳רים נוספים כמו ניתוב ולוגיקת צד שרת, תמשיך לקרוא!
50
50
51
-
> Create React App doesn't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead.
51
+
### אופציות נוספות {/*other-options*/}
52
52
53
-
### Popular alternatives {/*popular-alternatives*/}
53
+
Create React App היא מעולה כדי להתחיל לעבוד עם ריאקט, אבל אם תרצה סט כלים יותר קטן, תוכל לנסות את אחד הכלים הבאים:
54
54
55
55
*[Vite](https://vitejs.dev/guide/)
56
56
*[Parcel](https://parceljs.org/)
57
57
58
-
## Building with a full-featured framework {/*building-with-a-full-featured-framework*/}
58
+
## כתיבת אפליקציה עם ריאקט ופריימוורק {/*building-with-react-and-a-framework*/}
59
59
60
-
If you're looking to **start a production-ready project,**[Next.js](https://nextjs.org/)is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly.
60
+
אם אתה מחפש להתחיל פרוייקט גדול יותר שיכול לרוץ בפרוקדשן,[Next.js](https://nextjs.org/)היא מקום מעולה להתחיל ממנו. Next.js הוא פריימוורק פופולרי שנועד לכתיבת אפליקציות סטטיות ואפליקציות server-rendered עם ריאקט. הפריימוורק מכיל פיצ׳רים כמו ניתוב, styling, ורינדור צד שרת, מה שמאפשר להרים פרוייקט במהירות.
61
61
62
-
The [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) tutorial is a great introduction to building with React and Next.js.
62
+
[התחל עם Next.js](https://nextjs.org/docs/getting-started) עם המדריך הרשמי.
63
63
64
-
### Popular alternatives {/*popular-alternatives*/}
64
+
### אופציות נוספות {/*other-options-1*/}
65
65
66
-
*[Gatsby](https://www.gatsbyjs.org/)
67
-
*[Remix](https://remix.run/)
68
-
*[Razzle](https://razzlejs.org/)
66
+
* נותן לכתוב אתרים סטטיים באמצעות ריאקט ו-GraphQL. [Gatsby](https://www.gatsbyjs.org/)
67
+
*[Razzle](https://razzlejs.org/) הוא פריימוורק עם רינדור בצד שרת שלא דורש קונפיגורציה, אבל מאפשר יותר גמישות מ-Next.js.
69
68
70
69
## Custom toolchains {/*custom-toolchains*/}
71
70
72
-
You may prefer to create and configure your own toolchain. A toolchain typically consists of:
71
+
יכול להיות שאתה מעדיף ליצור ולקנפג סט כלים משלך. סט כלים ב-JavaScript מכיל בדרך כלל:
73
72
74
-
* A **package manager** lets you install, update, and manage third-party packages. Popular package managers: [npm](https://www.npmjs.com/) (built into Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/).
75
-
* A **compiler** lets you compile modern language features and additional syntax like JSX or type annotations for the browsers. Popular compilers: [Babel](https://babeljs.io/), [TypeScript](http://typescript.org/), [swc](https://swc.rs/).
76
-
* A **bundler** lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/).
77
-
* A **minifier** makes your code more compact so that it loads faster. Popular minifiers: [Terser](https://terser.org/), [swc](https://swc.rs/).
78
-
* A **server** handles server requests so that you can render components to HTML. Popular servers: [Express](https://expressjs.com/).
79
-
* A **linter** checks your code for common mistakes. Popular linters: [ESLint](https://eslint.org/).
80
-
* A **test runner** lets you run tests against your code. Popular test runners: [Jest](https://jestjs.io/).
73
+
***מנהל חבילות**- מאפשר להתקין, לעדכן ולנהל ספריות צד שלישי. [Yarn](https://yarnpkg.com/) ו-[npm](https://www.npmjs.com/) הם שני מנהלי חבילות פופולריים.
74
+
***באנדלר**- מאפשר לנו לכתוב קוד מודולרי ואורז אותו לתוך חלקים קטנים, מה שמוריד את זמני הטעינה. [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/), ו-[Parcel](https://parceljs.org/) הם באנדלרים פופולריים (הערת המתרגם - גם [vite](https://vitejs.dev/) אחלה).
75
+
***קומפיילר**- מאפשר לנו לכתוב קוד JavaScript מודרני שעובד בדפדפנים ישנים. [Babel](https://babeljs.io/) הוא דוגמה אחת.
81
76
82
-
If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. A framework will usually also provide a routing and a data fetching solution. In a larger project, you might also want to manage multiple packages in a single repository with a tool like [Nx](https://nx.dev/react).
77
+
בפרוייקט גדול יותר, יכול להיות שיהיה צורך בכלי שמנהל מספר חבילות ב-repo אחד. [Nx](https://nx.dev/react) הוא דוגמה לכלי כזה.
83
78
79
+
אם אתה מעדיף להקים סט כלים משלך מאפס, [מדריך זה](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) יוצר מאפס חלק מהפונקציונליות של Create React App.
0 commit comments