استفاده از ری اکت برای طراحی وب سایت
یکی از تصمیمات مهم برای شروع پروژه طراحی وب‌سایت، انتخاب تکنولوژی مناسب است. ReactJS ازجمله تکنولوژی‌های قدرتمند برای برنامه‌نویسی فرانت‌اند (Front-End) است. درواقع، این تکنولوژی یکی از کتابخانههای زبان جاوااسکریپت (JavaScript) محسوب میشود که جردن واک، یکی از مهندسان نرم‌افزار فیسبوک، آن را طراحی کرده است. در این مقاله، قصد داریم نحوه استفاده از این ReactJS در برنامه‌نویسی وب را توضیح دهیم. همچنین، اگر به طراحی وب‌سایت علاقه‌مندید، می‌توانید در وبینار طراحی وب‌سایت با ReactJS و Django شرکت کنید.
معرفی مختصر کتابخانه ReactJS
اولین‌بار فیسبوک ری‌اکت را توسعه داده و در اپلیکیشن‌ها و وب‌سایت‌های دیگری مانند واتس‌اپ (WhatsApp) و اینستاگرام (Instagram) نیز استفاده شده است. از‌نظر تخصصی، امروزه بسیاری از وب‌سایت‌ها با استفاده از معماری MVC ساخته می‌شوند. اگر در ابتدای راه یادگیری طراحی وب‌سایت هستید، باید بدانید که MVC یکی از الگوهای طراحی برای برنامه‌هاست که می‌تواند برای وب‌سایت نیز معتبر باشد. این اصطلاح از ترکیب سه واژه Model و View و Controller تشکیل شده است.
ReactJS در این معماری نقش «V» یا همان View را برعهده دارد؛ یعنی همان بخشی که اطلاعات را به کاربر نشان می‌دهد و به منطق برنامه نیز ارتباطی ندارد. با این توضیحات، احتمالاً به این نتیجه رسیده‌اید که این کتابخانه ابزاری قوی برای ساخت کامپوننت‌های UI است.
ذکر مثالی می‌تواند از ابهامی بکاهد که احتمالاً در ذهنتان ایجاد شده است. فرض کنید در فیسبوک مشغول دیدن پستی از دوستتان هستید. آن را لایک می‌کنید و می‌خواهید سری هم به نظرات پست دوستتان بزنید. در همین حال، می‌بینید که تعداد لایک پست نیز در حال افزایش است. به‌عبارت‌دیگر، بدون اینکه مجبور باشید صفحه‌تان را رفرش (Refresh) کنید، می‌توانید متوجه این تغییر شوید و این همان جادویی است که ReactJS در وب‌سایت ایجاد می‌کند.
مسیر طراحی وب‌سایت
مهم نیست که می‌خواهید وب‌سایت شخصی طراحی کنید یا وب‌سایت فروشگاهی؛ زیرا مسیری که برای طراحی هر نوع وب‌سایت در پیش رو دارید، در کلیات یکی است و فقط جزئیات آن ممکن است متفاوت باشد. ابتدا اجازه دهید درباره دو اصطلاح مهم در کدنویسی وب‌سایت توضیح مختصری بدهیم:
- فرانت‌اند (Front-End): بخش Front-End وب‌سایت دقیقاً همان چیزی است که کاربر آن را می‌بیند. اگر وب‌سایت را مانند کوه یخ تصور کنیم، قسمتی از آن که از آب بیرون است و یک نفر روی قایق آن را می‌بیند، همان قسمتی است که ما به آن فرانت‌اند می‌گوییم. منوها، رنگ‌ها، گرافیک وب‌سایت و… در همین قسمت قرار دارد.
- بک‌اند (Back-End): بخش بک‌اند همان قسمتی است که کاربر هیچ‌گاه آن را نمی‌بیند. ارتباطات سمت سرور و پردازش‌هایی که در وب‌سایت انجام میشود، در بخش Back-End قرار گرفته است و ما آن را با قسمتی از کوه یخ که در داخل آب قرار گرفته، مدل‌سازی ذهنی میکنیم.
حالا پرده‌های غبار در حال کنار‌رفتن از مقابل دیدگان شماست و می‌توانید بهتر درک کنید که چرا ReactJS در گروه فرانت‌اند قرار گرفته است. پس از آشنایی با مفاهیم ابتدایی طراحی وب‌سایت، فکر می‌کنید برای شروع طراحی باید از فرانت‌اند شروع کنیم یا بک‌اند؟ پاسخ این است که روند کدنویسی وب‌سایت یا وب‌اپلیکیشن روندی موازی بین بک‌اند و فرانت‌اند است. این یعنی در‌عمل این‌‌طور نیست که مثلاً برنامه‌نویس فرانت‌اند منتظر بماند تا کار برنامه‌نویسی بک‌اند کاملاً تمام شود و بعد شروع به‌کار کند.
کار برنامه‌نویسی Back-End و Front-End در بسیاری از مواقع به یکدیگر گره خورده است؛ به‌همین‌دلیل، باید تعامل زیادی بین برنامه‌نویسان این دو شاخه انجام شود. همچنین، باید توجه کرد که فرانت‌اند ارتباط بسیار تنگاتنگی با طراح UI و UX وب‌سایت دارد و همین موضوع بیانگر این واقعیت است که طراحی وب‌سایت کاری تیمی به‌معنای واقعی کلمه است. در‌این‌میان، برنامه‌نویسانی که هم در حوزه فرانت‌اند و هم در حوزه بک‌اند مهارت زیادی دارند و هر دو قسمت وب‌سایت را به‌طورکامل و فنی می‌توانند کدنویسی کنند، به «برنامه‌نویسان فول‌استک» شهرت دارند.
استفاده از ری‌اکت در طراحی وب‌سایت
یکی از مزایای مهم ReactJS این است که می‌توان از آن مستقیماً در HTML استفاده کرد. درادامه، می‌خواهیم به شما نشان دهیم که چگونه می‌توانید کامپوننت ری‌اکت را به کدهای HTML موجود اضافه کنید. برای انجام این کار، فقط به اتصال اینترنت و یک دقیقه وقت نیاز دارید!
گام اول: اضافه‌کردن کانتینر DOM به سند HTML
ابتدا صفحه HTML مدنظر خود را باز و سپس، یک تگ خالی <div> ایجاد کنید تا با استفاده از آن بتوانید نقطه‌ای را علامت‌گذاری کنید که می‌خواهید آن را با React نمایش دهید.
<!– … existing HTML … –>
<div id=”like_button_container“></div>
<!– … existing HTML … –>
اگر با مفاهیم کدنویسی HTML آشنا باشید، حتماً می‌دانید که هر Element می‌تواند id منحصر‌به‌فردی داشته باشد. همان‌طور‌که در شکل بالا نیز مشاهده می‌کنید، ما به تگ <div> یک id اختصاص داده‌ایم. این کار به ما امکان خواهد داد که بعداً بتوانیم این تگ را با استفاده از id اختصاص‌داده‌شده پیدا کنیم و یک کامپوننت React را درون آن نمایش دهیم.
نکته: شما می‌توانید کانتینر <div> را در هر جایی از تگ <body> سند HTML خود قرار دهید. همچنین، ممکن است به موارد متعددی از کانتینرهای مستقل در یک صفحه نیاز داشته باشید که معمولاً خالی هستند. React جایگزین محتواهای موجود در کانتینرهای DOM خواهد شد.
گام دوم: اضافه‌کردن تگ‌های Script
در قدم بعدی، باید تگ‌های <script> را در سند HTML خود ذخیره کنید. این تگ‌ها دقیقاً قبل از تگ بسته </body> قرار خواهند گرفت.
<!– … other HTML … –>
<!– Load React. –>
<!– Note: when deploying, replace “development.js” with “production.min.js”. –>
<script src=”https://unpkg.com/react@18/umd/react.development.js“ crossorigin></script> <script src=”https://unpkg.com/react-dom@18/umd/react-dom.development.js“ crossorigin></script>
<!– Load our React component. –>
<script src=”like_button.js“></script>
</body>
در این قطعه کد، وظیفه دو تگ اول لود‌کردن ReactJS و وظیفه تگ سوم لود‌کردن کامپوننت ReactJS است.
گام سوم: ایجاد کامپوننت React
حالا باید فایلی با نام like_button.js بسازید. برای کد شروع‌کننده می‌توانید از این نمونه استفاده کنید:
‘use strict’;
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return ‘You liked this.’;
}
return e(
‘button’,
{ onClick: () => this.setState({ liked: true }) },
‘Like’
);
}
}
این قطعه کد، کامپوننت ری‌اکتی با نام LikeButton را تعریف می‌کند. بعد‌از‌آن، سه خط کد زیر را به فایل like_button.js اضافه کنید:
// … the starter code you pasted …
const domContainer = document.querySelector(‘#like_button_container’);const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));
با استفاده از این سه خط کد، تگ <div> که در قدم اول به فایل HTML اضافه شده بود، پیدا و برنامه‌ای React ایجاد خواهد شد و در‌نهایت، دکمه «Like» را داخل آن قرار خواهد داد.
کار تمام است! به‌همین‌راحتی و با طی‌کردن سه گام، توانستید کامپوننتی React را به وب‌سایت خود اضافه کنید. کدهای کامل این مثال را می‌توانید از ReactJS-Sample دانلود کنید.
جمع‌بندی
ReactJS یکی از کتابخانههای مهم زبان برنامه‌نویسی JavaScript است و استفاده از آن در برنامه‌نویسی Front-End وب‌سایت‌ها و وب‌اپلیکیشن‌ها کاربرد وسیعی دارد. در این مقاله، این کتابخانه را بررسی کردیم و یاد گرفتیم که چگونه کامپوننتی ساده را با استفاده از ReactJS به وب‌سایت خود اضافه کنیم. اگر به یادگیری طراحی وب‌سایت علاقه دارید، در وبینار طراحی وب‌سایت فروشگاهی با ری‌اکت و جنگو می‌توانید شرکت و مسیر یادگیری خود را با قدمی محکم شروع کنید.
سؤالات متداول
۱. آیا ReactJS فریمورک JavaScript محسوب میشود؟
خیر، ReactJS یکی از کتابخانههای JavaScript محسوب میشود که در ساخت رابط کاربری (UI) بسیار کاربردی است.
۲. کانتینر (Container) چیست؟
توسعهدهندگان وب در بسیاری از مواقع با این مشکل مواجهاند که اپلیکیشنی را روی سیستم خود کدنویسی، دیباگ، آزمایش و تمامی خطاهایش را رفع میکنند؛ اما وقتی همان اپلیکیشن را به محیط دیگری مانند محیط سرور دیپلوی میکنند، میبینند که در این محیط مشکلات و باگهایی برای همان کدها گزارش میشود. کانتینرها ابزارهایی هستند که به دولوپرها این اطمینان را میدهند که کدهای نوشتهشده در هر پلتفرمی بهدرستی اجرا شوند. پیشنهاد میکنیم برای کسب اطلاعات بیشتر درباره این موضوع، درزمینه مفاهیم داکر و ماشین مجازی تحقیق کنید.
دیدگاهتان را بنویسید