我自己脑海里有个小产品,想自己学习前端用 TS,AntD React 把其做出来。
本人“精通”Java,熟悉 HTTP 协议栈的细节,WebSocket 协议也很熟悉(都是用 Wireshark 仔细观察不同的 Content-Type 的请求的具体形式),但是对前端开发停留在document.getElementById
的水平,因为几年前用过 Spring MVC 写过一些 JSP 页面,而且都是照着别人的页面去写的,那时还是 HTML4 和 IE8 的天下。
我之前把 React 官网上的 OX 棋 demo 给研究了一下(不是抄,每一步都是自己尝试着去写),学完之后直接上 AntD 发现啥也写不出来,不知道咋弄。过段时间全忘记了。
求大神给一个快速的学习路线,能多久入门前端并能写一些东西。
1
sjhhjx0122 2021-03-17 10:53:59 +08:00
react 官网教程看完啥都没学会,先学 vue 这个自动档入门~再去看手动档的 react 就好写了,其实你“精通”Java 完全可以去看战斗机 angular ~
|
2
draymonder 2021-03-17 11:03:54 +08:00
推荐先看 vue, 从我后端的角度来认知,vue 和 react 的目的也是和 jsp 一样的,为了复用
|
3
wxw752 2021-03-17 11:04:33 +08:00
同意楼上,vue 起步
|
4
murmur 2021-03-17 11:06:46 +08:00
兼职前端学 vue 可以,react 有点难
|
5
godbasin 2021-03-17 11:10:38 +08:00
vue 的话可以参考这个: https://github.com/godbasin/vue-ebook
|
6
chogath 2021-03-17 11:10:57 +08:00
哥,先看 vue 。把前端的常规流程( node.js 环境、项目构建、项目打包、项目部署)这一套玩通,然后再研究下 vue/react 的实现方式。最后学一下 webpack 就可以啦
|
7
chogath 2021-03-17 11:11:55 +08:00
同意 1 楼的,如果你熟悉 java 可以 angular nest.js 一把梭,完全是 spring 的玩法。
|
8
Kasumi20 2021-03-17 11:13:52 +08:00
先学 Node.js ,不会 Node 怎么玩现代前端工具?
|
9
Kasumi20 2021-03-17 11:14:07 +08:00
然后是 webpack
|
10
tonytonychopper 2021-03-17 11:14:35 +08:00 via iPhone
用 react 把 todolist 写完,估计就差不多了,不需要额外再学 Vue
|
11
qwerthhusn OP @murmur
@wxw752 @draymonder @sjhhjx0122 感谢大佬们,那是看 2.X 还是 3.X 呢?听说 3.X 又跟 React 非常像了。。。 看了很多评论,感觉好像 React 和 Vue 之间有鄙视链,甚至 TS 和 JS 之间也有鄙视链,本来想一步到胃,但是功夫不行,到位不了。。 |
12
qwerthhusn OP @Kasumi20 老哥你是说的 npm 还是 Node.js???? Node.js 是做后端的吧,我又不用 NodeJS 做后端。。。NPM 的话不就那几个命令么?
|
13
murmur 2021-03-17 11:18:26 +08:00
@qwerthhusn 用 2 就可以
直接用 vue-admin-template 开局,不要自己做 |
14
c9792536451 2021-03-17 11:18:49 +08:00
@qwerthhusn node 是环境 npm 要装在上边的
|
15
ch2 2021-03-17 11:18:58 +08:00
最麻烦的其实是 webpack,你搞个别人配好的模板 project 比各种瞎踩坑进度会快很多
技术栈别选那种给团队用的 redux 、dva 啥的,用 mobx 最简单了 react hooks 可以先不学,用 class component 会更省时间 剩下的无非是学 antd 给你的控件跟 css |
16
cxe2v 2021-03-17 11:24:37 +08:00
@qwerthhusn #11 直接学 3.0,毕竟这是趋势
|
17
x940727 2021-03-17 11:25:28 +08:00
国内 React 麻烦的主要是 UI 框架大部分都是 AntD,但是 AntD 的最佳实践又和 Umi 绑定,又要去学 Umi,然后 Umi 又带来了各种乱七八糟的问题,于是上手成本就异常的高。
|
18
kayv 2021-03-17 11:31:22 +08:00
@x940727 道出真相了,我一个老后端上来就劝退了,但是学 vue 和 ng 基本一天就上手。看 AntD 和 umi 有点神烦[🤣
|
20
shintendo 2021-03-17 11:35:28 +08:00
react 官网教程是很诡异的,写个井字棋,而不是典型的常规网页形态,你觉得看完了无从上手是正常的
|
21
jinzhongyuan 2021-03-17 11:38:38 +08:00
啊,俺也一样
|
22
ccraohng 2021-03-17 11:40:18 +08:00 via iPhone
直接上 antd -pro,抛弃 dva 这玩意儿
|
23
zhoushushu 2021-03-17 11:42:51 +08:00
不是说会 java 的,直接上手 angular 嘛,你可以看看 angular 啊。
|
24
zhwithsweet 2021-03-17 11:43:22 +08:00
@kayv emmm 阿里除了 Ant,别的东西私货太鸡儿多了。https://www.gatsbyjs.com/ 用 gatsbyjs
|
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 。 |
26
darknoll 2021-03-17 11:49:12 +08:00
都精通 java 了,区区 react 还不是几天就能拿下?
|
27
Jrue0011 2021-03-17 11:49:18 +08:00
springboot 还有个 vaadin 。。。也是用 java 做前端页面
|
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 的安装文档,就完事了。 |
29
thtznet 2021-03-17 11:53:33 +08:00 1
后端,建议 MAUI 起步,做管理系统绰绰有余。
|
30
TimPeake 2021-03-17 11:53:35 +08:00
你想学东西还是想做东西 ?想学东西建议还是先自己用官方脚手架搭个项目玩玩 结合网上案例代码几天差不多就熟悉了。
想做东西就直接 ant design pro , 对 你没得选。 |
31
karott7 2021-03-17 11:59:44 +08:00
直接 Vue 全家桶就好了,什么都帮你配好了,入门基础 JS 语法和熟悉下 ES6 语法,就能写东西了。
至于 webpack,Vue-cli 都帮你继承好了,你什么都不用配 |
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 吧,对着例子改就是了。 |
33
nl101531 2021-03-17 12:33:05 +08:00 via iPhone
angular,上手就写
|
34
yxt 2021-03-17 12:37:38 +08:00
如果不是前端就业而且是做 admin, angular 不更顺手? ng-zorro, ng-alain 直接上就行
|
35
knightdf 2021-03-17 12:56:51 +08:00
angular 啊,我就学的 angular,用 angular 版的 antd 就行了
|
36
lihongming 2021-03-17 13:07:46 +08:00 via iPhone
后端学 class 版的 react 应该很容易上手,跟后端的类思路一致。
但现在官网主推函数式组件,antd 也主推函数式的用法。函数式习惯了确实好使,但对后端来说首先得学习一种新的思想,这就平白增加了学习时间和难度。 建议找找老教程,使用老版的 antd,还是有 class 的教程和示例的 |
37
tinyuu 2021-03-17 13:09:30 +08:00
和写 jsp servlet 一样啊
|
38
90d0n 2021-03-17 13:14:19 +08:00
java 程序员吗, 那建议 angular, 概念和 spring 差不多, 看看文档直接就能上手了.
|
39
90d0n 2021-03-17 13:16:20 +08:00 1
用 angular 跟 spring 一样爽, 大而全, 不像 vue 和 react 那样到处找组件或者周边库.
angular 一把梭, 需要用的都在里边了, 非常适合 spring 程序员上手. |
40
rodrick 2021-03-17 13:20:00 +08:00
首先,不要管什么狗屁鄙视链,前端娱乐圈一直这样,vue 肯定是最快的,后台管理都有很多现成的项目,vue+elementUI 绝对是新手最快的,也没必要上 ts,不过 java 程序员的话可能对 ts 反而更好上手? react 对于 js 基础还是比较高的,另外 angular 可以考虑,我个人没用过 angular 不做评价了
|
41
ivyliner 2021-03-17 13:35:59 +08:00
@qwerthhusn 其实前端也没有啥难的(我指的是要做自己的小作品场景下).
看看我作为一个运维工程师的业余作品 https://engineerdraft.com/ 什么 React, Vue, Antd, 小程序, SwiftUI 一把梭. Webpack 是个啥? 需要懂吗 ? 反正我目前还没有到需要 unpack 它的程度, 大部分人其实不就是写个配置文件嘛. 总要的是要改变自己的 mindset, 就当成一个新东西来学, 不要停留在之前 网页三剑客时代的思维就好了. |
42
agdhole 2021-03-17 13:38:07 +08:00
Java 写前端,那选 angular
|
43
Oktfolio 2021-03-17 14:02:57 +08:00
Vue 如果不是为了快速做个人项目的话没必要去学。Angular 和 React 都可以,React 其实就 Redux 会麻烦一点。后两个写 TypeScript 不比 Vue 半残的 TypeScript 香?
|
44
lifeintools 2021-03-17 14:06:49 +08:00 via iPhone
都是靠接私活来学新技术
|
45
tikazyq 2021-03-17 14:17:59 +08:00
先学习如何做到不好高骛远
|
46
zgren 2021-03-17 14:18:20 +08:00
从 Vue 开始学习好点,然后用 UI 框架和 cli 脚手架开搞,做简单的布局,然后开始页面功能和接口数据请求,然后慢慢理解
|
47
cgpiao 2021-03-17 14:28:25 +08:00 via iPhone
@thtznet maui 连官网都没有吧,比如介绍组建,生命周期等等的地方。其实我蛮想尝试这个写下一个 app,但感觉是不是太早了点。
|
48
wwwtarzan 2021-03-17 14:51:59 +08:00
要不试试 angular ? 之前我老板就是 JAVA 出身 比较推崇 angular
|
49
neptuno 2021-03-17 15:03:41 +08:00
vue 简单点,,,学了 vue 你还可以写小程序啥的
|
50
uilvn 2021-03-17 15:44:06 +08:00
比较简单的办法: 给我投简历,进来我亲自带你 :D
|
51
zhangbohun 2021-03-17 16:02:56 +08:00
和楼主差不多的前端水平时候写的总结,仅供参考,https://blog.csdn.net/zhangbohun/article/details/61935231
后来也简单用过 Vue |
52
iseki 2021-03-17 16:09:09 +08:00 via Android
@qwerthhusn 然而整个开发环境构建工具是跑在 node.js 上的,包管理器 npm/yarn 似乎没什么可学的…其实 webpack 感觉需要的时候再去看也行,create-react-app 一把梭
|
53
qwerthhusn OP @zhangbohun 感谢! 6 又知道了一个库 Underscore,就像 Java 里面的 commons-lang 或者 Guava 一样,有一些常用的方便的方法
而且还有像 JDK8 那样的集合 Stream 操作,我还以为要找个 RxJS 这种库才能实现呢。。。。。 |
54
lifesimple 2021-03-17 17:03:26 +08:00
稍微看下 React 如果只是做管理系统的话 直接 antd pro 拿过来看
|
55
qwerthhusn OP @iseki 明白,webpack 我感觉像是 Maven 或者 Gradle 类型的东西。开始初期照着别人弄一套能用就行。
|
56
qwerthhusn OP @tikazyq 是的,一步一个脚印,我还是先花点时间把 JS 入门了再说。再看 JS,发现虽然很好理解,但是语法灵活度要比 Java 高多了
|
57
fengerzh 2021-03-17 17:10:28 +08:00
@qwerthhusn 灵活是什么意思?你是指'1' == 1 吗?这个应该是更容易了,而不是更难了啊。
|
58
qwerthhusn OP @fengerzh 主要是语法比较多,得慢慢记。比如那个||,在 Java 就是逻辑短路或,但是在这里还有其他的意思(我还没绕清楚)
|
59
Xview 2021-03-17 18:05:40 +08:00
对楼主最适合的是 vue + iView, 学习成本很低,不需要理解那一大坨莫名其妙被引入进来的东西
|
60
lancelock 2021-03-17 18:16:05 +08:00
你就 java 加个模板引擎直接写得了,省事多了
|
61
Semaphore 2021-03-17 18:20:58 +08:00 1
组里会 antd 的后端开发来说几句,作为后端很浅的学一下 React,主要是它的 state 特性,还有 jsx 大概的格式就可以上手了,按着 antd 的模板现改就 OK,学习成本还是比较低的;我用起来和之前写 js 差不多 [doge]
|
62
jimrok 2021-03-17 22:10:46 +08:00 2
我是先后端,再去搞的 react 。主要是 css 开始不太熟练,写不出什么效果来,后来多看别人的实现过程,悟到了,就前后通杀了。
|
63
MasterMonkey 2021-03-17 22:26:04 +08:00 via iPhone
@thtznet 这是啥?
|
64
shuangyeying 2021-03-17 23:10:49 +08:00
同问,比较感兴趣。
|
65
serverABCD 2021-03-18 01:01:14 +08:00
同后端最近找了个前端的活赚点外快,建议先用 vue 做几个项目把 jsx 语法组件通信钩子函数这些有个直观的概念,然后学 react 。
|
66
dayeye2006199 2021-03-18 02:06:38 +08:00
为啥前端就一定是单页面应用和 JS 呢? spring 配合个模板引擎(例如 thymeleaf ),服务器端渲染不成吗?
|
67
airfling 2021-03-18 08:19:57 +08:00
其实我是自学的 angular,和 spring 很像的
|
68
l4ever 2021-03-18 08:34:06 +08:00
同后端, vue, react 看不懂. 用 jQuery, bootstrap 做的后台也还行. 像模像样的.
|
70
ppgs8903 2021-03-18 09:11:59 +08:00
基本上达不到、除了本身的程序、还要会设计、还要视觉和 ux 、其他的配套也要全、基本上前端也不可能一个人搞完。
|
71
waltcow 2021-03-18 09:40:29 +08:00
ant-design-pro + procomponents + tailwindcss
|
72
karnaugh 2021-03-18 09:43:03 +08:00
别整 react 了,vue+element
|
73
jydeng 2021-03-18 09:46:29 +08:00
https://panjiachen.github.io/vue-element-admin-site/zh/
react 上手难度高,vue+element 简单好用 |
74
grewer 2021-03-18 09:46:59 +08:00
umi 一把梭
|
76
liuxey 2021-03-18 10:53:13 +08:00
@dayeye2006199 #66 因为在模板引擎里写数据渲染+JS 事件是非常容易出错且繁琐的过程,尤其是现在的页面复杂度越来越高,除非是非常简单的展示型网页不然还是用用最新的技术吧
|
77
ccraohng 2021-03-18 11:05:45 +08:00 via iPhone
@hongch 大部分数据没必要用 dva,最重要的是模板代码太恶心了。用 hook 以后,dva 显得格格不入,全局数据的用全局 model 或者 context 就可以了。
|
78
dutianze 2021-03-18 13:15:35 +08:00
推荐这个教程
|
79
dutianze 2021-03-18 13:16:02 +08:00
|
80
JHExp 2021-03-18 13:33:01 +08:00
antd 看文档就能直接开梭啊 就是 css 是真的难写 react hook 稍微看一下就差不多了
|
81
sardine 2021-03-18 16:12:46 +08:00
要是后期想自己一直维护的话,我觉得用 react 会好一些
|
82
sardine 2021-03-18 16:13:48 +08:00
简单上手的话,就去找几个入门教程的视频看看,看视频还是快
|