`, and an (abbreviated) table of contents as an ordered list ``. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+در این بخش ما یک بخشی را با تگ `article` مشخص کردیم و یک تگ `h1` داریم که داخل آن متن داریم. یک لیست بعد از آن داریم که با تگ `ol` مشخص کردیم و این لیست دارای سه آیتم است. کد مانند بالا مسلما دارای یکسری کد CSS برای استایل دهی و کد Javascript برای داینامیک بودن هست. مثل منو ها, لیست های کشویی و آکاردئونی, مودال ها یا هرآن چیزی که در صفحات وب مشاهده میکنید.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+ریکت به شما اجازه میدهد بخش های سایتتان را داختل یک "کامپوننت" همراه با استایل و اسکریپت های مربوطه ذخیره کنید. در فهرست **reusable UI elements for your app.** شما خواهید دید که یک کامپوننتی مانند `` و `` شده است.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+درست مانند تگ های HTML, شما میتوانید کامپوننت هارا برای همه صفحات بسازید, سفارشی سازی و ذخیره کنید. مانند همین داکیومنتی که الان درحال خواندن آن هستید متشکل از کامپوننت های React است.
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+در اینجا به شما میگوییم که چگونه یک کامپوننت بسازید:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### قدم اول: خروجی گرفتن (Export) یک کامپوننت {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+دستور `export default` یک پیشوند در زبان جاوااسکریپت است [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (نه فقط در React), به شما اجازه میدهد که تابع اصلی خود را در فایل خروجی بگیرید و در فایل دیگر import کنید. (درباره Import بدانید [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### قدم دوم: ساخت و تعریف توابع {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+با دستور `function Profile() { }` شما میتوانید یک تابع جاوااسکریپتی با نام `Profile` تعریف کنید.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+کامپوننت های React همان توابع معمولی در جاوااسکریپت هستند, با این تفاوت که باید **حرف اول اسم آن از حروف بزرگ باشد** وگرنه ارور میدهد!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### قدم سوم: اضافه کردن تگ HTML {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+کامپوننت زیر یک تگ `![]()
` را به همراه اتریبیوت های `src` و `alt` برمیگرداند. `![]()
` مانند HTML نوشته میشود ولی این یک دستور جاوااسکریپتی است! اسم این سینتکس [JSX](/learn/writing-markup-with-jsx) است, و به شما اجازه میدهد تا تگ های HTML را مستقیما در یک فایل جاوااسکریپت بنویسید.
-Return statements can be written all on one line, as in this component:
+دستور `return` را هم میتوان به این صورت در یک خط نوشت:
```js
return 
;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+اما اگر نمیتوانید کل تگ های HTML را در یک خط بنویسید فقط کافیست بعد از دستور return یک جفت پرانتز قرار بدهید و تگ هارا داخل آن بنویسید:
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+بدون پرانتز, خط های بعد از دستور `return` [نادیده گرفته میشوند](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## استفاده از یک کامپوننت {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+بعد از اینکه کامپونت `Profile` خود را ساخته اید, الان وقت آن رسیده که همان کامپوننت را در میان کامپوننت های دیگر قرار بدهید. به عنوان مثال شما میتوانید کامپوننت `Gallery` را به همراه چند کامپوننت `Profile` که داخل آن استفاده شده است را export کنید:
@@ -152,14 +152,14 @@ img { margin: 0 10px 10px 0; height: 90px; }
-### What the browser sees {/*what-the-browser-sees*/}
+### از دید مرورگر ها چه میگذرد {/*what-the-browser-sees*/}
-Notice the difference in casing:
+به تفاوت های زیر توجه کنید:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` با حرف کوچک شروع شده پس React میداند که این یک تگ HTML است.
+* `![]()
`. In the end, this is what the browser sees:
+و کامپوننت Profile شامل یکسری تگ HTML است: `![]()
`. و درآخر, کد زیر چیزی هست که مرورگر میبیند:
```html
@@ -170,19 +170,19 @@ And `Profile` contains even more HTML: `![]()
`. In the end, this is what the b
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### قرار دادن کامپوننت داخل یک کامپوننت دیگر {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+کامپوننت ها درواقع فانکشن های معمولی جاوااسکریپت هستند, پس شما میتوانید در یک فایل چند کامپوننت تعریف کنید که معمولا زمانی استفاده میشود که کامپوننت ها نسبتا کوچک یا باهم ربطی داشته باشند و اگر فایل شلوغ شد آنها را در فایل های جداگانه ای قرار بدهید. درباره انجام دادن آن و [دستور Import](/learn/importing-and-exporting-components) میتوانید مطالعه کنید.
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+چون کامپوننت `Profile` داخل کامپوننت `Gallery` هست و چندین بار هم تکرار شده, و همچنین کامپوننت `Gallery` یک کامپوننت والد یا **parent component** که کامپوننت `Gallery` که فرزندان خودش هست را اجرا یا رندر گیری میکند. این بخشی از جادو ریکت است: که میتوانید کامپوننت را یکبار تعریف کنید و هرچند باری که لازم داشتید صدا بزنید.
-Components can render other components, but **you must never nest their definitions:**
+کامپوننت ها میتوانند کامپوننت های داخلی خود را رندر بگیرند, ولی به این مورد توجه کنید **به هیچ وجه کامپوننت هارا تودرتو تعریف نکنید:**. مثلا:
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 به هیچ وجه کامپوننتی داخل یک کامپوننت تعریف نشود
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+کد بالا [کند است و ممکن است مشکلاتی به بار بیاورد](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) به جای آن, کامپوننت هارا زیر هم دیگر تعریف کنید. به این صورت:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ تعریف کامپوننت زیر همدیگر
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+زمانی که لازم است داده هاای کامپوننت پدر به کامپوننت فرزند انتقال شود و بجای اینکه کامپوننت هارا داخل همدیگر تعریف کنیم, بهتر است از [props](/learn/passing-props-to-a-component) استفاده میکنیم.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### استفاده از کامپوننت ها {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+اپلیکیشن ریکتی شما از کامپوننت `root` شروع میشود. معمولا زمانی که یک پروژه جدید میسازید این کامپوننت ساخته میشود, مثلا اگر شما از [CodeSandbox](https://codesandbox.io/) یا [Create React App](https://create-react-app.dev/) استفاده میکنید, به طور پیش فرض داخل `src/App.js` تعریف شده. اگر از فریمورک [Next.js](https://nextjs.org/) استفاده میکنید, کامپوننت `root` داخل `pages/index.js` تعریف شده است.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+اکثر برنامه های ریکتی از کامپوننت برای سازماندهی بخش های وبسایت استفاده میکنند. چه برای بخش های کوچکی مانند دکمه یا متن ها, چه برای بخش های بزرگتر صفحه مانند منو یا لیست کشویی.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+اگر از [React-based frameworks](/learn/start-a-new-react-project) استفاده کنیم, نسبت به تعریف HTML, فرایند توسعه صفحات سریعتر پیش میرود.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+همچنان بسیاری از وبسایت ها از React برای [داینامیک کردن صفحات](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) استفاده میشود. انها بجای یک کامپوننت root از کامپوننت بیشتر و ریزتری استفاده کردند. شما میتوانید هرچقدر که نیاز دارید از کتابخانه ریکت استفاده کنید.
-You've just gotten your first taste of React! Let's recap some key points.
+شما اکنون برای اولین بار طعم React را چشیده اید! اجازه بدهید یکسری موارد را مرور کنیم:
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* ریکت به شما اجازه میدهد کامپوننت های خود را, **که اجزایی هستند که میتوان چندین بار داخل اپلیکیشن استفاده کرد .** را توسعه دهید.
+* در یک اپلیکیشن ریکتی, هر جایی از صفحه (دراینجا رابط کاربری) یک کامپوننت است.
+* کامپوننت های ریکتی درواقع توابع معمولی جاوااسکریپتی هستند. البته باید :
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. اسم آنها با حروف بزرگ شروع شود.
+ 2. کد JSX برگردانند.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### خروجی گرفتن (export) از کامپوننت {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+کد زیر قاعدتا کار نخواهد کرد. چون کامپوننت اصلی (root) را اکسپورت نکرده ایم:
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+برای رفع این مشکل, به راه حل زیر دقت کنید!
-Add `export default` before the function definition like so:
+دستور `export default` را قبل از تابع اضافه کنید, مانند مثال زیر:
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+شاید برایتان سوال باشد که تنها دستور `export` برای حل مشکل بالا کافی بود. اگر درباره تفاوت های بین `export` و `export default` را نمیدانید, مقاله [import و export کردن یک کامپوننت](/learn/importing-and-exporting-components) بخوانید
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### رفع مشکل دستور return {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+عبارت `return` در این کد اشتباه است. میتونی درستش کنی؟!
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+شاید شما در حین رفع مشکل این دستور به ارور "Unexpected token" برخورد کرده باشید. توجه کنید که حتما سمی کالن بعد از پرانتز بسته `() return` باشد. درغیراینصورت به ارور برخورد میکنید.
@@ -318,7 +318,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+برای رفع مشکل این کامپوننت, میتوانید دستور JSX را در یک خط تایپ کنید:
@@ -334,7 +334,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+یا دستور JSX را مابین پرانتز باز و بسته بعد از `return` قرار بدهید:
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### ارور را تشخیص دهید {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+کامپوننت `Profile` را در اینجا تعریف کردیم و زمانی که داریم استفاده میکنیم به ما خطا میدهد! به این معنا است که ریکت, کامپوننت را با یک تگ HTML اشتباه گرفته!
@@ -393,9 +393,9 @@ img { margin: 0 10px 10px 0; height: 90px; }
-React component names must start with a capital letter.
+نامگذاری کامپونت های ریکتی حتما باید با حرف بزرگ شروع شود!
-Change `function profile()` to `function Profile()`, and then change every `
@@ -429,14 +429,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### یک کامپوننت بسازید! {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+یک کامپوننتی را از پایه بنویسید. شما میتوانید هر اسمی را بدهید و هر JSX یی را return کنید. ایده ای ندارید؟ ابتدا یک کامپوننت با نام `Congratulations` بسازید و کاری کنید که کد JSX یی `Good job!
` را برگرداند. فقط یادتان باشد حتما آن را export کنید!
```js
-// Write your component below!
+// اینجا کامپوننت خود را بنویسید
```
`, etc.
+ریکت به شما اجازه میدهد بخش های سایتتان را داختل یک "کامپوننت" همراه با استایل و اسکریپت های مربوطه ذخیره کنید. در فهرست **reusable UI elements for your app.** شما خواهید دید که یک کامپوننتی مانند `` و `` شده است.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+درست مانند تگ های HTML, شما میتوانید کامپوننت هارا برای همه صفحات بسازید, سفارشی سازی و ذخیره کنید. مانند همین داکیومنتی که الان درحال خواندن آن هستید متشکل از کامپوننت های React است.
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+در اینجا به شما میگوییم که چگونه یک کامپوننت بسازید:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### قدم اول: خروجی گرفتن (Export) یک کامپوننت {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+دستور `export default` یک پیشوند در زبان جاوااسکریپت است [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (نه فقط در React), به شما اجازه میدهد که تابع اصلی خود را در فایل خروجی بگیرید و در فایل دیگر import کنید. (درباره Import بدانید [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### قدم دوم: ساخت و تعریف توابع {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+با دستور `function Profile() { }` شما میتوانید یک تابع جاوااسکریپتی با نام `Profile` تعریف کنید.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+کامپوننت های React همان توابع معمولی در جاوااسکریپت هستند, با این تفاوت که باید **حرف اول اسم آن از حروف بزرگ باشد** وگرنه ارور میدهد!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### قدم سوم: اضافه کردن تگ HTML {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+کامپوننت زیر یک تگ `![]()
` را به همراه اتریبیوت های `src` و `alt` برمیگرداند. `![]()
` مانند HTML نوشته میشود ولی این یک دستور جاوااسکریپتی است! اسم این سینتکس [JSX](/learn/writing-markup-with-jsx) است, و به شما اجازه میدهد تا تگ های HTML را مستقیما در یک فایل جاوااسکریپت بنویسید.
-Return statements can be written all on one line, as in this component:
+دستور `return` را هم میتوان به این صورت در یک خط نوشت:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+اما اگر نمیتوانید کل تگ های HTML را در یک خط بنویسید فقط کافیست بعد از دستور return یک جفت پرانتز قرار بدهید و تگ هارا داخل آن بنویسید:
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+بدون پرانتز, خط های بعد از دستور `return` [نادیده گرفته میشوند](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## استفاده از یک کامپوننت {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+بعد از اینکه کامپونت `Profile` خود را ساخته اید, الان وقت آن رسیده که همان کامپوننت را در میان کامپوننت های دیگر قرار بدهید. به عنوان مثال شما میتوانید کامپوننت `Gallery` را به همراه چند کامپوننت `Profile` که داخل آن استفاده شده است را export کنید:
@@ -152,14 +152,14 @@ img { margin: 0 10px 10px 0; height: 90px; }
-### What the browser sees {/*what-the-browser-sees*/}
+### از دید مرورگر ها چه میگذرد {/*what-the-browser-sees*/}
-Notice the difference in casing:
+به تفاوت های زیر توجه کنید:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` با حرف کوچک شروع شده پس React میداند که این یک تگ HTML است.
+* `![]()
`. In the end, this is what the browser sees:
+و کامپوننت Profile شامل یکسری تگ HTML است: `![]()
`. و درآخر, کد زیر چیزی هست که مرورگر میبیند:
```html
@@ -170,19 +170,19 @@ And `Profile` contains even more HTML: `![]()
`. In the end, this is what the b
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### قرار دادن کامپوننت داخل یک کامپوننت دیگر {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+کامپوننت ها درواقع فانکشن های معمولی جاوااسکریپت هستند, پس شما میتوانید در یک فایل چند کامپوننت تعریف کنید که معمولا زمانی استفاده میشود که کامپوننت ها نسبتا کوچک یا باهم ربطی داشته باشند و اگر فایل شلوغ شد آنها را در فایل های جداگانه ای قرار بدهید. درباره انجام دادن آن و [دستور Import](/learn/importing-and-exporting-components) میتوانید مطالعه کنید.
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+چون کامپوننت `Profile` داخل کامپوننت `Gallery` هست و چندین بار هم تکرار شده, و همچنین کامپوننت `Gallery` یک کامپوننت والد یا **parent component** که کامپوننت `Gallery` که فرزندان خودش هست را اجرا یا رندر گیری میکند. این بخشی از جادو ریکت است: که میتوانید کامپوننت را یکبار تعریف کنید و هرچند باری که لازم داشتید صدا بزنید.
-Components can render other components, but **you must never nest their definitions:**
+کامپوننت ها میتوانند کامپوننت های داخلی خود را رندر بگیرند, ولی به این مورد توجه کنید **به هیچ وجه کامپوننت هارا تودرتو تعریف نکنید:**. مثلا:
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 به هیچ وجه کامپوننتی داخل یک کامپوننت تعریف نشود
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+کد بالا [کند است و ممکن است مشکلاتی به بار بیاورد](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) به جای آن, کامپوننت هارا زیر هم دیگر تعریف کنید. به این صورت:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ تعریف کامپوننت زیر همدیگر
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+زمانی که لازم است داده هاای کامپوننت پدر به کامپوننت فرزند انتقال شود و بجای اینکه کامپوننت هارا داخل همدیگر تعریف کنیم, بهتر است از [props](/learn/passing-props-to-a-component) استفاده میکنیم.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### استفاده از کامپوننت ها {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+اپلیکیشن ریکتی شما از کامپوننت `root` شروع میشود. معمولا زمانی که یک پروژه جدید میسازید این کامپوننت ساخته میشود, مثلا اگر شما از [CodeSandbox](https://codesandbox.io/) یا [Create React App](https://create-react-app.dev/) استفاده میکنید, به طور پیش فرض داخل `src/App.js` تعریف شده. اگر از فریمورک [Next.js](https://nextjs.org/) استفاده میکنید, کامپوننت `root` داخل `pages/index.js` تعریف شده است.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+اکثر برنامه های ریکتی از کامپوننت برای سازماندهی بخش های وبسایت استفاده میکنند. چه برای بخش های کوچکی مانند دکمه یا متن ها, چه برای بخش های بزرگتر صفحه مانند منو یا لیست کشویی.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+اگر از [React-based frameworks](/learn/start-a-new-react-project) استفاده کنیم, نسبت به تعریف HTML, فرایند توسعه صفحات سریعتر پیش میرود.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+همچنان بسیاری از وبسایت ها از React برای [داینامیک کردن صفحات](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) استفاده میشود. انها بجای یک کامپوننت root از کامپوننت بیشتر و ریزتری استفاده کردند. شما میتوانید هرچقدر که نیاز دارید از کتابخانه ریکت استفاده کنید.
-You've just gotten your first taste of React! Let's recap some key points.
+شما اکنون برای اولین بار طعم React را چشیده اید! اجازه بدهید یکسری موارد را مرور کنیم:
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* ریکت به شما اجازه میدهد کامپوننت های خود را, **که اجزایی هستند که میتوان چندین بار داخل اپلیکیشن استفاده کرد .** را توسعه دهید.
+* در یک اپلیکیشن ریکتی, هر جایی از صفحه (دراینجا رابط کاربری) یک کامپوننت است.
+* کامپوننت های ریکتی درواقع توابع معمولی جاوااسکریپتی هستند. البته باید :
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. اسم آنها با حروف بزرگ شروع شود.
+ 2. کد JSX برگردانند.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### خروجی گرفتن (export) از کامپوننت {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+کد زیر قاعدتا کار نخواهد کرد. چون کامپوننت اصلی (root) را اکسپورت نکرده ایم:
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+برای رفع این مشکل, به راه حل زیر دقت کنید!
-Add `export default` before the function definition like so:
+دستور `export default` را قبل از تابع اضافه کنید, مانند مثال زیر:
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+شاید برایتان سوال باشد که تنها دستور `export` برای حل مشکل بالا کافی بود. اگر درباره تفاوت های بین `export` و `export default` را نمیدانید, مقاله [import و export کردن یک کامپوننت](/learn/importing-and-exporting-components) بخوانید
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### رفع مشکل دستور return {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+عبارت `return` در این کد اشتباه است. میتونی درستش کنی؟!
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+شاید شما در حین رفع مشکل این دستور به ارور "Unexpected token" برخورد کرده باشید. توجه کنید که حتما سمی کالن بعد از پرانتز بسته `() return` باشد. درغیراینصورت به ارور برخورد میکنید.
@@ -318,7 +318,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+برای رفع مشکل این کامپوننت, میتوانید دستور JSX را در یک خط تایپ کنید:
@@ -334,7 +334,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+یا دستور JSX را مابین پرانتز باز و بسته بعد از `return` قرار بدهید:
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### ارور را تشخیص دهید {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+کامپوننت `Profile` را در اینجا تعریف کردیم و زمانی که داریم استفاده میکنیم به ما خطا میدهد! به این معنا است که ریکت, کامپوننت را با یک تگ HTML اشتباه گرفته!
@@ -393,9 +393,9 @@ img { margin: 0 10px 10px 0; height: 90px; }
-React component names must start with a capital letter.
+نامگذاری کامپونت های ریکتی حتما باید با حرف بزرگ شروع شود!
-Change `function profile()` to `function Profile()`, and then change every `
@@ -429,14 +429,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### یک کامپوننت بسازید! {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+یک کامپوننتی را از پایه بنویسید. شما میتوانید هر اسمی را بدهید و هر JSX یی را return کنید. ایده ای ندارید؟ ابتدا یک کامپوننت با نام `Congratulations` بسازید و کاری کنید که کد JSX یی `Good job!
` را برگرداند. فقط یادتان باشد حتما آن را export کنید!
```js
-// Write your component below!
+// اینجا کامپوننت خود را بنویسید
```
;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+اما اگر نمیتوانید کل تگ های HTML را در یک خط بنویسید فقط کافیست بعد از دستور return یک جفت پرانتز قرار بدهید و تگ هارا داخل آن بنویسید:
```js
return (
@@ -114,13 +114,13 @@ return (