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

时间:2022-07-29 04:59:07

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

"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设计(无状态)

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

完成大部分后的UI

组件的划分

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

  1. 最顶层的组件是App
  2. 四个主要组件 LeftNav, SocialBar, ChatBar, SideBar,后期加入Redux可能要划分容器组件
<div className="AppContainer">
<LeftNav />
<SocialBar />
<ChatBar />
<Sidebar />
</div>
  1. 四个主要组件下分别划分了各个小组件

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,会违反钩子规则