آموزش واکنش برای بقیه ما

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

مقدمه: 10 Days of React Intro: The 10 Days of React

• React چه مشکلی را حل می کند؟ What Problem Does React Solve?

• بیایید استفاده از React را شروع کنیم Let's Start Using React

• JSX چیست؟ What Is JSX?

• سازماندهی ماندن: اجزای سازنده با استفاده از اجزای دیگر Staying Organized: Components Using Other Components

• استفاده از Props برای انعطاف پذیر کردن یک جزء Using Props To Make a Component Flexible

• حلقه زدن از طریق یک آرایه در JSX Looping Through An Array Within JSX

• حالت State

• مدیریت رویدادها (مانند کلیک روی دکمه و غیره...) Handling Events (Like a Button Click etc...)

• کار با فرم ها Working With Forms

• UseEffect چیست؟ What is UseEffect?

آماده شدن برای ایجاد یک برنامه دنیای واقعی Getting Ready To Create a Real World App

• ویرایشگر متن Text Editor

• تنظیمات سریع کد VS Quick VS Code Settings

• Node.js Node.js

• تنظیم گردش کار ما Setting Up Our Workflow

• نکته مهم در مورد بسته های NPM و فایل های فشرده در این دوره Important Note About NPM Packages and The Zip Files in This Course

بیایید شروع به ساخت برنامه خود کنیم! Let's Start Building Our App!

• شروع برنامه پیچیده ما Starting Our Complex App

• نکته: همیشه سال جاری را در پاورقی داشته باشید Tip: Always Have The Current Year In The Footer

• مسیریابی (برنامه تک صفحه ای) Routing (Single Page Application)

• یادداشت سریع درباره رندر کردن React Components در DOM Quick Note About Rendering React Components To The DOM

• React Developer Tools React Developer Tools

• ایجاد یک قطعه کد ویژوال استودیو Creating a Visual Studio Code Snippet

• یک کامپوننت "Container" قابل استفاده مجدد ایجاد کنید Create a Reusable "Container" Component

• جزئیات و ترکیب بندی سریع Quick Details & Composition

کار با یک Back-End واقعی Working With a Real Back-End

• انتخاب رویکرد مناسب برای شما Choosing The Right Approach For You

• آماده شدن پایگاه داده Getting a Database Ready

• راه حل مشکل رایج پایگاه داده Solution to Common Database Problem

• نکته در مورد غلط املایی رایج Note About a Common Misspelling

• اجرای Back-End Running The Back-End

• جایگزین اختیاری: ساده Docker Back-End Optional Alternative: Simple Docker Back-End

اتصال Front-End و Back-End Connecting the Front-End and Back-End

• یادداشت سریع درباره اشکال زدایی Quick Note About Debugging

• ارسال درخواست از Front-End Sending a Request From the Front-End

• با React به مقادیر فیلد فرم دسترسی پیدا کنید Access Form Field Values with React

• ورود به سیستم در Logging In

• کامپوننت های مختلف را بسته به حالت رندر کنید Render Different Components Depending on State

• وضعیت ماندگار (ذخیره‌سازی محلی) Persisting State (Local Storage)

• محتوای صفحه اصلی مشروط Conditional Homepage Content

• ایجاد صفحه پست Create Post Screen

• نمایش صفحه پست تک View Single Post Screen

• پیام های فلش Flash Messages

افزایش سطح به روشی که به دولت نزدیک می شویم Leveling Up The Way We Approach State

• متن نوشته Context

• استفاده از کاهش دهنده useReducer

• یک Duo قدرتمند: استفاده از Reducer & Context A Powerful Duo: useReducer & Context

• ایمر چیست؟ What is Immer?

• UseEffect Practice useEffect Practice

در واقع ساخت برنامه ما Actually Building Our App

• صفحه نمایه Profile Screen

• بارگذاری پست ها توسط نویسنده Load Posts by Author

• کاری کنید که صفحه یک پست در واقع محتوای واقعی را بارگیری کند Make Single Post Screen Actually Load The Real Content

• نماد بارگیری متحرک Animated Loading Icon

• پاکسازی پس از خودمان (useEffect) Cleaning Up After Ourselves (useEffect)

• علامت گذاری در React Markdown in React

ویرایش و حذف اقدامات پست Edit & Delete Post Actions

• افزودن نکات ابزار در Hover for Actions Adding Tooltips on Hover for Actions

• ویرایش (به روز رسانی) جزء پست Edit (Update) Post Component

• ویرایش پست ادامه دارد Edit Post Continued

• اعتبار سنجی فرم سمت مشتری Client-Side Form Validation

• توجه سریع به ویژگی های جزئیات Quick Attention To Detail Features

• یک پست را حذف کنید Delete a Post

جستجوی پوشش Search Overlay

• راه اندازی همپوشانی جستجو Setting Up Search Overlay

• React Transition Group (CSS Transition) React Transition Group (CSS Transition)

• با توجه به شاخص در درس بعدی Regarding The Index In The Next Lesson

• در انتظار توقف تایپ توسط کاربر Waiting for User To Stop Typing

• تکمیل جستجو (قسمت 1) Finishing Search (Part 1)

• تکمیل جستجو (قسمت 2) Finishing Search (Part 2)

اجازه دادن به کاربران برای دنبال کردن یکدیگر Letting Users Follow Each Other

• ویژگی کاربر را دنبال کنید Follow User Feature

• فالوورهای پروفایل و تب های دنبال کننده Profile Followers and Following Tabs

• فید پست صفحه اصلی Homepage Post Feed

ساخت ویژگی چت زنده Building a Live Chat Feature

• رابط کاربری چت زنده Live Chat User Interface

• ارسال و دریافت چت (قسمت 1) Sending & Receiving Chats (Part 1)

• ارسال و دریافت چت (قسمت 2) Sending & Receiving Chats (Part 2)

• در حال اتمام چت Finishing Chat

اعتبار سنجی فرم ثبت نام Registration Form Validation

• بهبود فرم ثبت نام Improving Registration Form

• تکمیل فرم ثبت نام (قسمت 1) Finishing Registration Form (Part 1)

• یادداشت سریع درباره If Statement Quick Note About If Statement

• تکمیل فرم ثبت نام (قسمت 2) Finishing Registration Form (Part 2)

• جزئیات پیام فلش سریع Quick Flash Message Details

• فعالانه بررسی کنید که آیا توکن منقضی شده است Proactively Check If Token Has Expired

آماده شدن برای پخش زنده Getting Ready To Go Live

• React Suspense - Lazy Loading (قسمت 1) React Suspense - Lazy Loading (part 1)

• React Suspense - Lazy Loading (قسمت 2) React Suspense - Lazy Loading (part 2)

• نکته درباره تعلیق برای واکشی داده ها Note About Suspense for Data Fetching

• ساختن یک کپی "دست" از سایت ما Building a "Dist" Copy of Our Site

• واکنش خارج از مرورگر (قسمت 1) React Outside of the Browser (Part 1)

• واکنش خارج از مرورگر (قسمت 2) React Outside of the Browser (Part 2)

• دو یادداشت سریع Two Quick Notes

• انتقال سرور پشتیبان API ما به وب Pushing Our API Backend Server Up To The Web

• هل دادن React Front-End ما به وب Pushing Our React Front-End Up To The Web

واکنش همزمان Concurrent React

• درک همزمانی Understanding Concurrency

ایده ها/چالش های اعتبار اضافی Extra Credit Ideas / Challenges

• به بخش اعتبار اضافی خوش آمدید Welcome To The Extra Credit Section

• وضعیت یافت نشد نمایه Profile Not Found Situation

• فرم ورود: فیلدهای خالی با حاشیه قرمز را برجسته کنید Login Form: Highlight Empty Fields With Red Border

• رنگ های دیگر پیام های فلش را مجاز کنید (نه فقط سبز) Allow For Other Color of Flash Messages (Not Only Green)