zoukankan      html  css  js  c++  java
  • 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',
         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,会违反钩子规则

  • 相关阅读:
    leetcode701. Insert into a Binary Search Tree
    leetcode 958. Check Completeness of a Binary Tree 判断是否是完全二叉树 、222. Count Complete Tree Nodes
    leetcode 110. Balanced Binary Tree
    leetcode 104. Maximum Depth of Binary Tree 111. Minimum Depth of Binary Tree
    二叉树
    leetcode 124. Binary Tree Maximum Path Sum 、543. Diameter of Binary Tree(直径)
    5. Longest Palindromic Substring
    128. Longest Consecutive Sequence
    Mac OS下Android Studio的Java not found问题,androidfound
    安卓 AsyncHttpClient
  • 原文地址:https://www.cnblogs.com/secoding/p/11122949.html
Copyright © 2011-2022 走看看