Share Thiết kế ứng dụng web chuyên nghiệp với React UI framework Material-UI

[filiallion]

Language

Tiếng Việt

Hiện nay, React đang là xu hướng trong lĩnh vực phát triển ứng dụng web với nhiều ứng dụng được xây dựng và phát triển. Như các bạn đã biết, React là một UI framework được xây dựng trên nền tảng JavaScript và được phát triển bởi Facebook nên về chất lượng các bạn hoàn toàn có thể tin tưởng. Bản thân React là một UI framework nhưng nó lại không cung cấp bất kỳ giao diện mẫu nào, tất cả các bạn phải tự thiết kế. Vì vậy, khi React ra đời thì cũng có nhiều nhà phát triển đã xây dựng ra các mẫu giao diện cho React và một trong số đó phải kể đến là Material-UI.

Material-UI là một React UI framework theo phong cách material của Google với giao diện đẹp mắt, hiện đại và chuyên nghiệp. Nếu các bạn đã sử dụng qua hệ điều hành Android trên di động thì chắc chắn các bạn sẽ cảm thấy quen thuộc với phong cách của Material-UI. Thư viện Material-UI cung cấp rất nhiều thành phần để thiết kế một ứng dụng web hoàn chỉnh từ các Button, Card, App Bar, Menus,... cho đến các thành phần đặc biệt như Paper, Autocomplete,...

Để sử dụng thư viện Material-UI trong ứng dụng React, các bạn cài đặt với dòng mã lệnh NPM như sau:

npm install @material-ui/core

Sau đó, các bạn nạp các thành phần của gói thư viện vào ứng dụng như ví dụ sau:

import Button from '@material-ui/core/Button';

Bây giờ, các bạn render thành phần Button như ví dụ sau:

<Button variant="contained" color="primary">Primary</Button>

Trên đây chỉ là một ví dụ đơn giản với thành phần Button của thư viện Material-UI, các bạn có thể tìm hiểu thêm tại địa chỉ https://material-ui.com.