آموزش کار با دیتا در React

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

آشنایی با الگوهای داده پایه در React Understanding the Basic Data Patterns in React

• معرفی Introduction

• یک جریان برنامه معمولی برای اولین رندر A Typical App Flow for First Render

• یک تعامل معمولی با رابط کاربری جریان برنامه A Typical App Flow UI Interaction

• استفاده از حالت جزء برای مدیریت تغییرات داده ها Using Component State to Handle Data Changes

• استفاده از Suspense و کامپوننت های سرور برای بارگذاری داده ها Using Suspense and Server Components for Loading Data

• عملکرد سرور جایگزین تماس REST PUT Server Action Replacing REST PUT Call

• آنچه در این دوره آمده است What’s Coming in This Course

• سخنی در مورد What Is React و What Is Next.js A Word About What Is React and What Is Next.js

کار با داده‌ها در برنامه‌های React Pure Client (SPA). Working with Data in Pure Client (SPA) React Apps

• معرفی Introduction

• همه دموهای موجود در مخزن GitHub All Demos in GitHub Repository

• داربست کردن برنامه React با Next.js Scaffolding the React App with Next.js

• راه اندازی برنامه React با Next.js و VS Code Launching the React App with Next.js and VS Code

• یک Gotcha بزرگ با App Router در Next.js A Big Gotcha with the App Router in Next.js

• ارائه فهرست ایستا از شرکت کنندگان با حالت بارگذاری Rendering a Static List of Attendees with Loading State

• ساده سازی سبک و طراحی کامپوننت در React Streamlining Style and Component Design in React

• مروری کوتاه بر TypeScript A Brief Review of TypeScript

• افزودن تایپ TypeScript مناسب به برنامه React Adding Proper TypeScript Typing to the React App

• افزودن پایداری داده با SQLite و Prisma Adding Data Persistence with SQLite and Prisma

• کاشت SQLite با داده Seeding SQLite with Data

• جایگزینی داده های استاتیک با تماس های REST و SQLite Replacing Static Data with REST and SQLite Calls

• یک سرور REST در Node با روتر API پیاده سازی کنید Implement a REST Server in Node with API Router

• به روز رسانی مولفه بلندگو به سرویس تماس REST Updating the Speaker Component to Call REST Service

• غذای آماده Takeaways

استفاده از زمینه React برای داده ها شامل پردازش فرم ها Leveraging React Context for Data Including Forms Processing

• معرفی Introduction

• یک شیء حالت ترکیبی ایجاد کنید Create a Combined State Object

• Component Nesting را برای اجازه دادن به React Context اضافه کنید Add Component Nesting to Allow for React Context

• ایجاد زمینه داده اختصاصی از مدیریت دولتی موجود Create Dedicated Data Context from Existing State Management

• اضافه کردن طرح‌بندی، ناوبری، سربرگ و پاورقی Adding Layout, Navigation, Header, and a Footer

• افزودن یک پیاده سازی REST برای یک جدول دوم Adding a REST Implementation for a Second Table

• پردازش یک REST POST با عنصر فرم Processing a REST POST with the Form Element

• بهبود رابط کاربری پردازش فرم Enhancing the Form Processing UI

• غذای آماده Takeaways

استفاده از Suspense برای مدیریت بهتر داده های Async Using Suspense to Better Handle Async Data

• معرفی Suspense for Data Introducing Suspense for Data

• مقایسه Suspense با Code بدون Suspense Comparing Suspense to Code without Suspense

• خطا در پردازش با تعلیق Error Processing with Suspense

• React Hook "استفاده" Canary Release است The React Hook “use” Is Canary Release

• کد منبع در این ماژول به جلو می رود Source Code Going Forward in This Module

• داده‌ها با بررسی کد ایالات در حال بارگذاری Data with Loading States Code Review

• بررسی کد تعلیق داده‌ها با مؤلفه‌های مشتری Data with Client Components Suspense Code Review

• Nest Suspense Boundaries Nest Suspense Boundaries

• بررسی کدهای تعلیق سرور داده ها Data with Server Suspense Code Review

• غذای آماده Takeaways

پیاده سازی ویژگی های برنامه سازمانی شامل داده ها Implementing Enterprise App Features Involving Data

• معرفی Introduction

• افزودن احراز هویت ورود Adding Login Authentication

• پیاده سازی احراز هویت در برنامه React ما Implementing Authentication into Our React App

• افزودن پردازش رویداد با کلید دلخواه بلندگو Adding Event Processing with a Speaker Favorite Toggle

• ارائه دهندگان زمینه تودرتو و پیاده سازی جستجوی عمومی Nested Context Providers and Implementing General Search

• برای به‌روزرسانی‌ها، گفتگوی Modal را اجرا کنید Implement Modal Dialog for Updates

• یک فرم ثبت نام جادوگر دو مرحله ای ایجاد کنید Create a Two Step Wizard Sign-up Form

• رندر وضعیت بارگیری متحرک Animating Loading Status Rendering

• بارگیری داده ها با اجزای سرور و تعلیق Loading Data with Server Components and Suspense

• غذای آماده Takeaways

به روز رسانی داده ها با اقدامات سرور Updating Data with Server Actions

• معرفی Introduction

• Form Action Basics Form Action Basics

• مقایسه عملکردهای سرور با REST Comparing Server Actions to REST

• پاسخ دادن به یک فرم POST با یک اقدام سرور Responding to a Form POST with a Server Action

• جداسازی اکشن های سرور به فایل های خودشان Separating Server Actions into Their Own Files

• فراخوانی یک اقدام سرور از یک مؤلفه مشتری Calling a Server Action from a Client Component

• برگرداندن داده ها از اقدامات سرور Returning Data from Server Actions

• بازبینی React Form Basics و پاک کردن داده ها Revisiting React Form Basics and Clearing Data

• بازگشت موفقیت و خطا از اقدامات سرور Returning Success and Errors from Server Actions

• فراخوانی مستقیم اقدامات سرور Calling Server Actions Directly

• اجرای عملیات فراخوانی مستقیم سرور Implementing Directly Calling Server Actions

• بهبود عملکرد رابط کاربری اکشن سرور Improving Server Action UI Performance

• انگیزه برای اعتبارسنجی داده های زمان اجرا در اقدامات سرور Motivation for Runtime Data Validation in Server Actions

• اضافه کردن Zod Runtime Validation به یک اکشن سرور Adding Zod Runtime Validation to a Server Action

• جایگزینی تماس های REST با اقدامات سرور برای به روز رسانی بلندگو Replacing REST Calls with Server Actions for Speaker Updates

• بردن Takeaway

غذای آماده دوره Course Takeaways

• غذای آماده Takeaways