ReactJS - Material UI：初學者的指南
你好，未來的React開發者！我很興奮能成為你進入ReactJS和Material UI世界的引路人。作為一個教了多年計算機科學的人，我可以向你保證，在這個教學結束時，你將對這些強大的工具有一個堅實的掌握。那麼，我們來開始吧！
什麼是Material UI？
在我們開始編程之前，讓我們先了解一下Material UI是什麼。想像你正在蓋房子。你可以從頭開始創造每一塊磚、每一扇門和每一扇窗，或者你可以使用預製的組件。Material UI就像一個裡面裝滿了美麗、即插即用的組件的倉庫，供你的React應用程序使用。它基於Google的Material Design，這意味著它不僅功能強大，而且外觀吸引人。
安裝
現在，讓我們動手吧！首先，我們需要安裝Material UI。如果你從未安裝過任何東西，別擔心 - 我會引導你完成每一步。
- 打開你的終端機（別害怕，這只是與你的電腦進行文字交談的方式）。
- 切換到你的專案目錄（使用
cd your-project-name）。 - 執行以下命令：
npm install @material-ui/core這個命令告訴npm（Node包管理器）為我們安裝Material UI。把它想像成請圖書管理員為你拿一本特定的書。
工作範例
現在，我們已經安裝了Material UI，讓我們創建一個簡單的範例來看看它是如何工作的。我們將創建一個帶有標題、一些文字和一個按鈕的基本頁面。
首先，在你的src目錄中創建一個名為MaterialUIExample.js的新文件。然後，複製並粘貼以下代碼：
import React from 'react';
import { Button, Typography, AppBar, Toolbar } from '@material-ui/core';
function MaterialUIExample() {
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">
我的第一个Material UI應用
</Typography>
</Toolbar>
</AppBar>
<Typography variant="body1" style={{ margin: '20px' }}>
欢迎来到我的Material UI範例！
</Typography>
<Button variant="contained" color="primary" style={{ margin: '20px' }}>
點我！
</Button>
</div>
);
}
export default MaterialUIExample;現在，讓我們來解析一下：
-
我們從Material UI導入所需的組件。這就像告訴React我們需要從工具箱中拿哪些工具。
-
我們創建一個名為
MaterialUIExample的函數。在React中，組件只是返回JSX（一種看起來像HTML的特殊語法）的函數。 -
在我們的函數中，我們返回一些JSX：
-
<AppBar>創建一個頂部導航欄。 -
<Typography>用於顯示文字。我們用它來顯示標題文字和正文字。 -
<Button>創建一個可點擊的按鈕。
-
我們使用
style屬性添加一些內聯樣式。這就像直接將CSS添加到我們的元素中。 -
最後，我們導出我們的組件，這樣我們就可以在應用的其他部分使用它。
要讓它發揮作用，你需要將此組件導入並在你的主App.js文件中使用：
import React from 'react';
import MaterialUIExample from './MaterialUIExample';
function App() {
return (
<div>
<MaterialUIExample />
</div>
);
}
export default App;Voila！你现在应该能看到一个带有标题、文本和按钮的页面，所有这些都用Material UI进行了样式设置。
Material UI組件
Material UI提供了範圍廣泛的組件。以下是一些常見的組件表格：
| 組件 | 描述 |
|---|---|
| Button | 创建可点击的按钮 |
| Typography | 用于显示文本 |
| AppBar | 创建顶部导航栏 |
| TextField | 用于文本输入 |
| Card | 创建内容容器 |
| Grid | 用于响应式布局 |
| Icon | 显示图标 |
| Menu | 创建下拉菜单 |
| Dialog | 用于模态对话框 |
| Snackbar | 用于简短通知 |
这些组件中的每一个都可以根据你的需要进行自定义。例如，你可以这样改变一个Button的颜色：
<Button color="secondary" variant="contained">
次要颜色按钮
</Button>或者改变Typography的大小：
<Typography variant="h1">
这是一个非常大的标题
</Typography>结论
恭喜你！你已经迈出了进入React世界的Material UI的第一步。我们涵盖了安装、创建了一个工作示例，并探索了一些可用的组件。
记住，学习编码就像学习一门新语言。它需要时间和练习，但随着你编写的每一行代码，你都在变得更好。不要害怕实验、犯错误，最重要的是，享受乐趣！
在我多年的教学过程中，我见证了无数学生从完全的初学者成长为自信的开发者。你现在就在同样的道路上。继续编码，继续学习，不久之后，你将能够使用Material UI创建惊人的React应用程序。
快乐编码，下次课程见！
Credits: Image by storyset