ReactJS چیست

استفاده از کتابخانه‌های تولید رابط کاربری بر پایه جاوااسکریپت در کار طراحی سایت رو به افزایش است. یکی از محبوب‌ترین این کتابخانه‌ها React نام دارد. این کتابخانه توسط فیسبوک ایجاد شده است و با همکاری جمعی در حال بهبود و توسعه است. ری اکت یک کتابخانه‌ی جاوا اسکریپت منبع باز است که برای ایجاد رابط کاربری مخصوص برای برنامه های یک صفحه‌ای استفاده می شود و برای مدیریت لایه های نمایشی برای برنامه های وب و تلفن همراه استفاده می شود. React اجازه می‌دهد رابط‌های کاربری پیچیده را از طریق قطعه‌های کوچک کد به نام components (مؤلفه‌ها) ایجاد کنید.

علت محبوبیت Reactjs

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

پیچیدگی آن کمتر از جایگزین‌های دیگر است

در هنگامی که Reactjs انتشار یافت، Ember.js و Angular 1.x گزینه‌های غالب فریمورک‌ها محسوب می‌شدند. هر دو این موارد چنان دستکاری‌هایی در کد می‌کنند که پورت کردن یک اپلیکیشن موجود به کار دشواری تبدیل می‌شود.

در مقابل React طوری طراحی شده که ادغام آن در یک پروژه که از قبل موجود است، آسان باشد. چون از ابتدا بدین صورت طراحی شده بود که بتواند در کد از قبل موجود فیسبوک، ادغام شود. ضمناً دو فریمورک دیگر بسیار سنگین بودند، در حالی که Reactjs به جای مجموعه کامل MVC صرفاً یک لایه View را عرضه می‌کرد.

زمان‌بندی عالی

در برهه‌ای از زمان نسخه دوم انگولار (Angular 2.x) از سوی گوگل معرفی شد که با نسخه‌های قبل تطبیق نمی‌یافت و تغییرات زیادی در آن رخ داده بود. حرکت از انگولار 1 به 2 مانند رفتن به یک فریمورک جدید بود. همچنین بهبود سرعت اجرایی که React نوید می‌داد، موجب شد که اغلب توسعه‌دهندگان React را انتخاب کنند.

پشتیبانی از سوی فیسبوک

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

 مفاهیم بنیادی و مقدماتی

Virtual DOM

همه از قدرت DOM که وظیفه ساخت و مدیریت در HTML داخل مرورگرها دارد، آگاه هستید. React یک DOM دیگر به نام Virtual DOM برای کار با برنامه ها ساخته است.

Virtual DOM هر زمان که داده در کامپوننت ویرایش شود، به روز رسانی می شود. بعد از به روزرسانی Virtual DOM، کتابخانه React تفاوت میان حالت جدید و حالت قبل را بررسی می کند نه کل رابط کاربری را. این عملیات باعث می شود که برنامه های React با سرعت بیشتری اجرا شوند و بهینه تر باشند، بنابراین React فقط بخش هایی که از UI به روز رسانی می شود را تغییر می دهد.

Components

کامپوننت ها عناصر سفارشی HTML هستند اما با رفتاری مشخص کارشان را انجام می دهند. در React همیشه کامپوننت ها در یک کلاس کامپوننت ساخته می شود. یک کامپوننت یک متد نمایش دارد (render method)، که یک View بر می گرداند زمانیکه کامپوننت در صفحه استفاده می شود. کاپوننت ها همچنین داده را مدیریت می کنند برای مقید سازی (binding) داده در View.

یک کامپوننت در React می تواند ساخته شود با استفاده از متد React.createClass یا به عنوان کلاس جاوا اسکریپت با گسترش دادن کلاس کامپوننت  در Reactjs. تکه کد پایین به شما یک کامپوننت بسیار ساده را نمایش می دهد.

<span dir="ltr">var First = React.createClass({
  render(){
    return <div>This is my first component!</div>;
  }
</span>});

JSX

JSX اضافه کننده XML به جاوا اسکریپت است. View ها در کامپوننت های React توسط JSX تعریف می شوند. عناصر HTML و دیگر کامپوننت های React در داخل یک کامپوننت با استفاده JSX نمایش اشاره می شوند که به شما اجازه می دهد داده را مقید سازید بر روی عناصر HTML، مدیریت روی داده با استفاده از متد هایی که بر روی کامپوننت موجود است و مقادیر را بر روی عناصر HTML مقید سازید. هر کامپوننت در React برای پیاده سازی متد render نامیده می شود، این متد مجبور است تا به JSX برگردانده شود برای نمایش در یک View.

آیا یادگیری ReactJS آسان است

گرچه گفتیم که Reactjs نسبت به جایگزین‌های خود ساده‌تر است؛ اما استفاده عملی از آن همچنان پیچیده است؛ با این حال، اغلب پیچیدگی React در فناوری‌های جانبی که در آن ادغام می‌شوند مانند Redux و GraphQL است.

React خودش یک API بسیار کوچک دارد. اساساً برای آغاز کار با آن به درک چهار مفهوم زیر نیاز دارید:

• کامپوننت‌ها
• JSX
• حالت
• Props

چگونه React را روی رایانه محیط توسعه خود نصب کنیم

React یک کتابخانه است و از این رو شاید استفاده از واژه نصب در مورد آن کمی عجیب باشد. شاید راه‌اندازی کلمه بهتری باشد. روش‌های مختلفی برای راه‌اندازی React برای استفاده روی اپلیکیشن یا وب‌سایت وجود دارد.

ساده‌ترین روش افزودن فایل جاوا اسکریپت React به صفحه به صورت مستقیم است. این روش در مواردی که اپلیکیشن React با عناصر موجود روی یک صفحه منفرد تعامل خواهد داشت و به صورت مستقیم کل جنبه ناوبری را کنترل نمی‌کند بهترین گزینه محسوب می‌شود. در این حالت 2 تگ اسکریپت به تگ body اضافه می‌کنیم:

<html>
  ...
  <body>
    ...
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"
      crossorigin
    ></script>
  </body>
</html>

بدین ترتیب React و React DOM را بارگذاری می‌کنیم. اما شاید از خود بپرسید چرا 2 کتابخانه بارگذاری شده است؟ چون React 100% مستقل از مرورگر عمل می‌کند و می‌تواند خارج از آن (برای مثال روی دستگاه‌های موبایل با استفاده از React Native) نیز فعال باشد. از این رو باید React Dom نیز بارگذاری شود تا پوشش‌های مناسب مرورگر را اضافه کند.

پس از این که آن تگ‌ها اشاره شد می‌توانید فایل‌های جاوا اسکریپت خود را که از React استفاده می‌کنند بارگذاری کنید و یا این که کد جاوا اسکریپت را در یک تگ Script به صورت inline درج کنید:

<script src="app.js"></script>

<!-- or -->

<script>
  //my app
</script>

برای استفاده از JSX باید یک مرحله دیگر نیز طی کنید که مرحله بارگذاری Babel است:

 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

اینک می‌توانید JSX را به فایل app.js خود اضافه کنید:

const Button = () => {
  return <button>Click me!</button>
}

ReactDOM.render(<Button />, document.getElementById('root'))

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

برای آشنایی بیشتر با syntax و دوره های react، با کلیک بر روی این لینک به سایت اصلی آن مراجعه فرمایید.

آیا قبل از یادگیری عملی React باید چیزی را بیاموزیم؟

اگر قصد دارید ری‌اکت را بیاموزید ابتدا باید چند چیز را یاد گرفته باشید. برخی فناوری‌های پیش‌نیاز وجود دارند که باید با آن‌ها آشنا باشید و از آن جمله برخی از موارد مرتبط با ویژگی‌های جدید جاوا اسکریپت که بارها در React مشاهده خواهید کرد.

برخی اوقات فکر می‌کنند که یک ویژگی خاص از سوی React ارائه شده است؛ در حالی که آن ویژگی بخشی از ساختار جاوا اسکریپت مدرن است. البته لازم نیست در حال حاضر در این زمینه یک خبره باشید؛ اما هر چه در React جلوتر برویم، به یادگیری این موارد بیشتر نیاز خواهید داشت.