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

"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

组件的划分

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

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