مقدمه

پیش‌گفتار

چرا ری‌اکت؟

روند آموزش دوره و دریافت گواهی

چگونه بیشترین بهره را از دوره ببریم؟

آماده‌سازی محیط توسعه

مروری بر جاوااسکریپت

اهداف فصل

متغیرها

دسترسی به متغیرها

آرایه‌ها

متدهای آرایه

مروری بر آرایه‌ها

شیءها در جاوا‌اسکریپت

تابع

مروری بر تابع

رعایت حداقل سنی

شرط‌ها

پسورد صحیح

ویژگی Template Literals

ماژول‌ها

رویکرد Async & Await

ساختار Promise ها

بشمار

آنچه از ES6 گذشت

آشنایی با تایپ‌اسکریپت

تایپ‌های مقدماتی

مشخص‌کردن تایپ‌های ورودی و خروجی توابع

تعریف تایپ‌های جدید

مروری بر مباحث پایه

Interfaces

تایپ یا Interface

فرق بین Type و Interface

تایپ‌های جنریک

تایپ‌های کمکی

مروری بر تایپ‌ها

مساحت یاب

استخدام

شروع با ری‌اکت

معرفی Vite

ایجاد پروژه‌ی ری‌اکت

آشنایی اولیه با پروژه‌ی ری‌اکت

کامپوننت‌ها ‌و TSX

شروع با یک تابع

آشنایی با JSX و TSX

کامپوننت چیست؟

یک کامپوننت ساده

خوشامدگویی

آشنایی با Props

لیست دانش‌آموزان

دو Prop ویژه

کارت ساده

آنچه از کامپوننت گذشت

کار با hook ها - بخش اول

مقدمه‌ای بر hook ها

مفهوم State و کار با useState

رویدادها و State

مروری بر useState

معرفی با طعم استیت!

مفهوم Reducer

کار با useReducer

مروری بر useReducer

ورود و خروج

مفهوم Context و کار با useContext

مروری بر useContext

لیست اطلاعات

کار با hook ها - بخش دوم

کار با useRef

تغییر DOM با useRef

مروری بر useRef

انتقال متن

مفهوم Effect و معرفی useEffect

کار با useEffect

تابع cleanup در useEffect

مروری بر useEffect

اعتبارسنجی

نوشتن custom hook

اعتبارسنجی ۲

اشکال‌زدایی اپلیکیشن‌های ری‌اکت

ابزارهای اشکال‌زدایی

اشکال زدایی با Vscode

آنچه گذشت

کامپوننت‌های پیشرفته

Fragments چیست

بهینه سازی با Profiler

مدیریت بارگذاری با Suspense

شناسایی اشکال با StrictMode

Best Practices

استایل‌دهی به کامپوننت‌ها

استایل‌دهی inline

قرمز، آبی، سبز، زرد

خالی یا پر، قرمز یا سبز

استایل‌دهی سراسری

ماژول‌های CSS

کار با React Router

مقدمه‌ای بر Routing

معرفی React Router

ایجاد و استفاده از Router

جابه‌جا شدن میان مسیرها با Link

مروری بر Router

ورود و ثبت‌نام

کار با مسیرهای تودرتو

مسیر Index و مدیریت خطا

کار با URL Params

مروری بر URL Params و خطای Not Found

پروژه اول: مدیریت کارمندان

معرفی پروژه

نصب و تنظیمات اولیه پروژه

ایجاد صفحه ورود

ساخت داشبورد

ساخت User Context

ایجاد لیست کاربران

تکمیل اکشن ها و مرتب سازی

ایجاد کاربر و تغییر اطلاعات کاربر

دریافت داده از سرور

Fetch API

تسک‌های باقر

Fetch Api (post)

استفاده از Fetch و دریافت اطلاعات

تسک‌های جدید باقر

Pending State

کار با فرم‌ها

فرم چیست؟

کامپوننت‌های کنترل‌شده و کنترل‌نشده

ثبت اطلاعات

اعتبار سنجی فرم

Regexes

اعتبار سنجی با Regex

مثالی از یک کامپوننت کنترل شده

نگاهی بر فرم

کار با React Hook Form

React Hook Form چیست

اعتبار سنجی با React Hook Form

نمونه فرم لاگین

Yup چیست

اعتبار سنجی با استفاده از schema

فرم تماس

آنچه از این فصل گذشت

ری‌اکت چه‌طور کار می‌کند؟

پشت‌ صحنه

کِی آپدیت کنم؟

فلسفه ری‌اکت

پروژه دوم: کلون گیت‌هاب

معرفی Octokit

معماری پروژه

بررسی user context

جستجو کاربر

پروفایل کاربر

مشخصات یک ریپازیتوری

جستجو بین ریپازیتوری ها

کار با Redux Toolkit

Redux یا Redux Toolkit

اضافه کردن Redux به پروژه React

قدم‌شمار

Middlewares

Middlewareهای سفارشی

لاگِ دیباگ

تانک‌ها

مروری بر Redux Toolkit

Build کردن پروژه‌ی ری‌اکت

تنظیمات

دستور npm run build

دیپلوی‌کردن

مقدمه‌ای بر دیپلوی‌کردن

دیپلوی کردن با Vercel

دیپلوی‌کردن با GitHub Pages

دیپلوی‌کردن با Liara

ری‌اکت در صنعت

Async Search در ترابرنت ( گروه حصین)

Lazy load در طاقچه

کار با نقشه به کمک map.ir

Caching در ادیتور کوئرا

Chakra UI در کوئرا

برای توسعه‌ی ری‌اکت در درجه‌‌ی اول احتیاج به یک ویرایشگر متنی (*Text Editor*) برای نوشتن کد‌ها و همچنین مرورگر برای مشاهده‌ی نتیجه داریم. برای اجرای کدهای خود نیز نیاز به *Node.js* داریم.

شما می‌توانید از هر ویرایشگر متنی دلخواه مانند *Sublime*  ،*Atom* یا *IDE* ای مانند *WebStorm* استفاده کنید. اما پیشنهاد ما به شما استفاده از نرم‌افزار *Visual Studio Code* یا همان *VSCode* است.

![Magical Package Management](/qbox/download/KjDFs7WWrr/20251008_2213_Magical%20Package%20Management_simple_compose_01k72j2jtxefv9zzs4kbrmzd4n.png)


<details class="purple">
<summary> (محیط توسعه یکپارچه)</summary>


%align_right_start%

 *IDE (Integrated Development Environment)* چیست؟

*IDE* نرم‌افزاری است که برنامه‌نویس‌ها برای نوشتن، آزمایش و مدیریت کدهایشان از آن استفاده می‌کنند. هدف *IDE* این است که تمام ابزارهای لازم برای توسعه‌ی نرم‌افزار را در یک محیط واحد جمع کند تا کار برنامه‌نویسی راحت‌تر و سریع‌تر شود.

**ویژگی‌های اصلی *IDE*:**  
- **ویرایشگر کد (*Code Editor*):** جایی برای نوشتن کد با قابلیت‌هایی مثل رنگ‌بندی سینتکس و تکمیل خودکار.  
- **دیباگر (*Debugger*):** امکان پیدا کردن و رفع خطاهای برنامه در حین اجرا.  
- **کامپایلر / مفسر (*Compiler / Interpreter*):** ترجمه کد به زبان ماشین یا اجرای مستقیم آن.  
- **مدیریت پروژه (*Project Management*):** سازمان‌دهی فایل‌ها و فولدرهای پروژه.  
- **ادغام با سیستم کنترل نسخه (*Version Control*):** کار با ابزارهایی مثل *Git* برای مدیریت تغییرات کد.  

**چرا *IDE* مهم است؟**  
- صرفه‌جویی در زمان با داشتن همه ابزارها در یک محیط.  
- کاهش خطاها، به ویژه برای برنامه‌نویس‌های تازه‌کار.  
- راحت‌تر شدن کار با فریم‌ورک‌ها و کتابخانه‌ها.

</details>


همچنین می‌توانید از مرورگر دلخواه خود برای مشاهده‌ی نتیجه استفاده کنید اما در ویدئوهای این دوره از *Google Chrome* استفاده شده است. 




---

# نصب *Visual Studio Code*

برای نصب ویرایشگر متنی *VSCode* وارد [این لینک](https://code.visualstudio.com/Download) شده و فایل نصبی متناسب با سیستم‌عامل خود را دانلود کنید.

<details class="blue">
<summary>افزونه‌های محبوب</summary>
%align_right_start%
## مفهوم افزونه یا *Extension*
در مفهوم محیط‌های توسعه یا *IDEs* (*Integrated Development Environments*)، افزونه‌ها یا *Extensions* به مجموعه‌ای از ابزارهای کمکی و قابلیت‌های اضافی گفته می‌شود که به برنامه‌نویسان این امکان را می‌دهد تا توسعه محیط کدنویسی خود را به نحوی *Customize* و عملکرد برنامه‌نویسی خود را بهبود بخشند.

در *VSCode* ، که یک ویرایشگر متنی پرطرفدار برای توسعه‌ی نرم‌افزار است، افزونه‌ها یا *Extensions* ابزارهایی هستند که به کاربران این امکان را می‌دهند تا قابلیت‌ها و امکانات جدیدی را به محیط کدنویسی خود اضافه کنند. این افزونه‌ها می‌توانند از ابزارهای کمکی برای فرمت‌بندی کد گرفته تا ابزارهای پیشرفته‌تری برای پشتیبانی از چارچوب‌ها و زبان‌های برنامه‌نویسی مختلف باشند.

### *ES7 React/Redux/GraphQL/React-Native snippets*
این افزونه مجموعه‌ای از کد‌های کمکی را برای *React* ،*Redux* ،*GraphQL* و *React Native* ارائه می‌دهد. این افزونه می‌تواند به طراحی کد شما کمک زیادی کند، زیرا تعداد زیادی از کد‌های ابتدایی را کاهش داده و فرآیند توسعه شما را سریع‌تر و کارآمدتر می‌کند.
![reactsnipptet](https://quera.org/qbox/download/QBWhVC11n1/0_dPvkdvS8WBGkmFBq.png)

[لینک Market Place](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

### *Prettier - Code formatter*

درواقع *Prettier* یک افزونه برای فرمت‌بندی کد در *VSCode* است. این ابزار کمک می‌کند همه اعضای تیم، کد را با یک شکل و قالب یکسان بنویسند. در زمانی که با تیمی از برنامه‌نویسان کار می‌کنید، اهمیت استفاده از یک استاندارد مشخص از لحاظ قالب‌بندی کد به خصوص برجسته می‌شود و *Prettier* به شما کمک می‌کند که این استاندارد را به سادگی رعایت کنید.
![prettier](https://quera.org/qbox/download/GOfluw6TIT/prettier.png)

[لینک Market Place](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### *Path Intellisense*
افزونه *Path Intellisense* یک افزونه مفید برای *VSCode* است که به بهبود کار با مسیرها (*Paths*) در کدنویسی کمک می‌کند. در حین توسعه، اغلب نیاز به اشاره به فایل‌ها و دایرکتوری‌ها در پروژه یا سیستم فایل داریم. این افزونه با ارائه ویژگی‌های هوشمندانه، فرآیند اشاره به مسیرها را سریع‌تر و راحت‌تر می‌کند.
![توضیح تصویر](https://quera.org/qbox/download/euLgaxHDRh/0_gcFbtbNGsz2_6HRn.png)

[لینک Market Place](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
</details>

# نصب افزونه‌ی *React Developer Tools* روی مرورگر
برای اضافه کردن امکاناتی مفید به قسمت *developer tools* مرورگر، می‌توان افزونه‌ی *React Developer Tools* را روی مرورگر نصب کرد. برای نصب آن وارد [این لینک](https://react.dev/learn/react-developer-tools#browser-extension) شده و افزونه‌ی مناسب مرورگر خود را نصب کنید. 



### ***Package Manager* در *React***

در پروژه‌های ری‌اکت *Package Manager* ابزاری است که به شما کمک می‌کند کتابخانه‌ها و بسته‌های مورد نیاز پروژه را به سادگی نصب و مدیریت کنید. به جای اینکه کتابخانه‌ها را دستی دانلود کنید یا نگران نسخه‌های ناسازگار باشید، ابزارهایی مثل `npm` و `yarn` این کار را به صورت خودکار انجام می‌دهند. وقتی یک کتابخانه اضافه می‌کنید، *Package Manager* مطمئن می‌شود که همه وابستگی‌ها درست نصب شده‌اند و پروژه شما بدون مشکل اجرا می‌شود. این ابزار باعث می‌شود بتوانید روی نوشتن کد و توسعه برنامه تمرکز کنید، نه روی مدیریت فایل‌ها و نسخه‌ها.

**نکات مهم:**

+ نصب کتابخانه‌ها به راحتی و با یک دستور انجام می‌شود.

+ نسخه‌های مناسب کتابخانه‌ها با پروژه هماهنگ می‌شوند.

+ مدیریت وابستگی‌ها ساده و بدون خطا است.

+ باعث صرفه‌جویی در زمان و افزایش سرعت توسعه می‌شود.


---

# نصب *Node.js*
برای شروع یک پروژه‌ی ری‌اکت و همچنین اجرای کدهای جاوااسکریپت خارج از مرورگر ابتدا نیاز به نصب *Node.js* روی سیستم خود دارید. *Node.js* یک محیط اجرایی جاوااسکریپت به صورت متن‌باز است که کد جاوااسکریپت را خارج از مرورگر وب اجرا می‌کند. *Node.js* قابلیت اجرای کدهای جاوااسکریپت روی پلتفرم‌ها و سیستم عامل‌های مختلف را دارد.

مهم‌ترین دلیل نیاز به *Node.js* برای توسعه‌ی ری‌اکت، داشتن یک *Package Manger* است که *Node.js* در قالب *NPM* آن را در اختیار می‌گذارد. با استفاده از *npm* می‌توان پکیج‌های مختلف مورد استفاده در پروژه ری‌اکت را مدیریت کرد. از جمله‌ی پکیج‌هایی که *npm* در اختیار می‌گذارد می‌توان به خود *React* و هزاران ابزار دیگر اشاره کرد.

برای نصب *Node.js* روی سیستم عامل‌های مختلف، راه‌های زیادی وجود دارد. در این‌ جا سعی می‌کنیم راحت‌ترین روش‌های نصب آن را روی سه سیستم عامل *ویندوز* (*Windows*) ، *مک* (*MacOS*) و *اوبونتو* (*Ubuntu*) بیان کنیم. همچنین دقت کنید همواره با یک جستجوی ساده می‌توانید روش نصب *Node.js* مطابق سیستم عامل خود را پیدا کنید.

> نکته:‌ تلاش کنید همواره نسخه‌ی *LTS* کنونی *Node.js* را دریافت کنید زیرا نسخه‌ی *Stable* این ابزار است.

## نصب روی ویندوز (*Windows*)
ابتدا وارد [این لینک](https://nodejs.org/en/download/) شوید. سپس *Installer* مربوط به ویندوز را دانلود کرده و با استفاده از آن، *Node.js* را نصب کنید.

<details class="purple">
<summary>چک کردن موفقیت آمیز بودن نصب روی ویندوز</summary>

پس از نصب وارد *Command Line* ویندوز شوید و دو دستور زیر را اجرا کنید:
```shell
node -v
```
```shell
npm -v
```  
این دستورات باید ورژن *node* و *npm* نصب شده را به شما نشان دهند. در صورتی که هر کدام از دستورات با خطا مواجه شود، نصب *Node.js* به درستی انجام نشده‌است.

</details>


---

## نصب روی مک (*MacOS*)

۱. نصب به کمک *Installer* : ابتدا وارد [این لینک](https://nodejs.org/en/download/) شوید. سپس *Installer* مربوط به مک را دانلود کرده و با استفاده از آن، *Node.js* را نصب کنید.

۲. نصب به کمک *[Homebrew](https://brew.sh/)* : در صورتی که روی مک خود *Homebrew* را دارید، می‌توانید به کمک دستور زیر، *Node.js* را نصب کنید:

```shell
brew install node
```
<details class="purple">
<summary>چک کردن موفقیت آمیز بودن نصب روی مک</summary>

پس از نصب وارد *Terminal* مک شوید و دو دستور زیر را اجرا کنید:
```shell
node -v
```
```shell
npm -v
```  
هر کدام از این دستورات باید ورژن *node* و *npm* نصب شده را به شما نشان دهند. در صورتی که دستور با خطا مواجه شود، نصب *Node.js* به درستی انجام نشده‌است.

</details>

## نصب روی اوبونتو (*Ubuntu*)
ابتدا وارد [این لینک](https://github.com/nodesource/distributions?tab=readme-ov-file#installation-instructions) شوید. سپس دستور متناسب با ورژن دلخواه خود را در ترمینال اجرا کنید. 

<details class="purple">
<summary>چک کردن موفقیت آمیز بودن نصب روی اوبونتو</summary>

پس از نصب وارد *Terminal* اوبونتو شوید و دو دستور زیر را اجرا کنید:
```shell
node -v
```
```shell
npm -v
```  
هر کدام از این دستورات باید ورژن *node* و *npm* نصب شده را به شما نشان دهند. در صورتی که دستور با خطا مواجه شود، نصب *Node.js* به درستی انجام نشده‌است.

</details>

جامپ فرانت‌اند با ری‌اکت