Bắt đầu
#người mới bắt đầu#hướng dẫn#phản ứng#vật liệuui
Nếu bạn tò mò về Material UI (MUI) , không biết bắt đầu từ đâu và đang tìm kiếm hướng dẫn ngắn gọn để thiết lập các thành phần MUI bằng React. Hướng dẫn này dành cho bạn.
Material UI là gì?
Một thư viện UI phổ biến cho phép các nhà phát triển tái sử dụng các thành phần được thiết kế tốt từ Material Design , một hệ thống thiết kế thực hành tốt nhất cho phát triển front-end. MUI hoạt động tốt với React và cung cấp các thành phần tương tác để thiết kế giao diện người dùng phản hồi.
MUI có tài liệu tuyệt vời
Tài liệu Material UI cung cấp rất nhiều thông tin về nhiều thành phần, từ nút đơn giản đến menu điều hướng, tab, bảng, thanh trượt, v.v. Bạn chỉ cần nêu tên, Material UI sẽ có thành phần phù hợp với nhu cầu của bạn. Tài liệu API thành phần MUI chứa đầy đủ thông tin tuyệt vời về thuộc tính của từng thành phần, mô tả về thuộc tính cùng các giá trị mặc định, quy tắc CSS, bản demo và ví dụ về mã.
Bắt đầu nhanh chóng với React & Material UI
1- Trước tiên, hãy thiết lập trong React. Nếu bạn đã có một dự án React sẵn sàng và đang chờ, bạn có thể bỏ qua phần "Sử dụng các thành phần MUI". Nếu không, trong terminal của bạn, hãy tạo một thư mục mới với các lệnh git: mkdir và bất kỳ lệnh nào bạn muốn thư mục ứng dụng của mình được gọi. Tôi đang gọi thư mục của mình: material-ui-app
mkdir material-ui-app
2- Mở dự án của bạn trong VScode hoặc bất kỳ môi trường phát triển cục bộ nào bạn đang sử dụng. Trong terminal LDE của bạn, bạn có thể nhanh chóng khởi động một dự án mới trong react bằng lệnh git:
npx create-react app
3- Bắt đầu máy chủ phát triển với
npm start
4- Sau đó đóng gói ứng dụng thành các tệp tĩnh để sản xuất với
npm run build
React là một bài viết (nhiều bài viết) cho lần khác. Bây giờ, chúng ta sẽ sử dụng nó ngay khi cài đặt và chuyển sang cài đặt những gì chúng ta cần để bắt đầu sử dụng các thành phần Material UI.
Sử dụng các thành phần MUI
Bước đầu tiên, hãy thêm thư viện Material UI làm phụ thuộc vào React Project của chúng ta và điều này sẽ thiết lập cho chúng ta mọi thứ cần thiết để bắt đầu nhập các thành phần. Trong thiết bị đầu cuối LDE của bạn, hãy nhập:
npm i —save @material-ui/core
Hãy chuyển sang tệp App.js và đảm bảo tệp ban đầu của bạn trông tương tự như thế này:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App"></div>
);
}
export default App;
Chúng ta sẽ bắt đầu với những điều cơ bản. Trong tệp App.js của chúng ta , hãy nhập một thành phần Typography. Chúng ta sẽ cần nhập thành phần đã giải cấu trúc trực tiếp từ Thư viện MUI và thêm <Typography>các thẻ trực tiếp vào App của chúng ta <div>. Đọc thêm qua tài liệu API Typography . Như bạn có thể thấy, chúng ta sẽ thêm một thành phần switch sau này, vì vậy tôi sẽ nhập "Here's Our Switch" làm văn bản giữa các <Typography>thẻ thành phần.
import React from 'react';
import { Typography } from '@material-ui/core';
import './App.css';
function App() {
};
return (
<div className="App">
<Typography>
Here's Our Switch
</Typography>
</div>
);
}
export default App;
Hãy tùy chỉnh Type của chúng ta:
Chúng ta sẽ sử dụng các thuộc tính MUI tích hợp là align, color và variant.
căn chỉnh
prop này đi kèm với các giá trị kiểu: 'trái', 'giữa', 'phải' và 'căn chỉnh'
Biến
thể này sử dụng các giá trị kiểu của thẻ html chuẩn: h1 đến h6, và body1, caption, v.v.
color
prop này có các giá trị 'inherit', 'primary', secondary' v.v.
Màu của mỗi thành phần được hỗ trợ bởi các chủ đề MUI. Mỗi color prop được tự động điều chỉnh theo mặc định cho mỗi thành phần.
Trong ví dụ của chúng tôi, tôi sẽ sử dụng: align="center" color="primary" variant="h2", nhưng bạn có thể thoải mái chọn những giá trị mà bạn thích nhất.
import React from 'react';
import { Typography } from '@material-ui/core';
import './App.css';
function App() {
return (
<div className="App">
<Typography align="center" color="primary" variant="h2">
Here's Our Switch
</Typography>
</div>
);
}
export default App;
Vậy bạn có thể hỏi... Màu sắc đến từ đâu? Và tôi có thể thay đổi nó không? Điều này đưa chúng ta đến phần thú vị. Chủ đề!
Chủ đề MUI
Có rất nhiều tài liệu tuyệt vời về chủ đề của từng thành phần.
Chủ đề có thể tùy chỉnh. Tôi khuyên bạn nên tìm hiểu sâu về đối tượng chủ đề mặc định. Tìm thấy ở đây: https://v4.mui.com/customization/default-theme/#default-theme ,
Đây là nơi tất cả các giá trị mặc định của chúng tôi đến từ đó và đây là cách chúng tôi sẽ truy cập vào từng thuộc tính mà chúng tôi sẽ tùy chỉnh. Chủ đề mặc định ở đây để giúp chúng tôi giữ cho tất cả các kiểu nhất quán, một phương pháp hay nhất của UI.
Hãy cùng tạo chủ đề của riêng mình:
Bạn sẽ muốn tạo một tệp js mới có tên là theme.js . Bạn có thể làm nhiều việc với đối tượng theme, nhưng để đơn giản, chúng ta sẽ tập trung vào việc tùy chỉnh màu chính và màu phụ.
Tôi đã thêm mã HEX tùy chỉnh vào đối tượng chính và đối tượng phụ. Bạn có thể thoải mái chọn màu của riêng mình. Nếu bạn không tự tin về việc chọn bảng màu, coolors.co là nơi tuyệt vời để giúp tạo ý tưởng/kết hợp màu tuyệt vời.
Dưới đây là ví dụ về tệp theme.js của tôi.
import { createTheme } from '@material-ui/core/styles';
const theme = createTheme({
palette: {
primary: {
light: '#b4d6e4',
main: '#09BC8A',
dark: '#004346',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
},
});
export default theme;
Trong index.js, chúng ta cần import ThemeProvider và file theme.js như sau:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ThemeProvider } from '@material-ui/core';
import theme from './theme'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</React.StrictMode>
);
Được rồi, quay lại tệp App.js. Hãy thêm một thành phần switch chỉ để vui thôi. Một lần nữa, chỉ cần quay lại tùy chọn thành phần MUI. Chọn loại switch bạn muốn thêm vào ứng dụng React của mình. Sử dụng mã thành phần của chúng và voila. Như bạn thấy, switch của bạn cũng sẽ kế thừa theme/color tùy chỉnh mà chúng ta đã tạo trước đó.
import React from 'react';
import Switch from '@material-ui/core/Switch';
import { Typography } from '@material-ui/core';
import './App.css';
function App() {
const [state, setState] = React.useState({
checkedA: true,
checkedB: true,
});
const handleChange = (event) => {
setState({ ...state, [event.target.name]: event.target.checked });
};
return (
<div className="App">
<Typography align="center" color="primary" variant="h2">
Here's Our Switch
</Typography>
<Switch
checked={state.checkedB}
onChange={handleChange}
color="primary"
name="checkedB"
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
</div>
);
}
export default App;
Và đây là loại và công tắc của chúng ta.
Kết luận
Và đây là các thành phần Material UI tùy chỉnh đầu tiên của bạn. Cảm ơn bạn đã đọc.
Dưới đây là một số Tài nguyên miễn phí thông qua trang bắt đầu của MUI.
Giới thiệu về Material-UI : một loạt video bao gồm tất cả các thành phần quan trọng của Material-UI.
- 📹 Các video
Tùy chỉnh Material-UI cho dự án của bạn : một cái nhìn về cách bạn có thể tùy chỉnh Material-UI để phù hợp với bản sắc công ty (hệ thống thiết kế) và sản phẩm của bạn - 📹 Các video
Làm quen với Material-UI — thư viện giao diện người dùng yêu thích mới của bạn : một bài đăng trên blog hướng dẫn bạn xây dựng Todo MVC trong khi đề cập đến một số khái niệm quan trọng của Material-UI. - 📝 Bài đăng trên blog
Tìm hiểu React & Material-UI : một loạt video bao gồm tất cả các thành phần quan trọng của Material-UI. - 📹 Các video
Bắt đầu với Material-UI cho React : một bài đăng trên blog hướng dẫn bạn xây dựng danh sách thẻ đơn giản. - 📝 Bài đăng trên blog
- 📹 Video
UX thanh lịch trong React với Material-UI : một bài đăng trên blog bao gồm một số khái niệm quan trọng của Material-UI. - 📝 Bài đăng trên blog
Source: https://dev.to/janvierjr/a-quick-start-into-material-ui-30ba