دوره آموزشی ساخت برنامههای واکنشی آماده تولید: راهاندازی برای استقرار با Firebase
4 ساعت 28 دقیقهمتوسط2023-03-03
مدرسین

Sandy Ludosky
Web Developer and Trainer
جزئیات دوره
آیا نیاز به ساخت برنامههای کاربردی با ReactJS، فریمورک محبوب JavaScript که توسط متا (فیسبوک سابق) توسعه یافته است دارید؟ در این دوره، Sandy Ludosky، توسعهدهنده و مربی وب، شما را از طریق فرآیند ساخت یک اپلیکیشن تک صفحهای به طور کارآمد، با استفاده از ابزارهای کاربردی داخلی و ابزارهای خارج از جعبه راهنمایی میکند. یاد بگیرید که چگونه ابزارها و فایل هایی را که برای این دوره نیاز دارید راه اندازی کنید، سپس یک پروژه جدید React را شروع کنید. ابزارهایی را کاوش کنید که به شما کمک میکنند از مولفههای React بدون حالت به حالت حالتپذیر بروید و نحوه استفاده از Context API برای مدیریت وضعیت برنامهتان را بررسی کنید. نحوه اضافه کردن Firebase را به پروژه React خود بیاموزید، سپس به پایگاه داده Cloud Firestore متصل شوید. در عملکردهایی مانند ایجاد یک سطل برای ذخیره تصاویر، احراز هویت و مدیریت کاربران و اجرای مسیریابی سمت مشتری با React-Router V6 غوطه ور شوید. درباره فیلتر کردن، جستجو و اشکال زدایی بیاموزید. به علاوه، نحوه استقرار برنامه React خود را با استفاده از میزبانی Firebase مرور کنید.
مهارت ها
FirebaseReact.jsMetaFront-End Web DevelopmentGoogleWeb DevelopmentDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - یک برنامه تکصفحهای ستاره ای با React بسازید
1. شروع و راه اندازی
- 02 - آنچه باید بدانید
- 03 - ابزار و فایل تمرین
- 04 - React CLI و React Developer Tools
- 05 - نمای کلی پروژه
2. یک پروژه React جدید را شروع کنید
- 06 - Bootstrap 5 را به برنامه تکصفحهای خود اضافه کنید
- 07 - با Bootstrap 5 یک طرح پاسخگو بسازید
- 08 - ایجاد رابط کاربری و ایجاد اجزای قابل استفاده مجدد
- 09 - قطعات را به اجزای کودک منتقل کنید
- 10 - چالش - تفکر در واکنش
- 11 - راه حل - شکستن رابط کاربری
3. از مولفههای واکنشی بدون تابعیت تا Stateful
- 12 - معرفی Hooks API Reference
- 13 - مدیریت رویداد و به روز رسانی وضعیت را بیاموزید
- 14 - رندر شرطی را کنترل کنید
- 15 - با فرمها کار کنید
- 16 - ارسال فرم و اعمال عوارض - useEffect
- 17 - اعتبارسنجی و ارسال فرمها - useMemo
- 18 - منطق پیچیده را با useReducer مدیریت کنید
- 19 - ایجاد و ارسال اقدامات
- 20 - UI را بنویسید و به روز کنید
4. وضعیت برنامه خود را با Context API مدیریت کنید
- 21 - یک شی زمینه ایجاد کنید
- 22 - یک کامپوننت Provider را برای کپسوله کردن منطق برنامه تنظیم کنید
- 23 - چالش - مدیریت یک دولت جهانی
- 24 - راه حل - به کامپوننتها اجازه دهید در تغییرات زمینه مشترک شوند
5. Firebase را به پروژه React خود اضافه کنید
- 25 - آشنایی با کنسول Firebase گوگل
- 26 - یک پروژه جدید و یک برنامه جدید ایجاد کنید
- 27 - Firebase services SDK را نصب کنید
6. ایجاد و اتصال به یک پایگاه داده (Firestore)
- 28 - با Cloud Firestore شروع کنید
- 29 - اضافه کردن و مدیریت دادهها را بیاموزید
- 30 - یک سند جدید تنظیم کنید و دادهها را در Cloud Firestore ذخیره و همگام کنید
- 31 - خواندن دادهها از یک مجموعه را یاد بگیرید
- 32 - اسناد را دریافت کرده و در برنامه نمایش دهید
- 33 - متغیرهای محیط React را تعریف کنید
7. ایجاد یک سطل برای ذخیره تصاویر (Cloud Storage)
- 34 - با Cloud Storage در وب شروع کنید
- 35 - یک تابع async برای ارسال فایل به ذخیرهسازی تعریف کنید
- 36 - یک فایل را در حافظه آپلود کنید
- 37 - URL فایل را از ذخیرهسازی دانلود کنید
- 38 - تنظیم اسناد با تصاویر - به روز رسانی UI
- 39 - تنظیم اسناد با تصاویر - تنظیم تاریخ
8. احراز هویت و مدیریت کاربران (Firebase Auth)
- 40 - با Firebase Authentication شروع کنید و ارائه دهنده را انتخاب کنید
- 41 - Google Cloud Platform - اعتبارنامه جدید ایجاد کنید
- 42 - احراز هویت و مدیریت کاربران از برنامه
- 43 - وضعیت را با Context API - Component Provider مدیریت کنید
- 44 - مدیریت وضعیت با Context API - قلاب سفارشی
- 45 - اشتراک اجزاء در تغییرات زمینه - کاربر متصل است
- 46 - با اتصال کاربر اسناد جدید ایجاد کنید
- 47 - دادههای خود را در Cloud Firestore و Cloud Storage ایمن کنید
9. مسیریابی سمت مشتری با React-Router V6
- 48 - روتر React DOM v6 را نصب کنید
- 49 - مسیرها را پیکربندی کنید و یک جزء ناوبری ایجاد کنید
- 50 - از کامپوننت Link برای پیمایش بین صفحات استفاده کنید
- 51 - امکان پیمایش بین چند نما
- 52 - رندر مشروط و مسیر حفاظت شده
- 53 - از قلابهای روتر React استفادهکنید - useNavigate
- 54 - از قلابهای روتر React - useLocation استفاده کنید
- 55 - مسیرهای NotFound و Profile را ایجاد کنید
- 56 - نمایش لینک فعال
10. فیلتر کردن، جستجو و یادگیری اشکال زدایی
- 57 - یک تابع جستجو و فیلتر را اجرا کنید
- 58 - یک اکشن جدید برای برگرداندن نتایج فیلتر شده ایجاد کنید
- 59 - مشترک شدن در تغییرات زمینه و اعمال عوارض جانبی در UI
11. برنامه React خود را اجرا کنید (میزبان Firebase)
- 60 - Firebase CLI را نصب کرده و یک پروژه جدید را مقداردهی اولیه کنید
- 61 - یک ساخت تولید ایجاد کنید و سایت خود را در فضای ابری مستقر کنید
نتیجه
- 62 - آخرین کلمات و مراحل بعدی
دوره های مرتبط
- دوره آموزشی استفاده از هوش مصنوعی در چرخه عمر طراحی تا توسعه فولاستک
- دوره آموزشی ریاکت: ایجاد و میزبانی یک سایت فولاستک (2022)
- دوره آموزشی ساخت یک برنامه چت ویدیویی با Vue.js و Firebase
- دوره آموزشی React: برنامههای قدرتمند مبتنی بر ابر با Firebase
- دوره آموزشی انگولار: برنامه های ابری با Firebase
- دوره آموزشی Vue.js 2: برنامه های Full-Stack با Firebase
- دوره آموزشی یادگیری Google Firebase برای Flutter
- دوره آموزشی یونیتی: کار با Google Firebase