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

后端开发如何学习前端,达到能用 React 和 AntD UI 组件库做一个管理系统的水平?

  •  
  •   qwerthhusn · 60 天前 · 6154 次点击
    这是一个创建于 60 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我自己脑海里有个小产品,想自己学习前端用 TS,AntD React 把其做出来。

    本人“精通”Java,熟悉 HTTP 协议栈的细节,WebSocket 协议也很熟悉(都是用 Wireshark 仔细观察不同的 Content-Type 的请求的具体形式),但是对前端开发停留在document.getElementById的水平,因为几年前用过 Spring MVC 写过一些 JSP 页面,而且都是照着别人的页面去写的,那时还是 HTML4 和 IE8 的天下。

    我之前把 React 官网上的 OX 棋 demo 给研究了一下(不是抄,每一步都是自己尝试着去写),学完之后直接上 AntD 发现啥也写不出来,不知道咋弄。过段时间全忘记了。

    求大神给一个快速的学习路线,能多久入门前端并能写一些东西。

    第 1 条附言  ·  60 天前
    好难啊,各种 XXX.js ,前端咋会有那么多 XXX.js 框架,说实话我都不知道你们说的那些什么 nest egg umi 是干嘛的。不过感谢大佬们的回答,我要考虑下要不要从 Vue 开始,还是直接硬啃 React 。。。。

    像 Java,SpringBoot 一把梭,新潮一点也有 VertX/Quarkus,Helidon 这些一把梭。。。
    83 条回复    2021-03-19 09:44:57 +08:00
    sjhhjx0122
        1
    sjhhjx0122   60 天前
    react 官网教程看完啥都没学会,先学 vue 这个自动档入门~再去看手动档的 react 就好写了,其实你“精通”Java 完全可以去看战斗机 angular ~
    draymonder
        2
    draymonder   60 天前
    推荐先看 vue, 从我后端的角度来认知,vue 和 react 的目的也是和 jsp 一样的,为了复用
    wxw752
        3
    wxw752   60 天前
    同意楼上,vue 起步
    murmur
        4
    murmur   60 天前
    兼职前端学 vue 可以,react 有点难
    godbasin
        5
    godbasin   60 天前
    vue 的话可以参考这个: https://github.com/godbasin/vue-ebook
    chogath
        6
    chogath   60 天前
    哥,先看 vue 。把前端的常规流程( node.js 环境、项目构建、项目打包、项目部署)这一套玩通,然后再研究下 vue/react 的实现方式。最后学一下 webpack 就可以啦
    chogath
        7
    chogath   60 天前
    同意 1 楼的,如果你熟悉 java 可以 angular nest.js 一把梭,完全是 spring 的玩法。
    Kasumi20
        8
    Kasumi20   60 天前
    先学 Node.js ,不会 Node 怎么玩现代前端工具?
    Kasumi20
        9
    Kasumi20   60 天前
    然后是 webpack
    tonytonychopper
        10
    tonytonychopper   60 天前 via iPhone
    用 react 把 todolist 写完,估计就差不多了,不需要额外再学 Vue
    qwerthhusn
        11
    qwerthhusn   60 天前
    @murmur
    @wxw752
    @draymonder
    @sjhhjx0122 感谢大佬们,那是看 2.X 还是 3.X 呢?听说 3.X 又跟 React 非常像了。。。

    看了很多评论,感觉好像 React 和 Vue 之间有鄙视链,甚至 TS 和 JS 之间也有鄙视链,本来想一步到胃,但是功夫不行,到位不了。。
    qwerthhusn
        12
    qwerthhusn   60 天前
    @Kasumi20 老哥你是说的 npm 还是 Node.js???? Node.js 是做后端的吧,我又不用 NodeJS 做后端。。。NPM 的话不就那几个命令么?
    murmur
        13
    murmur   60 天前
    @qwerthhusn 用 2 就可以
    直接用 vue-admin-template 开局,不要自己做
    c9792536451
        14
    c9792536451   60 天前
    @qwerthhusn node 是环境 npm 要装在上边的
    ch2
        15
    ch2   60 天前
    最麻烦的其实是 webpack,你搞个别人配好的模板 project 比各种瞎踩坑进度会快很多
    技术栈别选那种给团队用的 redux 、dva 啥的,用 mobx 最简单了
    react hooks 可以先不学,用 class component 会更省时间
    剩下的无非是学 antd 给你的控件跟 css
    cxe2v
        16
    cxe2v   60 天前
    @qwerthhusn #11 直接学 3.0,毕竟这是趋势
    x940727
        17
    x940727   60 天前
    国内 React 麻烦的主要是 UI 框架大部分都是 AntD,但是 AntD 的最佳实践又和 Umi 绑定,又要去学 Umi,然后 Umi 又带来了各种乱七八糟的问题,于是上手成本就异常的高。
    kayv
        18
    kayv   60 天前
    @x940727 道出真相了,我一个老后端上来就劝退了,但是学 vue 和 ng 基本一天就上手。看 AntD 和 umi 有点神烦[🤣
    x940727
        19
    x940727   60 天前
    @kayv 我也是后端的,一直在硬啃 React,反正不靠这个吃饭,就当提高技术水平了。
    shintendo
        20
    shintendo   60 天前
    react 官网教程是很诡异的,写个井字棋,而不是典型的常规网页形态,你觉得看完了无从上手是正常的
    jinzhongyuan
        21
    jinzhongyuan   60 天前
    啊,俺也一样
    ccraohng
        22
    ccraohng   60 天前 via iPhone
    直接上 antd -pro,抛弃 dva 这玩意儿
    zhoushushu
        23
    zhoushushu   60 天前
    不是说会 java 的,直接上手 angular 嘛,你可以看看 angular 啊。
    zhwithsweet
        24
    zhwithsweet   60 天前
    @kayv emmm 阿里除了 Ant,别的东西私货太鸡儿多了。https://www.gatsbyjs.com/ 用 gatsbyjs
    Asai37
        25
    Asai37   60 天前   ❤️ 1
    推荐 Ant Design Pro
    文档: https://pro.ant.design/docs/getting-started-cn
    预览: https://preview.pro.ant.design

    这是蚂蚁官方基于 Antd 组件库封装的前端框架,相当于 React + Antd + Umi 的最佳实践了。
    最佳实践,就是把前端开发过程中的相关功能都封装了,布局+路由+接口请求+权限等等。
    优点是直接拿过来就能用,缺点是封装的功能太多,有些可能是你用不到的。
    现在是 正式版是 v4,预览版是 v5 。
    darknoll
        26
    darknoll   60 天前
    都精通 java 了,区区 react 还不是几天就能拿下?
    Jrue0011
        27
    Jrue0011   60 天前
    springboot 还有个 vaadin 。。。也是用 java 做前端页面
    shunia
        28
    shunia   60 天前
    推荐 vue 的是什么鬼啊,不是应该找一个整合了 antd 的现成的管理后台框架,改吧改吧是最快的吗?

    另外 react 的入手学习应该是 CRA: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app,然后配合 antd 的安装文档,就完事了。
    thtznet
        29
    thtznet   60 天前   ❤️ 1
    后端,建议 MAUI 起步,做管理系统绰绰有余。
    TimPeake
        30
    TimPeake   60 天前
    你想学东西还是想做东西 ?想学东西建议还是先自己用官方脚手架搭个项目玩玩 结合网上案例代码几天差不多就熟悉了。
    想做东西就直接 ant design pro , 对 你没得选。
    karott7
        31
    karott7   60 天前
    直接 Vue 全家桶就好了,什么都帮你配好了,入门基础 JS 语法和熟悉下 ES6 语法,就能写东西了。
    至于 webpack,Vue-cli 都帮你继承好了,你什么都不用配
    sjhhjx0122
        32
    sjhhjx0122   60 天前
    @qwerthhusn nest(spring),egg 是后端框架,umi 是阿里出的 react 脚手架。
    因为 react 一直把自己当个库,所以 react 的周边基本都不是官方维护的,导致社区百花齐放,大家都觉得自己是最佳实践,入门就蒙了,react router 为什么那么多版本,redux,mobx,context+hooks 到底那个比较好用,useMemo,useCallback 这些 api 到底什么时候用,以前如果用官方的 cra 想改点 webpack 配置真是老费劲了。
    而 vue,angualr,大家几乎都是用官方的东西,出问题好解决,也不用找来找去,这就很适合前端都不了解上手。
    喜欢 antd 也可以直接 antd pro 吧,对着例子改就是了。
    nl101531
        33
    nl101531   60 天前 via iPhone
    angular,上手就写
    yxt
        34
    yxt   60 天前
    如果不是前端就业而且是做 admin, angular 不更顺手? ng-zorro, ng-alain 直接上就行
    knightdf
        35
    knightdf   60 天前
    angular 啊,我就学的 angular,用 angular 版的 antd 就行了
    lihongming
        36
    lihongming   60 天前 via iPhone
    后端学 class 版的 react 应该很容易上手,跟后端的类思路一致。

    但现在官网主推函数式组件,antd 也主推函数式的用法。函数式习惯了确实好使,但对后端来说首先得学习一种新的思想,这就平白增加了学习时间和难度。

    建议找找老教程,使用老版的 antd,还是有 class 的教程和示例的
    tinyuu
        37
    tinyuu   60 天前
    和写 jsp servlet 一样啊
    90d0n
        38
    90d0n   60 天前
    java 程序员吗, 那建议 angular, 概念和 spring 差不多, 看看文档直接就能上手了.
    90d0n
        39
    90d0n   60 天前   ❤️ 1
    用 angular 跟 spring 一样爽, 大而全, 不像 vue 和 react 那样到处找组件或者周边库.
    angular 一把梭, 需要用的都在里边了, 非常适合 spring 程序员上手.
    rodrick
        40
    rodrick   60 天前
    首先,不要管什么狗屁鄙视链,前端娱乐圈一直这样,vue 肯定是最快的,后台管理都有很多现成的项目,vue+elementUI 绝对是新手最快的,也没必要上 ts,不过 java 程序员的话可能对 ts 反而更好上手? react 对于 js 基础还是比较高的,另外 angular 可以考虑,我个人没用过 angular 不做评价了
    ivyliner
        41
    ivyliner   60 天前
    @qwerthhusn 其实前端也没有啥难的(我指的是要做自己的小作品场景下).
    看看我作为一个运维工程师的业余作品 https://engineerdraft.com/

    什么 React, Vue, Antd, 小程序, SwiftUI 一把梭.
    Webpack 是个啥? 需要懂吗 ? 反正我目前还没有到需要 unpack 它的程度, 大部分人其实不就是写个配置文件嘛.

    总要的是要改变自己的 mindset, 就当成一个新东西来学, 不要停留在之前 网页三剑客时代的思维就好了.
    agdhole
        42
    agdhole   60 天前
    Java 写前端,那选 angular
    Oktfolio
        43
    Oktfolio   60 天前
    Vue 如果不是为了快速做个人项目的话没必要去学。Angular 和 React 都可以,React 其实就 Redux 会麻烦一点。后两个写 TypeScript 不比 Vue 半残的 TypeScript 香?
    lifeintools
        44
    lifeintools   60 天前 via iPhone
    都是靠接私活来学新技术
    tikazyq
        45
    tikazyq   60 天前
    先学习如何做到不好高骛远
    zgren
        46
    zgren   60 天前
    从 Vue 开始学习好点,然后用 UI 框架和 cli 脚手架开搞,做简单的布局,然后开始页面功能和接口数据请求,然后慢慢理解
    cgpiao
        47
    cgpiao   60 天前 via iPhone
    @thtznet maui 连官网都没有吧,比如介绍组建,生命周期等等的地方。其实我蛮想尝试这个写下一个 app,但感觉是不是太早了点。
    wwwtarzan
        48
    wwwtarzan   60 天前
    要不试试 angular ? 之前我老板就是 JAVA 出身 比较推崇 angular
    neptuno
        49
    neptuno   60 天前
    vue 简单点,,,学了 vue 你还可以写小程序啥的
    uilvn
        50
    uilvn   60 天前
    比较简单的办法: 给我投简历,进来我亲自带你 :D
    zhangbohun
        51
    zhangbohun   60 天前
    和楼主差不多的前端水平时候写的总结,仅供参考,https://blog.csdn.net/zhangbohun/article/details/61935231
    后来也简单用过 Vue
    iseki
        52
    iseki   60 天前 via Android
    @qwerthhusn 然而整个开发环境构建工具是跑在 node.js 上的,包管理器 npm/yarn 似乎没什么可学的…其实 webpack 感觉需要的时候再去看也行,create-react-app 一把梭
    qwerthhusn
        53
    qwerthhusn   60 天前
    @zhangbohun 感谢! 6 又知道了一个库 Underscore,就像 Java 里面的 commons-lang 或者 Guava 一样,有一些常用的方便的方法
    而且还有像 JDK8 那样的集合 Stream 操作,我还以为要找个 RxJS 这种库才能实现呢。。。。。
    lifesimple
        54
    lifesimple   60 天前
    稍微看下 React 如果只是做管理系统的话 直接 antd pro 拿过来看
    qwerthhusn
        55
    qwerthhusn   60 天前
    @iseki 明白,webpack 我感觉像是 Maven 或者 Gradle 类型的东西。开始初期照着别人弄一套能用就行。
    qwerthhusn
        56
    qwerthhusn   60 天前
    @tikazyq 是的,一步一个脚印,我还是先花点时间把 JS 入门了再说。再看 JS,发现虽然很好理解,但是语法灵活度要比 Java 高多了
    fengerzh
        57
    fengerzh   60 天前
    @qwerthhusn 灵活是什么意思?你是指'1' == 1 吗?这个应该是更容易了,而不是更难了啊。
    qwerthhusn
        58
    qwerthhusn   60 天前
    @fengerzh 主要是语法比较多,得慢慢记。比如那个||,在 Java 就是逻辑短路或,但是在这里还有其他的意思(我还没绕清楚)
    Xview
        59
    Xview   60 天前
    对楼主最适合的是 vue + iView, 学习成本很低,不需要理解那一大坨莫名其妙被引入进来的东西
    lancelock
        60
    lancelock   60 天前
    你就 java 加个模板引擎直接写得了,省事多了
    Semaphore
        61
    Semaphore   60 天前
    组里会 antd 的后端开发来说几句,作为后端很浅的学一下 React,主要是它的 state 特性,还有 jsx 大概的格式就可以上手了,按着 antd 的模板现改就 OK,学习成本还是比较低的;我用起来和之前写 js 差不多 [doge]
    jimrok
        62
    jimrok   60 天前   ❤️ 1
    我是先后端,再去搞的 react 。主要是 css 开始不太熟练,写不出什么效果来,后来多看别人的实现过程,悟到了,就前后通杀了。
    MasterMonkey
        63
    MasterMonkey   60 天前 via iPhone
    @thtznet 这是啥?
    shuangyeying
        64
    shuangyeying   60 天前
    同问,比较感兴趣。
    serverABCD
        65
    serverABCD   60 天前
    同后端最近找了个前端的活赚点外快,建议先用 vue 做几个项目把 jsx 语法组件通信钩子函数这些有个直观的概念,然后学 react 。
    dayeye2006199
        66
    dayeye2006199   60 天前
    为啥前端就一定是单页面应用和 JS 呢? spring 配合个模板引擎(例如 thymeleaf ),服务器端渲染不成吗?
    airfling
        67
    airfling   60 天前
    其实我是自学的 angular,和 spring 很像的
    l4ever
        68
    l4ever   60 天前
    同后端, vue, react 看不懂. 用 jQuery, bootstrap 做的后台也还行. 像模像样的.
    hongch
        69
    hongch   60 天前
    @ccraohng 为啥抛弃 dva....
    ppgs8903
        70
    ppgs8903   60 天前
    基本上达不到、除了本身的程序、还要会设计、还要视觉和 ux 、其他的配套也要全、基本上前端也不可能一个人搞完。
    waltcow
        71
    waltcow   59 天前
    ant-design-pro + procomponents + tailwindcss
    karnaugh
        72
    karnaugh   59 天前
    别整 react 了,vue+element
    jydeng
        73
    jydeng   59 天前
    https://panjiachen.github.io/vue-element-admin-site/zh/
    react 上手难度高,vue+element 简单好用
    grewer
        74
    grewer   59 天前
    umi 一把梭
    cnzjl
        75
    cnzjl   59 天前
    @jimrok css 不太熟练真实了,我到现在还是写不太熟练。。
    liuxey
        76
    liuxey   59 天前
    @dayeye2006199 #66 因为在模板引擎里写数据渲染+JS 事件是非常容易出错且繁琐的过程,尤其是现在的页面复杂度越来越高,除非是非常简单的展示型网页不然还是用用最新的技术吧
    ccraohng
        77
    ccraohng   59 天前 via iPhone
    @hongch 大部分数据没必要用 dva,最重要的是模板代码太恶心了。用 hook 以后,dva 显得格格不入,全局数据的用全局 model 或者 context 就可以了。
    dutianze
        78
    dutianze   59 天前
    推荐这个教程
    dutianze
        79
    dutianze   59 天前
    JHExp
        80
    JHExp   59 天前
    antd 看文档就能直接开梭啊 就是 css 是真的难写 react hook 稍微看一下就差不多了
    sardine
        81
    sardine   59 天前
    要是后期想自己一直维护的话,我觉得用 react 会好一些
    sardine
        82
    sardine   59 天前
    简单上手的话,就去找几个入门教程的视频看看,看视频还是快
    afc163
        83
    afc163   58 天前
    @x940727 #17 Umi 用不惯就直接上 create-react-app 吧,官网上第一推荐的也是这个
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3324 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 01:28 · PVG 09:28 · LAX 18:28 · JFK 21:28
    ♥ Do have faith in what you're doing.