admin管理员组文章数量:1573361
Material-UI学习 第一章
文章目录
- Material-UI学习 第一章
- 认识Material-UI
- 什么是Material Design?
- Material-UI与其他UI框架
- Ant-Design
- Bootstrap
- Material
- 开始学习
- 前置知识
- 环境准备
- 创建项目
- 删除多余文件
- 创建自己文件
- 安装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
- 我们不需要去下载它,因为我们可以直接
- 一个好用的编译器VScode
- 一个先进的浏览器Chrome
创建项目
在工作空间下,使用create-react-app
创建TypeScript
项目
npx create-react-app learn-material --typescript
cd learn-material
npm start
上面命令,运行完毕后会直接在我们浏览器打开localhost:3000
url的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的学习之路了!
脑瘫码农 纯属自学 如有错误 望请指正 共同学习 不胜感激
本文标签: UImaterialReacttypescript
版权声明:本文标题:Material-UI+TypeScript+React的学习 第一章 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727746554a1127875.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论