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