We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

ری‌اکت

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

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

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

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

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

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

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

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

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

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


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

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

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

در حال بارگذاری نمونه کد...

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

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

در حال بارگذاری نمونه کد...

یک برنامه

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

در حال بارگذاری نمونه کد...

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

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

در حال بارگذاری نمونه کد...