آموزش ریاکت: درک سریع (شروع سریع و عمیق در کمتر از ۲ ساعت) - آخرین آپدیت
دانلود React: A Quick Understanding (Deep Dive JumpStart < 2 Hours)
بوت کمپ فشرده React 19: JSX، کامپوننتها، هوکها، Data Fetching و هوش مصنوعی
آموزش React 19 با رویکردی عمیق و کاربردی
در این بوت کمپ، به سرعت و به صورت عمیق، با مفاهیم کلیدی React 19 آشنا خواهید شد. از JSX و کامپوننتهای کاربردی گرفته تا هوکهای جدید، Data Fetching با Suspense و استفاده از هوش مصنوعی (AI) و مدلهای زبانی بزرگ (LLM) برای تولید کد React.
آنچه در این بوت کمپ خواهید آموخت:
- ساخت کامپوننتهای React: یادگیری نحوه ساخت کامپوننتهای کاربردی با props و JSX برای ایجاد بلوکهای UI قابل استفاده مجدد.
- درک Fiber Tree و Reconciliation: آشنایی با نحوه عملکرد React در پشت صحنه و مدیریت DOM.
- JSX و قوانین آن: نوشتن صحیح JSX و درک قوانین پایه برای ایجاد markup کامپوننت که React میتواند render کند.
- هوکها در React: درک عمیق مفهوم هوکها و state hooks در React.
- Data Fetching با React 19: استفاده از هوک جدید
useدر React 19 برای Data Fetching و نمایش وضعیت loading با Suspense boundaries. - تولید کد React با هوش مصنوعی: آموزش نحوه استفاده از هوش مصنوعی برای تولید کد React.
پیشنیازها:
- دانش پایه JavaScript و HTML
به یک متخصص React تبدیل شوید! به جای کپی کردن کد، React را درک کنید.
اکثر آموزشهای React به شما یاد میدهند که مانند یک ربات کد بنویسید. در نهایت کد کار میکند، اما درک درستی از چرایی کار کردن آن ندارید. وقتی با خطاها یا چالشهایی مواجه میشوید که در پروژههای تقلیدی ندیدهاید، گیر میکنید.
این دوره متفاوت است. یک مدل ذهنی دقیق از مفاهیم اصلی React بسازید تا بتوانید سریعتر debug کنید، تصمیمات معماری بهتری بگیرید، کد تمیز و قابل نگهداری بنویسید و به درستی از یک LLM برای تولید کد React استفاده کنید.
آنچه خواهید آموخت:
کامپوننتها و JSX
- کامپوننتها واقعاً چه هستند و چرا باید "pure" باشند
- JSX چگونه کار میکند و چرا قوانین آن وجود دارد
- props چیست و چگونه کار میکند
- نوشتن semantic و maintainable component markup
Reconciliation و Fiber Tree
- React چگونه در پشت صحنه کار میکند
- React اطلاعات را کجا ذخیره میکند
هوکها
- useState: چرا immutability مهم است و React چگونه تغییرات را تشخیص میدهد
- useReducer: چه زمانی باید reducers را به state ساده ترجیح داد
Modern Data Fetching
- تسلط بر هوک جدید use در React 19 برای کد async تمیز
- درک Suspense boundaries
AI and LLM Prompting
- استفاده از دانش خود برای prompt کردن صحیح یک AI
- بهترین نتایج را از یک LLM در تولید برنامههای React بگیرید
من تمام کد منبع React را خواندهام و در React Summit (بزرگترین کنفرانس React در جهان) سخنرانیهای محبوبی داشتهام. در درک React به من بپیوندید!
پیشنیازها
- JavaScript پایه (توابع، اشیاء، آرایهها)
- آشنایی با HTML و CSS
- هیچ تجربه قبلی React لازم نیست
Introduction
-
مقدمه Introduction
-
راه اندازی Setup
-
دانلود کد منبع Downloading Source Code
-
توضیح مفهومی: کد دستوری در مقابل کد اعلانی Conceptual Aside: Imperative vs Declarative Code
کامپوننتها و JSX Components and JSX
-
کامپوننتها و JSX Components and JSX
-
درخت DOM و برنامه نویسی دستوری The DOM Tree and Imperative Programming
-
توضیح مفهومی: توابع خالص Conceptual Aside: Pure Functions
-
کامپوننتها و توابع خالص Components and Pure Functions
-
نصب و رندرینگ Mounting and Rendering
-
توضیح مفهومی: تبدیل کد (Transpilation) Conceptual Aside: Transpilation
-
JSX و تبدیل کد (Transpilation) JSX and Transpilation
-
یک کامپوننت React A React Component
-
رویدادها (Events) Events
-
واکنش به یک رویداد (Event) Reacting to an Event
-
پراپها (Props) و فرزندان (Children) Props and Children
-
چندین کامپوننت React Multiple React Components
المانهای React، درخت Fiber و Reconciliation React Elements, The Fiber Tree, and Reconciliation
-
المانهای React و درخت Fiber React Elements and the Fiber Tree
-
المانهای React React Elements
-
درخت Fiber (معروف به DOM مجازی) و رندر مجدد The Fiber Tree (aka The Virtual DOM) and Re-Rendering
-
Reconciliation Reconciliation
-
کاوش در درخت Fiber Explore the Fiber Tree
استیت (State)، هوکها (Hooks) و دریافت داده (Data Fetching) State, Hooks, and Data Fetching
-
استیت (State) و هوکها (Hooks) State and Hooks
-
توضیح مفهومی: لیستهای پیوندی (Linked Lists) Conceptual Aside: Linked Lists
-
هوکها (Hooks) Hooks
-
توضیح مفهومی: استیت (State) Conceptual Aside: State
-
useState useState
-
اضافه کردن استیت (State) Adding State
-
useReducer useReducer
-
استیت (State) پیچیده با Reducerها Complex State with Reducers
-
use، دریافت داده (Data Fetching) و Suspense use, Data Fetching, and Suspense
React، هوش مصنوعی (AI) و LLMها React, AI, and LLMs
-
React، هوش مصنوعی (AI) و LLMها React, AI, and LLMs
-
درخواست از هوش مصنوعی (AI) برای کد React Prompting an AI for React Code
-
استفاده از یک LLM برای تولید کد React Use an LLM to generate React code
نتیجه گیری Conclusion
-
یک لطف کوچک A Quick Favor
-
نتیجه گیری Conclusion
-
جایزه (Bonus) Bonus
https://donyad.com/d/99a2ea
Anthony Alicea
توسعه دهنده نرم افزار، معمار و طراح UX
نمایش نظرات