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

[qwerthhusn]

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

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

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

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

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

像 Java，SpringBoot 一把梭，新潮一点也有 VertX/Quarkus，Helidon 这些一把梭。。。

[sjhhjx0122]

react 官网教程看完啥都没学会，先学 vue 这个自动档入门～再去看手动档的 react 就好写了，其实你“精通”Java 完全可以去看战斗机 angular ～

[draymonder]

推荐先看 vue, 从我后端的角度来认知，vue 和 react 的目的也是和 jsp 一样的，为了复用

[wxw752]

同意楼上，vue 起步

[murmur]

兼职前端学 vue 可以，react 有点难

[godbasin]

vue 的话可以参考这个： https://github.com/godbasin/vue-ebook

[chogath]

哥，先看 vue 。把前端的常规流程（ node.js 环境、项目构建、项目打包、项目部署）这一套玩通，然后再研究下 vue/react 的实现方式。最后学一下 webpack 就可以啦

[chogath]

同意 1 楼的，如果你熟悉 java 可以 angular nest.js 一把梭，完全是 spring 的玩法。

[Kasumi20]

先学 Node.js ，不会 Node 怎么玩现代前端工具？

[Kasumi20]

然后是 webpack

[tonytonychopper]

用 react 把 todolist 写完，估计就差不多了，不需要额外再学 Vue

[qwerthhusn]

@murmur
@wxw752
@draymonder
@sjhhjx0122 感谢大佬们，那是看 2.X 还是 3.X 呢？听说 3.X 又跟 React 非常像了。。。

看了很多评论，感觉好像 React 和 Vue 之间有鄙视链，甚至 TS 和 JS 之间也有鄙视链，本来想一步到胃，但是功夫不行，到位不了。。

[qwerthhusn]

@Kasumi20 老哥你是说的 npm 还是 Node.js???? Node.js 是做后端的吧，我又不用 NodeJS 做后端。。。NPM 的话不就那几个命令么？

[murmur]

@qwerthhusn 用 2 就可以
直接用 vue-admin-template 开局，不要自己做

[c9792536451]

@qwerthhusn node 是环境 npm 要装在上边的

[ch2]

最麻烦的其实是 webpack,你搞个别人配好的模板 project 比各种瞎踩坑进度会快很多
技术栈别选那种给团队用的 redux 、dva 啥的，用 mobx 最简单了
react hooks 可以先不学，用 class component 会更省时间
剩下的无非是学 antd 给你的控件跟 css

[cxe2v]

@qwerthhusn #11 直接学 3.0，毕竟这是趋势

[x940727]

国内 React 麻烦的主要是 UI 框架大部分都是 AntD，但是 AntD 的最佳实践又和 Umi 绑定，又要去学 Umi，然后 Umi 又带来了各种乱七八糟的问题，于是上手成本就异常的高。

[kayv]

@x940727 道出真相了，我一个老后端上来就劝退了，但是学 vue 和 ng 基本一天就上手。看 AntD 和 umi 有点神烦[🤣

[x940727]

@kayv 我也是后端的，一直在硬啃 React，反正不靠这个吃饭，就当提高技术水平了。

[shintendo]

react 官网教程是很诡异的，写个井字棋，而不是典型的常规网页形态，你觉得看完了无从上手是正常的

[jinzhongyuan]

啊，俺也一样

[ccraohng]

直接上 antd -pro，抛弃 dva 这玩意儿

[zhoushushu]

不是说会 java 的，直接上手 angular 嘛，你可以看看 angular 啊。

[zhwithsweet]

@kayv emmm 阿里除了 Ant，别的东西私货太鸡儿多了。https://www.gatsbyjs.com/ 用 gatsbyjs

[Asai37]

推荐 Ant Design Pro
文档： https://pro.ant.design/docs/getting-started-cn
预览： https://preview.pro.ant.design

这是蚂蚁官方基于 Antd 组件库封装的前端框架，相当于 React + Antd + Umi 的最佳实践了。
最佳实践，就是把前端开发过程中的相关功能都封装了，布局+路由+接口请求+权限等等。
优点是直接拿过来就能用，缺点是封装的功能太多，有些可能是你用不到的。
现在是 正式版是 v4，预览版是 v5 。

[darknoll]

都精通 java 了，区区 react 还不是几天就能拿下？

[Jrue0011]

springboot 还有个 vaadin 。。。也是用 java 做前端页面

[shunia]

推荐 vue 的是什么鬼啊，不是应该找一个整合了 antd 的现成的管理后台框架，改吧改吧是最快的吗？

另外 react 的入手学习应该是 CRA: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app，然后配合 antd 的安装文档，就完事了。

[thtznet]

后端，建议 MAUI 起步，做管理系统绰绰有余。

[TimPeake]

你想学东西还是想做东西 ？想学东西建议还是先自己用官方脚手架搭个项目玩玩 结合网上案例代码几天差不多就熟悉了。
想做东西就直接 ant design pro , 对 你没得选。

[karott7]

直接 Vue 全家桶就好了，什么都帮你配好了，入门基础 JS 语法和熟悉下 ES6 语法，就能写东西了。
至于 webpack，Vue-cli 都帮你继承好了，你什么都不用配

[sjhhjx0122]

@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]

angular，上手就写

[yxt]

如果不是前端就业而且是做 admin, angular 不更顺手? ng-zorro, ng-alain 直接上就行

[knightdf]

angular 啊，我就学的 angular，用 angular 版的 antd 就行了

[lihongming]

后端学 class 版的 react 应该很容易上手，跟后端的类思路一致。

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

建议找找老教程，使用老版的 antd，还是有 class 的教程和示例的

[tinyuu]

和写 jsp servlet 一样啊

[90d0n]

java 程序员吗, 那建议 angular, 概念和 spring 差不多, 看看文档直接就能上手了.

[90d0n]

用 angular 跟 spring 一样爽, 大而全, 不像 vue 和 react 那样到处找组件或者周边库.
angular 一把梭, 需要用的都在里边了, 非常适合 spring 程序员上手.

[rodrick]

首先，不要管什么狗屁鄙视链，前端娱乐圈一直这样，vue 肯定是最快的，后台管理都有很多现成的项目，vue+elementUI 绝对是新手最快的，也没必要上 ts，不过 java 程序员的话可能对 ts 反而更好上手？ react 对于 js 基础还是比较高的，另外 angular 可以考虑，我个人没用过 angular 不做评价了

[ivyliner]

@qwerthhusn 其实前端也没有啥难的(我指的是要做自己的小作品场景下).
看看我作为一个运维工程师的业余作品 https://engineerdraft.com/

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

总要的是要改变自己的 mindset, 就当成一个新东西来学, 不要停留在之前 网页三剑客时代的思维就好了.

[agdhole]

Java 写前端，那选 angular

[Oktfolio]

Vue 如果不是为了快速做个人项目的话没必要去学。Angular 和 React 都可以，React 其实就 Redux 会麻烦一点。后两个写 TypeScript 不比 Vue 半残的 TypeScript 香？

[lifeintools]

都是靠接私活来学新技术

[tikazyq]

先学习如何做到不好高骛远

[zgren]

从 Vue 开始学习好点，然后用 UI 框架和 cli 脚手架开搞，做简单的布局，然后开始页面功能和接口数据请求，然后慢慢理解

[cgpiao]

@thtznet maui 连官网都没有吧，比如介绍组建，生命周期等等的地方。其实我蛮想尝试这个写下一个 app，但感觉是不是太早了点。

[wwwtarzan]

要不试试 angular ？ 之前我老板就是 JAVA 出身 比较推崇 angular

[neptuno]

vue 简单点，，，学了 vue 你还可以写小程序啥的

[uilvn]

比较简单的办法: 给我投简历，进来我亲自带你 :D

[zhangbohun]

和楼主差不多的前端水平时候写的总结，仅供参考，https://blog.csdn.net/zhangbohun/article/details/61935231
后来也简单用过 Vue

[iseki]

@qwerthhusn 然而整个开发环境构建工具是跑在 node.js 上的，包管理器 npm/yarn 似乎没什么可学的…其实 webpack 感觉需要的时候再去看也行，create-react-app 一把梭

[qwerthhusn]

@zhangbohun 感谢！ 6 又知道了一个库 Underscore，就像 Java 里面的 commons-lang 或者 Guava 一样，有一些常用的方便的方法
而且还有像 JDK8 那样的集合 Stream 操作，我还以为要找个 RxJS 这种库才能实现呢。。。。。

[lifesimple]

稍微看下 React 如果只是做管理系统的话 直接 antd pro 拿过来看

[qwerthhusn]

@iseki 明白，webpack 我感觉像是 Maven 或者 Gradle 类型的东西。开始初期照着别人弄一套能用就行。

[qwerthhusn]

@tikazyq 是的，一步一个脚印，我还是先花点时间把 JS 入门了再说。再看 JS，发现虽然很好理解，但是语法灵活度要比 Java 高多了

[fengerzh]

@qwerthhusn 灵活是什么意思？你是指'1' == 1 吗？这个应该是更容易了，而不是更难了啊。

[qwerthhusn]

@fengerzh 主要是语法比较多，得慢慢记。比如那个||，在 Java 就是逻辑短路或，但是在这里还有其他的意思（我还没绕清楚）

[Xview]

对楼主最适合的是 vue + iView, 学习成本很低，不需要理解那一大坨莫名其妙被引入进来的东西

[lancelock]

你就 java 加个模板引擎直接写得了，省事多了

[Semaphore]

组里会 antd 的后端开发来说几句，作为后端很浅的学一下 React，主要是它的 state 特性，还有 jsx 大概的格式就可以上手了，按着 antd 的模板现改就 OK，学习成本还是比较低的；我用起来和之前写 js 差不多 [doge]

[jimrok]

我是先后端，再去搞的 react 。主要是 css 开始不太熟练，写不出什么效果来，后来多看别人的实现过程，悟到了，就前后通杀了。

[MasterMonkey]

@thtznet 这是啥？

[shuangyeying]

同问，比较感兴趣。

[serverABCD]

同后端最近找了个前端的活赚点外快，建议先用 vue 做几个项目把 jsx 语法组件通信钩子函数这些有个直观的概念，然后学 react 。

[dayeye2006199]

为啥前端就一定是单页面应用和 JS 呢？ spring 配合个模板引擎（例如 thymeleaf ），服务器端渲染不成吗？

[airfling]

其实我是自学的 angular，和 spring 很像的

[l4ever]

同后端, vue, react 看不懂. 用 jQuery, bootstrap 做的后台也还行. 像模像样的.

[hongch]

@ccraohng 为啥抛弃 dva....

[ppgs8903]

基本上达不到、除了本身的程序、还要会设计、还要视觉和 ux 、其他的配套也要全、基本上前端也不可能一个人搞完。

[waltcow]

ant-design-pro + procomponents + tailwindcss

[karnaugh]

别整 react 了，vue+element

[jydeng]

https://panjiachen.github.io/vue-element-admin-site/zh/
react 上手难度高，vue+element 简单好用

[grewer]

umi 一把梭

[cnzjl]

@jimrok css 不太熟练真实了，我到现在还是写不太熟练。。

[liuxey]

@dayeye2006199 #66 因为在模板引擎里写数据渲染+JS 事件是非常容易出错且繁琐的过程，尤其是现在的页面复杂度越来越高，除非是非常简单的展示型网页不然还是用用最新的技术吧

[ccraohng]

@hongch 大部分数据没必要用 dva，最重要的是模板代码太恶心了。用 hook 以后，dva 显得格格不入，全局数据的用全局 model 或者 context 就可以了。

[dutianze]

推荐这个教程

[dutianze]

接上 https://fullstackopen.com/zh/

[JHExp]

antd 看文档就能直接开梭啊 就是 css 是真的难写 react hook 稍微看一下就差不多了

[sardine]

要是后期想自己一直维护的话，我觉得用 react 会好一些

[sardine]

简单上手的话，就去找几个入门教程的视频看看，看视频还是快

[afc163]

@x940727 #17 Umi 用不惯就直接上 create-react-app 吧，官网上第一推荐的也是这个