React یک کتابخانه محبوب جاوا اسکریپت است که برای ساخت رابط های کاربری، به ویژه برنامه های تک صفحه ای استفاده می شود. این به توسعه دهندگان اجازه می دهد تا اجزای رابط کاربری قابل استفاده مجدد را ایجاد کنند، وضعیت و ویژگی های آن مؤلفه ها را مدیریت کنند، و به طور مؤثر رابط کاربری را با تغییر داده ها به روز کرده و ارائه دهند.
React که توسط فیس بوک توسعه و نگهداری می شود، ایجاد برنامه های وب پویا و تعاملی را با تمرکز بر عملکرد و قابلیت نگهداری امکان پذیر می کند. در ادامه ما به سرفصل های مورد نیاز برای آموزش دوره react می پردازیم.
مقدمه ای برای React
- React چیست؟ آشنایی با اصول و تاریخچه React
- کامپوننت ها: بلوک های سازنده یک برنامه React
- JSX: ترکیب JavaScript و XML، یک پسوند نحوی برای نوشتن HTML در جاوا اسکریپت
مبانی React
- State and Props: مدیریت داده ها در اجزا
- مدیریت رویداد: پاسخ به اقدامات کاربر
- رندر شرطی: نمایش پویا عناصر بر اساس شرایط
- فهرست ها و کلیدها: ارائه لیست داده ها و درک کلیدها
موضوعات پیشرفته
- روش‌های چرخه حیات: درک مراحل مختلف زندگی یک جزء
- قلاب: حالت ساده و عوارض جانبی با اجزای کاربردی
- Context API: مدیریت وضعیت جهانی بدون حفاری پایه
مدیریت حالت
- Redux: کتابخانه ای برای مدیریت و متمرکز کردن حالت برنامه
- MobX: کتابخانه دیگری برای مدیریت دولتی
مسیریابی
- React Router: پیمایش بین نماها یا صفحات مختلف در یک برنامه React
ساختمان و استقرار
- Webpack: یک بسته‌کننده ماژول برای ساده‌سازی فرآیند توسعه
- Babel: یک کامپایلر جاوا اسکریپت برای تبدیل جاوا اسکریپت مدرن به فرمی سازگار با همه مرورگرها
- استقرار: بهترین روش ها برای استقرار یک برنامه React
الگوهای واکنش پیشرفته
- اجزای مرتبه بالاتر (HOC): استفاده مجدد از منطق مؤلفه
- Render Props: به اشتراک گذاری کد بین اجزا با استفاده از یک prop که مقدار آن یک تابع است
- قلاب های سفارشی: ایجاد قلاب های منطقی قابل استفاده مجدد متناسب با نیازهای برنامه شما
تقسیم کد و Lazy Loading
- تقسیم کد با React.lazy() و Suspense: بارگذاری موثر مؤلفه ها فقط در صورت نیاز
- بیانیه های واردات پویا: وارد کردن ماژول ها به صورت پویا برای بهبود عملکرد
رندر سمت سرور (SSR)
- Next.js: چارچوبی برای رندر کردن برنامه های React در سمت سرور
- تولید سایت ایستا (SSG): صفحات را در زمان ساخت از قبل رندر کنید تا عملکرد بهتری داشته باشید
رسیدگی به خطا
- مرزهای خطا: کشف و رسیدگی به خطاها در اجزای React
- ComponentDidCatch Lifecycle Method: مدیریت استثناها در اجزای کلاس
انیمیشن ها
- React Transition Group: افزودن انیمیشن به اجزای آن هنگام ورود و خروج از DOM
- Framer Motion: کتابخانه ای برای متحرک سازی اجزای React
یکپارچه سازی GraphQL
- Apollo Client: استفاده از GraphQL با React برای واکشی کارآمد داده ها
- Query and Mutation Hooks: واکشی و دستکاری داده ها با GraphQL
TypeScript با React
- بررسی نوع: اطمینان از ایمنی نوع در اجزای React
- TypeScript با Hooks: استفاده از TypeScript با سیستم قلاب React
برنامه های وب پیشرو (PWA)
- Service Workers: فعال کردن قابلیت‌های آفلاین و حافظه پنهان
- Manifest Files: سفارشی کردن نحوه نمایش PWA شما برای کاربران
مدیریت پیشرفته حالت
- React Query: مدیریت وضعیت سرور در برنامه های React
- Recoil: یک کتابخانه مدیریت وضعیت آزمایشی برای React
ساخت فرم های سفارشی
- Formik: مدیریت وضعیت فرم و اعتبارسنجی
- React Hook Form: رسیدگی به وضعیت فرم و اعتبارسنجی با قلاب های React
دسترسی
- نقش ها و ویژگی های ARIA: در دسترس قرار دادن برنامه های React خود
- مدیریت تمرکز: اطمینان از اینکه برنامه شما برای افرادی که به پیمایش صفحه کلید متکی هستند قابل استفاده است
بهینه سازی عملکرد
- Memoization: بهینه سازی عملکرد با React.memoand useMemo
- useCallback Hook: جلوگیری از رندرهای غیرضروری با ذخیره منابع تابع
- تقسیم کد: تقسیم کد به تکه های کوچکتر برای زمان بارگذاری سریعتر
- Lazy Loading: بارگیری اجزا فقط در صورت نیاز
تست کردن
- React Testing Library: تست نوشتن برای اجزای React
- مسخره کردن تماس های API: شبیه سازی پاسخ های سرور در تست ها
