دوره آموزشی ساخت برنامه‌های واکنشی آماده تولید: راه‌اندازی برای استقرار با 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 - آخرین کلمات و مراحل بعدی