ریاکت ساختن رابط کاربری پویا را ساده میکند. برای هر وضعیت برنامه خود یک view ساده طراحی کنید و هربار که دادههای شما تغییر میکند، ریاکت به صورت بهینهای، فقط کامپوننتهای مربوطه را بهروز رسانی و رندر میکند.
viewهای خود توصیف کننده کد شما رو قابل پیشبینی و یافتن اشکال را آسانتر میکند.
کامپوننتهایی بسازید که state داخلی خود را، خودشان مدیریت میکنند و کپسوله شدهاند.سپس با ترکیب آنها رابط کاربریهای پیچیده را بسازید.
از آنجا که منطق یک کامپوننت بهجای استفاده از قالب با جاوااسکریپت نوشته میشود، شما بهراحتی میتوانید دادههایی با ساختار متفاوت را میان کامپوننتها منتقل کنید و state کامپوننتها را مستقل از DOM نگهدارید.
ما پیشفرضی درباره دیگر تکنولوژیهای بهکاررفته در پروژه شما نداریم، بنابراین میتوانید قابلیتهای جدید را با ریاکت بسازید.
ریاکت روی سرور و همچنین بهوسیله ریاکت نیتیو روی اپ موبایل هم رندر میشود.
کامپوننتهای ریاکت یک تابع render()
را پیادهسازی میکنند که دادههای ورودی را گرفته و خروجی آن چیزی است که نمایش داده میشود. این مثال از قواعدی مثل XML استفاده میکند که به آن JSX گفته میشود. دادههای ورودی که در اختیار این کامپوننت قرار میگیرد، در تابع render()
توسط this.props
قابل دسترسی است.
JSX اختیاری است و نیاز به استفاده از ریاکت نیست. برای مشاهده کدی که در مرحله کامپایل JSX تولید میشود، Babel REPL را مشاهده کنید.
علاوه بر دادههای ورودی که توسط this.props
در اختیار یک کامپوننت قرار میگیرد، دادههای state داخلی بهوسیله this.state
قابل دسترسی و مدیریت میشود. هنگامی که دادههای state یک کامپوننت تغییر میکند، خروجی جدید با فراخوانی مجدد تابع render()
رندر میشود.
با استفاده از props
و state
می توان یک برنامه لیست کار کوچک را ساخت. این مثال از state
برای نگهداری دادههای لیست مواردی که باید انجام شود و همچنین متنی که کاربر وارد کردهاست استفاده میکند. اگرچه event handler ها درون کد render()
تعریف شدهاند، اما ریاکت آنها را شناسایی و با استفاده از event delegation پیادهسازی میکند.
ریاکت به شما این امکان را میدهد که که با دیگر کتابخانهها و فریمورکها اتصال برقرار کنید. این مثال با بهرهگیری از remarkable که یک کتابخانه برای Markdown است، در لحظه متن <textarea>
را به خروجی HTML تبدیل میکند.