我自己脑海里有个小产品，想自己学习前端用 TS，AntD React 把其做出来。
本人“精通”Java，熟悉 HTTP 协议栈的细节，WebSocket 协议也很熟悉（都是用 Wireshark 仔细观察不同的 Content-Type 的请求的具体形式），但是对前端开发停留在document.getElementById的水平，因为几年前用过 Spring MVC 写过一些 JSP 页面，而且都是照着别人的页面去写的，那时还是 HTML4 和 IE8 的天下。
我之前把 React 官网上的 OX 棋 demo 给研究了一下（不是抄，每一步都是自己尝试着去写），学完之后直接上 AntD 发现啥也写不出来，不知道咋弄。过段时间全忘记了。
求大神给一个快速的学习路线，能多久入门前端并能写一些东西。
 |
linkopeneyesMar 17, 2021
1
react 官网教程看完啥都没学会，先学 vue 这个自动档入门～再去看手动档的 react 就好写了，其实你“精通”Java 完全可以去看战斗机 angular ～
|
 |
draymonderMar 17, 2021
2
推荐先看 vue, 从我后端的角度来认知，vue 和 react 的目的也是和 jsp 一样的，为了复用
|
 |
rockdddMar 17, 2021
3
同意楼上，vue 起步
|
 |
murmurMar 17, 2021
4
兼职前端学 vue 可以，react 有点难
|
 |
godbasinMar 17, 2021
5
vue 的话可以参考这个： https://github.com/godbasin/vue-ebook
|
 |
chogathMar 17, 2021
6
哥，先看 vue 。把前端的常规流程（ node.js 环境、项目构建、项目打包、项目部署）这一套玩通，然后再研究下 vue/react 的实现方式。最后学一下 webpack 就可以啦
|
|
chogathMar 17, 2021
7
同意 1 楼的，如果你熟悉 java 可以 angular nest.js 一把梭，完全是 spring 的玩法。
|
 |
Kasumi20Mar 17, 2021
8
先学 Node.js ，不会 Node 怎么玩现代前端工具？
|
|
Kasumi20Mar 17, 2021
9
然后是 webpack
|
 |
tonytonychopperMar 17, 2021 via iPhone
10
用 react 把 todolist 写完，估计就差不多了，不需要额外再学 Vue
|
 |
11
@murmur
@wxw752 @draymonder @sjhhjx0122 感谢大佬们，那是看 2.X 还是 3.X 呢？听说 3.X 又跟 React 非常像了。。。 看了很多评论，感觉好像 React 和 Vue 之间有鄙视链，甚至 TS 和 JS 之间也有鄙视链，本来想一步到胃，但是功夫不行，到位不了。。 |
|
12
@Kasumi20 老哥你是说的 npm 还是 Node.js???? Node.js 是做后端的吧，我又不用 NodeJS 做后端。。。NPM 的话不就那几个命令么？
|
|
murmurMar 17, 2021
13
@qwerthhusn 用 2 就可以
直接用 vue-admin-template 开局，不要自己做 |
 |
c9792536451Mar 17, 2021
14
@qwerthhusn node 是环境 npm 要装在上边的
|
 |
ch2Mar 17, 2021
15
最麻烦的其实是 webpack,你搞个别人配好的模板 project 比各种瞎踩坑进度会快很多
技术栈别选那种给团队用的 redux 、dva 啥的，用 mobx 最简单了 react hooks 可以先不学，用 class component 会更省时间 剩下的无非是学 antd 给你的控件跟 css |
 |
cxe2vMar 17, 2021
16
@qwerthhusn #11 直接学 3.0，毕竟这是趋势
|
 |
x940727Mar 17, 2021
17
国内 React 麻烦的主要是 UI 框架大部分都是 AntD，但是 AntD 的最佳实践又和 Umi 绑定，又要去学 Umi，然后 Umi 又带来了各种乱七八糟的问题，于是上手成本就异常的高。
|
 |
shintendoMar 17, 2021
20
react 官网教程是很诡异的，写个井字棋，而不是典型的常规网页形态，你觉得看完了无从上手是正常的
|
 |
jinzhongyuanMar 17, 2021
21
啊，俺也一样
|
 |
ccraohngMar 17, 2021 via iPhone
22
直接上 antd -pro，抛弃 dva 这玩意儿
|
 |
zhoushushuMar 17, 2021
23
不是说会 java 的，直接上手 angular 嘛，你可以看看 angular 啊。
|
 |
zhwithsweetMar 17, 2021
24
@kayv emmm 阿里除了 Ant，别的东西私货太鸡儿多了。https://www.gatsbyjs.com/ 用 gatsbyjs
|
 |
25
推荐 Ant Design Pro
文档： https://pro.ant.design/docs/getting-started-cn 预览： https://preview.pro.ant.design 这是蚂蚁官方基于 Antd 组件库封装的前端框架，相当于 React + Antd + Umi 的最佳实践了。 最佳实践，就是把前端开发过程中的相关功能都封装了，布局+路由+接口请求+权限等等。 优点是直接拿过来就能用，缺点是封装的功能太多，有些可能是你用不到的。 现在是 正式版是 v4，预览版是 v5 。 |
 |
darknollMar 17, 2021
26
都精通 java 了，区区 react 还不是几天就能拿下？
|
 |
Jrue0011Mar 17, 2021
27
springboot 还有个 vaadin 。。。也是用 java 做前端页面
|
 |
shuniaMar 17, 2021
28
推荐 vue 的是什么鬼啊，不是应该找一个整合了 antd 的现成的管理后台框架，改吧改吧是最快的吗？
另外 react 的入手学习应该是 CRA: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app，然后配合 antd 的安装文档，就完事了。 |
 |
29
后端，建议 MAUI 起步，做管理系统绰绰有余。
|
 |
TimPeakeMar 17, 2021
30
你想学东西还是想做东西 ？想学东西建议还是先自己用官方脚手架搭个项目玩玩 结合网上案例代码几天差不多就熟悉了。
想做东西就直接 ant design pro , 对 你没得选。 |
 |
karott7Mar 17, 2021
31
直接 Vue 全家桶就好了，什么都帮你配好了，入门基础 JS 语法和熟悉下 ES6 语法，就能写东西了。
至于 webpack，Vue-cli 都帮你继承好了，你什么都不用配 |
|
linkopeneyesMar 17, 2021
32
@qwerthhusn nest(spring)，egg 是后端框架，umi 是阿里出的 react 脚手架。
因为 react 一直把自己当个库，所以 react 的周边基本都不是官方维护的，导致社区百花齐放，大家都觉得自己是最佳实践，入门就蒙了，react router 为什么那么多版本，redux，mobx，context+hooks 到底那个比较好用，useMemo，useCallback 这些 api 到底什么时候用，以前如果用官方的 cra 想改点 webpack 配置真是老费劲了。 而 vue，angualr，大家几乎都是用官方的东西，出问题好解决，也不用找来找去，这就很适合前端都不了解上手。 喜欢 antd 也可以直接 antd pro 吧，对着例子改就是了。 |
 |
nl101531Mar 17, 2021 via iPhone
33
angular，上手就写
|
 |
yxtMar 17, 2021
34
如果不是前端就业而且是做 admin, angular 不更顺手? ng-zorro, ng-alain 直接上就行
|
 |
knightdfMar 17, 2021
35
angular 啊，我就学的 angular，用 angular 版的 antd 就行了
|
 |
lihongmingMar 17, 2021 via iPhone
36
后端学 class 版的 react 应该很容易上手，跟后端的类思路一致。
但现在官网主推函数式组件，antd 也主推函数式的用法。函数式习惯了确实好使，但对后端来说首先得学习一种新的思想，这就平白增加了学习时间和难度。 建议找找老教程，使用老版的 antd，还是有 class 的教程和示例的 |
 |
tinyuuMar 17, 2021
37
和写 jsp servlet 一样啊
|
 |
BrbiwsFtd9zDGZqBMar 17, 2021
38
java 程序员吗, 那建议 angular, 概念和 spring 差不多, 看看文档直接就能上手了.
|
|
39
用 angular 跟 spring 一样爽, 大而全, 不像 vue 和 react 那样到处找组件或者周边库.
angular 一把梭, 需要用的都在里边了, 非常适合 spring 程序员上手. |
 |
rodrickMar 17, 2021
40
首先，不要管什么狗屁鄙视链，前端娱乐圈一直这样，vue 肯定是最快的，后台管理都有很多现成的项目，vue+elementUI 绝对是新手最快的，也没必要上 ts，不过 java 程序员的话可能对 ts 反而更好上手？ react 对于 js 基础还是比较高的，另外 angular 可以考虑，我个人没用过 angular 不做评价了
|
 |
ivylinerMar 17, 2021
41
@qwerthhusn 其实前端也没有啥难的(我指的是要做自己的小作品场景下).
看看我作为一个运维工程师的业余作品 https://engineerdraft.com/ 什么 React, Vue, Antd, 小程序, SwiftUI 一把梭. Webpack 是个啥? 需要懂吗 ? 反正我目前还没有到需要 unpack 它的程度, 大部分人其实不就是写个配置文件嘛. 总要的是要改变自己的 mindset, 就当成一个新东西来学, 不要停留在之前 网页三剑客时代的思维就好了. |
 |
agdholeMar 17, 2021
42
Java 写前端，那选 angular
|
 |
OktfolioMar 17, 2021
43
Vue 如果不是为了快速做个人项目的话没必要去学。Angular 和 React 都可以，React 其实就 Redux 会麻烦一点。后两个写 TypeScript 不比 Vue 半残的 TypeScript 香？
|
 |
lifeintoolsMar 17, 2021 via iPhone
44
都是靠接私活来学新技术
|
 |
tikazyqMar 17, 2021
45
先学习如何做到不好高骛远
|
 |
zgrenMar 17, 2021
46
从 Vue 开始学习好点，然后用 UI 框架和 cli 脚手架开搞，做简单的布局，然后开始页面功能和接口数据请求，然后慢慢理解
|
 |
cgpiaoMar 17, 2021 via iPhone
47
@thtznet maui 连官网都没有吧，比如介绍组建，生命周期等等的地方。其实我蛮想尝试这个写下一个 app，但感觉是不是太早了点。
|
 |
wwwtarzanMar 17, 2021
48
要不试试 angular ？ 之前我老板就是 JAVA 出身 比较推崇 angular
|
 |
neptunoMar 17, 2021
49
vue 简单点，，，学了 vue 你还可以写小程序啥的
|
 |
uilvnMar 17, 2021
50
比较简单的办法: 给我投简历，进来我亲自带你 :D
|
 |
zhangbohunMar 17, 2021
51
和楼主差不多的前端水平时候写的总结，仅供参考，https://blog.csdn.net/zhangbohun/article/details/61935231
后来也简单用过 Vue |
 |
isekiMar 17, 2021 via Android
52
@qwerthhusn 然而整个开发环境构建工具是跑在 node.js 上的，包管理器 npm/yarn 似乎没什么可学的…其实 webpack 感觉需要的时候再去看也行，create-react-app 一把梭
|
|
53
@zhangbohun 感谢！ 6 又知道了一个库 Underscore，就像 Java 里面的 commons-lang 或者 Guava 一样，有一些常用的方便的方法
而且还有像 JDK8 那样的集合 Stream 操作，我还以为要找个 RxJS 这种库才能实现呢。。。。。 |
 |
lifesimpleMar 17, 2021
54
稍微看下 React 如果只是做管理系统的话 直接 antd pro 拿过来看
|
|
55
@iseki 明白，webpack 我感觉像是 Maven 或者 Gradle 类型的东西。开始初期照着别人弄一套能用就行。
|
|
56
@tikazyq 是的，一步一个脚印，我还是先花点时间把 JS 入门了再说。再看 JS，发现虽然很好理解，但是语法灵活度要比 Java 高多了
|
 |
fengerzhMar 17, 2021
57
@qwerthhusn 灵活是什么意思？你是指'1' == 1 吗？这个应该是更容易了，而不是更难了啊。
|
|
58
@fengerzh 主要是语法比较多，得慢慢记。比如那个||，在 Java 就是逻辑短路或，但是在这里还有其他的意思（我还没绕清楚）
|
 |
XviewMar 17, 2021
59
对楼主最适合的是 vue + iView, 学习成本很低，不需要理解那一大坨莫名其妙被引入进来的东西
|
 |
lancelockMar 17, 2021
60
你就 java 加个模板引擎直接写得了，省事多了
|
 |
61
组里会 antd 的后端开发来说几句，作为后端很浅的学一下 React，主要是它的 state 特性，还有 jsx 大概的格式就可以上手了，按着 antd 的模板现改就 OK，学习成本还是比较低的；我用起来和之前写 js 差不多 [doge]
|
 |
62
我是先后端，再去搞的 react 。主要是 css 开始不太熟练，写不出什么效果来，后来多看别人的实现过程，悟到了，就前后通杀了。
|
 |
MasterMonkeyMar 17, 2021 via iPhone
63
@thtznet 这是啥？
|
 |
shuangyeyingMar 17, 2021
64
同问，比较感兴趣。
|
 |
serverABCDMar 18, 2021
65
同后端最近找了个前端的活赚点外快，建议先用 vue 做几个项目把 jsx 语法组件通信钩子函数这些有个直观的概念，然后学 react 。
|
 |
dayeye2006199Mar 18, 2021
66
为啥前端就一定是单页面应用和 JS 呢？ spring 配合个模板引擎（例如 thymeleaf ），服务器端渲染不成吗？
|
 |
airflingMar 18, 2021
67
其实我是自学的 angular，和 spring 很像的
|
 |
luckycMar 18, 2021
68
同后端, vue, react 看不懂. 用 jQuery, bootstrap 做的后台也还行. 像模像样的.
|
 |
ppgs8903Mar 18, 2021
70
基本上达不到、除了本身的程序、还要会设计、还要视觉和 ux 、其他的配套也要全、基本上前端也不可能一个人搞完。
|
 |
waltcowMar 18, 2021
71
ant-design-pro + procomponents + tailwindcss
|
 |
karnaughMar 18, 2021
72
别整 react 了，vue+element
|
 |
jydengMar 18, 2021
73
https://panjiachen.github.io/vue-element-admin-site/zh/
react 上手难度高，vue+element 简单好用 |
 |
grewerMar 18, 2021
74
umi 一把梭
|
 |
auinMar 18, 2021
76
@dayeye2006199 #66 因为在模板引擎里写数据渲染+JS 事件是非常容易出错且繁琐的过程，尤其是现在的页面复杂度越来越高，除非是非常简单的展示型网页不然还是用用最新的技术吧
|
|
ccraohngMar 18, 2021 via iPhone
77
@hongch 大部分数据没必要用 dva，最重要的是模板代码太恶心了。用 hook 以后，dva 显得格格不入，全局数据的用全局 model 或者 context 就可以了。
|
 |
dutianzeMar 18, 2021
78
推荐这个教程
|
|
dutianzeMar 18, 2021
79
|
 |
JHExpMar 18, 2021
80
antd 看文档就能直接开梭啊 就是 css 是真的难写 react hook 稍微看一下就差不多了
|
 |
sardineMar 18, 2021
81
要是后期想自己一直维护的话，我觉得用 react 会好一些
|
|
sardineMar 18, 2021
82
简单上手的话，就去找几个入门教程的视频看看，看视频还是快
|
1
Select Language