آموزش ساخت اپلیکیشن‌های React آماده برای محیط عملیاتی: از راه‌اندازی تا استقرار با Firebase - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• ساخت یک اپلیکیشن تک‌صفحه‌ای حرفه‌ای با React Build a stellar single-page application with React

1. شروع کار و راه‌اندازی 1. Getting Started and Setting Up

• مرور کلی پروژه Project overview

• ابزار React CLI و ابزارهای توسعه React The React CLI and the React Developer Tools

• پیش‌نیازهای لازم What you should know

• ابزارها و فایل‌های تمرینی The tools and the exercise files

2. شروع یک پروژه جدید React 2. Start a New React Project

• چالش: تفکر به سبک React Challenge: Thinking in React

• ساخت رابط کاربری و ایجاد کامپوننت‌های قابل استفاده مجدد Build the UI and create reusable components

• ارسال Props به کامپوننت‌های فرزند Pass props to child components

• ساخت یک لایوت ریسپانسیو با Bootstrap 5 Build a responsive layout with Bootstrap 5

• راه حل: تقسیم‌بندی رابط کاربری Solution: Breaking up the UI

• افزودن Bootstrap 5 به اپلیکیشن تک‌صفحه‌ای Add Bootstrap 5 to your single-page application

3. از کامپوننت‌های بدون وضعیت به وضعیت‌دار در React 3. From Stateless to Stateful React Components

• مدیریت منطق‌های پیچیده با useReducer Handle complex logic with useReducer

• ترکیب و به‌روزرسانی رابط کاربری Compose and update the UI

• مدیریت رندرینگ شرطی Handle conditional rendering

• اعتبارسنجی و ارسال فرم‌ها: useMemo Validate and submit forms: useMemo

• ارسال فرم و اعمال اثرات جانبی: useEffect Submit the form and apply side effects: useEffect

• ایجاد و دیسپچ کردن اکشن‌ها Create and dispatch actions

• کار با فرم‌ها Work with forms

• آشنایی با مرجع API هوک‌ها (Hooks) Introduction to Hooks API Reference

• آموزش مدیریت رویدادها و به‌روزرسانی وضعیت Learn event handling and updating the state

4. مدیریت وضعیت اپلیکیشن با Context API 4. Manage the State of Your App with the Context API

• چالش: مدیریت وضعیت سراسری (Global State) Challenge: Manage a global state

• راه‌اندازی کامپوننت Provider برای کپسوله‌سازی منطق اپلیکیشن Set up a Provider component to encapsulate the application logic

• راه حل: اجازه اشتراک کامپوننت‌ها در تغییرات Context Solution: Allow components to subscribe to context changes

• ایجاد یک شیء Context Create a context object

5. افزودن Firebase به پروژه React 5. Add Firebase to Your React Project

• نصب SDK سرویس‌های Firebase Install the Firebase services SDK

• آشنایی با کنسول گوگل Firebase Introduction to the Firebase Google console

• ایجاد یک پروژه و اپلیکیشن جدید Create a new project and a new application

6. ایجاد و اتصال به پایگاه داده (Firestore) 6. Create and Connect to a Database (Firestore)

• آموزش افزودن و مدیریت داده‌ها Learn to add and manage data

• تنظیم سند جدید و ذخیره و همگام‌سازی داده‌ها در Cloud Firestore Set a new document and store and sync data into the Cloud Firestore

• آموزش خواندن داده‌ها از یک Collection Learn to read data from a collection

• تعریف متغیرهای محیطی (Environment Variables) در React Define React environment variables

• دریافت اسناد و نمایش آن‌ها در اپلیکیشن Get documents and display them in the app

• شروع کار با Cloud Firestore Get started with the Cloud Firestore

7. ایجاد Bucket برای ذخیره تصاویر (Cloud Storage) 7. Create a Bucket to Store Images (Cloud Storage)

• آپلود فایل در Storage Upload a file to the storage

• تنظیم اسناد همراه با تصاویر: به‌روزرسانی رابط کاربری Set documents with images: Update the UI

• تعریف یک تابع async برای ارسال فایل به Storage Define an async function to send a file to storage

• دریافت URL فایل از Storage Download a file URL from storage

• شروع کار با Cloud Storage در وب Get started with Cloud Storage on the web

• تنظیم اسناد همراه با تصاویر: تعیین تاریخ Set documents with images: Set the date

8. احراز هویت و مدیریت کاربران (Firebase Auth) 8. Authenticate and Manage Users (Firebase Auth)

• اشتراک کامپوننت‌ها در تغییرات Context: اتصال کاربر Subscribe components to the context changes: User connected

• ایمن‌سازی داده‌ها در Cloud Firestore و Cloud Storage Secure your data in Cloud Firestore and Cloud Storage

• مدیریت وضعیت با Context API: کامپوننت Provider Manage the state with the Context API: Component Provider

• ایجاد اسناد جدید در حالت اتصال کاربر Create new documents with the user connected

• احراز هویت و مدیریت کاربران از طریق اپلیکیشن Authenticate and manage users from the application

• شروع کار با Firebase Authentication و انتخاب Provider Start with Firebase Authentication and select the provider

• مدیریت وضعیت با Context API: هوک سفارشی (Custom Hook) Manage the state with the Context API: Custom hook

• پلتفرم گوگل کلاود: ایجاد اعتبارنامه‌های جدید Google Cloud Platform: Create new credentials

9. مسیریابی سمت کلاینت با React Router V6 9. Client-Side Routing with React-Router V6

• استفاده از کامپوننت Link برای جابجایی بین صفحات Use Link component to navigate between pages

• استفاده از هوک‌های React Router: useLocation Use the React router hooks: useLocation

• استفاده از هوک‌های React Router: useNavigate Use the React router hooks: useNavigate

• نصب React Router DOM v6 Install React router DOM v6

• ایجاد مسیرها برای صفحات Profile و NotFound Create the routes for "NotFound" and "Profile"

• پیکربندی مسیرها و ایجاد کامپوننت ناوبری Configure the routes and create a navigation component

• ایجاد امکان جابجایی بین نماهای مختلف Allow navigation between multiple views

• رندرینگ شرطی و مسیرهای محافظت‌شده (Protected Route) Conditional rendering and protected route

• نمایش لینک فعال Display the active link

10. فیلتر کردن، جستجو و آموزش دیباگ 10. Filtering, Searching, and Learning to Debug

• ایجاد یک اکشن جدید برای بازگرداندن نتایج فیلتر شده Create a new action to return filtered results

• پیاده‌سازی تابع جستجو و فیلتر Implement a search and filter function

• اشتراک در تغییرات Context و اعمال اثرات جانبی در رابط کاربری Subscribe to the context changes and apply side effects in the UI

11. استقرار اپلیکیشن React (Firebase Hosting) 11. Deploy Your React App (Firebase Hosting)

• نصب Firebase CLI و مقداردهی اولیه پروژه جدید Install the Firebase CLI and initialize a new project

• ایجاد Build نهایی (Production) و استقرار سایت در کلاود Create a production build and deploy your site to the cloud

جمع‌بندی Conclusion

• سخن پایانی و گام‌های بعدی Last words and next steps