V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Allianzcortex
V2EX  ›  程序员

决定用 react hooks 把仿 V2EX 的论坛前端重写一遍

  •  1
     
  •   Allianzcortex · 2020-02-09 10:40:56 +08:00 · 3730 次点击
    这是一个创建于 1509 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近正好有时间就想把之前自己做的仿 V 站论坛前端重新用 React 写一遍。习惯了 DI 和 Angular 那种大包大揽的 frame 模式,现在换成 React 的 library 新学就需要自己选择各种组件,最后用的主要是

    React + Hooks + Redux + Redux-thunk + ImmutableJS + React-router + styled-component + material UI

    React Hooks 主要是在 19 年非常火,所以自己也尽量在能用 hooks 的地方都在用,比如用 useState 来设置 state 的变量,useEffect() 来控制生命周期(e.g. 从后端获取数据,监听数据变化重新调用函数),用 redux 提供的 useSelector/useDispatch 来获取 store 里的数据(与 redux-thunk 结合返回 actionCreator),用 react-router 提供的 useHistory 来进行 navigation 跳转(避免了用 withRouter 来渲染)。前端的设计参考 V 站,具体实现里则只用了 flex 和 gridbox 布局,没有像 V 站一样用 float 也没有太考虑对 IE 的兼容,一些 Button 等组件用的是 material-ui。今天终于把前端页面和基本的架构搭好了

    架构是按照标准的 React 组件拆分:

    ├── App.js
    ├── _services
    │   ├── comment.service.js
    │   ├── post.service.js
    │   ├── service.js
    │   ├── user.service.js
    │   └── utils.service.js
    ├── componnets
    │   ├── auth
    │   │   ├── index.js
    │   │   ├── login.js
    │   │   ├── register.js
    │   │   └── style.js
    │   ├── comment
    │   │   ├── commentList.js
    │   │   ├── commetBox.js
    │   │   ├── index.js
    │   │   ├── singleComment.js
    │   │   └── style.js
    │   ├── post
    │   │   ├── abbreviatedPost.js
    │   │   ├── createPost.js
    │   │   ├── index.js
    │   │   ├── postDetail.js
    │   │   ├── postList.js
    │   │   └── style.js
    │   └── utils
    │       ├── about.js
    │       ├── header.js
    │       ├── index.js
    │       ├── notification.js
    │       ├── pagination.js
    │       ├── splitLine.js
    │       ├── tagList.js
    │       └── topicBar.js
    ├── index.js
    ├── layouts
    │   ├── HomeLayout.js
    │   ├── MainPageLayout.js
    │   ├── PostPageLayout.js
    │   ├── index.js
    │   └── style.js
    ├── logo.svg
    ├── routes
    │   └── index.js
    ├── store
    │   ├── actionCreators
    │   │   ├── index.js
    │   │   ├── user.action.creators.js
    │   │   └── util.action.creators.js
    │   ├── constants
    │   │   ├── comment.constants.js
    │   │   ├── index.js
    │   │   ├── user.constants.js
    │   │   └── util.constants.js
    │   ├── index.js
    │   ├── reducers
    │   │   ├── comment.reducers.js
    │   │   ├── index.js
    │   │   ├── posts.reducers.js
    │   │   ├── user.reducers.js
    │   │   └── util.reducers.js
    │   └── type.js
    └── style.js
    
    • 获取部分后端数据

    combinewithbackend.png

    • Home Page

    HomePage.png

    • Post Page

    PostPage.png

    • Login Page

    LoginPage.png

    接下来应该可能就只有周末有时间更新了,会考虑继续完善^^ 和 Docker 结合起来开箱即用

    Repo : https://github.com/Allianzcortex/LaraForum

    第 1 条附言  ·  2020-02-09 11:43:43 +08:00
    弱弱地表示可以求一个 star 么......
    13 条回复    2020-02-09 19:45:03 +08:00
    Torpedo
        1
    Torpedo  
       2020-02-09 11:37:46 +08:00   ❤️ 1
    ImmutableJS 这个不如 immer。ImmutableJS 还是侵入型太高了
    herofire
        2
    herofire  
       2020-02-09 11:38:19 +08:00   ❤️ 1
    点赞
    Mutoo
        3
    Mutoo  
       2020-02-09 12:20:29 +08:00   ❤️ 1
    直接上 redux-toolkit (集成了 redux + reselect + immerjs)
    otakustay
        4
    otakustay  
       2020-02-09 12:31:01 +08:00   ❤️ 1
    2020 年了还用 ImmutableJS 就很没有意思了……
    dcalsky
        5
    dcalsky  
       2020-02-09 12:57:53 +08:00 via Android   ❤️ 1
    前端这变化,不出几个月你又要重写一次
    qile1
        6
    qile1  
       2020-02-09 13:04:31 +08:00 via Android
    能请你帮忙弄几个解码不?有偿的
    qile1
        7
    qile1  
       2020-02-09 13:05:05 +08:00 via Android
    能请你帮忙弄几个界面不?有偿的
    MoccaCafe
        8
    MoccaCafe  
       2020-02-09 13:51:13 +08:00   ❤️ 1
    ImmutableJS 我 17 年接触过,但是感觉对 react 来说太重了,虽说理念是挺好的不可变
    hyyou2010
        9
    hyyou2010  
       2020-02-09 14:26:02 +08:00   ❤️ 1
    感觉用 hook 之后 immutablejs 可以不用了
    zhw2590582
        10
    zhw2590582  
       2020-02-09 14:26:16 +08:00   ❤️ 1
    不知道为什么,我有 Redux 恐惧症,还是推荐 mobx 吧
    wotemelon
        11
    wotemelon  
       2020-02-09 18:15:28 +08:00   ❤️ 1
    services 几个文件的命名不觉得很冗余吗
    dcatfly
        12
    dcatfly  
       2020-02-09 19:07:03 +08:00   ❤️ 1
    redux-toolkit + 1
    Allianzcortex
        13
    Allianzcortex  
    OP
       2020-02-09 19:45:03 +08:00 via iPhone
    @dcalsky 我不是专业前端啦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3219 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 69ms · UTC 12:16 · PVG 20:16 · LAX 05:16 · JFK 08:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.