Change diffs: Update your-first-component.md

Author: nafasebra

src/content/learn/your-first-component.md

@@ -53,9 +53,9 @@ title: Your First Component
 
 همانطور که پروژه شما بزرگ و بزرگتر میشود, توجه خواهید کرد که بسیاری از دیزاین هایی که تبدیل به کامپوننت شدند را میتوانید در هرجایی از صفحات پروژه استفاده کنید و سرعت توسعه را بالا ببرید. همچنین میتوانید در پروژه های خود از کامپوننت یا کتابخانه های آماده ای که تیم React منتشر کرده اند مثل [Material UI.](https://material-ui.com/) و  [Chakra UI](https://chakra-ui.com/)  استفاده کنید.
 
-## تعریف یک کامپوونت {/*defining-a-component*/}
+##  تعریف یک کامپوننت {/*defining-a-component*/}
 
-قبلا برای ساخت صفحات وب از تگ های HTML استفاده و برای داینامیک کردن آنها کد های جاوااسکریپتی نوشته میشد, که در زمان خود راه خوبی بود. ولی امروزه چون توی صفحات وب میخواهیم اینتراکشن و پویای بیشتری داشته باشند باید اسکریپت های بیشتری اضافه کنیم. که React تعامل را اولویت قرار میدهد ولی هنوز از همان تکنولوژی استفاده میکند: **یک کامپوننت React تابع جاوااسکریپتی است که شما میتوانید تگ های HTML را در آن بنویسید**که به این صورت نوشته میشود (میتوانید مثال زیر را تغییر دهید)
+قبلا برای ساخت صفحات وب از تگ های HTML استفاده و برای داینامیک کردن آنها کد های جاوااسکریپتی نوشته میشد, که در زمان خود راه خوبی بود. ولی امروزه چون توی صفحات وب بخواهید اینتراکشن و پویایی بیشتری داشته باشند باید اسکریپت های بیشتری اضافه کنید. که React تعامل را اولویت قرار میدهد ولی هنوز از همان تکنولوژی استفاده میکند: **یک کامپوننت React تابع جاوااسکریپتی است که شما میتوانید تگ های HTML را در آن بنویسید**که به این صورت نوشته میشود (میتوانید مثال زیر را تغییر دهید)
 
 <Sandpack>
 
@@ -76,11 +76,11 @@ img { height: 200px; }
 
 </Sandpack>
 
-نحوه ساخت کامپوننت:
+در اینجا به شما میگوییم که چگونه یک کامپوننت بسازید:
 
 ### قدم اول: خروجی گرفتن (Export) یک کامپوننت {/*step-1-export-the-component*/}
- 
-دستور `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)!)
+
+دستور `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*/}
 
@@ -92,11 +92,11 @@ img { height: 200px; }
 
 </Pitfall>
 
-### قدم سوم: اضافه کردن تگ HTML {/*step-3-add-markup*/}
+###  قدم سوم: اضافه کردن تگ HTML {/*step-3-add-markup*/}
 
-کامپوننت زیر یک تگ `<img />` را به همراه اتریبیوت های `src` و `alt` برمیگرداند. `<img />` مانند HTML نوشته میشود ولی این یک دستور جاوااسکریپتی است! این سینتکس [JSX](/learn/writing-markup-with-jsx) نام دارد, و به شما اجازه میدهد تا تگ های HTML را مستقیما در یک فایل جاوااسکریپت بنویسید.
+کامپوننت زیر یک تگ `<img />` را به همراه اتریبیوت های `src` و `alt` برمیگرداند. `<img />` مانند HTML نوشته میشود ولی این یک دستور جاوااسکریپتی است! اسم این سینتکس [JSX](/learn/writing-markup-with-jsx) است, و به شما اجازه میدهد تا تگ های HTML را مستقیما در یک فایل جاوااسکریپت بنویسید.
 
-دستور return را هم میتوان به این صورت در یک خط نوشت:
+دستور `return` را هم میتوان به این صورت در یک خط نوشت:
 
 ```js
 return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
@@ -118,9 +118,9 @@ return (
 
 </Pitfall>
 
-## استفاده از یک کامپوننت {/*using-a-component*/}
+##  استفاده از یک کامپوننت {/*using-a-component*/}
 
-بعد از اینکه کامپونت `Profile` خود را ساخته اید, الان وقت آن است که همان کامپوننت را در میان کامپوننت های دیگر قرار بدهید. به عنوان مثال شما میتوانید کامپوننت `Gallery` را به همراه چند کامپوننت `Profile` که داخل آن استفاده شده است را export بگیرید:
+بعد از اینکه کامپونت `Profile` خود را ساخته اید, الان وقت آن رسیده که همان کامپوننت را در میان کامپوننت های دیگر قرار بدهید. به عنوان مثال شما میتوانید کامپوننت `Gallery` را به همراه چند کامپوننت `Profile` که داخل آن استفاده شده است را export کنید:
 
 <Sandpack>
 
@@ -170,19 +170,19 @@ img { margin: 0 10px 10px 0; height: 90px; }
 </section>
 ```
 
-### قرار دادن کامپوننت داخل یک کامپوننت دیگر {/*nesting-and-organizing-components*/}
+###  قرار دادن کامپوننت داخل یک کامپوننت دیگر {/*nesting-and-organizing-components*/}
 
 کامپوننت ها درواقع فانکشن های معمولی جاوااسکریپت هستند, پس شما میتوانید در یک فایل چند کامپوننت تعریف کنید که معمولا زمانی استفاده میشود که کامپوننت ها نسبتا کوچک یا باهم ربطی داشته باشند و اگر فایل شلوغ شد آنها را در فایل های جداگانه ای قرار بدهید. درباره انجام دادن آن و [دستور Import](/learn/importing-and-exporting-components) میتوانید مطالعه کنید.
 
-چون کامپوننت `Profile` داخل کامپوننت `Gallery` هست و چند باری هم تکرار شده, بنابراین کامپوننت `Gallery` یک کامپوننت والد یا **parent component** که کامپوننت `Gallery` که فرزندان خودش هست را اجرا یا رندر گیری میکند. این بخشی از جادو ریکت است: که میتوانید کامپوننت را یکبار تعریف کنید و هرچند باری که لازم داشتید صدا بزنید.
+چون کامپوننت `Profile` داخل کامپوننت `Gallery` هست و چندین بار هم تکرار شده, و همچنین کامپوننت `Gallery` یک کامپوننت والد یا **parent component** که کامپوننت `Gallery` که فرزندان خودش هست را اجرا یا رندر گیری میکند. این بخشی از جادو ریکت است: که میتوانید کامپوننت را یکبار تعریف کنید و هرچند باری که لازم داشتید صدا بزنید.
 
 <Pitfall>
 
-کامپوننت ها میتوانند کامپوننت های داختلی خود را رندر بگیرند, اما **به هیچ وجه کامپوننت هارا تودرتو تعریف نکنید:**
+کامپوننت ها میتوانند کامپوننت های داخلی خود را رندر بگیرند, ولی به این مورد توجه کنید  **به هیچ وجه کامپوننت هارا تودرتو تعریف نکنید:**. مثلا:
 
 ```js {2-5}
 export default function Gallery() {
-  // 🔴 به هیچ وجه کامپوننتی داخل یک کامپوننت تعریف نشود
+   // 🔴 به هیچ وجه کامپوننتی داخل یک کامپوننت تعریف نشود
   function Profile() {
     // ...
   }
@@ -209,21 +209,21 @@ function Profile() {
 
 <DeepDive>
 
-#### استفاده از کامپوننت ها {/*components-all-the-way-down*/}
+####  استفاده از کامپوننت ها {/*components-all-the-way-down*/}
 
 اپلیکیشن ریکتی شما از کامپوننت `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` تعریف شده است.
 
-اکثر برنامه های ریکتی از کامپوننت استفاده میکنند. به این معنی است که نه تنها از کامپوننت ها برای بخش های کوچکی مانند دکمه استفاده میکنیم, بلکه برای بخش های بزرگتری مانند منو ها یا لیست ها استفاده میکنیم. درکل از کامپوننت ها برای سازماندهی صفحات استفاده میکنیم.
+اکثر برنامه های ریکتی از کامپوننت برای سازماندهی بخش های وبسایت استفاده میکنند. چه برای بخش های کوچکی مانند دکمه یا متن ها, چه برای بخش های بزرگتر صفحه مانند منو یا لیست کشویی.
 
-[React-based frameworks](/learn/start-a-new-react-project) کار مارا جلوتر میاندازد. بجای اینکه فایل های HTML برای صفحات سایت تعریف کنیم, با استفاده از فایل های جاوااسکریپتی صفحات را توسعه میدهیم و آنهارا مدیریت میکنیم.
+اگر از [React-based frameworks](/learn/start-a-new-react-project) استفاده کنیم, نسبت به تعریف HTML, فرایند توسعه صفحات سریعتر پیش میرود.
 
-همچنان بسیاری از وبسایت ها از React برای [اضافه کردن تعامل در صفحه فعلی.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) استفاده میشود. انها بجای یک کامپوننت ریشه از کامپوننت بیشتر و ریزتری استفاده کردند. شما میتوانید هرچقدر که نیاز دارید از کتابخانه ریکت استفاده کنید.
+همچنان بسیاری از وبسایت ها از React برای [داینامیک کردن صفحات](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) استفاده میشود. انها بجای یک کامپوننت root از کامپوننت بیشتر و ریزتری استفاده کردند. شما میتوانید هرچقدر که نیاز دارید از کتابخانه ریکت استفاده کنید.
 
 </DeepDive>
 
 <Recap>
 
-شما اکنون برای اولین بار طعم React را چشیده اید! اجازه بدهید یکسری موارد را درباره آن مرور کنیم:
+شما اکنون برای اولین بار طعم React را چشیده اید! اجازه بدهید یکسری موارد را مرور کنیم:
 
 * ریکت به شما اجازه میدهد کامپوننت های خود را, **که اجزایی هستند که میتوان چندین بار داخل اپلیکیشن استفاده کرد .** را توسعه دهید.
 * در یک اپلیکیشن ریکتی, هر جایی از صفحه (دراینجا رابط کاربری) یک کامپوننت است.
@@ -286,18 +286,17 @@ img { height: 181px; }
 
 </Sandpack>
 
-شاید برایتان سوال باشد که تنها دستور `export` برای حل مشکل بالا کافی بود. شما میتوانید تفاوت های بین `export` و `export default` را در [import و export کردن یک کامپوننت](/learn/importing-and-exporting-components) بخوانید
+شاید برایتان سوال باشد که تنها دستور `export` برای حل مشکل بالا کافی بود. اگر درباره تفاوت های بین `export` و `export default` را نمیدانید, مقاله [import و export کردن یک کامپوننت](/learn/importing-and-exporting-components) بخوانید
 
 </Solution>
 
 #### رفع مشکل دستور return {/*fix-the-return-statement*/}
 
-
 عبارت `return` در این کد اشتباه است. میتونی درستش کنی؟!
 
 <Hint>
 
-شاید شما در حین رفع مشکل این دستور به ارور "Unexpected token" برخورد کرده باشید. توجه کنید که حتما سمی کالن بعد از پرانتز بسته `return ( )` باشد. درغیراینصورت به ارور برخورد میکنید.
+شاید شما در حین رفع مشکل این دستور به ارور "Unexpected token" برخورد کرده باشید. توجه کنید که حتما سمی کالن بعد از پرانتز بسته `() return` باشد. درغیراینصورت به ارور برخورد میکنید.
 
 </Hint>
 
@@ -358,7 +357,7 @@ img { height: 180px; }
 
 </Solution>
 
-#### Spot the mistake {/*spot-the-mistake*/}
+#### ارور را تشخیص دهید {/*spot-the-mistake*/}
 
 کامپوننت `Profile` را در اینجا تعریف کردیم و زمانی که داریم استفاده میکنیم به ما خطا میدهد! به این معنا است که ریکت, کامپوننت را با یک تگ HTML اشتباه گرفته!
 
@@ -396,7 +395,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 نامگذاری کامپونت های ریکتی حتما باید با حرف بزرگ شروع شود!
 
-دستور `function profile()` را به `function Profile()` تغییر دهید, سپس `<profile />` را `<Profile />` تغییر دهید:
+دستور `()function profile` را به `()function Profile` تغییر دهید, سپس `</ profile>` را `</ Profile>` تغییر دهید:
 
 <Sandpack>