Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/components/MDX/ExpandableCallout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@ interface ExpandableCalloutProps {

const variantMap = {
deprecated: {
title: 'Deprecated',
title: 'منسوخ‌شده',
Icon: IconWarning,
containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20',
textColor: 'text-red-50 dark:text-red-40',
overlayGradient:
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
},
note: {
title: 'Note',
title: 'نکته',
Icon: IconNote,
containerClasses:
'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
Expand All @@ -44,7 +44,7 @@ const variantMap = {
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
},
canary: {
title: 'Canary',
title: 'نسخه آزمایشی',
Icon: IconCanary,
containerClasses:
'bg-gray-5 dark:bg-gray-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
Expand All @@ -53,7 +53,7 @@ const variantMap = {
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
},
experimental: {
title: 'Experimental Feature',
title: 'قابلیت آزمایشی',
Icon: IconCanary,
containerClasses:
'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
Expand All @@ -62,31 +62,31 @@ const variantMap = {
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
},
pitfall: {
title: 'Pitfall',
title: 'دام',
Icon: IconPitfall,
containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
textColor: 'text-yellow-50 dark:text-yellow-40',
overlayGradient:
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
},
wip: {
title: 'Under Construction',
title: 'در حال ساخت',
Icon: IconNote,
containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
textColor: 'text-yellow-50 dark:text-yellow-40',
overlayGradient:
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
},
major: {
title: 'React 19',
title: 'ری‌اکت ۱۹',
Icon: IconRocket,
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
textColor: 'text-blue-50 dark:text-blue-40',
overlayGradient:
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
},
rsc: {
title: 'React Server Components',
title: 'کامپوننت‌های سرور ری‌اکت',
Icon: null,
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
textColor: 'text-blue-50 dark:text-blue-40',
Expand Down
2 changes: 1 addition & 1 deletion src/components/MDX/MDXComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ function YouWillLearn({
children: any;
isChapter?: boolean;
}) {
let title = isChapter ? 'In this chapter' : 'You will learn';
let title = isChapter ? 'در این فصل' : 'یاد خواهید گرفت';
return <SimpleCallout title={title}>{children}</SimpleCallout>;
}

Expand Down
37 changes: 19 additions & 18 deletions src/content/learn/installation.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
---
title: Installation
title: نصب
---

<Intro>

React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started.
ری‌اکت از ابتدا به‌گونه‌ای طراحی شده که بتوان آن را به‌صورت تدریجی به کار گرفت. می‌توانید به همان اندازه که نیاز دارید از ری‌اکت استفاده کنید؛ چه بخواهید فقط با ری‌اکت آشنا شوید، چه مقداری تعامل به یک صفحه HTML اضافه کنید، یا یک اپلیکیشن پیچیده با ری‌اکت بسازید—این بخش به شما کمک می‌کند تا شروع کنید.


</Intro>

## Try React {/*try-react*/}
## ری‌اکت را امتحان کنید {/*try-react*/}

You don't need to install anything to play with React. Try editing this sandbox!
برای بازی با ری‌اکت نیازی به نصب هیچ چیزی ندارید. این سندباکس را امتحان کنید و آن را ویرایش کنید!

<Sandpack>

Expand All @@ -26,34 +27,34 @@ export default function App() {

</Sandpack>

You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner.
می‌توانید مستقیماً آن را ویرایش کنید یا با فشردن دکمه "Fork" در گوشه بالا سمت راست، آن را در یک تب جدید باز کنید.

Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN)
بیشتر صفحات موجود در مستندات ری‌اکت شامل سندباکس‌هایی مانند این هستند. خارج از مستندات ری‌اکت، سندباکس‌های آنلاین زیادی وجود دارند که از ری‌اکت پشتیبانی می‌کنند؛ برای مثال، [CodeSandbox](https://codesandbox.io/s/new)، [StackBlitz](https://stackblitz.com/fork/react)، یا [CodePen.](https://codepen.io/pen?template=QWYVwWN)

To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser!
برای امتحان کردن ری‌اکت به‌صورت محلی روی رایانه‌تان، [این صفحه HTML را دانلود کنید.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html)
آن را در ویرایشگر و مرورگر خود باز کنید!

## Creating a React App {/*creating-a-react-app*/}
## ساخت یک اپلیکیشن ری‌اکت {/*creating-a-react-app*/}

If you want to start a new React app, you can [create a React app](/learn/creating-a-react-app) using a recommended framework.
اگر می‌خواهید یک اپلیکیشن ری‌اکت جدید راه‌اندازی کنید، می‌توانید از [ساخت یک اپلیکیشن ری‌اکت](/learn/creating-a-react-app) با استفاده از یک فریم‌ورک پیشنهادی شروع کنید.

## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
## ساخت اپلیکیشن ری‌اکت از صفر {/*build-a-react-app-from-scratch*/}

If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
اگر یک فریم‌ورک برای پروژه‌تان مناسب نیست، ترجیح می‌دهید فریم‌ورک خودتان را بسازید، یا فقط می‌خواهید اصول اولیه‌ی یک اپلیکیشن ری‌اکت را یاد بگیرید، می‌توانید [اپلیکیشن ری‌اکت را از صفر بسازید](/learn/build-a-react-app-from-scratch).

## Add React to an existing project {/*add-react-to-an-existing-project*/}
## افزودن ری‌اکت به یک پروژه‌ی موجود {/*add-react-to-an-existing-project*/}

If want to try using React in your existing app or a website, you can [add React to an existing project.](/learn/add-react-to-an-existing-project)
اگر می‌خواهید استفاده از ری‌اکت را در اپلیکیشن یا وب‌سایت موجود خود امتحان کنید، می‌توانید [ری‌اکت را به یک پروژه‌ی موجود اضافه کنید](/learn/add-react-to-an-existing-project).


<Note>

#### Should I use Create React App? {/*should-i-use-create-react-app*/}

No. Create React App has been deprecated. For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app).
#### آیا باید از Create React App استفاده کنم؟ {/*should-i-use-create-react-app*/}

خیر. Create React App منسوخ شده است. برای اطلاعات بیشتر، [پایان پشتیبانی از Create React App](/blog/2025/02/14/sunsetting-create-react-app) را ببینید.
</Note>

## Next steps {/*next-steps*/}
## گام‌های بعدی {/*next-steps*/}

Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day.
به راهنمای [شروع سریع](/learn) بروید تا با مهم‌ترین مفاهیم ری‌اکت که هر روز با آن‌ها سروکار خواهید داشت، آشنا شوید.