مقدمه

پیش‌گفتار

چرا ری‌اکت؟

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

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

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

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

اهداف فصل

متغیرها

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

آرایه‌ها

متدهای آرایه

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

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

تابع

مروری بر تابع

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

شرط‌ها

پسورد صحیح

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

هنگام گذراندن دوره‌ی «جامپ فرانت‌اند با ری‌اکت» کوئرا با صفحات مختلفی مواجه می‌شوید، در این بخش سعی می‌کنیم تا شما را با انواع محتواهای موجود و نقش آن‌ها، نحوه‌ی پرسش و پاسخ و به صورت کلی، نحوه‌ی گذراندن دوره آشنا کنیم.
# درسنامه
اصلی‌ترین محتوای در دسترس شما درسنامه‌ها هستند. همواره تلاش می‌شود درسنامه‌ها به‌روز و کامل باشند تا شما بتوانید با مطالعه‌ی آن‌ها درک اولیه و مناسبی از مطلب کسب کنید.

یکی از ویژگی‌های متمایز کننده دوره‌های کوئرا با اکثر دوره‌های دیگر، امکان مشاهده‌ی کد در کنار درسنامه‌ها است. در درسنامه‌هایی که تدریس نحوه‌ی کد زدن محوریت است، یک ادیتور در کنار متن درسنامه در اختیار شما قرار دارد که می‌توانید کد مربوط به پروژه را به صورت یکجا مشاهده کنید و همچنین از آن کد روی سیستم خود استفاده کنید.

به صورت کلی قدم اول یادگیری‌شما در این دوره، مطالعه و فهم درسنامه‌ها است و بدون انجام این کار انجام تمرین‌ها و کسب نمره‌ی مناسب امکان‌پذیر نیست.

# محتوای ویدئویی
پس از هر چند درسنامه‌، یک درسنامه وجود دارد که داخل خود ویدئویی از مرور مفاهیم چند درسنامه‌ی قبل دارد. با مشاهده‌ی این ویدئو ها با دقت مفاهیم تدریس شده را به صورت کامل درک می‌کنید و آماده‌ی حل کردن تمرین‌ها می‌شوید.

# تمرین
گام بعدی، تثبیت آموخته‌های شما از درسنامه‌هاست. این کار با انجام تمرین‌ها صورت می‌گیرد. در صورت وجود تمرین برای شما خروجی موردنظر شرح داده می‌‌شود و شما باید با توضیحات داده‌ شده، آن تمرین را انجام دهید و سپس آن را برای داوری ارسال کنید. در این مرحله کد شما به صورت سیستمی و آنلاین داوری می‌شود و نمره به آن تخصیص داده می‌شود.

زمان کافی برای حل تمرین‌ها بگذارید تا بهترین یادگیری برای شما حاصل شود. بدون حل تمرین‌ها یادگیری شما ناقص می‌ماند و برای تسلط کامل شما روی آن موضوع حتماً نیاز است تا تمرین‌ها را **خودتان** حل کنید.

# پروژه 
در این دوره، دو فصل مربوط به پیاده‌سازی پروژه‌ هستند. در این دو فصل مرحله به مرحله یک پروژه به کمک مفاهیمی که تا آن فصل تدریس شده‌اند پیاده‌سازی می‌شود تا شما با پروژه‌های واقعی و نزدیک به صنعت آشنا شوید.

# پرسش و پاسخ
یکی دیگر از ویژگی‌های متمایز کننده دوره‌‌های کوئرا امکان سؤال پرسیدن در مورد درسنامه و یا تمرین هاست. این کار به صورت انجام می‌گیرد: 
+ **بخش کامنت‌ها (گفت و گو)**:
در انتهای هر درسنامه و یا تمرین بخشی با عنوان گفت‎ و گو وجود دارد که شما می‎‌توانید سؤال خود را از دیگر کسانی که در حال گذراندن دوره هستند بپرسید و حتی به سؤالات دیگران پاسخ دهید. این امکان وجود دارد در صورتی که لازم باشد مربی‌های دوره سؤال شما را به بخش سؤال خصوصی منتقل کنند و آن جا پاسخ خود را از مربیان دریافت کنید.

+ **سؤال خصوصی**: 
در همان بخش گفت و گو گزینه ای با عنوان «سؤال خصوصی» وجود دارد که شما می‌توانید سوال خود را از مربی‌های با تجربه کوئرا بپرسید و تلاش می‌شود تا در سریع‌ترین زمان ممکن به سؤال شما پاسخ داده شود. شما می‌توانید هر ابهامی در درسنامه‌ها و یا تمرین‌‌ها داشتید را در سؤال خصوصی مطرح کنید و ترجیحاً سؤالات مربوط به کدهایتان را در این بخش بپرسید.

# گذراندن فصل‌ها

دوره‌ی «جامپ فرانت‌اند با ری‌اکت» از چندین فصل تشکیل شده است، برای این که یک فصل را بگذرانید، باید درصدی معین از درس‌نامه‌ها و مسئله‌های آن را بگذرانید. با گذراندن یک فصل، فصل بعدی برای شما باز می‌شود و می‌توانید درسنامه‌ها و تمرین‌های آن را ببینید.

# توضیحات دریافت گواهی

شما با حل هر یک از سؤالات دوره، مقداری امتیاز دریافت می‌کنید و می‌توانید با استفاده از این امتیازات، جواب و یا تست‌های یکی از سؤالات را خریداری کنید. زمانی که دوره را به اتمام می‌رسانید، مقداری امتیاز برای شما باقی می‌ماند و بر حسب این مقدار به شما گواهی داده می‌شود.

در نهایت بر حسب امتیاز نهایی، یکی از ۴ سطح زیر در گواهی گزارش می‌شود:

+ سطح **Perfect** برای نمرات حداقل ۲۰۰۰
+ سطح **Very Good** برای نمرات کمتر از ۲۰۰۰ و حداقل ۱۵۰۰
+ سطح **Good** برای نمرات کمتر از ۱۵۰۰ و حداقل ۱۰۰۰
+ سطح **Fair** برای نمرات کمتر از ۱۰۰۰

هم‌چنین نمونه‌ای از یک گواهی را مشاهده می‌کنید:
![گواهی نمونه](https://quera.org/qbox/download/CZGo0Npuc2/51e1dbbe7a67376c8405e3a7ed596e3e.jpeg)

form

plain_text

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