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

相关文章