ری‌اکت

یک کتابخانه جاوااسکریپت برای ساخت رابط‌کاربری

خود توصیف کننده

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

viewهای خود توصیف کننده کد شما رو قابل پیش‌بینی و یافتن اشکال را آسان‌تر می‌کند.

بر‌پایه کامپوننت

کامپوننت‌هایی بسازید که state داخلی خود را، خودشان مدیریت می‌کنند و کپسوله شده‌اند.سپس با ترکیب آن‌ها رابط‌کاربری‌های پیچیده را بسازید.

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

یک‌بار یاد بگیرید، همه‌جا استفاده‌ کنید

ما پیش‌فرضی درباره دیگر تکنولوژی‌های به‌کاررفته در پروژه شما نداریم، بنابراین می توانید قابلیت‌های جدید را با ری‌اکت بسازید.

ری‌اکت روی سرور و همچنین به‌وسیله ری‌اکت نیتیو. روی اپ موبایل هم رندر می‌شود.


یک کامپوننت ساده

کامپوننت‌های ری‌اکت یک تابع render() را پیاده‌سازی می‌کنند که داده‌های ورودی را گرفته و خروجی آن چیزی است که نمایش داده می‌شود. این مثال از قواعدی مثل XML استفاده می‌کند که به آن JSX گفته می‌شود. داده‌های ورودی که در اختیار این کامپوننت قرار می‌گیرد، در تابع render() توسط this.props قابل دسترسی است.

JSX اختیاری است و نیاز به استفاده از ری‌اکت نیست. برای مشاهده کدی که در مرحله کامپایل JSX تولید می‌شود، Babel REPL را مشاهده کنید.

Loading code example...

یک کامپوننت دارای state

علاوه بر داده‌های ورودی که توسط this.props در اختیار یک کامپوننت قرار می‌گیرد، داده‌های state داخلی به‌وسیله this.state قابل دسترسی و مدیریت می‌شود. هنگامی که داده‌های state یک کامپوننت تغییر می‌کند، خروجی جدید با فراخوانی مجدد تابع render() رندر می‌شود.

Loading code example...

یک برنامه

با استفاده از props و state می توان یک برنامه لیست کار‌ کوچک را ساخت. این مثال از state برای نگهداری داده‌های لیست مواردی که باید انجام شود و همچنین متنی که کاربر وارد کرده‌است استفاده می‌کند. اگرچه event handler ها درون کد render() تعریف شده‌اند، اما ری‌اکت آن‌ها را شناسایی و با استفاده از event delegation پیاده‌سازی می‌کند.

Loading code example...

یک کامپوننت که از پلاگین‌های خارجی استفاده می‌کند

ری‌اکت به شما این امکان را می‌دهد که که با دیگر کتابخانه‌ها و فریم‌ورک‌ها اتصال برقرار کنید. این مثال با بهره‌گیری از remarkable که یک کتابخانه برای Markdown است، در لحظه متن <textarea> را به خروجی HTML تبدیل می‌کند.

Loading code example...