مستندات React نسخه 19

ری‌اکت راهی اعلانی (declarative) برای تغییر رابط کاربری (UI) ارائه می دهد. به جای این که به صورت مستقیم قسمت‌های مختلف رابط کاربری را تغییر دهید، وضعیت‌های مختلفی که کامپوننت می‌تواند در آن‌ها باشد را توصیف می‌کنید و در پاسخ به ورودی‌های کاربر بین آن‌ها ...

برخی از عناصر روی صفحه به تعامل کاربر پاسخ می‌دهند. به عنوان مثال، کلیک بر روی یک گالری عکس تصویر فعال را تغییر می‌دهد. در React، داده‌هایی که در طول زمان تغییر می‌کنند state (وضعیت) نامیده می‌شوند. شما می‌توانید به هر کامپوننت، state اضافه کنید و آن را ...

آرایه‌ها در جاوااسکریپت قابل تغییر (mutable) هستند، اما هنگام ذخیره‌سازی آن‌ها در وضعیت (state) باید آن‌ها را به‌عنوان غیرقابل تغییر (immutable) در نظر بگیرید. درست مانند اشیا، وقتی می‌خواهید آرایه‌ای که در وضعیت ذخیره شده را به‌روزرسانی کنید، باید یک ...

وضعیت می‌تواند هر نوع مقدار جاوا اسکریپت را نگه دارد، از جمله اشیا. اما نباید به صورت مستقیم اشیایی را که با وضعیت تعریف کرده اید تغییر دهید. در عوض، زمانی که می‌خواهید یک شی را بروزرسانی کنید، باید شی جدیدی ایجاد کنید (یا یک کپی از یک شی موجود بسازید) و ...

تنظیم یک متغیر وضعیت، رندری دیگر را در صف قرار می‌دهد. اما گاهی ممکن است قبل از اینکه بخواهید رندر بعدی را در صف قرار دهید، عملیاتهای بر روی مقدار فعلی انجام دهید. برای انجام این کار، درک اینکه React چگونه به‌روزرسانی‌های وضعیت را دسته‌بندی می‌کند، به شما ...

متغیرهای وضعیت ممکن است شبیه متغیرهای عادی جاوا اسکریپت باشند که می‌توانید آنها را خوانده و تغییر دهید. اما وضعیت بیشتر شبیه یک عکس، عمل می‌کند. مقدار دهی به آن متغیر، وضعیت قبلی شما را تغییر نمی‌دهد، بلکه یک رندر مجدد را فعال می‌کند. تنظیم وضعیت رندر ...

قبل از اینکه کامپوننت‌های شما روی صفحه نمایش داده شوند، باید توسط React رندر شوند. درک مراحل این فرآیند به شما کمک می‌کند تا درباره‌ی نحوه‌ی اجرای کد خود فکر کرده و رفتار آن را توضیح دهید. تصور کنید که کامپوننت‌های شما مانند آشپزهایی در آشپزخانه هستند که ...

کامپوننت‌ها اغلب نیازمند تغییر محتوای نمایش داده شده بر اساس تعامل کاربر هستند. تایپ کردن در فرم باید فیلد ورودی را به‌روزرسانی کند، کلیک روی "بعدی" در یک نمایشگر تصویر باید تصویر بعدی را نمایش دهد، و کلیک روی "خرید" باید یک محصول را به سبد خرید اضافه ...

ری اکت به شما اجازه می‌دهد که توابع مدیریت رویداد (Event Handler) را به JSX خود اضافه کنید. مدیریت رویداد تابعی است که در پاسخ به تعاملاتی مانند کلیک، رفتن موس رو المان، و فوکوس بر روی ورودی‌های فرم، فعال می‌شوند. افزودن مدیریت رویداد برای افزودن یک مدیر ...

برنامه React با انبوهی از کامپوننت های تو در تو شکل می گیرد. ولی سوال این است که React چگونه ساختار کامپوننت های برنامه شما را دنبال می‌کند؟ ری اکت و بسیاری از کتابخانه‌های رابط کاربری دیگر، رابط کاربری را به صورت درخت مدل‌سازی می‌کنند. تصور برنام به صورت ...

برخی از توابع جاوا اسکریپت خالص هستند. توابع خالص فقط یک محاسبه انجام می‌دهند و نه بیشتر. با نوشتن کامپوننت‌های خالص، می‌توانید از بروز انواعی از باگهای گیج‌کننده و رفتارهای غیرقابل پیش‌بینی با رشد کدبیس جلوگیری کنید. با این حال برای دستیابی به این مزایا، ...

کامپوننت ها اغلب بسته به شرایط مختلف نیازمند نمایش بخش های متفاوتی هستند. در React، می‌توانید JSX را به طور شرطی با استفاده از سینتکس جاوا اسکریپت مانند عبارات if، && و اپراتورهای ? : رندر کنید. بازگشت شرطی JSX فرض کنید شما یک کامپوننت PackingList دارید ...

گاهی پیش می آید که بخواهید چندین کامپوننت مشابه از یک لیست از داده ها را نمایش دهید. برای دستکاری داده های یک آرایه می‌توانید از متدهای آرایه در جاوا اسکریپت استفاده کنید. در این صفحه، خواهید دید که چگونه با استفاده از متدهای filter() و map() در ری‌اکت، ...

کامپوننت‌های React از پراپ‌ها برای ارتباط با همدیگر استفاده می‌کنند. هر کامپوننت والد می‌تواند با دادن پراپ‌ها، اطلاعاتی را به کامپوننت‌های فرزند خود انتقال دهد. پراپ‌ها ممکن است شما را به یاد ویژگی‌های HTML بیندازند، با این تفاوت که می‌توانید هر مقدار ...

با JSX می توانید تگهای مشابه HTML را داخل فایل جاوا اسکریپت بنویسید و منطق رندر و محتوا را با هم در یک مکان نگه دارید. گاهی باید کمی منطق جاوا اسکریپت یا ارجاع به مقدار داینامیک داخل مارکاپ اضافه کنید. در این حالت، می‌توانید از آکولادها در JSX خود استفاده ...

تکنولوژی JSX گسترشی نحوی برای جاوااسکریپت است که به شما اجازه می‌دهد تا مارکاپ شبیه به HTML را درون یک فایل جاوااسکریپت بنویسید. اگرچه روش‌های دیگری هم برای نوشتن کامپوننت‌ها وجود دارد،اما اکثر توسعه‌دهندگان React به دلیل مختصر و مفید بودن JSX، آن را ...

عنوان: ایمپورت و اکسپورت کامپوننت ها جادوی کامپوننت ها در قابلیت استفاده مجدد آنها نهفته است: شما می‌توانید کامپوننت هایی بسازید که از کامپوننت های دیگری تشکیل شده‌‌اند. اما هر چه بیشتر کامپوننت ها را در هم تو در تو کنید، معمولاً منطقی است که آنها را به ...

کامپوننت‌ها یکی از مفاهیم اصلی React هستند. آنها مبنای طراحی رابط‌های کاربری (UI) هستند که این موضوع آنها را به نقطه شروع خوبی برای آغاز سفر شما به دنیای React تبدیل می‌کند! کامپوننت‌ها: بلوک‌های ساخت UI در وب، HTML به ما اجازه ساخت اسناد غنی و ...

کار اصلی کتابخانه React رندر کردن رابط‌های کاربری (UI) است. UI از واحدهای کوچک مانند دکمه‌ها، متن و تصاویر ساخته شده است. React به شما این امکان را می‌دهد که آن‌ها را به کامپوننت های قابل استفاده مجدد و تو در تو تبدیل کنید. از وب‌سایت‌ها تا برنامه‌های ...

این صفحه مقدمه ای برای کامپایلر React و نحوه استفاده موفق آن به شما ارائه می دهد. کامپایلر React کامپایلر جدیدی در مرحله بتا است که برای دریافت بازخوردهای زودهنگام از جامعه توسعه دهندگان، آن را به صورت متن باز منتشر کرده ایم. در حالی که این کامپایلر در ...

از ابزارهای توسعه‌دهندگان (Developer Tools) React می توانید برای بررسی کامپوننت ها، ویرایش props و state، و شناسایی مشکلات عملکرد استفاده کنید. افزونه مرورگر آسان‌ترین راه برای اشکال‌زدایی وب‌سایت‌های ساخته شده با React، نصب افزونه مرورگر ابزارهای توسعه ...

تایپ اسکریپت (TypeScript) روشی محبوب برای افزودن تعاریف انواع داده به کدهای JavaScript است. به صورت پیش‌فرض، TypeScript از JSX پشتیبانی می‌کند و می‌توانید با افزودن بسته @types/react و @types/react-dom به پروژه، پشتیبانی کاملی از React داشته ...

اگر می‌خواهید پروژه موجود خود را کمی تعاملی کنید، لازم نیست آن را با React بازنویسی کنید. کافی است React را به استک موجود خود اضافه کنید و کامپوننت‌های تعاملی آنرا در هر کجای پروژه که مایل بودید رندر کنید. شما نیاز به نصب اگرچه می‌توانید React را آنلاین ...

اگر می‌خواهید اپلیکیشن یا وب‌سایت جدیدی را به طور کامل با React بسازید، ما توصیه می‌کنیم یکی از فریم‌ورک‌های قدرتمند React که محبوب جامعه برنامه نویسان است را انتخاب کنید. شما می‌توانید بدون فریم‌ورک از React استفاده کنید، با این حال بیشتر اپلیکیشن‌ها و ...

ری‌اکت از ابتدا برای پذیرش تدریجی طراحی شده است. شما می‌توانید به اندازه‌ای که نیاز دارید از ری‌اکت استفاده کنید. چه بخواهید یکم از ری‌اکت بچشید، یا بخواهید مقداری تعامل به یک صفحه HTML اضافه کنید، یا بخواهید یک اپلیکیشن پیچیده ری‌اکتی بنویسید، این بخش به ...