تاریخچه ری‌اَکت یک کدام از مهندسین اپلیکیشن کمپانی صورت‌بوک به اسم 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 میباشد.
const element =
Hello World!
همانگونه که در نمونه بالا مشاهده می کنید، JSX خیر جاوا اسکریپت میباشد و خیر HTML.
JSX یک Syntax XML برای گویش جاوا اسکریپت میباشد.
صحیح مانند HTML، تگ‌های JSX هم میتواند اسم تگ، خصیصه و فرزند داشته باشد.
رندر کردن React DOM
مشی ReactDom.render() برای رندر کردن (اکران دادن) موادسازنده HTML استعمال میگردد.
 
1
2
3
4
5
6
7
Hello World!
 
 
 
در‌این نمونه با استعمال از ری‌اَکت تگ h1 را داخل تک div رندر کردیم (اکران دادیم).
 
 
عنصرها ری‌اَکت
نرم‌افزار‌های React معمولا در نزدیکی یک عنصر HTML خاص ساخته میگردند.
 
پیشرفت دهندگان ری‌اَکت معمولا این عنصر را عنصر ریشه (root element) یا این که گره ریشه (root node) می‌نامند.
 
1
 
همان طور که در ابتدا گفته شد عنصرها با به کارگیری از اسلوب ReactDOM.render() رندر گرفته (اکران داده) می شوند.
 
1
2
const element =
Hello React!
 
ReactDOM.render(element, document.getElementById('root'));
 
ارکان React تغییرناپذیر می باشند. فقط رویکرد تغییر تحول عنصرها این میباشد که یک عنصر دیگر را رندر کنیم:
 
1
2
3
4
5
function tick() {
    const element = (
{new Date().toLocaleTimeString()}
);
    ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
در نمونه بالا یک وقفه (Interval) تعریف و تمجید گردیده که هر ۱۰۰۰ میلی ثانیه (۱ ثانیه)، عنصر h1 را با مقدار فرصت فعلی در عنصر ریشه (root) رندر می‌نماید که مخاطب در خروجی یه ساعت ثانیه شماره را مشاهده می‌نماید!
 
 
اجزاء React
اجزاء ری‌اَکت یا این که React component به عبارتی توابع جاوااسکریپت میباشند.
 
در نمونه پایین یک React component با اسم Welcome ساخت‌و‌ساز می کنیم:
 
1
2
3
4
function Welcome() {
    return
Hello React!
;
}
ReactDOM.render(, document.getElementById('root'));
 
این کتابخانه همینطور می تواند از کلاس‌های ES6 برای ساخت و ساز component استعمال نماید.
 
در نمونه ذیل یک React component با اسم Welcome با استعمال از مشی رندر، ساخت‌و‌ساز میکنیم.
class Welcome extends React.Component {
    render() { return(
Hello React!
); }
}
ReactDOM.render(, document.getElementById('root'));
 
مقصود این یادگرفتن کوتاه فقط شناخت شما با این کتابخانه بود خیر یادگیری آن، پس چنانچه مقداری سردرگم شدید و بعضا مفاهیم را متوجه نشدید، نگران نباشید.