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

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

  •  
  •   qwerthhusn · 2021-03-17 10:28:11 +08:00 · 9210 次点击
    这是一个创建于 1107 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

    另外 react 的入手学习应该是 CRA: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app,然后配合 antd 的安装文档,就完事了。
    thtznet
        29
    thtznet  
       2021-03-17 11:53:33 +08:00   ❤️ 1
    后端,建议 MAUI 起步,做管理系统绰绰有余。
    TimPeake
        30
    TimPeake  
       2021-03-17 11:53:35 +08:00
    你想学东西还是想做东西 ?想学东西建议还是先自己用官方脚手架搭个项目玩玩 结合网上案例代码几天差不多就熟悉了。
    想做东西就直接 ant design pro , 对 你没得选。
    karott7
        31
    karott7  
       2021-03-17 11:59:44 +08:00
    直接 Vue 全家桶就好了,什么都帮你配好了,入门基础 JS 语法和熟悉下 ES6 语法,就能写东西了。
    至于 webpack,Vue-cli 都帮你继承好了,你什么都不用配
    sjhhjx0122
        32
    sjhhjx0122  
       2021-03-17 12:13:27 +08:00
    @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  
       2021-03-17 12:33:05 +08:00 via iPhone
    angular,上手就写
    yxt
        34
    yxt  
       2021-03-17 12:37:38 +08:00
    如果不是前端就业而且是做 admin, angular 不更顺手? ng-zorro, ng-alain 直接上就行
    knightdf
        35
    knightdf  
       2021-03-17 12:56:51 +08:00
    angular 啊,我就学的 angular,用 angular 版的 antd 就行了
    lihongming
        36
    lihongming  
       2021-03-17 13:07:46 +08:00 via iPhone
    后端学 class 版的 react 应该很容易上手,跟后端的类思路一致。

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

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

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

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