ReactJS - Material UI: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn future React developers! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị vào thế giới của ReactJS và Material UI. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể đảm bảo với các bạn rằng vào cuối bài hướng dẫn này, các bạn sẽ có một hiểu biết vững chắc về những công cụ mạnh mẽ này. Hãy cùng bắt đầu nhé!

Material UI là gì?

Trước khi chúng ta bắt đầu lập mã, hãy hiểu Material UI là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bạn có thể tự tạo từng viên gạch, cửa, và cửa sổ từ đầu, hoặc bạn có thể sử dụng các thành phần đã sẵn có. Material UI giống như một nhà kho đầy các thành phần đẹp mắt và sẵn sàng sử dụng cho các ứng dụng React của bạn. Nó dựa trên Google's Material Design, có nghĩa là nó không chỉ chức năng mà còn đẹp về mặt thẩm mỹ.

Cài đặt

Bây giờ, hãy làm việc thực tế! Đầu tiên, chúng ta cần cài đặt Material UI. Đừng lo lắng nếu bạn chưa từng cài đặt bất cứ thứ gì trước đây - tôi sẽ hướng dẫn bạn từng bước.

1. Mở terminal (đừng sợ, nó chỉ là một cách văn bản để giao tiếp với máy tính của bạn).
2. Đi tới thư mục dự án của bạn (sử dụng cd your-project-name).
3. Chạy lệnh sau:

npm install @material-ui/core

Lệnh này yêu cầu npm (Node Package Manager) cài đặt Material UI cho chúng ta. Hãy tưởng tượng như bạn đang nhờ một thủ thư mang đến cho bạn một quyển sách cụ thể.

Ví dụ làm việc

Bây giờ chúng ta đã cài đặt Material UI, hãy tạo một ví dụ đơn giản để xem nó hoạt động như thế nào. Chúng ta sẽ tạo một trang cơ bản với một tiêu đề, một đoạn văn bản, và một nút.

Đầu tiên, tạo một tệp mới叫做 MaterialUIExample.js trong thư mục src. Sau đó, sao chép và dán mã sau:

import React from 'react';
import { Button, Typography, AppBar, Toolbar } from '@material-ui/core';

function MaterialUIExample() {
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">
Ứng dụng Material UI đầu tiên của tôi
</Typography>
</Toolbar>
</AppBar>
<Typography variant="body1" style={{ margin: '20px' }}>
Chào mừng bạn đến với ví dụ Material UI của tôi!
</Typography>
<Button variant="contained" color="primary" style={{ margin: '20px' }}>
Nhấn vào tôi!
</Button>
</div>
);
}

export default MaterialUIExample;

Bây giờ, hãy phân tích mã này:

1. Chúng ta import các thành phần cần thiết từ Material UI. Điều này giống như告诉 React những công cụ nào chúng ta cần từ hộp công cụ của mình.

2. Chúng ta tạo một hàm叫做 MaterialUIExample. Trong React, các thành phần chỉ là các hàm trả về JSX (một cú pháp đặc biệt trông giống HTML).

3. Trong hàm của chúng ta, chúng ta trả về một số JSX:

• <AppBar> tạo một thanh điều hướng ở trên cùng.
• <Typography> được sử dụng để hiển thị văn bản. Chúng ta sử dụng nó cho cả văn bản tiêu đề và văn bản thân.
• <Button> tạo một nút có thể nhấn.

4. Chúng ta thêm một chút phong cách inline bằng cách sử dụng thuộc tính style. Điều này giống như thêm một chút CSS trực tiếp vào các phần tử của chúng ta.

5. Cuối cùng, chúng ta xuất thành phần của chúng ta để có thể sử dụng nó trong các phần khác của ứng dụng.

Để xem mã này hoạt động, bạn cần import và sử dụng thành phần này trong tệp chính App.js của bạn:

import React from 'react';
import MaterialUIExample from './MaterialUIExample';

function App() {
return (
<div>
<MaterialUIExample />
</div>
);
}

export default App;

Và voilà! Bạn bây giờ nên thấy một trang với một tiêu đề, một đoạn văn bản, và một nút, tất cả đều được thiết kế với Material UI.

Các thành phần của Material UI

Material UI cung cấp một loạt các thành phần. Dưới đây là bảng một số thành phần thường được sử dụng:

Thành phần	Mô tả
Button	Tạo các nút có thể nhấn
Typography	Để hiển thị văn bản
AppBar	Tạo một thanh điều hướng ở trên cùng
TextField	Để nhập văn bản
Card	Tạo một hộp chứa nội dung
Grid	Để tạo các bố cục响应
Icon	Hiển thị các biểu tượng
Menu	Tạo các menu thả xuống
Dialog	Để tạo các hộp thoại modal
Snackbar	Để tạo các thông báo ngắn

Mỗi thành phần này có thể được tùy chỉnh để phù hợp với nhu cầu của bạn. Ví dụ, bạn có thể thay đổi màu sắc của một nút như sau:

<Button color="secondary" variant="contained">
Nút màu thứ cấp
</Button>

Or thay đổi kích thước của Typography:

<Typography variant="h1">
Đây là một tiêu đề rất lớn
</Typography>

Kết luận

Chúc mừng! Bạn đã迈出了进入React和Material UI世界的第一步。我们已经涵盖了安装、创建了一个工作示例，并探索了一些可用的组件。

请记住，学习编码就像学习一门新语言。它需要时间和练习，但随着你编写的每一行代码，你都在变得更好。不要害怕尝试，犯错误，最重要的是，享受乐趣！

在我多年的教学过程中，我看到了无数学生从完全的新手变成了自信的开发者。你现在就在同样的道路上。继续编码，继续学习，很快，你将能够使用Material UI创建令人惊叹的React应用程序。

快乐编码，下节课见！

Credits: Image by storyset