آموزش React.js

دسته بندی: آموزش طراحی وب

ری اکت جی اس 

در این صفحه می خوانید :

تاریخچه React

در سال 2013 جردن واک، فریمورک متن باز و جاوا اسکریپتی به نام React.js را منتشر کرد. ابتدا در سال 2011 مورد استفاده ی فیسبوک بود اما در سال 2012 اینستاگرام هم از آن بهره برد. امروزه سایت های زیادی مانند Netflix ،Imgur ، بلیچر رپورت، فیدلی، ایر بی‌ان‌بی از آن استفاده می کنند. چون این سایت ها بزرگ و دارای داده‌های متغیر Realtime هستند React.js فریمورک مناسبی برای آنها است. همچنین، شکل برنامه‌ی کاربردی را در هر زمان نشان می دهد. هنگامی که داده‌ها عوض می شوند، ری اکت قسمت‌هایی از برنامه که نیاز به بروزرسانی دارند را شناسایی می کند، سپس تنها آن قسمت‌ها را رندر می‌کند. در سال 2019 نسخه 16.8 برای عموم منتشر شد.

معرفی React

اجازه دهید با یک مثال عملی درک کنیم، فرض کنید یکی از دوستان شما یک عکس در فیس بوک ارسال کرده است. حالا شما بروید و تصویر را لایک کنید و پس از آن نظر خود را ثبت کنید. در حالی که شما در حال مشاهده نظرات هستید ، تعداد شمارش لایک ها بدون بارگذاری مجدد صفحه درحال افزایش است. این تغییر شمارش به دلیل Reactjs است. ری اکت یک کتابخانه ی جاوا اسکریپت رسمی، منبع باز، کارآمد و قابل انعطاف برای ایجاد رابط کاربری است. در معماری MVC ری اکت در لایه نمایش کاربرد دارد. ری اکت جی اس می تواند برنامه های کاربردی بسازد که encapsulated و قابل استفاده‌ی مجدد هستند و می‌توان برایشان کامپوننت‌های متفاوت نوشت.

 

ویژگی های React

جریان داده‌ای یک سویه(One-way data binding with props) : در این حالت ویژگی ها به یک جزء از مولفه اصلی منتقل می شود. کامپوننت ها به عنوان مجموعه ای از مقادیر غیر قابل تغییر (یک شیء جاوا اسکریپت) ویژگی ها را دریافت می کنند.

Virtual DOM : مخفف "Virtual Document Object Model" است. به عبارت ساده، نمایش ساختار یافته از عناصر HTML موجود در یک صفحه وب یا برنامه وب است. این ویژگی اجازه می دهد تا توسعه دهندگان وب تغییر محتوا را از طریق جاوا اسکریپت داشته باشند.

JSX :در مقدمه ای بر ReactJS عنوان کردیم که ری اکت یک کتابخانه جاوا اسکریپت رسمی، کارآمد و قابل انعطاف برای ایجاد رابط کاربری است. اما به جای استفاده از جاوا اسکریپت به طور منظم، کد ری اکت باید در چیزی به نام JSX نوشته شود. اجازه دهید یک نمونه کد JSX را ببینید:

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

قطعه کد بالا تا حدودی به نظر می رسد مانند HTML و همچنین از یک متغیر مانند جاوا اسکریپت استفاده می کند اما هیچ کدام از اینها نیستد، بلکه JSX است. JSX اساسا یک افزونه نحوی جاوا اسکریپت است و برای ایجاد عناصر React استفاده می شود. سپس این عناصر به React DOM رندر می شوند.

معماری فراتر از HTML : معماری اولیه ری اکت فراتر ازHTML  در مرورگر است. برای مثال، فیس بوک دارای نمودارهای پویا است که تگ های <canvas> را ارائه می دهد، و Netflix و PayPal از بارگذاری مجدد برای بارگزاری HTML یکسان در سرور و سرویس گیرنده استفاده می کنند.

React Native : یک فریمورک کاربردی برای برنامه های موبایل است که توسط Facebook ایجاد شده است. این برنامه برای توسعه برنامه های کاربردی برای اندروید، iOS و UWP به توسعه دهندگان امکان استفاده از React همراه با قابلیت های پلتفرم بومی را می دهد.

مثال های React

نمایش Hello React!

<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
  <h1>Hello React!</h1>,
  document.getElementById('id01'));
</script>

کامپوننت های ری اکت ، توابع جاوا اسکریپت هستند. این مثال یک مولفه React به نام "خوش آمدید" ایجاد می کند.

<div id="root"></div>
<script type="text/babel">
function Welcome() {
  return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
</script>

 

آیا این نوشته را دوست داشتید؟