React
از اولین قدم تا محصول واقعی
React را با داشبورد عادتها یاد بگیر؛ Component و JSX، state و فرم، داده API، Context، Routing، تست و Build.
این پروژه را در 20 قدم کوتاه میسازی. هر درس فقط یک موضوع تازه دارد و با نمونه قابل دیدن تمام میشود.
20 قدم کوتاه و مرتب
هر درس فقط یک مفهوم تازه دارد: اول خیلی ساده میخوانی، بعد مثال میبینی، کد را تغییر میدهی و با آزمون کوتاه مطمئن میشوی.
React و ساخت اولین پروژه
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
JSX؛ markup داخل JavaScript
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Component و Props؛ کارت قابل استفاده دوباره
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
useState؛ Component چیزی را به خاطر میسپارد
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Event؛ handler را بده، اجرا نکن
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
List و key؛ داده را به کارت تبدیل کن
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
فرم کنترلشده
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Conditional Rendering؛ حالتها را روشن نمایش بده
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
useEffect؛ همگامسازی با بیرون React
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
دریافت داده و لغو نتیجه قدیمی
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Loading، Error و Empty؛ چهار حالت واقعی
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Custom Hook؛ منطق state را دوباره استفاده کن
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Context؛ داده مشترک نزدیک مصرفکنندهها
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Routing؛ هر صفحه نشانی خودش را دارد
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Memoization؛ فقط پس از اندازهگیری
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
دسترسیپذیری Component
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
تست Component از نگاه کاربر
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
ساختار پروژه و طراحی State
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
پروژه؛ Habit Dashboard کامل
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Performance و Build؛ نسخه قابل تحویل
همه آموختهها را به یک پروژه کامل و قابل ارائه تبدیل کن.
Habit Dashboard قابل دسترس، آزموده و قابل تحویل
این پروژه یک نمونه تزئینی نیست. مدل داده، قوانین، حالت خطا، آزمون و مسیر انتشار را قدمبهقدم کامل میکنی.
- تعریف مسئله و کاربر واقعی
- ساخت نسخه کوچک اما انتهابهانتها
- آزمون مسیر موفق، مرزی و خطا
- آمادهسازی خروجی برای ارائه و بازخورد
export default function App() {
return (
<main>
<h1>عادتهای امروز</h1>
<p>از یک قدم کوچک شروع کن.</p>
</main>
);
}