آموزش تعاملی ری‌اکت (React) برای وب - آخرین آپدیت

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

مقدمه Introduction

• ری‌اکت قدرتمند و محبوب است React is powerful and popular

• نحوه استفاده از فایل‌های تمرینی در GitHub Codespaces How to use the exercise files on GitHub Codespaces

1. ری‌اکت چیست؟ 1. What Is React?

• نحوه استفاده از CSS در ری‌اکت How CSS can be used in React

• فرآیند بیلد ما در Codespaces Our build process on Codespaces

• نصب و استفاده از ابزارهای توسعه ری‌اکت (React Developer Tools) Installing and using React Developer Tools

• اصطلاحات مهم در ری‌اکت Important React terminology

• اجزا: داده‌ها، کامپوننت‌ها و المان‌ها The Pieces: Data, components, and elements

• جعبه ابزار ری‌اکت: جاوااسکریپت مدرن و موارد دیگر The React tool box: Modern JavaScript and more

• معرفی ری‌اکت: چیست و کاربردهای آن کدامند؟ Introducing React: What is it, and what is it good for?

2. پروژه اول: سفارشی‌ساز محصول 2. First Project: Product Customizer

• ساخت یک کامپوننت جدید و آرایه‌ای از داده‌ها Create a new component and array of data

• استفاده از JSX برای ساده‌سازی کدها Adding in JSX for simpler code

• معرفی هوک useState برای مدیریت داده‌های محلی Introducing the useState hook to manage local data

• افزودن انتخاب‌گر رنگ Adding a color selector

• معرفی props برای انتقال داده‌ها Introducing props to pass along data

• نصب ری‌اکت با استفاده از تگ‌های script Installing React using script tags

• پیاده‌سازی یک Event Handler برای به‌روزرسانی استیت Implementing an event handler to update state

• شناسایی کامپوننت‌ها و داده‌ها Identifying components and data

• راه‌حل: فعال‌سازی انتخاب‌گر رنگ Solution: Activate color selector

3. پروژه دوم: مرورگر دایرکتوری 3. Second Project: Directory Browser

• راه‌حل: بهبود فرم و افزودن انیمیشن‌های بیشتر Solution: Make the form better and animate more

• ساخت فرم فیلترها Creating a filters form

• درک کدهای اولیه و ساختار کامپوننت‌ها Understanding the initial code and scaffolding components

• افزودن کامپوننت‌ها برای نمایش منبع داده‌های کاربران Adding components to display our people data source

• تجمیع استیت فرم در یک آبجکت واحد Collapsing form state into a single object

• تصمیم‌گیری در مورد ساخت فرم‌های کنترل‌شده (Controlled Forms) Deciding whether to make forms "controlled"

• تصمیم‌گیری بر اساس طرح اولیه (Mockup) Making decisions based on the mock-up

• استفاده از انیمیشن برای بهبود بازخورد بصری Using animation to enhance visual feedback

• به‌روزرسانی استیت توسط فرم فیلتر Making the filter form update state

• به‌روزرسانی نتایج دایرکتوری بر اساس فیلترهای فعال Updating directory results based on active filters

4. پروژه سوم: انتشار به‌روزرسانی‌های وضعیت 4. Third Project: Publishing Status Updates

• بالا بردن استیت (Lifting State) برای استفاده از داده‌ها در کل اپلیکیشن Lifting state to make data usable throughout the app

• به‌روزرسانی لیست پیام‌ها از استیت محلی پس از ارسال Update the message list from local state after posting

• ارسال یک پیام جدید به API Posting a new message to the API

• بررسی کدهای شروع Inspecting the starting code

• برقرار کردن اولین فراخوانی API در هوک useEffect Making our first API call in a useEffect hook

• مصرف داده‌های زنده با استفاده از REST API Consuming live data using a REST API

• تقسیم یک فایل بزرگ به کامپوننت‌های مجزا Breaking a large file into separate components

• راه‌حل: قابلیت ویرایش تاریخ و زمان Solution: Make the date and time editable

• اتصال فرم وضعیت برای ارسال به‌روزرسانی Wiring up the status form to post an update

• ارائه بازخورد از طریق رندرینگ شرطی (Conditional Rendering) Providing feedback via conditional rendering

جمع‌بندی Conclusion

• گام‌های بعدی Next steps