Skip to content

Commit 7e03175

Browse files
authored
Merge branch 'main' into sync-3aac8c59
2 parents c5ebc08 + d0b6531 commit 7e03175

2 files changed

Lines changed: 69 additions & 73 deletions

File tree

beta/src/pages/learn/start-a-new-react-project.md

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,38 @@ title: Start a New React Project
44

55
<Intro>
66

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). אם הפרויקט שלך יהיה זקוק להרבה קומפוננטות וקבצים, יהיה עדיף לשקול את האופציות בהמשך העמוד.
88

99
</Intro>
1010

11-
<YouWillLearn>
11+
## בחר את הדרך שלך {/*choose-your-own-adventure*/}
1212

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) או בניהול מידע. בשביל לנתב או לנהל מידע, נצטרך להתקין ספריות צד שלישי או לכתוב פתרונות משלנו. זה אומר שישנם כמה דרכים להתחיל פרויקט ריאקט חדש:
1714

18-
</YouWillLearn>
15+
* להתחיל עם **סט כלים מינימלי**, ולהוסיף פיצ׳רים לפרוייקט כשנצטרך אותם.
16+
* להתחיל עם **פריימוורק** שמכיל בתוכו פיצ׳רים נפוצים.
1917

20-
## Choose your own adventure {/*choose-your-own-adventure*/}
18+
בין אם אתה רק מתחיל, מנסה לבנות משהו גדול, או רוצה לבנות סט כלים משלך, המדריך הזה יכוון אותך לדרך הנכונה.
2119

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*/}
2321

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 עוזרים לנו בדברים כמו:
2723

28-
## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/}
24+
* ניהול מספר רב של קבצים וקומפוננטות
25+
* שימוש בספריות צד שלישי מ-npm
26+
* הימנעות מטעויות נפוצות כבר מההתחלה
27+
* שינוי בלייב של CSS וקוד JS בזמן פיתוח
28+
* אופטימיזציה של הקוד לפרודקשן
2929

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/) מותקן!**)
3331

3432
<TerminalBlock>
3533

3634
npx create-react-app my-app
3735

3836
</TerminalBlock>
3937

40-
Now you can run your app with:
38+
עכשיו אפשר להריץ את הקוד שלנו באמצעות:
4139

4240
<TerminalBlock>
4341

@@ -46,38 +44,36 @@ npm start
4644

4745
</TerminalBlock>
4846

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. אם אתה מחפש פיצ׳רים נוספים כמו ניתוב ולוגיקת צד שרת, תמשיך לקרוא!
5050

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*/}
5252

53-
### Popular alternatives {/*popular-alternatives*/}
53+
Create React App היא מעולה כדי להתחיל לעבוד עם ריאקט, אבל אם תרצה סט כלים יותר קטן, תוכל לנסות את אחד הכלים הבאים:
5454

5555
* [Vite](https://vitejs.dev/guide/)
5656
* [Parcel](https://parceljs.org/)
5757

58-
## Building with a full-featured framework {/*building-with-a-full-featured-framework*/}
58+
## כתיבת אפליקציה עם ריאקט ופריימוורק {/*building-with-react-and-a-framework*/}
5959

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 serverrendered 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, ורינדור צד שרת, מה שמאפשר להרים פרוייקט במהירות.
6161

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) עם המדריך הרשמי.
6363

64-
### Popular alternatives {/*popular-alternatives*/}
64+
### אופציות נוספות {/*other-options-1*/}
6565

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.
6968

7069
## Custom toolchains {/*custom-toolchains*/}
7170

72-
You may prefer to create and configure your own toolchain. A toolchain typically consists of:
71+
יכול להיות שאתה מעדיף ליצור ולקנפג סט כלים משלך. סט כלים ב-JavaScript מכיל בדרך כלל:
7372

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/) הוא דוגמה אחת.
8176

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) הוא דוגמה לכלי כזה.
8378

79+
אם אתה מעדיף להקים סט כלים משלך מאפס, [מדריך זה](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) יוצר מאפס חלק מהפונקציונליות של Create React App.

0 commit comments

Comments
 (0)