Node.js实现PC端类微信聊天软件(一)

Github StackChat

技术栈

写这个软件StackChat的主要目的是巩固练习Node和对React的实践,也是为了学习东西,所以选用了这些自己还没在项目里使用过的技术,边学变写

  • Electron
  • React
  • Material-UI
  • React-Router
  • Redux
  • Express
  • Socket.io
  • MongoDB

现在已完成前端大部分界面的构建(无状态),所以记录一下

环境搭建

Create-React-App

利用React脚手架Create-React-App,再写入依赖npm install

1
2
3
4
5
"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里配置入口

1
"main": "electron ./src/main.js"

热加载

Electron加载页面的两个方法

1
2
// win.loadFile('index.html')
win.loadURL('http://localhost:3000')

配合Create-React-App就可以直接在窗口里热加载

UI设计(无状态)

完成大部分后的UI

组件的划分

因为先写了静态的组件,还没有加入状态,所以还没遇到什么难点

  1. 最顶层的组件是App

  2. 四个主要组件 LeftNav, SocialBar, ChatBar, SideBar,后期加入Redux可能要划分容器组件

    1
    2
    3
    4
    5
    6
    <div className="AppContainer">
    <LeftNav />
    <SocialBar />
    <ChatBar />
    <Sidebar />
    </div>
  3. 四个主要组件下分别划分了各个小组件

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
    11
    import { makeStyles } from '@material-ui/core/styles';
    const useStyles = makeStyles(theme => ({
    LeftNav: {
    float: 'left',
    ...
    },
    LogoText: {
    ...
    },
    ...
    }));

    useStyles返回CSS中的类名对象

    1
    2
    3
    4
    export default function LeftNav() {
    const classes = useStyles();
    ...
    }
  • withStyles

第一个参数是生成样式或样式对象的函数,第二个是可选参数

1
2
3
4
5
6
7
8
9
10
11
12
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,用来包装组件,返回一个带有之前传入的对象属性的新组件

1
export default withStyles(styles)(Sidebar);

小结

主要注意的是组件之间的拆分,在Material-UI样式的应用时,用function写的组件不能使用makeStyles,会违反钩子规则