امروزه، فریم‌ورک‌ها و کتابخانه‌های front-end تبدیل به بخشی ضروری از development stack وب مدرن هستند. React.js یک کتابخانه front-end است که به تدریج به فریم‌ورکی برای توسعه وب مدرن در جامعه جاوا اسکریپت تبدیل شده است.
این مطلب برای کسانی است که در توسعه وب تازه‌کار هستند، یا سعی دارند بفهمند این همه هیاهو برای چیست. پس بیایید نگاهی به React بیندازیم، این که چگونه کار می‌کند و چه چیزی آن را از سایر فریم‌ورک‌های جاوا اسکریپت متمایز می‌کند.
React.js چیست؟
فریم‌ورک React.js یک فریم‌ورک و کتابخانه اپن سورس جاوا اسکریپت است که توسط فیس‌بوک توسعه یافته است. این فریم‌ورک برای ساختن رابط‌های کاربری interactive و وب اپلیکیشن‌ها استفاده می‌شود و سرعت و کارایی بیشتر، و نیاز به کدنویسی کمتری از vanilla JavaScript دارد.
در React ، شما اپلیکیشن‌های خود را با ایجاد اجزایی با قابلیت استفاده مجدد توسعه می‌دهید و می‌توانید آن‌ها را به عنوان بلوک‌های مستقل یک سازه لگو در نظر بگیرید. این مؤلفه‌ها تکه‌های جداگانه یک رابط نهایی هستند که وقتی مونتاژ می‌شوند، کل رابط کاربری اپلیکیشن را تشکیل می‌دهند.
نقش اصلی React در یک اپلیکیشن این است که با ارائه بهترین و کارآمدترین اجرای rendering ، لایه view آن اپلیکیشن را درست مانند V در الگوی model-view-controller (MVC) مدیریت کند. React.js به جای پرداختن به کل رابط کاربری به عنوان یک واحد تکی، توسعه‌دهندگان را تشویق می‌کند تا این رابط‌های کاربری پیچیده را به اجزای منفرد و قابل استفاده مجدد که بلوک‌های ساختمان کل رابط کاربری را تشکیل می‌دهند، تقسیم کنند. در انجام این کار، فریم‌ورک React.js سرعت و کارایی جاوا اسکریپت را با یک روش کارآمدتر برای دستکاری DOM ترکیب می‌کند تا سرعت صفحات وب را افزایش دهد و وب اپلیکیشن‌های بسیار پویا و responsive ایجاد کند.
<!-- The first link is that of the core React library API itself". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<!-- The second link is that of the React DOM needed to render to the DOM". -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- The 3rd link is that of Babel, which is needed to compile our React code so it is understood by all browsers". -->
<script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
<!-- Load the React component file. -->
<script type="text/babel" src="like_widget.js"></script>
دوم این‌که، شما یک <div> را در جایی از فایل markup خود ایجاد می‌کنید تا قسمتی را که می‌خواهید به آن plug کنید را mark کنید و مؤلفه React را رندر کنید. شما همچنین به آن یک ID منحصر به فرد می‌دهید که بعداً در کد جاوا اسکریپت برای locate کردن spot استفاده می‌کنیم. مثلاً:
<!-- ... Your existing HTML markup ... -->
<div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
فایل جاوا اسکریپت like_widget
مرحله نهایی ایجاد فایل جاوا اسکریپت like_widget است. همان‌طور که در زیر نشان داده شده است:
// Custom React component function that returns a JSX syntax
const ActualWidget = () => <h1>Hello World</h1>;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(<ActualWidget />, container);
اگر اپلیکیشن را run کنید، “Hello World” را دقیقاً در همان spot که در تصویر زیر mark کرده‌اید، به مرورگر رندر می‌کند.
ممکن است متوجه یک syntax عجیب به نام JavaScript XML (JSX) شده باشید که توسط تابع ActualWidget بازگردانی شده است. شما از JSX با React برای ترکیب آسان HTML و جاوا اسکریپت استفاده می‌کنید. فیس‌بوک JSX را به عنوان یک syntax extension برای جاوا اسکریپت توسعه داده است تا عملکرد HTML را با جاسازی مستقیم آن در کد جاوا اسکریپت گسترش دهد.
با JSX ، نیازی به جدا کردن کدهای HTML و JS نیست، زیرا React به شما اجازه می‌دهد HTML اعلامی را مستقیماً در جاوا اسکریپت بنویسید.
ایجاد یک اپلیکیشن تمام عیار با React.js
اگرچه می‌توانید برای ایجاد قطعات کوچک در یک وب اپلیکیشن از قبل موجود، از React.js استفاده کنید، اما استفاده از آن برای ساخت کامل یک وب اپلیکیشن عملی‌تر است. با این حال، React.js مسلماً نیازمند پیکربندی‌های tooling سنگینی است که معمولاً هنگام ایجاد اپلیکیشن‌های جدید، تنظیم آن بسیار سخت است.
خوشبختانه، نیازی نیست که این تنظیمات ساخت را یاد بگیرید یا خودتان ابزارهای ساخت را پیکربندی کنید. فیس‌بوک یک ابزار command-line پکیج Node به نام create-react-app ایجاد کرده است تا به شما کمک کند نسخه‌ای از یک اپلیکیشن React را تولید کنید. این پکیج به شما کمک می‌کند تا کارتان را out of the box انجام دهید و ساختاری سازگار برای اپلکیشن‌های React.js فراهم می‌کند که هنگام جابجایی بین پروژه‌های این فریم‌ورک، آن را تشخیص خواهید داد.
ایجاد یک پروژه React.js به سادگی اجرای دستورات زیر در ترمینال‌تان است:
npx create-react-app my-new-app
cd my-new-app
npm start
مثال‌هایی از React.js
React.js به دلیل توانایی خود در ایجاد وب اپلیکیشن‌های سریع، کارآمد و مقایس‌پذیر، محبوبیتی پایدار به دست آورده است. امروزه هزاران وب اپلیکیشن، از شرکت‌های باسابقه گرفته تا استارت آپ‌های جدید، از آن استفاده می‌کنند. چند مورد قابل توجه از این شرکت‌ها عبارتند از:
- Netflix
- Uber
- Airbnb
- The New York Times
- Khan Academy
- Codecademy
- SoundCloud
- Discord
- WhatsApp Web
React.js همچنین بسیار قوی‌تر شده است و اکنون می‌توان از آن برای ساخت اپلیکیشن‌های موبایل بومی و اپلیکیشن‌های دسکتاپ استفاده کرد. برای ساخت اپلیکیشن‌های موبایل از React Native و اپلکیشن‌های دسکتاپ از Electron.js استفاده می‌شود.
شروع کار با این فریم‌ورک چگونه است؟
این مقاله React.js را معرفی نمود، تاریخچه آن را ارائه کرد و نشان داد که چگونه React قابلیت‌های جاوا اسکریپت را گسترش می‌دهد. همچنین نمونه‌هایی از موارد استفاده برای توسعه‌دهندگان و چند قطعه کد مختصر و syntax آن‌ها را نشان داد تا بگوید که چرا توسعه‌دهندگان به جای این‌که فقط از جاوا اسکریپت استفاده کنند، از React.js هم استفاده می‌کنند. این مقاله با چند نمونه واقعی از اپلیکیشن‌های محبوب ساخته شده با استفاده از React.js به پایان رسید.
React عملکردهای پیشرفته‌ای ارائه می‌دهد و برای توسعه‌دهندگانی که به دنبال یک فریم‌ورک جاوا اسکریپت با کاربری آسان و بازده بالا هستند، انتخابی مناسب است. با استفاده از React ، می‌توانید تعاملات UI پیچیده‌ای ایجاد کنید که در زمان رکورد با سرور ارتباط برقرار می‌کند. با reload های غیرضروری full-page خداحافظی کنید و شروع به استفاده از React.js کنید.
نیکان دانش هارون همچنین در مطالب دیگر خود به بررسی و معرفی دیگر کتابخانه‌ها و فریم‌ورک‌های جاوا اسکریپت، مانند NodeJS ، VueJS ، NextJS و کتابخانه JQuery پرداخته است که شاید مطالعه آن‌ها نیز برایتان مفید باشد.
ممنون که تا این‌جا همراه ما بودید! روز (یا شب) خوش!
Leave feedback about this