چگونه یک وبسایت واکنش گرا با ReactJS طراحی کنیم؟ نکات و ترفندها

با ری اکت وبسایت واکنش گرا مثل آب خوردن! (تقریباً)

خب اگه شما هم مثل خیلی های دیگه به دنیای جذاب توسعه وب علاقه مندید حتماً اسم ری اکت (ReactJS) به گوشتون خورده. ری اکت یه کتابخونه جاوااسکریپتیه که کار ما رو برای ساخت رابط های کاربری (User Interfaces) خیلی راحت تر و لذت بخش تر کرده. اما فقط همین نیست! یکی از مهم ترین ویژگی های ری اکت اینه که به ما کمک می کنه وبسایت هایی بسازیم که واکنش گرا باشن.

واکنش گرایی چیه اصلاً؟ بذارید ساده بگم. یه وبسایت واکنش گرا وبسایتیه که خودش رو با اندازه صفحه نمایش دستگاه های مختلف – از موبایل های کوچیک گرفته تا تبلت ها و کامپیوترهای بزرگ – وفق می ده. یعنی چی؟ یعنی اگه شما یه وبسایت واکنش گرا رو توی موبایلتون باز کنید همه چی مرتب و منظم دیده می شه انگار که مخصوص موبایل طراحی شده. بعد همون وبسایت رو توی کامپیوتر باز کنید باز همه چیز سر جای خودشه و ظاهرش متناسب با صفحه بزرگ تر تغییر کرده. دیگه لازم نیست زوم کنید یا صفحه رو اینور و اونور بکشید تا محتوا رو ببینید. خیلی باحاله نه؟

چرا واکنش گرایی مهمه؟

تو دنیای امروز که آدما از دستگاه های مختلف برای وب گردی استفاده می کنن دیگه واکنش گرا نبودن وبسایت یه جورایی خودکشیه! فکرشو بکنید یه کاربر با موبایل وارد وبسایت شما می شه و می بینه همه چی به هم ریخته و ناخواناست. چه فکری می کنه؟ احتمالاً سریع از سایت شما خارج می شه و دیگه هم برنمی گرده. این یعنی از دست دادن کاربر از دست دادن مشتری و کلاً یه تجربه کاربری بد.

از طرف دیگه اگه وبسایت شما واکنش گرا باشه هم کاربرها تجربه بهتری دارن هم گوگل بیشتر دوستتون داره (چون گوگل هم به وبسایت های واکنش گرا اهمیت می ده و تو رتبه بندی ها براشون امتیاز بیشتری قائل می شه) و هم شما خیالتون راحته که وبسایتتون برای همه کاربرها با هر دستگاهی به بهترین شکل نمایش داده می شه.

ری اکت و واکنش گرایی : یه ترکیب عالی

حالا چرا آموزش ری اکت برای ساخت وبسایت های واکنش گرا خیلی خوبه؟ چند تا دلیل داره :

1. کامپوننت محوری (Component-based) : ری اکت بر پایه کامپوننت ها ساخته شده. کامپوننت ها مثل قطعات لگو هستن که شما می تونید اون ها رو بارها و بارها استفاده کنید و کنار هم بچینید تا رابط کاربری دلخواهتون رو بسازید. این کامپوننت ها رو می شه طوری طراحی کرد که خودشون رو با اندازه های مختلف صفحه نمایش وفق بدن.
2. انعطاف پذیری (Flexibility) : ری اکت خیلی انعطاف پذیره و دست شما رو برای پیاده سازی واکنش گرایی باز می ذاره. شما می تونید از روش های مختلفی مثل مدیا کوئری ها (Media Queries) فریمورک های CSS و CSS-in-JS برای واکنش گرا کردن کامپوننت هاتون استفاده کنید.
3. جامعه بزرگ و منابع فراوان (Large Community and Resources) : ری اکت یه جامعه خیلی بزرگ و فعال داره. این یعنی اگه به مشکلی برخوردید یا سوالی داشتید احتمالاً خیلی سریع می تونید جوابش رو پیدا کنید. کلی کتابخونه آموزش و ابزار هم برای ری اکت وجود داره که کار شما رو راحت تر می کنه.

ابزارهای جادویی برای واکنش گرایی در ری اکت

خب حالا بریم سراغ ابزارهایی که بهمون کمک می کنن وبسایت های واکنش گرا با ری اکت بسازیم. این ابزارها مثل جعبه ابزار یه نجار می مونن هر کدوم برای یه کار خاصی به درد می خورن :

1. مدیا کوئری ها (Media Queries) : مدیا کوئری ها تو CSS مثل شرط می مونن. شما می تونید با استفاده از مدیا کوئری ها استایل های مختلفی رو برای اندازه های مختلف صفحه نمایش تعریف کنید. مثلاً بگید اگه عرض صفحه نمایش از یه حدی کمتر بود فلان استایل اعمال بشه و اگه بیشتر بود یه استایل دیگه. مدیا کوئری ها یه ابزار پایه ای و خیلی مهم برای واکنش گرایی هستن.
2.  /* استایل پیش فرض برای صفحه های بزرگ */
3. .container {
4.  display : flex;
5.  flex-direction : row;
6. }
7.  
8. /* مدیا کوئری برای صفحه های کوچک (مثلاً موبایل) */
9. @media (max-width : ۷۶۸px) {
10.  .container {
11.  flex-direction : column; /* تغییر جهت فلکس باکس به ستونی */
12.  }
13. }

 

1. فریمورک های CSS (CSS Frameworks) : فریمورک های CSS مثل بوت استرپ (Bootstrap) متریال یوآی (Material UI) و تلویند سی اس اس (Tailwind CSS) یه عالمه کامپوننت و استایل آماده دارن که کار شما رو خیلی سریع تر می کنن. خیلی از این فریمورک ها خودشون به صورت پیش فرض واکنش گرا هستن و کافیه شما از کامپوننت هاشون درست استفاده کنید تا وبسایتتون واکنش گرا بشه.
• بوت استرپ : یه فریمورک خیلی محبوب و قدیمی که کامپوننت های متنوعی داره و بر پایه سیستم گرید (Grid System) ساخته شده. بوت استرپ برای پروژه های مختلف مناسبه و خیلی راحت می شه باهاش کار کرد.
• متریال یوآی : یه فریمورک بر اساس طراحی متریال گوگل که ظاهر خیلی شیک و مدرنی داره. متریال یوآی کامپوننت های ری اکتی آماده داره و برای پروژه هایی که به ظاهر زیبا و تجربه کاربری خوب اهمیت می دن انتخاب خیلی خوبیه.
• تلویند سی اس اس : یه فریمورک utility-first که به شما کلاس های CSS آماده می ده و شما می تونید با ترکیب این کلاس ها استایل های دلخواهتون رو بسازید. تلویند سی اس اس خیلی انعطاف پذیره و برای کسایی که می خوان کنترل کاملی روی استایل ها داشته باشن عالیه.
2. CSS-in-JS : روش CSS-in-JS به شما اجازه می ده استایل های CSS رو مستقیماً توی کدهای جاوااسکریپت (یا JSX) بنویسید. کتابخونه هایی مثل استایلد-کامپوننتز (Styled-components) و ایموشن (Emotion) از این روش استفاده می کنن. CSS-in-JS می تونه برای مدیریت استایل های کامپوننت ها خیلی مفید باشه و به شما کمک کنه استایل های واکنش گرا رو به صورت پویا (Dynamic) تعریف کنید.
3.  import styled from ‘styled-components’;
4.  
5. const Button = styled.button`
6.  padding : ۱۰px ۲۰px;
7.  font-size : ۱۶px;
8.  
9.  @media (max-width : ۷۶۸px) {
10.  padding : ۸px ۱۶px;
11.  font-size : ۱۴px;
12.  }
13. `;
14.  
15. function MyComponent() {
16.  return <Button>کلیک کن</Button>;
17. }

 

گریدبندی و فلکس باکس : دو یار همیشگی طراحان واکنش گرا

برای چیدن المان ها کنار هم و ساختن layout های واکنش گرا دو تا تکنیک خیلی مهم و کاربردی وجود داره : گرید (Grid) و فلکس باکس (Flexbox). این دو تا مثل دو تا ابزار قدرتمند تو دست طراحان وب هستن که باهاشون می تونن هر نوع layout ی رو که بخوان پیاده کنن.

1. گرید (Grid) : گرید یه سیستم layout دو بعدی (هم ردیف و هم ستون) هست که به شما اجازه می ده المان ها رو تو یه شبکه منظم بچینید. گرید برای ساختن layout های پیچیده و ساختارمند خیلی مناسبه. شما می تونید با استفاده از گرید layout های مختلفی رو برای اندازه های مختلف صفحه نمایش تعریف کنید و وبسایتتون رو واکنش گرا کنید.
2.  .container {
3.  display : grid;
4.  grid-template-columns : repeat(۳, ۱fr); /* ۳ ستون مساوی در صفحه های بزرگ */
5.  gap : ۲۰px;
6. }
7.  
8. @media (max-width : ۷۶۸px) {
9.  .container {
10.  grid-template-columns : ۱fr; /* ۱ ستون در صفحه های کوچک */
11.  }
12. }

 

1. فلکس باکس (Flexbox) : فلکس باکس یه سیستم layout یک بعدی (یا ردیف یا ستون) هست که برای چیدن المان ها تو یه راستا خیلی خوبه. فلکس باکس خیلی انعطاف پذیره و به شما اجازه می ده تراز کردن (Alignment) مرتب کردن (Ordering) و توزیع فضا (Space Distribution) بین المان ها رو خیلی راحت کنترل کنید. فلکس باکس برای ساختن نوار منو (Navigation Bar) فوتر (Footer) و کلاً layout های خطی خیلی کاربردیه.
2.  .navbar {
3.  display : flex;
4.  justify-content : space-between; /* توزیع مساوی فضا بین المان ها */
5.  align-items : center; /* تراز عمودی المان ها در وسط */
6. }
7.  
8. @media (max-width : ۷۶۸px) {
9.  .navbar {
10.  flex-direction : column; /* تغییر جهت فلکس باکس به ستونی در صفحه های کوچک */
11.  align-items : flex-start; /* تراز المان ها از بالا */
12.  }
13. }

تصاویر و ویدیوهای واکنش گرا : دیگه بزرگ و کوچیک نمیشن!

تصاویر و ویدیوها بخش مهمی از وبسایت ها هستن اما اگه واکنش گرا نباشن می تونن تجربه کاربری رو خراب کنن. تصور کنید یه تصویر بزرگ تو موبایل کل صفحه رو پر کنه و کاربر مجبور بشه کلی اسکرول کنه تا بقیه محتوا رو ببینه. برای جلوگیری از این مشکل باید تصاویر و ویدیوها رو هم واکنش گرا کنیم.

1. تصاویر واکنش گرا : برای تصاویر واکنش گرا چند تا راهکار وجود داره :
• استفاده از max-width : ۱۰۰% و height : auto : این ساده ترین و رایج ترین روشه. با این کار عرض تصویر حداکثر ۱۰۰% اندازه والدش می شه و ارتفاعش به صورت خودکار تنظیم می شه.

• img {
• max-width : ۱۰۰%;
• height : auto;
• }

 

• عنصر <picture> : عنصر <picture> به شما اجازه می ده تصاویر مختلفی رو برای اندازه های مختلف صفحه نمایش یا رزولوشن های مختلف تعریف کنید. مرورگر به صورت هوشمندانه بهترین تصویر رو با توجه به شرایط کاربر انتخاب می کنه.

• <picture>
• <source media=”(max-width : ۷۶۸px)” srcset=”small-image.jpg”>
• <source media=”(min-width : ۷۶۹px)” srcset=”large-image.jpg”>
• <img src=”default-image.jpg” alt=”توضیحات تصویر”>
• </picture>

 

• ویژگی های srcset و sizes : ویژگی های srcset و sizes تو تگ <img> به شما اجازه می ده تصاویر مختلفی رو با اندازه های مختلف تعریف کنید و به مرورگر بگید کدوم تصویر برای چه اندازه ای مناسبه.

• <img
• srcset=”small-image.jpg ۳۲۰w,
• medium-image.jpg ۷۶۸w,
• large-image.jpg ۱۲۰۰w”
• sizes=”(max-width : ۳۲۰px) ۲۸۰px,
•  (max-width : ۷۶۸px) ۷۲۰px,
•  ۱۲۰۰px”
• src=”default-image.jpg”
• alt=”توضیحات تصویر”
• />

 ویدیوهای واکنش گرا : برای ویدیوهای واکنش گرا هم می تونید از روش max-width : ۱۰۰% و height : auto استفاده کنید. اما یه نکته مهم اینه که باید نسبت ابعاد ویدیو (Aspect Ratio) رو هم حفظ کنید تا ویدیو کشیده یا فشرده نشه. برای این کار می تونید از تکنیک padding-bottom hack استفاده کنید یا از کتابخونه های CSS که این کار رو براتون انجام می دن.

1.  .video-container {
2.  position : relative;
3.  padding-bottom : ۵۶.۲۵%; /* نسبت ابعاد ۱۶ : ۹ (رایج ترین نسبت ابعاد ویدیو) */
4.  height : ۰;
5.  overflow : hidden;
6. }
7.  
8. .video-container iframe,
9. .video-container video {
10.  position : absolute;
11.  top : ۰;
12.  left : ۰;
13.  width : ۱۰۰%;
14.  height : ۱۰۰%;
15. }

 

تست و آزمایش : رفیق شفیق توسعه دهندگان واکنش گرا

بعد از اینکه وبسایتتون رو واکنش گرا کردید خیلی مهمه که اون رو تست کنید تا مطمئن بشید همه چی درست کار می کنه و تو دستگاه های مختلف به خوبی نمایش داده می شه. تست کردن وبسایت واکنش گرا یه بخش حیاتی از فرایند توسعه وب هست و نباید ازش غافل بشید.

1. ابزارهای توسعه مرورگر (Browser DevTools) : مرورگرهای مدرن مثل کروم و فایرفاک ابزارهای توسعه دهنده خیلی خوبی دارن که به شما اجازه می دن وبسایتتون رو تو اندازه های مختلف صفحه نمایش شبیه سازی کنید. تو این ابزارها می تونید دستگاه های مختلف (موبایل تبلت کامپیوتر) رو انتخاب کنید و ببینید وبسایتتون تو هر کدوم چطوری نمایش داده می شه.
2. تست روی دستگاه های واقعی : شبیه سازی تو ابزارهای توسعه دهنده خوبه اما هیچ چی جای تست کردن روی دستگاه های واقعی رو نمی گیره. سعی کنید وبسایتتون رو روی چند تا دستگاه مختلف (موبایل و تبلت با اندازه های مختلف کامپیوتر با رزولوشن های مختلف) تست کنید تا مطمئن بشید همه چی بی نقصه.
3. ابزارهای تست واکنش گرایی آنلاین : کلی ابزار آنلاین هم وجود داره که به شما اجازه می دن URL وبسایتتون رو وارد کنید و اون ها وبسایتتون رو تو اندازه های مختلف صفحه نمایش تست می کنن و بهتون نشون می دن. بعضی از این ابزارها حتی اسکرین شات هم می گیرن و بهتون می دن.
4. تست خودکار (Automated Testing) : برای پروژه های بزرگ تر و پیچیده تر می تونید از ابزارهای تست خودکار مثل سایپرس (Cypress) یا سلنیوم (Selenium) استفاده کنید. این ابزارها به شما اجازه می دن تست های خودکار برای واکنش گرایی وبسایتتون بنویسید و مطمئن بشید با هر تغییری تو کد واکنش گرایی وبسایتتون خراب نمی شه.

بهینه سازی عملکرد : وبسایت واکنش گرای سریع و برق آسا

واکنش گرا بودن فقط ظاهر وبسایت نیست بلکه عملکردش هم خیلی مهمه. یه وبسایت واکنش گرا باید سریع و روان باشه به خصوص تو موبایل ها که ممکنه سرعت اینترنت و قدرت پردازشی کمتری داشته باشن. برای بهینه سازی عملکرد وبسایت های واکنش گرا چند تا نکته رو باید رعایت کنید :

1. بهینه سازی تصاویر : تصاویر حجم زیادی از وبسایت ها رو تشکیل می دن. برای بهینه سازی تصاویر باید حجمشون رو کم کنید بدون اینکه کیفیتشون خیلی پایین بیاد. ابزارهای زیادی برای فشرده سازی تصاویر آنلاین و آفلاین وجود داره. همچنین استفاده از فرمت های تصویری مدرن مثل WebP می تونه حجم تصاویر رو خیلی کم کنه.
2. لود تنبل (Lazy Loading) : لود تنبل یعنی تصاویر و ویدیوهایی که پایین تر از قسمت قابل مشاهده صفحه هستن فقط وقتی لود بشن که کاربر بهشون اسکرول کنه. این کار باعث می شه صفحه سریع تر لود بشه و مصرف پهنای باند هم کم بشه. کتابخونه های ری اکتی مثل react-lazy-load کار لود تنبل رو براتون خیلی راحت می کنن.
3. کدنویسی بهینه : کدهای جاوااسکریپت و CSS هم می تونن روی عملکرد وبسایت تاثیر بذارن. سعی کنید کدهای تمیز خوانا و بهینه بنویسید. از کدهای اضافی و غیرضروری پرهیز کنید. از ابزارهای linting و formatting مثل ESLint و Prettier برای بهبود کیفیت کدتون استفاده کنید.
4. کد اسپیلیتینگ (Code Splitting) : کد اسپیلیتینگ یعنی کدهای جاوااسکریپتتون رو به تکه های کوچیک تر تقسیم کنید و فقط کدهایی رو لود کنید که برای صفحه فعلی لازم هستن. این کار باعث می شه زمان لود اولیه صفحه کم بشه و وبسایت سریع تر کار کنه. ری اکت با استفاده از React.lazy و Suspense از کد اسپیلیتینگ پشتیبانی می کنه.
5. کش (Caching) : از کش مرورگر و کش سرور برای ذخیره منابع استاتیک (مثل تصاویر فایل های CSS و فایل های جاوااسکریپت) استفاده کنید. این کار باعث می شه دفعه های بعدی که کاربر به وبسایتتون برمی گرده صفحه خیلی سریع تر لود بشه چون منابع از کش لود می شن و نیازی به دانلود مجدد نیست.

نکات پیشرفته و ترفندهای حرفه ای

اگه تا اینجا اومدید و همه اینا رو یاد گرفتید تبریک می گم! شما دیگه یه توسعه دهنده وب واکنش گرای ری اکت هستید (تقریباً!). حالا برای اینکه حرفه ای تر بشید چند تا نکته پیشرفته و ترفند حرفه ای هم براتون دارم :

1. طراحی موبایل اول (Mobile-First Design) : تو طراحی موبایل اول شما اول وبسایت رو برای موبایل طراحی می کنید و بعد استایل ها رو برای صفحه های بزرگ تر اضافه می کنید. این روش معمولاً بهتر از روش دسکتاپ اول (Desktop-First) هست چون باعث می شه وبسایتتون تو موبایل ها سریع تر و بهتر کار کنه.
2. طراحی تطبیقی (Adaptive Design) در مقابل طراحی واکنش گرا (Responsive Design) : طراحی واکنش گرا یعنی وبسایتتون به صورت پویا خودش رو با اندازه های مختلف صفحه نمایش وفق می ده. اما طراحی تطبیقی یه کم فرق داره. تو طراحی تطبیقی شما چند تا layout مختلف برای اندازه های صفحه نمایش مختلف طراحی می کنید و وبسایتتون با توجه به اندازه صفحه نمایش کاربر یکی از این layout ها رو انتخاب می کنه. طراحی تطبیقی معمولاً پیچیده تر از طراحی واکنش گرا هست اما می تونه برای بعضی از پروژه ها مناسب تر باشه.
3. سرور-ساید رندرینگ (Server-Side Rendering – SSR) : به صورت پیش فرض ری اکت رندرینگ سمت کلاینت (Client-Side Rendering – CSR) انجام می ده. یعنی مرورگر کاربر کدهای جاوااسکریپت رو دانلود می کنه و بعد صفحه رو رندر می کنه. سرور-ساید رندرینگ یعنی رندرینگ اولیه صفحه تو سرور انجام بشه و بعد HTML آماده به مرورگر کاربر فرستاده بشه. SSR می تونه برای بهبود عملکرد و سئو (SEO) وبسایت های واکنش گرا خیلی مفید باشه. فریمورک هایی مثل نکست.جی اس (Next.js) و گتسبی (Gatsby) از SSR به صورت پیش فرض پشتیبانی می کنن.
4. استفاده از هوک های ری اکت (React Hooks) برای واکنش گرایی : هوک های ری اکت مثل useState و useEffect به شما اجازه می دن state و lifecycle features رو تو کامپوننت های تابعی (Functional Components) استفاده کنید. شما می تونید از هوک ها برای پیاده سازی منطق واکنش گرایی تو کامپوننت هاتون استفاده کنید. مثلاً می تونید با استفاده از useState و useEffect اندازه صفحه نمایش رو تو کامپوننتتون track کنید و بر اساس اون استایل ها یا محتوای کامپوننت رو تغییر بدید.

جمع بندی و خداحافظی (فعلاً)

خب تو این مقاله با هم کلی چیز در مورد طراحی وبسایت های واکنش گرا با ری اکت یاد گرفتیم. از اهمیت واکنش گرایی و ابزارهای مورد نیاز گرفته تا تکنیک های پیشرفته و ترفندهای حرفه ای. امیدوارم این مقاله براتون مفید بوده باشه و بتونید با استفاده از این نکات وبسایت های واکنش گرای جذاب و کاربرپسند بسازید.

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

پرسش های پرتکرار شما

۱. آیا برای ساخت وبسایت واکنش گرا حتماً باید از ری اکت استفاده کنم؟

نه اصلاً! ری اکت فقط یکی از ابزارهای موجود برای ساخت وبسایت های واکنش گرا هست. شما می تونید با استفاده از HTML CSS و جاوااسکریپت خالص هم وبسایت واکنش گرا بسازید. فریمورک های دیگه جاوااسکریپتی مثل ویو.جی اس (Vue.js) و انگولار (Angular) هم برای این کار مناسب هستن. انتخاب ابزار بستگی به نیازها و ترجیحات شما داره. ولی خب ری اکت خیلی محبوبه و جامعه بزرگی داره و یادگیریش می تونه خیلی مفید باشه.

۲. کدوم فریمورک CSS برای واکنش گرایی تو ری اکت بهتره؟ بوت استرپ متریال یوآی یا تلویند سی اس اس؟

هر سه این فریمورک ها خوبن و مزایا و معایب خودشون رو دارن. بوت استرپ خیلی رایجه و کار باهاش راحته اما ممکنه ظاهر وبسایت های بوت استرپی یکم تکراری به نظر برسه. متریال یوآی ظاهر خیلی شیک و مدرنی داره و برای پروژه هایی که به زیبایی بصری اهمیت می دن عالیه. تلویند سی اس اس خیلی انعطاف پذیره و به شما کنترل کاملی روی استایل ها می ده اما ممکنه اولش یادگیریش یکم سخت تر باشه. انتخاب فریمورک بستگی به سلیقه شخصی و نیازهای پروژه شما داره. پیشنهاد می کنم هر سه رو امتحان کنید و ببینید کدوم براتون راحت تر و کاربردی تره.

۳. برای یادگیری واکنش گرایی با ری اکت از کجا شروع کنم؟

بهترین راه برای شروع یادگیری تمرین و پروژه محوریه. اول مفاهیم پایه HTML CSS و جاوااسکریپت رو یاد بگیرید. بعد با ری اکت آشنا بشید و مفاهیم اصلیش مثل کامپوننت ها JSX state و props رو یاد بگیرید. بعد شروع کنید به ساختن پروژه های کوچیک واکنش گرا. از پروژه های ساده مثل یه صفحه لندینگ واکنش گرا شروع کنید و کم کم پروژه های پیچیده تر بسازید. از منابع آنلاین مثل مستندات ری اکت آموزش های یوتیوب و وبسایت های آموزشی مثل راکت لیب و فرانت اند مسترز هم می تونید استفاده کنید. مهم تر از همه تمرین و پشتکار داشته باشید و از اشتباه کردن نترسید!