技术栈
写这个软件StackChat的主要目的是巩固练习Node和对React的实践,也是为了学习东西,所以选用了这些自己还没在项目里使用过的技术,边学变写
- Electron
- React
- Material-UI
- React-Router
- Redux
- Express
- Socket.io
- MongoDB
现在已完成前端大部分界面的构建(无状态),所以记录一下
环境搭建
Create-React-App
利用React脚手架Create-React-App,再写入依赖npm install
1 | "devDependencies": { |
material-ui最新版本需要react 16.8.0以上
安装配置electron
在package.json里配置入口
1 | "main": "electron ./src/main.js" |
热加载
Electron加载页面的两个方法
1 | // win.loadFile('index.html') |
配合Create-React-App就可以直接在窗口里热加载
UI设计(无状态)
完成大部分后的UI
组件的划分
因为先写了静态的组件,还没有加入状态,所以还没遇到什么难点
最顶层的组件是App
四个主要组件 LeftNav, SocialBar, ChatBar, SideBar,后期加入Redux可能要划分容器组件
1
2
3
4
5
6<div className="AppContainer">
<LeftNav />
<SocialBar />
<ChatBar />
<Sidebar />
</div>四个主要组件下分别划分了各个小组件
Material-UI和React的使用
Material-UI是现在React非常流行的一个组件库,基于Material Design
Material-UI主要有三种添加样式的方法(CSS in JS)
https://material-ui.com/zh/styles/api/
makeStyles
自己的例子,第一个参数可以是生成样式或样式对象的函数
1
2
3
4
5
6
7
8
9
10
11import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
LeftNav: {
float: 'left',
...
},
LogoText: {
...
},
...
}));useStyles返回CSS中的类名对象
1
2
3
4export default function LeftNav() {
const classes = useStyles();
...
}withStyles
第一个参数是生成样式或样式对象的函数,第二个是可选参数
1 | import { withStyles } from '@material-ui/core/styles'; |
返回的是一个higher-order component,用来包装组件,返回一个带有之前传入的对象属性的新组件
1 | export default withStyles(styles)(Sidebar); |
小结
主要注意的是组件之间的拆分,在Material-UI样式的应用时,用function写的组件不能使用makeStyles,会违反钩子规则