React چیست؟
React یک کتابخانه جاوا اسکریپت است که هدف آن ساده‌سازی مراحل توسعه رابط‌های بصری است. React از سوی فیسبوک توسعه یافته است و در سال ۲۰۱۳ انتشاریافته است. در واقع React زیرساخت تشکیل دهنده بسیاری اپلیکیشن‌های پر استفاده از قبیل فیسبوک و اینستاگرام را تشکیل می‌دهد.
هدف اولیه React این بوده است ساخت یک رابط و حالت آن را در هر زمان با تقسیم کردن رابط و حالت آن در هر زمان به کاری آسان تبدیل کند.
چرا React چنین محبوب است؟
React به طوری طوفانی دنیای توسعه وب فرانت‌اند را تسخیر کرده است. برای این وضعیت چند دلیل می‌توان برشمرد.
پیچیدگی آن کمتر از جایگزین‌های دیگر است
در هنگامی که React انتشار یافت، Ember.js و Angular 1.x گزینه‌های غالب فریمورک‌ها محسوب می‌شوند. هر دو این موارد چنان دستکاری‌هایی در کد می‌کنند که پورت کردن یک اپلیکیشن موجود به کار دشواری تبدیل می‌شود.
در مقابل React طوری طراحی شده که ادغام آن در یک پروژه از قبل موجود آسان باشد، چون از ابتدا بدین صورت طراحی شده بود که بتواند در کد از قبل موجود فیسبوک ادغام شود. ضمناً دو فریمورک دیگر بسیار سنگین بودند، در حالی که React به جای مجموعه کامل MVC صرفاً یک لایه View را عرضه می‌کرد.
زمان‌بندی عالی
در برهه‌ای از زمان نسخه دوم انگولار (Angular 2.x) از سوی گوگل معرفی شد که با نسخه‌های قبل تطبیق نمی‌یافت و تغییرات زیادی در آن رخ داده بود. حرکت از انگولار ۱ به ۲ مانند رفتن به یک فریمورک جدید بود. همچنین بهبود سرعت اجرایی که React نوید می‌داد، موجب شد که اغلب توسعه‌دهندگان React را انتخاب کنند.
این که یک فریمورک از سوی شرکت بزرگی مانند فیسبوک پشتیبانی شود به معنی پایدار بودن و موفقیت بیشتر آن است. فیسبوک در حال حاضر علاقه زیادی به React دارد، ارزش آن را در اوپن‌سورس بودن می‌داند و این به علاوه انرژی همه توسعه‌دهندگانی که از آن در پروژه‌هایشان استفاده می‌کنند، موجب موفقیت React شده است.
آیا یادگیری React آسان است؟
گرچه گفتیم که React نسبت به جایگزین‌های خود ساده‌تر است؛ اما استفاده عملی از آن همچنان پیچیده است؛ با این حال، اغلب پیچیدگی React در فناوری‌های جانبی که در آن ادغام می‌شوند مانند Redux و GraphQL است.
React خودش یک API بسیار کوچک دارد. اساساً برای آغاز کار با آن به درک چهار مفهوم زیر نیاز دارید:
- کامپوننت‌ها
- JSX
- حالت
- Props
همه این مفاهیم و موارد بیشتر در این مجموعه مطلب توضیح داده شده‌اند.
چگونه React را روی رایانه محیط توسعه خود نصب کنیم؟
React یک کتابخانه است و از این رو شاید استفاده از واژه نصب در مورد آن کمی عجیب باشد. شاید راه‌اندازی کلمه بهتری باشد؛ در هر حال ما با مفاهیم کار داریم و نه عبارت‌ها. روش‌های مختلفی برای راه‌اندازی React برای استفاده روی اپلیکیشن یا وب‌سایت وجود دارد.
بارگذاری مستقیم React در صفحه وب
ساده‌ترین روش افزودن فایل جاوا اسکریپت React به صفحه به صورت مستقیم است. این روش در مواردی که اپلیکیشن React با عناصر موجود روی یک صفحه منفرد تعامل خواهد داشت و به صورت مستقیم کل جنبه ناوبری را کنترل نمی‌کند بهترین گزینه محسوب می‌شود. در این حالت ۲ تگ اسکریپت به تگ 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> |
نسخه ۱۶.۷.۰-alpha.2 در لینک‌ها به جدیدترین نسخه ری‌اکت در زمان نگارش این مجموعه مطلب یعنی ۱۶.۷ آلفا اشاره می‌کند که در آن قابلیت Hook ارائه شده است. در صورتی که نسخه جدیدتری وجود دارد باید از آن استفاده کنید.
بدین ترتیب React و React DOM را بارگذاری می‌کنیم. اما شاید از خود بپرسید چرا ۲ کتابخانه بارگذاری شده است؟ چون React 100% مستقل از مرورگر عمل می‌کند و می‌تواند خارج از آن (برای مثال روی دستگاه‌های موبایل با استفاده از React Native) نیز فعال باشد. از این رو باید React Dom نیز بارگذاری شود تا پوشش‌های مناسب مرورگر را اضافه کند.
پس از این که آن تگ‌ها اشاره شد می‌توانید فایل‌های جاوا اسکریپت خود را که از React استفاده می‌کنند بارگذاری کنید و یا این که کد جاوا اسکریپت را در یک تگ Script به صورت inline درج کنید:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<script src="app.js"></script> <!-- or --> <script> //my app </script> |
|
۱ |
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> |
بدین ترتیب اسکریپت‌ها با نوع MIME خاص text/babel بارگذاری می‌شوند:
|
۱ |
<script src="app.js" type="text/babel"></script> |
اینک می‌توانید JSX را به فایل app.js خود اضافه کنید:
|
۱ |
const Button = () => {ctDOM.render(<Button />, document.getElementById('root')) |
راه اندازی ری‌اکت به این روش برای ساخت پروتوتایپ مناسب است، زیرا امکان آغاز سریع بدون نیاز به راه‌اندازی گردش کار کامل را فراهم می‌سازد.
چگونه از create-react-app استفاده کنیم؟
create-react-app یک پروژه است که هدف آن ایجاد امکان راه‌اندازی پروژه‌های ری‌اکت در کمترین زمان ممکن است و هر اپلیکیشن create-react-app که بیشتر از یک صفحه داشته باشد، create-react-app این نیاز را رفع می‌کند.
در ابتدا از npx استفاده می‌کنیم که یک روش آسان برای دانلود و اجرای دستورهای Node.js بدون نصب آن‌ها است. npx به همراه npm عرضه می‌شود و اگر npm را روی سیستم نصب ندارید، باید همین الان آن را از آدرس (+) نصب کنید.
اگر مطمئن نیستید که کدام نسخه از npm را نصب کنید، باید دستور npm –v را اجرا کنید تا نیاز به‌روزرسانی را بررسی کنید.
زمانی که دستور <npx create-react-app <app-name را اجرا بکنید، npx شروع به دانلود جدیدترین نسخه create-react-app کرده، آن را اجرا و سپس از روی سیستم حذف می‌کند. این وضعیت عالی است، زیرا شما هرگز نسخه قدیمی از آن روی سیستم خود نخواهید داشت و هر بار که آن را اجرا کنید، جدیدترین و بهترین کد ممکن را دریافت می‌کنید. با استفاده از دستور زیر آن را اجرا کنید:
|
۱ |
npx create-react-app todolist |
زمانی که اجرای آن پایان یابد با تصویر زیر مواجه می‌شوید:
create-react-app یک ساختار فایل در پوشه‌ای که تعیین کرده‌اید (در این مثال totolist) ایجاد می‌کند و یک ریپازیتوری Git نیز مقداردهی می‌کند.
همچنین چند دستور را در فایل اضافه می‌کند به طوری که می‌توانید بی‌درنگ اپلیکیشن خود را با رفتن به پوشه مربوطه و اجرای دستور npm start آغاز کنید:
create-react-app علاوه بر npm start، چند دستور دیگر نیز اضافه می‌کند:
- npm run build – برای ساختن فایل‌های اپلیکیشن React در پوشه build، که آماده انتشار روی سرور است.
- npm test – برای اجرای مجموعه تست با استفاده از Jest
- Npm eject – برای خارج شدن از create-react-app
خارج شدن یا eject به حالتی گفته می‌شود که تشخیص می‌دهید create-react-app وظیفه خود را انجام داده است، اما می‌خواهید کارهای بیشتری از آنچه create-react-app مجاز است انجام دهید. از آنجا که create-react-app مجموعه‌ای از قراردادهای مشترک و مقدار کمی از گزینه‌های اختیاری است، این احتمال وجود دارد که در مواردی به چیز خاصی نیاز داشته باشید که از ظرفیت‌های create-react-app فراتر می‌رود.
بدین ترتیب زمانی که eject می‌کنید، امکان به‌روزرسانی خودکار را از دست می‌دهید؛ اما می‌توانید با استفاده از پیکربندی Balel و Webpack انعطاف‌پذیری بیشتری به دست آورید.
باید بدانید که عمل eject برگشت‌ناپذیر است. شما ۲ پوشه در دایرکتوری اپلیکیشن خود به نام‌های config و scripts به دست می‌آورید. این پوشه‌ها شامل پیکربندی‌ها هستند و اینک می‌توانید شروع به ویرایش آن‌ها بکنید.
اگر از قبل یک اپلیکیشن ری‌اکت داشته باشید که با استفاده از نسخه‌های قدیمی ری‌اکت ساخته شده است، ابتدا باید نسخه آن را با استفاده از (console.log(React.version در اپلیکیشن خود تست کنید و سپس می‌توانید با اجرای دستور yarn add react@16.7 آن را به‌روزرسانی کنید. بدین ترتیب yarn به شما هشدار می‌دهد که باید به‌روزرسانی کنید. دقت کنید که عدد نسخه مورد نظرتان باید جدیدترین نسخه باشد.
CodeSandbox
یک روش آسان برای این که ساختار create-react-app را بدون نصب کردن آن به دست بیاورید این است که به آدرس https://codesandbox.io/s بروید و گزینه React را انتخاب کنید.
Codepen
Codepen نیز یک گزینه عالی محسوب می‌شود. شما می‌توانید از پروژه استارتر Codepen که از قبل با React پیکربندی شده است و از hook ها نیز پشتیبانی می‌کند استفاده کنید.
Pen-های Codepen برای پروژه‌های سریع با یک فایل جاوا اسکریپت عالی هستند؛ در حالی که project-ها برای پروژه‌های با چندین فایل مانند آن‌هایی که در اغلب موارد هنگام ساخت اپلیکیشن‌های ری‌اکت استفاده می‌کنیم مناسب هستند.
نکته‌ای که باید اشاره کنیم این است که Codepen به دلیل طرز کار درونی خود نیازی به استفاده ساختار import برای ماژول‌های معمولی ES ندارد، بلکه می‌توان برای مثال useState را با استفاده از دستور زیر ایمپورت کرد:
|
۱ |
const { useState } = React |
و نه دستور زیر:
