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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1339 天前的主题，其中的信息可能已经有所发展或是发生改变。

我自己脑海里有个小产品，想自己学习前端用 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 这些一把梭。。。

antd

React

前端

IE8

83 条回复 • 2021-03-19 09:44:57 +08:00

sjhhjx0122

2021-03-17 10:53:59 +08:00

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

draymonder

2021-03-17 11:03:54 +08:00

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

wxw752

2021-03-17 11:04:33 +08:00

同意楼上，vue 起步

murmur

2021-03-17 11:06:46 +08:00

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

godbasin

2021-03-17 11:10:38 +08:00

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

chogath

2021-03-17 11:10:57 +08:00

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

chogath

2021-03-17 11:11:55 +08:00

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

Kasumi20

2021-03-17 11:13:52 +08:00

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

Kasumi20

2021-03-17 11:14:07 +08:00

然后是 webpack

tonytonychopper

2021-03-17 11:14:35 +08:00 via iPhone

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

qwerthhusn

2021-03-17 11:15:12 +08:00

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

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

qwerthhusn

2021-03-17 11:17:13 +08:00

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

murmur

2021-03-17 11:18:26 +08:00

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

c9792536451

2021-03-17 11:18:49 +08:00

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

ch2

2021-03-17 11:18:58 +08:00

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

cxe2v

2021-03-17 11:24:37 +08:00

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

x940727

2021-03-17 11:25:28 +08:00

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

kayv

2021-03-17 11:31:22 +08:00

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

x940727

2021-03-17 11:34:30 +08:00

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

shintendo

2021-03-17 11:35:28 +08:00

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

jinzhongyuan

2021-03-17 11:38:38 +08:00

啊，俺也一样

ccraohng

2021-03-17 11:40:18 +08:00 via iPhone

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

zhoushushu

2021-03-17 11:42:51 +08:00

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

zhwithsweet

2021-03-17 11:43:22 +08:00

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

Asai37

2021-03-17 11:46:52 +08:00

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

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

darknoll

2021-03-17 11:49:12 +08:00

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

Jrue0011

2021-03-17 11:49:18 +08:00

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

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

2021-03-17 11:53:33 +08:00

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

TimPeake

2021-03-17 11:53:35 +08:00

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

karott7

2021-03-17 11:59:44 +08:00

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

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

2021-03-17 12:33:05 +08:00 via iPhone

angular，上手就写

yxt

2021-03-17 12:37:38 +08:00

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

knightdf

2021-03-17 12:56:51 +08:00

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

lihongming

2021-03-17 13:07:46 +08:00 via iPhone

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

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

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

tinyuu

2021-03-17 13:09:30 +08:00

和写 jsp servlet 一样啊

90d0n

2021-03-17 13:14:19 +08:00

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

90d0n

2021-03-17 13:16:20 +08:00

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

rodrick

2021-03-17 13:20:00 +08:00

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

ivyliner

2021-03-17 13:35:59 +08:00

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

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

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

agdhole

2021-03-17 13:38:07 +08:00

Java 写前端，那选 angular

Oktfolio

2021-03-17 14:02:57 +08:00

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

lifeintools

2021-03-17 14:06:49 +08:00 via iPhone

都是靠接私活来学新技术

tikazyq

2021-03-17 14:17:59 +08:00

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

zgren

2021-03-17 14:18:20 +08:00

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

cgpiao

2021-03-17 14:28:25 +08:00 via iPhone

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

wwwtarzan

2021-03-17 14:51:59 +08:00

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

neptuno

2021-03-17 15:03:41 +08:00

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

uilvn

2021-03-17 15:44:06 +08:00

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

zhangbohun

2021-03-17 16:02:56 +08:00

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

iseki

2021-03-17 16:09:09 +08:00 via Android

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

qwerthhusn

2021-03-17 17:02:06 +08:00

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

lifesimple

2021-03-17 17:03:26 +08:00

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

qwerthhusn

2021-03-17 17:03:53 +08:00

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

qwerthhusn

2021-03-17 17:06:55 +08:00

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

fengerzh

2021-03-17 17:10:28 +08:00

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

qwerthhusn

2021-03-17 17:17:49 +08:00

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

Xview

2021-03-17 18:05:40 +08:00

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

lancelock

2021-03-17 18:16:05 +08:00

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

Semaphore

2021-03-17 18:20:58 +08:00

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

jimrok

2021-03-17 22:10:46 +08:00

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

MasterMonkey

2021-03-17 22:26:04 +08:00 via iPhone

@thtznet 这是啥？

shuangyeying

2021-03-17 23:10:49 +08:00

同问，比较感兴趣。

serverABCD

2021-03-18 01:01:14 +08:00

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

dayeye2006199

2021-03-18 02:06:38 +08:00

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

airfling

2021-03-18 08:19:57 +08:00

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

l4ever

2021-03-18 08:34:06 +08:00

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

hongch

2021-03-18 08:55:34 +08:00

@ccraohng 为啥抛弃 dva....

ppgs8903

2021-03-18 09:11:59 +08:00

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

waltcow

2021-03-18 09:40:29 +08:00

ant-design-pro + procomponents + tailwindcss

karnaugh

2021-03-18 09:43:03 +08:00

别整 react 了，vue+element

jydeng

2021-03-18 09:46:29 +08:00

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

grewer

2021-03-18 09:46:59 +08:00

umi 一把梭

cnzjl

2021-03-18 09:53:38 +08:00

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

liuxey

2021-03-18 10:53:13 +08:00

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

ccraohng

2021-03-18 11:05:45 +08:00 via iPhone

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

dutianze

2021-03-18 13:15:35 +08:00

推荐这个教程

dutianze

2021-03-18 13:16:02 +08:00

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

JHExp

2021-03-18 13:33:01 +08:00

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

sardine

2021-03-18 16:12:46 +08:00

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

sardine

2021-03-18 16:13:48 +08:00

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

afc163

2021-03-19 09:44:57 +08:00

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