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 مجازی اعمال میکند.
React فقط چیزی را که نیاز به تغییر دارد تغییر میدهد!
این کتابخانه تمام تغییرات ایجاد شده را متوجه شده، و فقط چیزی که نیاز به تغییر دارد را تغییر میدهد.
شاید این مفاهیم کمی گیج کننده باشد اما با یادگیری این کتابخانه به تمام این مفاهیم پی خواهید برد.
افزودن react به یک صفحه HTML
در ابتدا این ۳ کتابخانه را در صفحه html خود فراخوانی میکنیم:
1 2 3 4 5 6 | <!-- Load React API --> <script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script> <!-- Load React DOM--> <script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <!-- Load Babel Compiler --> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> |
در ادامه میتوانیم کدهای خود را در تگ اسکریپت زیر بنویسیم:
1 2 3 | <script type="text/babel"> // JSX Babel code goes here </script> |
Babel چیست؟
Babel یک کامپایلر برای جاوا اسکریپت است که میتواند زبانهای نشانهگذاری یا برنامهنویسی را به جاوا اسکریپت تفسیر کنید.
با babel، میتوانید از جدیدترین ویژگیهای جاوا اسکریپت استفاده کنید.
Babel برای تبدیلات مختلف قابل دسترس است، ریاَکت از babel مخصوص تبدیل JSX به JavaScript استفاده میکند.
نکته: نوشتن خصیصه type=”text/babel” در تگ script برای استفاده از babel ضروری است.
JSX چیست؟
JSX مخفف عبارت JavaScript XML است.
1 | const element = <h1>Hello World!</h1> |
همانطور که در مثال بالا مشاهده میکنید، JSX نه جاوا اسکریپت است و نه HTML.
JSX یک Syntax XML برای زبان جاوا اسکریپت است.
درست مانند HTML، تگهای JSX هم میتواند نام تگ، خصیصه و فرزند داشته باشد.
رندر کردن React DOM
متد ReactDom.render() برای رندر کردن (نمایش دادن) عناصر HTML استفاده میشود.
1 2 3 4 5 6 7 | <div id="id01">Hello World!</div> <script type="text/babel"> ReactDOM.render( <h1>Hello React!</h1>, document.getElementById('id01')); </script> |
در این مثال با استفاده از ریاَکت تگ h1 را درون تک div رندر کردیم (نمایش دادیم).
عناصر ریاَکت
برنامههای React معمولا در اطراف یک عنصر HTML خاص ساخته میشوند.
توسعه دهندگان ریاَکت معمولا این عنصر را عنصر ریشه (root element) یا گره ریشه (root node) مینامند.
1 | <div id="root"></div> |
همانطور که در بالا گفته شد عناصر با استفاده از متد ReactDOM.render() رندر گرفته (نمایش داده) میشوند.
1 2 | const element = <h1>Hello React!</h1> ReactDOM.render(element, document.getElementById('root')); |
عناصر React تغییرناپذیر هستند. تنها راه تغییر عناصر این است که یک عنصر دیگر را رندر کنیم:
1 2 3 4 5 | function tick() { const element = (<h1>{new Date().toLocaleTimeString()}</h1>); 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 <h1>Hello React!</h1>; } ReactDOM.render(<Welcome />, document.getElementById('root')); |
این کتابخانه همچنین میتواند از کلاسهای ES6 برای ایجاد component استفاده کند.
در مثال زیر یک React component با نام Welcome با استفاده از متد رندر، ایجاد میکنیم.
1 2 3 4 | class Welcome extends React.Component { render() { return(<h1>Hello React!</h1>); } } ReactDOM.render(<Welcome />, document.getElementById('root')); |
هدف این آموزش کوتاه تنها آشنایی شما با این کتابخانه بود نه یادگیری آن، پس اگر کمی سردرگم شدید و بعضی مفاهیم را متوجه نشدید، نگران نباشید.
اگر به یادگیری React علاقمند شدید میتوانید از اینجا شروع کنید.
دیدگاهتان را بنویسید
You must be logged in to post a comment.