Xây Dựng Giao Diện Đẹp Mắt Với Mantine (React Roadmap)

Chào mừng bạn quay trở lại với series React Roadmap! Chặng đường của chúng ta trong việc làm chủ React đã đi qua nhiều bước quan trọng, từ việc hiểu React là gì, nắm vững Functional Components, JSX, đến quản lý dữ liệu với Props và State, xử lý sự kiện và làm việc với vòng đời Component hay sử dụng Hooks mạnh mẽ như useState, useEffect, useContext. Chúng ta cũng đã tìm hiểu về các phương pháp quản lý state phức tạp hơn và các thư viện quản lý state phổ biến.

Một khía cạnh không thể thiếu trong việc xây dựng ứng dụng web hiện đại chính là giao diện người dùng (UI). Sau khi khám phá các kỹ thuật styling cơ bản, CSS-in-JS như Styled Components và Emotion, và phương pháp Utility-First như Tailwind CSS, hôm nay chúng ta sẽ đi sâu vào một giải pháp khác vô cùng hiệu quả để xây dựng UI nhanh chóng và đẹp mắt: Mantine.

Mantine không chỉ cung cấp một bộ sưu tập các Component UI dựng sẵn mà còn là một hệ sinh thái toàn diện với Hooks, Utilities và các công cụ hỗ trợ cho việc phát triển Front-end với React. Hãy cùng tìm hiểu tại sao Mantine lại được yêu thích và làm thế nào để sử dụng nó trong dự án React của bạn nhé!

Mantine Là Gì và Vì Sao Nên Dùng?

Mantine là một thư viện Component UI React hiện đại, được thiết kế để giúp các nhà phát triển xây dựng các ứng dụng web phức tạp với tốc độ cao. Nó cung cấp hơn 100 Component React fully-featured và các Hooks tùy chỉnh, tất cả đều được viết bằng TypeScript, hỗ trợ Dark Theme ngay từ đầu và tuân thủ các tiêu chuẩn về Accessibility.

Những lý do chính khiến bạn nên cân nhắc sử dụng Mantine:

  1. Tăng tốc độ phát triển: Thay vì tự xây dựng lại các thành phần UI cơ bản như Button, Input, Modal, DatePicker, bạn có thể sử dụng các component có sẵn của Mantine, tiết kiệm đáng kể thời gian và công sức.
  2. Giao diện nhất quán và chuyên nghiệp: Các component của Mantine được thiết kế theo một ngôn ngữ thiết kế mạch lạc, đảm bảo ứng dụng của bạn có một cái nhìn và cảm giác nhất quán, chuyên nghiệp ngay từ ban đầu.
  3. Khả năng tùy chỉnh cao: Mantine cung cấp một hệ thống theme mạnh mẽ, cho phép bạn dễ dàng tùy chỉnh màu sắc, font chữ, spacing, breakpoint và nhiều thuộc tính khác để phù hợp với branding của dự án. Bạn cũng có thể ghi đè CSS cho từng component một cách linh hoạt.
  4. Hỗ trợ Accessibility (a11y): Mantine rất chú trọng đến khả năng tiếp cận. Hầu hết các component tương tác đều được xây dựng tuân thủ các tiêu chuẩn WCAG, có hỗ trợ keyboard navigation và ARIA attributes.
  5. TypeScript Out-of-the-box: Nếu bạn đang làm việc với TypeScript, Mantine là một lựa chọn tuyệt vời vì nó được xây dựng hoàn toàn bằng TypeScript, cung cấp type definitions chính xác, giúp tăng năng suất và giảm lỗi.
  6. Hệ sinh thái phong phú: Bên cạnh các component UI cốt lõi, Mantine còn cung cấp các gói tiện ích khác như @mantine/hooks (với nhiều custom hooks hữu ích), @mantine/form (quản lý form), @mantine/notifications (hệ thống thông báo), và nhiều hơn nữa.
  7. Hiệu năng tốt: Mantine được tối ưu về hiệu năng, đảm bảo ứng dụng của bạn tải nhanh và phản hồi mượt mà.

Trong bối cảnh lựa chọn công cụ trong React roadmap, Mantine là một lựa chọn tuyệt vời cho tầng UI, bổ sung cho kiến thức về quản lý state và logic mà chúng ta đã học.

Bắt Đầu Với Mantine

Việc tích hợp Mantine vào dự án React hiện tại hoặc một dự án mới rất đơn giản. Dưới đây là các bước cơ bản:

1. Cài đặt

Bạn cần cài đặt các gói cần thiết. Gói cốt lõi là @mantine/core, và thông thường bạn cũng sẽ cần @emotion/react hoặc @emotion/styled (Mantine sử dụng Emotion để xử lý styling nội bộ, nhưng bạn không nhất thiết phải tương tác trực tiếp với Emotion nếu không muốn).

npm install @mantine/core @emotion/react
# hoặc
yarn add @mantine/core @emotion/react

Đối với các gói tiện ích khác như hooks, form, v.v., bạn sẽ cài đặt riêng khi cần:

npm install @mantine/hooks @mantine/form
# hoặc
yarn add @mantine/hooks @mantine/form

2. Thiết lập MantineProvider

Để Mantine hoạt động, bạn cần bọc ứng dụng của mình bằng MantineProvider. Component này cung cấp theme context và các thiết lập styling mặc định cho tất cả các component Mantine con.

Thông thường, bạn sẽ đặt nó ở cấp độ cao nhất của ứng dụng, ví dụ trong file index.js hoặc App.js:

import { MantineProvider } from '@mantine/core';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  </React.StrictMode>
);

Các props withGlobalStyles và withNormalizeCSS giúp áp dụng các style cơ bản và reset CSS mặc định của trình duyệt, đảm bảo giao diện hiển thị nhất quán trên các trình duyệt khác nhau.

3. Sử dụng các Component

Giờ đây, bạn có thể bắt đầu sử dụng các component của Mantine trong ứng dụng của mình. Chỉ cần import chúng và sử dụng như các React component thông thường.

import { Button, Text, Container } from '@mantine/core';

function MyPage() {
  return (
    <Container>
      <Text size="xl" weight={700} mt="md">
        Chào Mừng Đến Với Trang Của Tôi!
      </Text>

      <Button onClick={() => alert('Xin chào!')} mt="xl">
        Nhấn vào đây
      </Button>

      <Text color="dimmed" mt="sm">
        Đây là một đoạn văn bản nhỏ.
      </Text>
    </Container>
  );
}

Như bạn thấy, mỗi component đều có các props riêng để tùy chỉnh hành vi và giao diện. Ví dụ, <Text> có size, weight, color; <Button> có onClick và các props styling như mt (margin-top).

Các Khái Niệm Cốt Lõi Của Mantine

Component UI

Mantine cung cấp một thư viện component khổng lồ, bao gồm các thành phần cơ bản như:

  • Layout: Box, Container, Grid, SimpleGrid, Stack, Group (tương tự flexbox).
  • Inputs: TextInput, NumberInput, Select, Checkbox, Radio, DatePicker, v.v.
  • Feedback: Loader, Notification, Alert, Progress.
  • Display: Text, Title, Image, Avatar, Badge, Card.
  • Overlay: Modal, Drawer, Popover, Tooltip.
  • Và rất nhiều component phức tạp hơn như DataTable, RichTextEditor (thông qua các gói phụ).

Việc kết hợp các component này lại với nhau cho phép bạn xây dựng các cấu trúc UI phức tạp một cách dễ dàng.

Styling và Theming

Mantine sử dụng JSS (JavaScript Style Sheets) thông qua Emotion để quản lý styling. Tuy nhiên, điểm mạnh là bạn không cần phải viết JSS trực tiếp (trừ khi bạn muốn). Mantine cung cấp nhiều cách để tùy chỉnh style:

  • Props Styling: Hầu hết các component đều hỗ trợ các props styling shorthand cho margin (m, mt, mb, ml, mr, mx, my), padding (p, pt, etc.), màu sắc (color, bg), kích thước (width, height), v.v. Các giá trị này thường lấy từ theme.
  • sx Prop: Đây là prop mạnh mẽ cho phép bạn viết inline styles (dưới dạng JSS object) hoặc truyền một hàm nhận theme làm đối số để tạo style động.
  • className và CSS Modules: Bạn hoàn toàn có thể sử dụng CSS Modules hoặc các class CSS thông thường để style các component Mantine. Mantine cung cấp cách để truy cập vào các class nội bộ của component nếu cần tùy chỉnh sâu.
  • Global Styles: Sử dụng component <Global /> từ @emotion/react hoặc config trong MantineProvider để thêm các style toàn cục.
  • Custom Theme: Cách linh hoạt nhất là tùy chỉnh theme mặc định của Mantine thông qua prop theme của MantineProvider. Bạn có thể định nghĩa bảng màu, kích thước font, spacing, breakpoint, radius, shadow, v.v.

Ví dụ tùy chỉnh theme cơ bản:

import { MantineProvider, createTheme } from '@mantine/core';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const myTheme = createTheme({
  fontFamily: 'Open Sans, sans-serif',
  colors: {
    'primary': ['#f0b0a0', '#f39d8c', '#f68a78', '#f87764', '#fa6450', '#fb513c', '#fc3e28', '#fd2b14', '#fe1800', '#ff0500'],
    // Định nghĩa các màu tùy chỉnh khác
  },
  primaryColor: 'primary', // Sử dụng màu 'primary' vừa định nghĩa làm màu chính
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MantineProvider theme={myTheme} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  </React.StrictMode>
);

Mantine Hooks

Gói @mantine/hooks cung cấp rất nhiều custom hooks hữu ích, giúp giải quyết các vấn đề phổ biến trong phát triển web mà không liên quan trực tiếp đến UI. Ví dụ:

  • use-state: Một hook thay thế useState với một số tính năng bổ sung.
  • use-effect: Một hook thay thế useEffect.
  • use-interval: Quản lý các hoạt động lặp đi lặp lại theo thời gian.
  • use-timeout: Thực hiện hành động sau một khoảng thời gian chờ.
  • use-window-scroll: Lấy vị trí cuộn của cửa sổ.
  • use-mediaquery: Dò tìm trạng thái của media query CSS.
  • Và hàng chục hooks khác cho clipboard, device motion, network status, v.v.

Việc sử dụng các hooks này giúp logic của bạn trở nên gọn gàng và dễ tái sử dụng hơn, tương tự như cách chúng ta đã học về useState và useEffect hay tạo custom hooks.

Xây Dựng Một Ví Dụ UI Đơn Giản Với Mantine

Hãy cùng xây dựng một card hiển thị thông tin người dùng đơn giản sử dụng các component của Mantine.

import { Card, Image, Text, Badge, Button, Group } from '@mantine/core';

function UserCard({ user }) {
  return (
    <Card shadow="sm" padding="lg" radius="md" withBorder>
      <Card.Section>
        <Image
          src={user.imageUrl || 'https://images.unsplash.com/photo-1488590528505-98d2f0aa7ebc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80'}
          height={160}
          alt="User image"
        />
      </Card.Section>

      <Group position="apart" mt="md" mb="xs">
        <Text weight={500}>{user.name || 'Anonymous User'}</Text>
        <Badge color="pink" variant="light">
          {user.status || 'New'}
        </Badge>
      </Group>

      <Text size="sm" color="dimmed">
        {user.bio || 'No bio available.'}
      </Text>

      <Button variant="light" color="blue" fullWidth mt="md" radius="md">
        Xem Hồ Sơ
      </Button>
    </Card>
  );
}

// Cách sử dụng trong một component cha:
function App() {
  const exampleUser = {
    name: 'John Doe',
    status: 'Active',
    bio: 'Front-end developer passionate about building beautiful and functional user interfaces.',
    imageUrl: 'https://via.placeholder.com/400x200' // Thay bằng ảnh thực
  };

  return (
    <Container size="sm">
       <UserCard user={exampleUser} />
    </Container>
  );
}

Trong ví dụ này:

  • Chúng ta sử dụng <Card> làm wrapper chính, thêm shadow, padding, radius, và withBorder thông qua props.
  • <Card.Section> được dùng để bọc ảnh, tạo các khu vực riêng biệt trong card.
  • <Image> hiển thị ảnh.
  • <Group> (flexbox) được dùng để đặt tên người dùng và badge trạng thái cạnh nhau, với position="apart" để căn đều hai bên.
  • <Text> và <Badge> hiển thị thông tin chi tiết.
  • <Button> tạo nút “Xem Hồ Sơ”, với fullWidth làm nút chiếm toàn bộ chiều rộng, và các props styling như mt (margin-top) và radius.

Việc sử dụng các component này giúp chúng ta tập trung vào cấu trúc và dữ liệu thay vì dành thời gian viết CSS cho từng thành phần.

Mantine So Với Các Thư Viện Khác

Thế giới thư viện Component UI cho React rất đa dạng. Sau khi tìm hiểu về các phương pháp styling, việc so sánh Mantine với các thư viện phổ biến khác như Material UI, Chakra UI, Ant Design sẽ giúp bạn đưa ra lựa chọn phù hợp cho dự án của mình.

Đặc điểm Mantine Material UI (MUI) Chakra UI Ant Design (AntD)
Triết lý thiết kế Hiện đại, tùy chỉnh cao, tập trung vào developer experience và accessibility. Tuân theo Material Design của Google. Tập trung vào accessibility và developer experience, dựa trên Styled System. Thiết kế doanh nghiệp (enterprise), phong phú tính năng.
Cách Styling Emotion (JSS), style props, sx prop, theme tùy chỉnh. Emotion hoặc Styled Components, style props, sx prop, theme tùy chỉnh. Styled System, style props trực tiếp, theme tùy chỉnh. Less, CSS-in-JS (Emotion/Styled), theme tùy chỉnh thông qua Less variables hoặc ConfigProvider.
Hệ sinh thái Hooks, Form, Notifications, Data Table, Rich Text Editor, v.v. Icons, Joy UI, Base UI, Data Grid, v.v. Hooks, Formik integration (third-party), v.v. Icons, DatePicker, Table, Form, Graph, v.v. (rất đầy đủ).
TypeScript Được xây dựng bằng TypeScript (native support). Hỗ trợ TypeScript tốt. Được xây dựng bằng TypeScript (native support). Hỗ trợ TypeScript tốt.
Kích thước Bundle Tương đối nhẹ, hỗ trợ tree-shaking tốt. Có thể lớn hơn tùy thuộc số lượng component sử dụng, hỗ trợ tree-shaking. Tương đối nhẹ, hỗ trợ tree-shaking tốt. Thường lớn hơn do có nhiều component và tính năng built-in.
Mức độ phổ biến & Cộng đồng Đang phát triển nhanh, cộng đồng tích cực. Rất phổ biến, cộng đồng lớn. Khá phổ biến, cộng đồng tốt. Rất phổ biến, đặc biệt ở châu Á, cộng đồng lớn.

Việc lựa chọn thư viện nào phụ thuộc vào yêu cầu cụ thể của dự án, sở thích về triết lý thiết kế, mức độ cần tùy chỉnh và kinh nghiệm của đội nhóm. Mantine nổi bật với sự hiện đại, dễ sử dụng, khả năng tùy chỉnh mạnh mẽ và hệ sinh thái Hooks phong phú, là một lựa chọn tuyệt vời cho nhiều loại ứng dụng.

Các Bước Tiếp Theo và Lời Khuyên

Sau khi đã hiểu về Mantine, bạn nên:

  1. Tham khảo tài liệu chính thức: Tài liệu của Mantine rất chi tiết và dễ hiểu. Đây là nguồn tốt nhất để tìm hiểu sâu về từng component và tính năng.
  2. Thử nghiệm các Component khác nhau: Dành thời gian khám phá thư viện component của Mantine. Hãy thử sử dụng các component như DatePicker, Modal, Tabs, Accordion để xem chúng hoạt động như thế nào.
  3. Tùy chỉnh Theme: Thực hành việc tùy chỉnh theme để Mantine phù hợp với bộ nhận diện thương hiệu của bạn.
  4. Khám phá Mantine Hooks: Tìm hiểu và áp dụng các custom hooks trong @mantine/hooks vào các bài toán thực tế trong ứng dụng của bạn. Điều này giúp bạn viết code React hiệu quả hơn.
  5. Kết hợp với các kiến thức đã học: Áp dụng các kỹ thuật Conditional Rendering, làm việc với danh sách và Key, xử lý sự kiện khi làm việc với các component tương tác của Mantine.

Kết Luận

Mantine là một công cụ mạnh mẽ và hiện đại giúp các nhà phát triển React xây dựng giao diện người dùng đẹp mắt, hiệu quả và dễ bảo trì. Với bộ sưu tập component phong phú, hệ thống theme linh hoạt, tập trung vào accessibility và Developer Experience, Mantine xứng đáng là một phần quan trọng trong bộ công cụ của bạn trên con đường trở thành nhà phát triển React chuyên nghiệp.

Việc nắm vững cách sử dụng một thư viện Component UI chất lượng cao như Mantine sẽ giúp bạn tiết kiệm rất nhiều thời gian và công sức, cho phép bạn tập trung hơn vào logic cốt lõi của ứng dụng. Hãy dành thời gian thực hành và tích hợp Mantine vào các dự án của bạn để cảm nhận sức mạnh của nó nhé!

Bài viết tiếp theo trong series React Roadmap, chúng ta có thể sẽ khám phá sâu hơn về cách làm việc với Form trong React, hoặc đi sâu vào các kỹ thuật tối ưu hiệu năng. Hãy cùng chờ đón!

Hẹn gặp lại trong bài viết tiếp theo!

Recent News Articles

Fresh job related news content posted each day.

Mục lục

→ Chỉ mục