راهنمای جامع React (بخش اول)

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

راهنمای جامع React (بخش اول)

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

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

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

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

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

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

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

کامپوننت‌ها
JSX
حالت
Props
همه این مفاهیم و موارد بیشتر در این مجموعه مطلب توضیح داده شده‌اند.

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

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

نسخه 16.7.0-alpha.2 در لینک‌ها به جدیدترین نسخه ری‌اکت در زمان نگارش این مجموعه مطلب یعنی 16.7 آلفا اشاره می‌کند که در آن قابلیت Hook ارائه شده است. در صورتی که نسخه جدیدتری وجود دارد باید از آن استفاده کنید.

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

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

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

بدین ترتیب اسکریپت‌ها با نوع MIME خاص text/babel بارگذاری می‌شوند:

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

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

ReactDOM.render(, document.getElementById(‘root’))

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

اسکریپت های جالب در اسکریپت من