Việc làm ra một trang web có độ tương thích cao trên nhiều thiết bị là một điều không còn xa lạ với mỗi lập trình viên hiện nay. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về cách thiết kế một website responsive (đáp ứng) sử dụng ReactJS. 

>>> Xem thêm bài viết trong chuỗi bài về ReactJS tại đây:

1. Tại sao cần thiết kế ứng dụng website responsive?

Các thiết kế website responsive là một phần quan trọng để đảm bảo rằng website của chúng ta có thể hiển thị một cách tốt và chính xác nhất trên mọi loại thiết bị của người dùng, nó trải dài từ máy tính, máy tính bảng hay thông dụng hơn đó là điện thoại di động. Điều này sẽ đảm bảo người dùng luôn có một trải nghiệm tốt nhất mà không cần quan tâm đến thiết bị mà mình đang sử dụng để truy cập là gì.

2. Sử dụng Media Queries trong ReactJS

Chắc hẳn chúng ta đã rất quen thuộc với Media Queries, nó giúp chúng ta xác định và thay đổi kiểu dáng (CSS) theo các điều kiện được định nghĩa bởi các lập trình viên như kích thước màn hình, tỷ lệ khung hình và nhiều yếu tố khác nữa. 

Đương nhiên trong ReactJS chúng ta cũng có thể dùng Media Queries để có thể điều chỉnh giao diện theo từng loại thiết bị tương ứng. Sau đây sẽ là một ví dụ nhỏ về cách sử dụng Media Queries trong ReactJS:

/* Ví dụ sử dụng Media Query */
@media only screen and (max-width: 600px) {
  /* Styles cho màn hình có độ rộng tối đa 600px */
  .mobile-view {
    display: block;
  }
  .desktop-view {
    display: none;
  }
}
@media only screen and (min-width: 601px) {
  /* Styles cho màn hình có độ rộng lớn hơn 600px */
  .mobile-view {
    display: none;
  }
  .desktop-view {
    display: block;
  }
}

>>>>> Xem thêm bài viết tương tự tại đây: 

3. Sử dụng ReactJS Components

Như đã nói ở bài “Component trong ReactJS”, với React, chúng ta có thể tạo ra các component và sau đó sử dụng lại chúng khi cần thiết. Tương tự như vậy, chúng ta cũng có thể tạo ra các thành phần riêng biệt cho từng kích thước màn hình sau đó tái sử dụng nó trên các thiết bị để tạo ra một ứng dụng web ReactJS đảm bảo độ tương thích với từng thiết bị.

import React from 'react';
const Header = () => {
  return (
    <div>
      <h1>My Responsive App</h1>
      {/* Sử dụng MobileMenu nếu đang ở trên điện thoại di động */}
      <MobileMenu />
      {/* Sử dụng DesktopMenu nếu đang ở trên máy tính */}
      <DesktopMenu />
    </div>
  );
};
const MobileMenu = () => {
  return (
    <div className="mobile-menu">
      {/* Các menu dành cho điện thoại di động */}
      <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
      </ul>
    </div>
  );
};
const DesktopMenu = () => {
  return (
    <div className="desktop-menu">
      {/* Các menu dành cho máy tính */}
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </div>
  );
};
export default Header;

Kết hợp với CSS chúng ta sẽ có được kết quả mong muốn:

/* Hiển thị chỉ khi đang ở trên điện thoại di động (max-width: 600px) */
@media only screen and (max-width: 600px) {
  .desktop-menu {
    display: none;
  }
}
/* Hiển thị chỉ khi đang ở trên máy tính (min-width: 601px) */
@media only screen and (min-width: 601px) {
  .mobile-menu {
    display: none;
  }
}

4. Grid System trong ReactJS

Cũng với một kỹ thuật CSS khác đó là Grid System (Hệ thống lưới), nó có thể giúp chúng ta điều chỉnh các thành phần của ứng dụng web xếp chồng lên nhau trên các thiết bị khác.

/* Ví dụ về Grid System */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

5. Xử lý sự kiện của thiết bị

Trong ReactJS, chúng ta có thể kiểm tra xem người dùng đang truy cập từ loại thiết bị nào để từ đó quyết định rằng sẽ xử lý các sự kiện như thế nào là hợp lý nhất trong mỗi trường hợp. Sau đây sẽ là một ví dụ khi mà ta có thể điều chỉnh hành vi của website phù hợp với việc người dùng sử dụng trên một thiết bị có cảm ứng hay không:

const handleClick = (event) => {
  if (event.touches.length === 1) {
    // Xử lý sự kiện cảm ứng
  } else {
    // Xử lý sự kiện chuột
  }
};
const MyComponent = () => {
  return <div onClick={handleClick}>Click me</div>;
};

Kết luận

Như đã nói ở trên, bằng cách kết hợp Media Queries, ReactJS Components, Grid System và các chiến lược khác trong ReactJS, chúng ta hoàn toàn có thể dễ dàng tạo ra một ứng dụng web responsive từ đó tạo ra trải nghiệm người dùng tốt và hiệu suất ổn định hơn. Mong rằng với bài này các bạn có thể đáp ứng được những kiến thức này vào dự án của mình để đạt được sự linh hoạt và chất lượng cao trong phát triển ứng dụng của mình!

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: 

Banner bottom