Long journey to master React.js starts
React

Long journey to master React.js starts

漫漫前端路......

旧版博客里草草的过了一遍React，说来惭愧，其实就没有好好学，所以根基不稳。写完之前的前后端不分离的项目之后，还是打算好好折腾一下前后端分离。所以，这次就慢慢来看React和它的伙伴们啦。

经过对比UI库，发现要学那还得学历久弥新的Material-UI，所以也没什么好说的，慢慢搞起。

环境配置

全局安装create-react-app是必然的。之后使用其创建一个React项目。之后把App.js清空，去掉index.css和App.css以及那些图标的引用，一个干净的React项目就准备好了。

安装MUI模块

按照Installation的指引，安装如下的MUI模块：

npm install @mui/material @emotion/react @emotion/styled

字体链接

Material-UI需要Roboto字体，国内有个字体代理，只需要把

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

中的googleapis.com替换成loli.net就可以了，所以在index.html中添加下边这行：

<link
    rel="stylesheet"
    href="https://fonts.loli.net/css?family=Roboto:300,400,500,700&display=swap"
/>

使用图标

图标有两种使用方式，我研究了一下才学会。

直接引入Google Fonts的链接

这种方法，只需要把下边这行加入index.html：

<link
  rel="stylesheet"
  href="https://fonts.loli.net/icon?family=Material+Icons"
/>

然后在实际使用图标的时候，到https://fonts.google.com/icons这个页面，点上边的Filled，之后点击想要的图标，看右侧出来的比如：

<span class="material-icons">home</span>

把这段代码贴到项目里，就能显示出对应的图标。
用此种方式，我没找到如何能引用其他种类的图标，就是页面里除了Filled之外的Outlined等类型的图标。

使用MUI提供的图标库

MUI已经预先把这套图标弄好了SVG版本，可以通过库导入然后来使用。
使用的方法是先通过npm安装：

npm install @mui/icons-material

之后在图标库中查找想要使用的图标，有五种主题可供选择，选好主题之后点击具体图标，就会显示出该图标的组件代码，复制到项目中即可使用。

举个例子，AccountBalanceWalletIcon这个图标的五种样式代码，写在组件里：

import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined';
import AccountBalanceWalletRoundedIcon from '@mui/icons-material/AccountBalanceWalletRounded';
import AccountBalanceWalletTwoToneIcon from '@mui/icons-material/AccountBalanceWalletTwoTone';
import AccountBalanceWalletSharpIcon from '@mui/icons-material/AccountBalanceWalletSharp';

const styleBottom = {"verticalAlign": "bottom"};

function App() {
  return (
    <div>
      <ul>
        <li >Filled: <AccountBalanceWalletIcon  color="primary" fontSize="small" style={styleBottom}/></li>
        <li>Outlined: <AccountBalanceWalletOutlinedIcon color="secondary" style={styleBottom}/></li>
        <li>Rounded: <AccountBalanceWalletRoundedIcon color="success" fontSize="large" style={styleBottom}/></li>
        <li>TwoTone: <AccountBalanceWalletTwoToneIcon color="action" style={styleBottom}/></li>
        <li>Sharp: <AccountBalanceWalletSharpIcon color="disabled" sx={{fontSize:40}} style={styleBottom}/></li>
      </ul>
   </div>
  );
}

export default App;

五种样式都可以使用，然后可以自定义大小，颜色和其他样式，使用起来非常方便。

推荐采用图标库的方式引入字体，而且采用此种方式引入后，由于是webpack负责打包，所以不需要在index.html中加入对于Google Fonts的link标签了。

普通图标的API在这里，有了API就知道可以给图标组件传递什么props了。既然有了这套图标就可以专心用了，图标页面里也说了和其他图标库搭配使用的一些问题。

CDN安装MUI

如果不采用脚手架，而是直接使用的话，那么React和MUI都要通过CDN引入，那么引入的模板如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
	......
    </script>
  </body>
</html>

既然有了脚手架，不推荐此种方法。MUI官方提供了一个示例可以进行参考。

写一个简单的登录页面

React的基本功能已经学会了，既然要搭配MUI一起，就慢慢研究一下各个组件。先写一个简单的居中登录页面练练手吧。

Container组件

居中登录页面的话，肯定是要使用flex了，让所有的元素水平和垂直都居中。

不管什么样的页面，最外层先来一个Container组件，这个组件的最大宽度就设置为xs，本身就足够居中了。

flex组件

MUI并没有提供flex组件，需要自己写。一般来说，在Container里边用一个Box组件就可以了，这个和Bootstrap的套路很相似。但是要手动通过sx属性来添加flex属性，这个组件如下：

<Box sx={{display: "flex", flexDirection: "column",height:"100vh",justifyContent: "center"}}>

</Box>

由于这里更改了主轴为列对齐，所以要使用justifyContent: "center"属性，因为还是主轴上居中，这样Box组件中的内容就会在页面居中对齐了。

剩下的组件

由于还没有具体学如何使用，但是可以依样画葫芦抄MUI的用法，抄了几个东西写在Box的组件内部，如下：

<Box sx={{display: "flex", flexDirection: "column", height: "100vh", justifyContent: "center"}}>
    <Typography align="center">
        <AccountCircleOutlinedIcon color="primary" fontSize="large"/>
    </Typography>
    <Typography align="center" variant="h6">请登录</Typography>
    <Box sx={{textAlign: "center"}}>
        <TextField fullWidth
                   id="outlined-password-input"
                   label="Username"
                   type="text"
                   autoComplete="current-password"
        />
    </Box>
    <Box sx={{textAlign: "center", marginTop: "16px"}}>
        <TextField fullWidth
                   id="outlined-password-input"
                   label="Password"
                   type="password"
                   autoComplete="current-password"
        />
    </Box>

    <Box sx={{textAlign: "center", marginTop: "16px"}}>
        <Button fullWidth variant="contained">Login</Button>
    </Box>
</Box>

这样这个简单的登录页面就写好了，其他加上Remember Me或者忘记密码等东西的效果，也是很简单的。实际上，由于人眼的效果，垂直居中的东西整体上显得往下沉，所以实际操作中，还是采取列排列，但是会把上边留白，不会直接使用justifyContent: "center"。

CssBaseline组件

MUI提供了一个重置CSS样式的组件CssBaseline，一般是包裹在最外层的组件之外，起到的作用和normalize.css等库是一样的。所以只要把这个东西包在最外层，或者作为Container组件的子元素即可。

LICENSED UNDER CC BY-NC-SA 4.0
Comment