مقدمه

پیش‌گفتار

چرا ری‌اکت؟

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

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

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

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

اهداف فصل

متغیرها

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

آرایه‌ها

متدهای آرایه

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

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

تابع

مروری بر تابع

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

شرط‌ها

پسورد صحیح

ویژگی 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 در کوئرا

%video:/video/player/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2aWRlb191cmwiOiJodHRwczovL3N0cmVhbS5xdWVyYXZpZGVvLmlyL2NvbGxlZ2UvNTc5ZDNiY2YtMWRmNC00ZmFjLWE2YTMtYjU5MjdmNjEwNjEwL3BsYXlsaXN0Lm0zdTgiLCJleHBpcmVzX2F0IjoxNzc2Mzg4ODU5fQ._o3ir0bP89xaLMVSUmOF_sRQ8JVdNLUQJST3m6vSnXw%

---

با گسترش چشمگیر فناوری‌های وب در سال‌های اخیر، توسعه‌ی رابط‌های کاربری (*Front-End*) به شاخه‌ای تخصصی و پویا از برنامه‌نویسی تبدیل شده است. در این مسیر، ابزارها و چارچوب‌های متنوعی برای ساده‌سازی و بهینه‌سازی فرآیند توسعه معرفی شده‌اند که به آن‌ها «چارچوب‌ها و کتابخانه‌های توسعه‌ی فرانت‌اند» گفته می‌شود.

در میان این ابزارها، **ری‌اکت (*React*)** به عنوان یکی از محبوب‌ترین و پرکاربردترین کتابخانه‌ها، جایگاه ویژه‌ای در صنعت نرم‌افزار پیدا کرده است. برخلاف چارچوب‌هایی نظیر *Angular* یا *Vue*، ری‌اکت یک **کتابخانه‌ی سبک برای ساخت رابط‌های کاربری پویا** است که بر پایه‌ی زبان جاوااسکریپت طراحی شده و تمرکز اصلی آن بر **مدیریت مؤثر وضعیت (state)** و **به‌روزرسانی بهینه‌ی نما (UI)** می‌باشد.


## **تاریخچه‌ی ری‌اکت (History of *React*)**

ری‌اکت نخستین‌بار در سال **۲۰۱۳** توسط مهندسی از شرکت فیسبوک به نام **جردن والک (*Jordan Walke*)** معرفی شد. هدف از طراحی این کتابخانه، حل چالش‌های پیچیده‌ی مدیریت داده‌ها و به‌روزرسانی‌های مکرر رابط کاربری در اپلیکیشن‌های بزرگ بود.

در آن زمان، تیم فیسبوک با مشکلات متعددی در نگهداری کدهای *Front-End* مواجه بود؛ تغییر در وضعیت داده‌ها باعث بازنویسی یا به‌روزرسانی بخش‌های متعددی از رابط می‌شد. ایده‌ی ری‌اکت این بود که رابط کاربری را بتوان به **اجزای مستقل (*Components*)** تقسیم کرد و هر تغییر تنها در همان بخش تأثیر بگذارد.

با معرفی مفهوم ***Virtual DOM***، ری‌اکت توانست عملکردی سریع‌تر از بسیاری از ابزارهای مشابه ارائه دهد و به همین دلیل به سرعت در میان توسعه‌دهندگان محبوب شد.

![ری‌اکت](https://quera.org/qbox/download/FJosn0RsIX/react.png)



## **فلسفه‌ی نام ری‌اکت (”The Philosophy Behind “React)**

واژه‌ی «*React*» از مفهوم **Reaction to changes of state** گرفته شده است؛ به این معنا که رابط کاربری به طور خودکار به تغییرات داده‌ها واکنش نشان می‌دهد.

این فلسفه، هسته‌ی اصلی عملکرد ری‌اکت را شکل می‌دهد: هرگاه وضعیت (state) یا داده‌ها تغییر کند، ری‌اکت با استفاده از الگوریتم ***Diffing*** و ***Virtual DOM*** تنها بخش‌های لازم از رابط را مجدداً رندر (*Render*) می‌کند.  

درک این منطق، پایه‌ی یادگیری عمیق‌تر مفاهیمی مانند *Re-render* ،*Virtual DOM* و *Hooks* خواهد بود که در بخش‌های بعدی دوره بررسی می‌شوند.

![React Data Flow Diagram](https://uploadkon.ir/uploads/3eab10_2520251010-1145-React-Data-Flow-Diagram-simple-compose-01k76jyq3nf649as3n0hndv3cr-1-.png)




## **توضیحات دوره**

در این دوره تلاش می‌شود تا با بهره‌گیری از روش‌های نوین آموزش برنامه‌نویسی، شما را با مفاهیم بنیادی و پیشرفته‌ی ری‌اکت و ابزارهای وابسته به آن آشنا کنیم.

پس از اتمام موفقیت‌آمیز این دوره، دانشجویان قادر خواهند بود تا به عنوان یک **توسعه‌دهنده‌ی فرانت‌اند متخصص در ری‌اکت** وارد بازار کار شوند و پروژه‌های واقعی را از مرحله‌ی طراحی تا استقرار نهایی پیاده‌سازی کنند.

> **پیش‌نیاز دوره:**  
> آشنایی کامل با *HTML* و *CSS* و تسلط نسبی بر زبان برنامه‌نویسی *JavaScript*.  
> در صورت نداشتن تجربه‌ی کافی، توصیه می‌شود پیش از شروع این دوره، در دوره‌ی مقدماتی «طراحی و توسعه‌ی وب (*Front-End*)» شرکت کنید.

در این آموزش از زبان ***TypeScript*** برای توسعه‌ی پروژه‌ها استفاده می‌شود تا علاوه بر یادگیری ری‌اکت، مهارت شما در توسعه‌ی ایمن و مقیاس‌پذیر نیز افزایش یابد. در صورت آشنا نبودن با تایپ‌اسکریپت، فصل جداگانه‌ای به معرفی این زبان اختصاص داده شده است.



## **سرفصل‌های آموزشی دوره**

- مرور مفاهیم پایه‌ی جاوااسکریپت  
- آشنایی با تایپ‌اسکریپت در توسعه‌ی ری‌اکت  
- ایجاد و پیکربندی پروژه‌ی ری‌اکت  
- معرفی *JSX* و *TSX*  
- ساخت و سازمان‌دهی کامپوننت‌ها  
- مدیریت *State* و *Props*  
- آشنایی با *Hook*ها و کاربرد آن‌ها  
- اشکال‌زدایی (*Debugging*) در پروژه‌های ری‌اکت  
- بررسی کامپوننت‌های پیشرفته و الگوهای طراحی  
- مسیریابی با *React Router*  
- دریافت داده از سرور و کار با *API*ها  
- پیاده‌سازی فرم‌ها و اعتبارسنجی با *React Hook Form*  
- روش‌های استایل‌دهی در ری‌اکت  
- درک عملکرد درونی ری‌اکت و *Virtual DOM*  
- مدیریت پیشرفته‌ی *State* با *Redux Toolkit* 
- تست‌نویسی کامپوننت‌ها با *Jest* و *React Testing Library* 
- *Build* و *Deploy* کردن پروژه‌های ری‌اکت  
- اجرای پروژه‌های واقعی نزدیک به فضای صنعت  



## **مزایای دوره‌ی ری‌اکت کوئرا**

این دوره با هدف آموزش کاربردی و آماده‌سازی دانشجویان برای ورود به بازار کار طراحی شده است. از جمله ویژگی‌های منحصربه‌فرد آن می‌توان به موارد زیر اشاره کرد:

- درسنامه‌های جامع، به‌روز و منطبق با نیازهای صنعت نرم‌افزار  
- ویدئوهای آموزشی با محوریت یادگیری مفهومی و عملی  
- محیط تعاملی آموزشی با ویرایشگر آنلاین و قابلیت اجرای کد  
- تمرین‌های مرحله‌به‌مرحله از سطح مبتدی تا پیشرفته همراه با داوری خودکار  
- پروژه‌های صنعتی واقعی با ویدئوهای راهنما  
- امکان پرسش و پاسخ با مربیان و دیگر دانشجویان  
- دریافت گواهینامه‌ی معتبر بر اساس عملکرد و نمره‌ی نهایی  



## **جمع‌بندی**

ری‌اکت نه‌تنها یکی از مهم‌ترین ابزارهای توسعه‌ی رابط کاربری در جهان است، بلکه رویکردی مدرن به طراحی نرم‌افزار ارائه می‌دهد. یادگیری اصولی آن، مسیر حرفه‌ای شما را در دنیای Front-End هموار می‌کند.

امید است در طی این دوره، ضمن کسب مهارت‌های فنی به‌روز، تجربه‌ای لذت‌بخش و پربار از یادگیری و خلق پروژه‌های واقعی با ری‌اکت داشته باشید.

form

plain_text

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