diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index bd5ba6c50..31c841f59 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,130 +1,136 @@ --- -title: Start a New React Project +title: پروژه ری اکتی را شروع کنید --- -If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. - +اگر می خواهید یک برنامه جدید یا یک وبسایت با استفاده از ری اکت بسازید، توصیه می کنیم یکی از فریمورک های مبتی بر ری اکت را انتخاب کنید که در جامعه برنامه نویسان ری اکت محبوب هستند. -You can use React without a framework, however we’ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React. +می توانید بدون استفاده از فریمورک از ری‌اکت استفاده کنید، با این حال ما متوجه شدیم که اکثر برنامه ها و سایت ها در نهایت راه‌حل‌هایی برای مشکلات رایج مانند تقسیم کد، مسیریابی، واکشی داده ها و تولید HTML ایجاد می کنند. این مشکلات برای همه کتابخانه های رابط کاربری مشترک است ، نه فقط ری اکت. -By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later. +با استفاده از فریمورک ، شما می توایند خیلی سریع ری اکت را شروع کنید، و از ساختن فریمورک خود در آینده اجتناب کنید. -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### آیا میتوانم ری اکت را بدون فریمورک استفاده کنم؟ {/*can-i-use-react-without-a-framework*/} + +مطمئنا می توانید از ری اکت بدون فریمورک استفاده کنید--به این تریتیب میتوانید [از ری اکت برای بخشی از صفحه خود استفاده کنید.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **با این حال، اگر یک برنامه جدید یا یک سایت به طور کامل با ری اکت میسازید، توصیه می کنیم از یک فریمورک استفاده کنید.** + +چرا ؟ -You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.** +حتی اگر در ابتدا به مسیریابی (routing) یا دریافت داده نیاز نداشته باشید، احتمالاً بخواهید برخی کتابخانه‌ها را برای آنها اضافه کنید. هرچه باندل جاوا اسکریپت شما با افزودن ویژگی‌های جدید بزرگ‌تر می‌شود، ممکن است بخواهید روش تقسیم کد را برای هر مسیر به صورت جداگانه بررسی کنید. هرچه نیازهای دریافت داده شما پیچیده‌تر شود، احتمالاً با شکل‌گیری شکل‌آبشاری ( waterfalls ) شبکه سرور-کلاینت روبرو می‌شوید که باعث کندی برنامه شما می‌شود. همچنین اگر مخاطب شما (شامل بیشتر کاربران) با شرایط اینترنت ضعیف و دستگاه‌های ضعیف تر باشد، احتمالاً شما بخواهید که HTML از کامپوننت های خود دریافت کنید و آن را نمایش دهید چه در سرور چه در موقع ساختن (build). -Here's why. +**این مشکلات مختص ری اکت نیست. به همین دلیل است که Svelte با Vue ، SvelteKit با Nuxt و غیره ... را حل هایی دارند.** برای حل این مشکلات، شما نیاز خواهید داشت که باندلر خود را با مسیردهنده و کتابخانه دریافت داده خود یکپارچه کنید. ایجاد اولیه آن دشوار نیست، اما در تولید یک برنامه که با افزایش اندازه همچنان به سرعت بارگذاری شود، جزئیات بسیار زیادی وجود دارد. شما می‌خواهید کمترین مقدار کد برنامه را ارسال کنید، اما این کار را در یک سفر رفت و برگشت بین کلاینت و سرور انجام دهید، به‌صورت موازی با هر داده‌ای که برای صفحه مورد نیاز است، احتمالاً می‌خواهید صفحه قبل از اینکه کد جاوااسکریپت شما اجرا شود، تعامل‌پذیر باشد تا از ارتقاء تدریجی پشتیبانی کند. ممکن است بخواهید یک پوشه از فایل‌های HTML کاملاً استاتیک برای صفحات بازاریابی خود تولید کنید که می‌تواند در هر مکانی میزبانی شود و حتی بدون جاوااسکریپت نیز کار کند. ساخت این قابلیت‌ها به تنهایی نیاز به کار واقعی دارد. -Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky. -**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work. +**فریمورک های موجود ری اکت در این صفحه به طور پیش فرض این مشکلات را حل می کنند، بدون نیاز به کار اضافی از سمت شما.** این فریم‌ورک‌ها به شما امکان می‌دهند که پروژه خود را بسیار سبک شروع کنید و سپس برنامه خود را با توجه به نیازهایتان مقیاس‌پذیر کنید. هر فریم‌ورک ری‌اکت دارای یک جامعه است، بنابراین پیدا کردن پاسخ به سوالات و ارتقاء ابزارها آسان‌تر است. فریم‌ورک‌ها همچنین به کد شما ساختار می‌دهند و به شما و دیگران کمک می‌کنند تا محتوا و مهارت‌های خود را در پروژه‌های مختلف حفظ کنید. از طرف دیگر، با یک تنظیم دلخواه، به راحتی ممکن است روی نسخه‌های وابستگی پشتیبانی‌نشده گیر کنید و در نهایت یک فریم‌ورک اختصاصی برای خود ایجاد کنید—البته یکی که هیچ جامعه یا مسیر ارتقایی ندارد (و اگر شبیه به فریم‌ورک‌هایی باشد که ما در گذشته ساخته‌ایم، طراحی آن پراکنده‌تر خواهد بود). -**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed). -If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more. +اگر برنامه شما داری محدودیت هایی است که نمی توانید این چارچوب ها به خوبی ارائه نمی شود، یا ترجیح میدهید خودتان این مشکلات را حل کنید، می توانید تنظیمات سفارشی خود را انجام دهید. `react` و `react-dom` را از npm دریافت کنید، فرآیند ساخت سفارشی خود را با باندلرهایی مثل [Vite](https://vitejs.dev/) یا [Percel](https://parceljs.org/) راه اندازی کنید و ابزارهای دیگری را در صورت نیاز برای مسیریابی، تولید استاتیک یا رندر سمت سرور و موارد دیگر اضافه کنید. -## Production-grade React frameworks {/*production-grade-react-frameworks*/} +## Add React to an Existing Project {/*production-grade-react-frameworks*/} + +این فریمورک ها تمام ویژگی‌هایی را که نیاز دارید برای استقرار و مقیاس‌پذیری برنامه خود در محیط تولید پشتیبانی می‌کنند و به سمت پشتیبانی از دیدگاه [معماری full-stack](#which-features-make-up-the-react-teams-full-stack-architecture-vision) ما حرکت می‌کنند. تمام فریمورک هایی که ما توصیه می‌کنیم از جوامع فعال برای پشتیبانی آماده هستند و می‌توانند بر روی سرور خود یا ارائه دهنده میزبانی استقرار یابند. اگر شما یک نویسنده فریمورک هستید که علاقه‌مند به اضافه شدن به این لیست هستید، [لطفا به ما اطلاع دهید](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). -These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our [full-stack architecture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you’re a framework author interested in being included on this list, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). -### Next.js {/*nextjs-pages-router*/} -**[Next.js' Pages Router](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal: +### Next.js {/*nextjs-pages-router*/} +**[Next.js' Pages Router](https://nextjs.org/) یک فریمورک full stack ری اکتی است.** به شما این امکان را می دهد که برنامه های ری اکتی را بر هر مقایسی اجرا کیند - از یک وبلاگ عمدتا استاتیک تا یک برنامه پیجیده پویا. برای ایجاد یک پروژه Next.js جدید، در ترمینال خود دستور زیر را اجرا کنید: npx create-next-app@latest -If you're new to Next.js, check out the [learn Next.js course.](https://nextjs.org/learn) +اگر Next.js برای شما جدید است، [دوره یاد گرفتن Next.js](https://nextjs.org/learn) را بررسی کنید. + +Next.js توسط [Vercel](https://vercel.com/) نگهداری می‌شود. شما می‌توانید یک برنامه Next.js را به هر سرور Node.js یا serverless، یا به سرور خودتان [دیپلوی](https://nextjs.org/docs/app/building-your-application/deploying) کنید. Next.js همچنین از [خروجی استاتیک](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) پشتیبانی می‌کند که نیازی به سرور ندارد. -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server. ### Remix {/*remix*/} -**[Remix](https://remix.run/) is a full-stack React framework with nested routing.** It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions. To create a new Remix project, run: +**[Remix](https://remix.run/) یک فریمورک full stack ری اکتی با مسیریابی تو در تو است.** Remix به شما امکان می دهد برنامه خود را به بخش های تو در تو تقسیم کنید که باعث میشود داده ها را به صورت موازی دریافت کنید و در پاسخ به اقدامات کاربر به روز شوید. برای ایجاد یک پروژه Remix جدید، در ترمینال خود دستور زیر را اجرا کنید: npx create-remix -If you're new to Remix, check out the Remix [blog tutorial](https://remix.run/docs/en/main/tutorials/blog) (short) and [app tutorial](https://remix.run/docs/en/main/tutorials/jokes) (long). +اگر Remix برای شما جدید است، آموزش Remix ([کوتاه مدت](https://remix.run/docs/en/main/tutorials/blog)) و آموزش ([بلند مدت](https://remix.run/docs/en/main/tutorials/jokes)) را بررسی کنید. + +Remix توسط [Shopify](https://www.shopify.com/) نگهداری می‌شود. وقتی یک پروژه Remix ایجاد می‌کنید، باید [هدف انتشار خود را انتخاب](https://remix.run/docs/en/main/guides/deployment) کنید. می‌توانید یک برنامه Remix را با استفاده از یک [آداپتور](https://remix.run/docs/en/main/other-api/adapter) یا نوشتن آداپتور، بر روی هر سرور Node.js یا serverless انتشار دهید. -Remix is maintained by [Shopify](https://www.shopify.com/). When you create a Remix project, you need to [pick your deployment target](https://remix.run/docs/en/main/guides/deployment). You can deploy a Remix app to any Node.js or serverless hosting by using or writing an [adapter](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) is a React framework for fast CMS-backed websites.** Its rich plugin ecosystem and its GraphQL data layer simplify integrating content, APIs, and services into one website. To create a new Gatsby project, run: +**[Gatsby](https://www.gatsbyjs.com/) یک فریم‌ورک ری‌اکت برای وب‌سایت‌های سریع با پشتیبانی CMS است.** اکوسیستم غنی پلاگین‌های آن و لایه داده GraphQL، ادغام محتوا، APIها ، سرویس‌ها را در یک وب‌سایت ساده می‌کند. برای ایجاد یک پروژه جدید Gatsby، دستور زیر را در ترمینال اجرا کنید: npx create-gatsby -If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/) +اگر Gatsby برای شما جدید است، [دوره Gatsby](https://www.gatsbyjs.com/docs/tutorial/) را بررسی کنید. + +Gatsby توسط Netlify نگهداری می شود.شما می‌توانید یک وب‌سایت کاملاً استاتیک Gatsby را بر روی هر سروری استاتیک انتشار دهید. اگر انتخاب کنید از ویژگی‌های فقط سرور استفاده کنید، مطمئن شوید که ارائه‌دهنده سرور شما این ویژگی‌ها را برای Gatsby پشتیبانی می‌کند. -Gatsby is maintained by [Netlify](https://www.netlify.com/). You can [deploy a fully static Gatsby site](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) to any static hosting. If you opt into using server-only features, make sure your hosting provider supports them for Gatsby. ### Expo (for native apps) {/*expo*/} -**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run: +**[Expo](https://expo.dev/) یک فریمورک ری اکتی است که به شما امکان می دهد برنامه اندروید، و ios و وب را با رابط کاربری ایجاد کنید.** این یک SDK برای React Native ارائه می کند که استفاده از بخش های native را آسان تر می کند. برای ایجاد یک پروژه Expo جدید، دستور زیر را در ترمینال اجرا کنید: npx create-expo-app -If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). +اگر Expo برای شما جدید است، [آموزش Expo](https://docs.expo.dev/tutorial/introduction/) را بررسی کنید. -Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services. +Expo توسط [Expo(شرکت)](https://expo.dev/about) نگهداری می شود. ساخت اپلیکیشن با Expo رایگان است و می توانید بدون محدودیت آن را به فروشگاه های اپلیکیشن گوگل و اپل ارسال کنید. Expo علاوه بر این، خدمات ابری پولی هم ارائه می دهد. ## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/} -As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +همانطور که نحوه ادامه بهبود ری اکت را بررسی کردیم، متوجه شدیم که ادغام کردن ری اکت با فریمورک ها (مخصوصاً با فناوری‌های مسیریابی، باندل کردن و سرور) بزرگترین فرصت ما برای کمک به کاربران ری اکت برای ساخت برنامه‌های بهتر است. تیم Next.js موافقت کرده است که با ما در تحقیق، توسعه، ادغام و آزمایش ویژگی‌های bleeding-edge-react-frameworks مانند [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) با ما همکاری کند. + +این ویژگی‌ها هر روز به آماده شدن برای تولید نزدیک‌تر می‌شوند و ما با سایر توسعه‌دهندگان باندلر و فریم‌ورک درباره ادغام آنها در حال مذاکره بوده‌ایم. امید ما این است که در یک یا دو سال دیگر، همه فریمورک های لیست شده در این صفحه از این ویژگی ها پشتیبانی کامل داشته باشند. (اگر نویسنده فریمورک هستید که علاقه مند به همکاری با ما برای آزمایش این ویژگی ها هستید، لطفاً به ما اطلاع دهید!) -These features are getting closer to being production-ready every day, and we've been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you're a framework author interested in partnering with us to experiment with these features, please let us know!) ### Next.js (App Router) {/*nextjs-app-router*/} -**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. +**[Next.js's App Router](https://nextjs.org/docs) بازطراحی شده است تا به دیدگاه تیم ری‌اکت برای معماری فول‌استک دست یابد.** این قابلیت به شما اجازه می‌دهد تا داده‌ها را در کامپوننت‌های غیرهمزمانی که بر روی سرور اجرا می‌شوند یا حتی در طول فرآیند ساخت، واکشی کنید. -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server. +Next.js توسط Vercel نگهداری می‌شود. شما می‌توانید یک برنامه Next.js را بر روی هر سروری Node.js یا serverless، یا بر روی سرور خود [دیپلوی](https://nextjs.org/docs/app/building-your-application/deploying) کنید. همچنین Next.js از [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) پشتیبانی می‌کند که نیازی به سرور ندارد. -#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} +#### کدام ویژگی‌ها دیدگاه معماری full-stack تیم ری اکت را تشکیل می‌دهند؟ {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} + +باندلر App Router Next.js به طور کامل مشخصات رسمی [React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) را پیاده سازی می کند. این به شما امکان می دهد کامپوننت زمان ساخت، فقط سرور و تعاملی را در یک درخت ری اکت ترکیب کند. -Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree. +به عنوان مثال، می توانید در یک سرور کامپوننت ری اکتی یک تابع `async` بنویسد که از یک پایگاه داده فایل می خواند، سپس می توانید از داده در کامپوننت حود استفاده کنید: -For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components: ```js -// This component runs *only* on the server (or during the build). +// این کامپوننت *فقط* روی سرور (یا در حین ساخت) اجرا می شود async function Talks({ confId }) { - // 1. You're on the server, so you can talk to your data layer. API endpoint not required. +// 1. شما در سرور هستید، بنابراین می توانید با لایه داده خود صحبت کنید. API endpoint مورد نیاز نیست const talks = await db.Talks.findAll({ confId }); - // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. + // 2. هر مقدار منطق رندر را اضافه کنید. این باندل جاوا اسکریپت شما را بزرگتر نمی کند const videos = talks.map(talk => talk.video); - // 3. Pass the data down to the components that will run in the browser. + // 3. داده ها را به اجزایی که در مرورگر اجرا می شوند منتقل کنید return ; } ``` +App Router Next.js همچنین [واکشی داده ها را با Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks) ادغام می کند. این به شما امکان می دهد یک وضعیت بارگذاری (مانند یک مکان نگهدارنده skeleton) را برای بخش های مختلف رابط کاربری خود مستقیماً در درخت ری اکت خود مشخص کنید: -Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree: ```js }> ``` - -Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks. +سرور کامپوننت ها و Suspense ویژگی‌های React هستند، نه ویژگی‌های Next.js. با این حال، پذیرش آن‌ها در سطح فریم‌ورک نیاز به حمایت و کار اجرایی پیچیده‌ای دارد. در حال حاضر، App Router Next.js کامل‌ترین پیاده‌سازی را ارائه می‌دهد. تیم React با توسعه‌دهندگان باندلر کار می‌کند تا اجرای این ویژگی‌ها را در نسل بعدی فریم‌ورک‌ها آسان‌تر کند.