طراحی صفحات وب با React.js
ری‌اکت (ReactJS) یک کتابخانه جاوااسکریپت متن باز برای ساخت رابط کاربری (UI) است که توسط فیسبوک توسعه داده شده است. این کتابخانه به منظور ایجاد وب‌سایت‌های تعاملی و دینامیک طراحی شده است و برای ساخت و مدیریت بخش‌های مختلف یک وبسایت، از جمله کامپوننت‌ها، استفاده می‌شود.
یکی از ویژگی‌های برجسته ReactJS، استفاده از مدل DOM مجازی است. در ReactJS، تغییرات اعمال شده به UI در ابتدا در یک مدل DOM مجازی (Virtual DOM) اعمال می‌شوند و سپس تفاوت‌های بین مدل DOM مجازی و DOM واقعی محاسبه و به روزرسانی می‌شود. این روش، عملکرد و کارایی برنامه را بهبود می‌بخشد و اجازه می‌دهد تا بخش‌های معینی از صفحه را بدون نیاز به رفرش کردن کامل صفحه به روزرسانی کنید.
در این دوره شما مفاهیم و مهارت‌های زیر را یاد می‌گیرید:
۱. ایجاد کامپوننت‌های React و استفاده از آن‌ها برای ساخت وب‌سایت‌های تعاملی.
۲. مدیریت وضعیت (state) در ReactJS و استفاده از ویژگی‌های مختلف مانند props و state برای ارتباط بین کامپوننت‌ها.
۳. استفاده از مدل DOM مجازی و بهینه‌سازی عملکرد برنامه با رویکردهای ReactJS.
4. درک مفاهیم اصلی در ReactJS
5. یادگیر پکیج‌های کاربردی
6. درک و یادگیری مفاهیم پشرفته و ابته کاربردی
7. دارا بودن چندین مینی پروژه برای درک بهتر
8. دارای پروژه نهایی و کامل
با اتمام این دوره، شما قادر خواهید بود تا وب‌سایت‌های تعاملی و دینامیک را با استفاده از ReactJS ایجاد کرده و مدیریت بهتری را بر روی UI برنامه‌های خود داشته باشید.
سر فصل ها:
-
0 معرفی دوره
- 1-0- معرفی کلی دوره
-
1 Main Concept ری اکت
- 1-1- معرفی و نصب Node Js
- 2-1- معرفی و نصب CMD کاربردی GitBash
- 3-1- معرفی و نصب CMD کاربردی PowerShell
- 4-1- معرفی و کاربرد NPM
- 5-1- ایجاد پروژه ری‌اکتی با CRA (Create React App)
- 6-1- نحوه ایجاد پروژه ری اکتی با vite
- 7-1- File Structure در ری اکت
- 8-1- مفهوم Component Base در ری‌اکت
- 9-1- مفهوم کاربرد و JSX در ری‌اکت
- 10-1- استفاده از CSS در کامپوننت‌های ری‌اکت
- 11-1- استفاده از bootstrap در ری اکت
- 12-1- استفاده از tailwind در ری اکت
- 13-1- مفهوم و کاربرد Virtual Dom در ری‌اکت
- 14-1- مفهوم و استفاده از Prop در ری‌اکت
- 15-1- استفاده شرطی از propها
- 16-1- دریافت بهینه Propها
- 17-1- ارسال حرفه‌ای Propها با استفاده از spread
- 18-1- روش تغییر اسم propها
- 19-1- مقدار دهی default برای propها
- 20-1- استفاده از special prop در ری‌اکت
- 21-1- معرفی و کار با اکستنشن React Developer Tools
- 22-1- مفهوم state در ری‌اکت
- 23-1- روش تغییر state به کمک متد setState
- 24-1- نحوه استفاده از Event ها در ری‌اکت
- 25-1- مینی پروژه Counter
- 26-1- روش ارسال پارامتر به متدها در Event Handling
- 27-1- چند روش برای پیاده سازی Conditional Rendering
- 28-1- استفاده از متد مهم map در ری‌اکت
- 29-1- مقدار Key در متد map
- 30-1- مقادیری که نباید به عنوان key ارسال کنیم؟
- 31-1- هندل Form و اینپوت‌ها در ری‌اکت
- 32-1- کار با پکیج formik
- 33-1- کار با پکیج React Hook Form
- 34-1- مینی پروژه Form Validation بدون استفاده از پکیج
- 35-1- ریفکتور مینی پروژه Form Validation با استفاده از پکیج
- 36-1- کار با المنت Select در ری‌اکت + مینی پروژه
- 37-1- ارسال متد به عنوان Prop
- 38-1- Fragment در ری‌اکت و نحوه استفاده از آن
- 39-1- معرفی پکیج React-Icons
- 40-1- پروژه سبد خرید
-
2 مفهوم contextApi - مینی پروژه سبد خرید
- 1-2- مفهوم contextApi پارت اول
- 2-2- مفهوم contextApi پارت دوم
- 3-2- پیاده سازی سبد خرید با استفاده از contextApi
-
3 مفاهیم api و ارتباط با سرور - مینی پروژه
- 1-3- api چیست
- 2-3- data base چیست
- 3-3- مفهوم CRUD
- 4-3- کار با متد GET
- 5-3- کار با متد DELETE
- 6-3- کار با متد POST
- 7-3- کار با متد PUT, PATCH
- 8-3- مینی پروژه
-
4 مفهوم Custom Hook - مینی پروژه
- 1-4- مفهوم و کاربرد Custom Hook
- 2-4- پیاده سازی Custom Hook pagiNation
- 3-4- مینی پروژه با استفاده از Custom Hook pagiNation
- 4-4- اضافه شدن چند Custom Hook در آینده
-
5 مفاهیم memoize
- 1-5- مفهوم memoize
- 2-5- استفاده از Hook useMemo
- 3-5- استفاده از Hook useCallback
- 4-5- تفاوت useMemo و useCallback چیه؟
-
6 مینی پروژه TodoList- نحوه پیاده سازی
- 1-6- نحوه پیاده سازی پروژه
- 2-6- اضافه کردن Todo ها
- 3-6- حذف و ویرایش Todo ها
- 4-6- فیلتر سازی Todo ها
-
7 مینی پروژه Note App - نحوه پیاده سازی
- 1-7- نحوه پیاده سازی پروژه
- 2-7- پیاده سازی پروژه NoteApp - قسمت 1
- 3-7- پیاده سازی پروژه Note App - قسمت 2
- 4-7- پیاده سازی پروژه Note App - قسمت 3
-
8 مفاهیم پیشرفته
- 1-8- مفهوم Lifting state
- 2-8- اضافه شدن جلسات در آینده
-
9 سایت دیوار + بک اند اختصاصی
- 1-9- پروژه نهایی
برنامه نویس فرانت اند استک React
تجربه 3 ساله در زمینه طراحی وبسایت
برنامه نویس شرکت SCH در انگلیس
مهارتها
Next.js
React.js
Vite.js
JavaScript
TypeScript
Tailwind CSS
Bootstrap
