Material-UI+TypeScript+React的学习 第一章

Material-UI学习 第一章

认识Material-UI

世界上最受欢迎的 React UI 框架。

Material-UI是Material Design的一种实现。

什么是Material Design？

Material Design是由Google开发的设计语言 。扩展于[Google即时](https://zh.m.wi(ipg-Bo时)的“卡片”设计，材质设计基于网格的布局、响应动画与过渡、填充、深度效果（如光线和阴影）。

​ 可以看到，设计的老漂亮了！（谁敢反对Google我就打爆他的狗头）。使用React+Material-UI可以在移动端构建PWA应用，并使用户获得沉浸式体验。而且Material在PC端的表现也甚是亮眼。

​ Material规定了相当多的组件实现，使用它们可以随心所欲的构建想要的效果。

Material-UI与其他UI框架

​ 做出选择总是令人痛苦的，但我们不得不深刻剖析各个框架优缺点，并比较它们在不同场景下的视觉效果、性能等参数。

Ant-Design

​ 国内热门的设计语言，由蚂蚁金服出品。Ant-Design在设计上属于中规中矩，没有在外观设计上让人眼前一亮的感觉，但是也不能说是朴素。

​
​ 这与Ant的服务对象有关，Ant主要是为了构建大型企业级后台页面的，这类页面通常需要展示渲染大量的交互信息。对于大屏PC端来说，足够吸引眼球的设计反而会让人无法专心于自己的操作。而且Ant对于自定义组件也不够友好，就像我们无法使用它的设计习惯定制input，也许你不是很明白，但是，如果你使用过Material你就会明白。

​ 但是，我们也要说明它的优点。当然，国人最懂国人，Ant的文档齐全，组件demo完善，甚至你自己都不用怎么改动，拿过来就能用。所以使用Ant开发效率也是很快的。

Bootstrap

​ 作为UI界的老牌选手，实力是有目共睹的，启发性的开创了许多广为流传的布局、设计方法。对于这个老英雄，我实在不想鸡蛋里挑骨头，它确实是伟大的、开创性的。

​ 如果，真的要挑刺，那我的愚见是，BT它太广泛了，我们能在任何地方看见它，所以总会有一些审美疲劳。

Material

​ Material是谷歌主导的设计语言，Google开发，大家都比较放心，从各个组件的设计上来看，确实是Google的设计风格，能从代码后面看到一群人不断地对一个组件进行review。不断地解耦，终于我们可以使用Material构建我们各种自定义风格的样式。

​ 新版本的Material也加入了许多先进的功能，比如JSS、React Hook等功能。这些功能让Material变得更好的同时，也带来了大量的开发难题。

​ 如果，你使用Ant，在开发一个自定义表单时遇到问题，那么你只要打开文档，在Form组件就可以找到完美的解决方法，但是在Material中，问题可能分散在各个位置，这与Material设计哲学有关，因为它就是在不断解耦，不断细分组件，出现一些问题，我们无法准确、快速的定位。

​ 让我对Material文档的形容就是一本工具书，你在里面可以找到任何组件的使用方法，但是却学习不到Material的设计思想、规范，但你可以找到它们，它们就藏在文档中，但是在主线上看不到它们的身影。

​ 官方也说了，新手与其看文档不如直接看YouTube上面的视频上手更快。

---

开始学习

越难啃的骨头越香，身为优秀脑瘫的开发者，我一定要踩一踩这个坑。

前置知识

• React
• TypeScript它是JavaScript的超集。如果以前接触过Java、C++，那么你不需要直接去学，我们在学习中会详细介绍的。
• CSS3

环境准备

• Node.JS 我这用的是v12.8.1
  • 下载
• create-react-app
  • 我们不需要去下载它，因为我们可以直接npx使用它。
  • 首先，我们先把npm的源给换成阿里的
  • npm config set registry https://registry.npm.taobao.org
• 一个好用的编译器VScode
• 一个先进的浏览器Chrome

创建项目

在工作空间下，使用create-react-app创建TypeScript项目

npx create-react-app learn-material --typescript
cd learn-material
npm start

上面命令，运行完毕后会直接在我们浏览器打开localhost:3000url的react项目。

删除多余文件

记住，我们要删除learn-material/scr里面的所有文件。

千万别在根目录执行下面命令。

如果你不了解命令行，那么你可以手动删除src文件夹下面的所有文件。

cd src
rm  *

创建自己文件

在scr路径下，创建index.tsx、App.tsx。

// index.tsx
import {render} from 'react-dom'
import {App} from './App'
import React from 'react'
const el=document.querySelector("#root")
render(<App />,el)

// App.tsx
import React from 'react'
const App:React.FunctionComponent = () =>{
    return <>
    	Hello World!
        </>
}
export default App;

Ok,现在运行我们的项目，你会在浏览器看到Hello World!字样。

安装Material-UI

npm install @material-ui/core -S
npm install @material-ui/icons -S

因为，ui肯定要用在生产环境，所以我们用-S选项安装。

第一行安装core库，这是必须的。

第二行安装SVG图标支持，这不是必须的。

使用

修改我们的App.tsx文件

// App.tsx
import React from 'react'
import {Card,Typography} from '@material-ui/core'
const App:React.FunctionComponent = () =>{
    return <>
        <Card>
        <Typography align="center" variant="h1">
        	Hello World!
        </Typography>
    </Card>
        </>
}
export default App;

npm start

​ 现在我们可以看到，Material风格的Card上面出现Hello World！字样，这很激动人心，因为我们可以正式开始我们的Material-UI的学习之路了！

脑瘫码农 纯属自学 如有错误 望请指正 共同学习 不胜感激