ری‌اکت

کامپوننت‌های ری‌اکت یک تابع 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 تبدیل می‌کند.