React چیست؟


نویسنده:
جمعه 12 مهر 1398
react

React چیست؟

React یک کتابخانه یا فریم‌ورک برای جاوا اسکریپت است که توسط فیس‌بوک توسعه داده شده است.

این فریم ورک در طراحی رابط کاربری (UI – User Interface) کاربرد دارد و ابزاری برای ساخت اجزاء UI است.

جاوا اسکریپت چیست؟
فریم ورک چیست؟


تاریخچه ری‌اَکت

یکی از مهندسین نرم افزار شرکت فیس‌بوک به نام Jordan Walke این کتابخانه را ایجاد کرد، که برای اولین بار در سال 2011 برای ویژگی Newsfeed در فیس‌بوک استفاده شد.

نسخه اولیه (React (V0.3.0 در ماه جولای 2013 منتشر شد.

نسخه فعلی این کتابخانه V16.8.6 است که در مارس 2019 منتشر شد.


React چگونه کار می‌کند؟

React یک DOM مجازی در حافظه ایجاد می‌کند

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

DOM چیست؟

React فقط چیزی را که نیاز به تغییر دارد تغییر می‌دهد!

این کتابخانه تمام تغییرات ایجاد شده را متوجه شده، و فقط چیزی که نیاز به تغییر دارد را تغییر می‌دهد.

شاید این مفاهیم کمی گیج کننده باشد اما با یادگیری این کتابخانه به تمام این مفاهیم پی خواهید برد.


افزودن react به یک صفحه HTML

در ابتدا این ۳ کتابخانه را در صفحه html خود فراخوانی می‌کنیم:


در ادامه می‌توانیم کدهای خود را در تگ اسکریپت زیر بنویسیم:



Babel چیست؟

Babel یک کامپایلر برای جاوا اسکریپت است که می‌تواند زبان‌های نشانه‌گذاری یا برنامه‌نویسی را به جاوا اسکریپت تفسیر کنید.

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

Babel برای تبدیلات مختلف قابل دسترس است، ری‌اَکت از babel مخصوص تبدیل JSX به JavaScript استفاده می‌کند.

نکته: نوشتن خصیصه type=”text/babel” در تگ script برای استفاده از babel ضروری است.



JSX چیست؟

JSX مخفف عبارت JavaScript XML است.

همانطور که در مثال بالا مشاهده می‌کنید، JSX نه جاوا اسکریپت است و نه HTML.

JSX یک Syntax XML برای زبان جاوا اسکریپت است.

درست مانند HTML، تگ‌های JSX هم می‌تواند نام تگ، خصیصه و فرزند داشته باشد.


رندر کردن React DOM

متد ReactDom.render() برای رندر کردن (نمایش دادن) عناصر HTML استفاده می‌شود.

در این مثال با استفاده از ری‌اَکت تگ h1 را درون تک div رندر کردیم (نمایش دادیم).

عناصر ری‌اَکت

برنامه‌های React معمولا در اطراف یک عنصر HTML خاص ساخته می‌شوند.

توسعه دهندگان ری‌اَکت معمولا این عنصر را عنصر ریشه (root element) یا گره ریشه (root node) می‌نامند.

همانطور که در بالا گفته شد عناصر با استفاده از متد ReactDOM.render() رندر گرفته (نمایش داده) می‌شوند.


عناصر React تغییرناپذیر هستند. تنها راه تغییر عناصر این است که یک عنصر دیگر را رندر کنیم:

در مثال بالا یک وقفه (Interval) تعریف شده که هر ۱۰۰۰ میلی ثانیه (۱ ثانیه)، عنصر h1 را با مقدار زمان فعلی در عنصر ریشه (root) رندر می‌کند که کاربر در خروجی یه ساعت ثانیه شماره را مشاهده می‌کند!

اجزاء React

اجزاء ری‌اَکت یا React component همان توابع جاوااسکریپت هستند.

در مثال زیر یک React component با نام Welcome ایجاد می‌کنیم:


این کتابخانه همچنین می‌تواند از کلاس‌های ES6 برای ایجاد component استفاده کند.

در مثال زیر یک React component با نام Welcome با استفاده از متد رندر، ایجاد می‌کنیم.



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

اگر به یادگیری React علاقمند شدید می‌توانید از اینجا شروع کنید.

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید