需求背景
1 、主业 java 后端开发，项目空窗期比较多
2 、想再掌握一点前端开发技能，不敢说可以单独开发、有些 bug 或者前端功能可以自己独立上手处理
3 、目前项目中是用 nodejs 、ts 、nextjs 、react 都有用
现在情况
1 、上周开始 大概 review 一遍 js 基础知识点，然后了解到 nodejs 、react 、nextjs 、typescript
2 、上周按 nextjs 那个教程动手撸了一遍 demo ，对这些个框架稍微有些了解是干啥的
3 、因为看 nodejs 、react 、nextjs 、typescript 这些文档的过程中，交叉的太多，有点懵逼了，那最后到底该按啥顺序入门好些呢？

收藏主题的人也太多了点吧？

收藏主题的这波人务必结合自身情况行动起来

可以暂时放弃 typescript ，react 的核心知识最重要，建议学 The Road to React ，Hook 版本就很好，免费的。
to

基础是 html css javascript XMLHttpRequest
一把梭就 vite+vue 配合 vue 的各种生态，ui 组件库，npm 上的轮子

建议先试试 ai,想做啥先让 ai 做个初版,看自己能不能看明白&改明白,
明白了你就学会了前端了😅
v0.dev/

哪不懂问 ai 就好了吧

vue 可能暂时不考虑，主要结合公司的前端项目用到的框架来走，不然没办法学以致用

好的，我调整下优先级

ai 固然好，但还是想了解下前端的这些知识

我也是后端，最近也在学 vue 。
大概就是在 B 站找一个 24 年的对应框架的视频，跟着做一遍就好了

哈哈，前后端互相卷了 ，我们是没办法，后端人多，前端人少，只能想办法去学起前端知识，分摊点活

学习的话建议不要看公司前端的框架，会把你带跑偏。直接看 vue 、react 的官方文档。然后 css 用 tailwind （他的文档写的很好，对你学习 css 很有帮助）

＃1 为啥要放弃 ts

转换阶段，语言是次要的，选定一个加 gpt 辅助一下也能入门，完全 0 接触的建议还是原生 js 入手
重要的是思想，前后端完全不同
后端一般直接就是数据驱动，是明显可见的，变化的是当前状态和数据的呼应，纯数据计算状态不多，做硬件或系统级的状态才多，所以难点的更多是数据量(数量或频次)
前端是用户的操作事件驱动，不可预料的事情很多，变化的就是这个事件，要做很多“确认”步骤才能得出状态，然后才是产生数据，所以很重要的点是了解用户的操作事件，以及这个事件如何确认状态；例如鼠标动作是左键单击、右键单击、左键双击、按下、释放回弹(两者共同才构成 click)、滑入、滑出(两者共同构成一个滑过)……要做确认状态，还要做排除状态，例如按下是先于 click ，两个都响应的话就要厘清，如拖放操作是必须判断按下事件的

上述说的是 client 端，纯 web 端没这么复杂，因为 web 端思想是一次提交，client 端是每个操作各自提交，只是可能提交对象是给富客户端而不是后台，所以现在很多开发都转 web UI 就是简化事件来开发(懒？)

可能 css 相关的会往后放，我后端 主要任务就是 新需求的页面、组件化、还有就是和后端数据的请求交互上要我们干，样式啥的还是前端自己负责

可能 css 相关的会往后放，我后端 主要任务就是 新需求的页面、组件化、还有就是和后端数据的请求交互上要我们干，样式啥的还是前端自己负责

如果这样的话，简单学一学前端工程的页面加载逻辑，以及数据请求方式就可以了。
最好是先让前端打一个脚手架，写几个 demo ，我们后端把数据请求逻辑写完，其他的都交给前端。这样效率很高非常多

＃13 不学 css 的话，那前端不是超级简单吗，什么框架都是那几件事情，只需要定义数据、调用接口、定义一些方法就好了。还是建议你尽早学习 css ，这玩意不难，但是能提升你对前端整体的认知

收到，感谢建议！ 一步一步来，我先完成基本的前端开发任务先，再去折腾 css ， 目前还在学习 react

mark, 我最近也是在学习前端, 一开始想和之前的 rust 经验相结合, (但是感觉有点困难), 目前已经看了 react 和 vue 的入门, 分别写了一个井字棋
我感觉最难受的一点是, 后端的既往开发经验能让我看到一个问题大概就能猜到解决思路,哪怕不动态调试代码都可以(只要是和我目前方向相关的开发问题)

但是前端让我感觉就是, 跟着教程学会之后, 自己想做东西做不出来, 还是得问 ai
遇到一些问题, 很喜欢自己问自己刨根问题, 但前端就是很多事情没那么多原理, 就是一些规定性的东西多, 这个字段就是这个字段这类的
另外就是, 问 AI 的话, 有些概念性的东西还没发确认他说的对不对, 得自己反复验证一下,(不过还是比没有 AI 的时期好一些了)
最后就是, 可能会经常性发生解决 A 问题最好用 B 方案, 但是我以为是 C 方案更好,这类事情.
虽然可以通过更改问 AI 的 prompt 从而一定程度上解决, 但是就让人感觉无头苍蝇吧, 看到一个问题的时候, 后端的开发经验, 没法特别好的为我提供解决眼前问题的思路

时间多的话，还是建议从头开始系统性学习，html 、css 、js 、react 、ts 。
目前正在经历这个过程，html 过了一遍，css layout 学习中。
虽然一开始就跟着 react 官网写了个井字棋，官网文档是挺不错的

《深入解析 css 》

可以花两三天时间看看这个，了解一下前端工程化。
对于后端来说前端的各种名词太多了，需要先整理下框架体系。
你只学 React 的话 Vue 的部分可以跳过，当然看一下也无妨，框架都是相通的：

vue3.chengpeiquan.com/engineering.html

咋这么想不开，Cursor Windsurf 不让用了？

前端不管 CSS 的话，和后端思路没区别。问题就在于前端有 CSS 这个深坑

之前的一个课，感兴趣可以看看， www.xiaobot.net/p/fe?refer=1c9e2277-4405-4c12-93a9-5e982f62c9c6

typescript 不要放弃，不会多浪费你超过 3 小时。

你不需要学习复杂的类型体操，掌握 interface type 的区别。

当一个对象，学会联合类型，做一点点最最最最简单的推导，不可能超过 3 个小时。

然后你在学习别人的代码的时候，包括自己写，受益无穷，省下来不止 3 个小时。

你根本无需学习那么复杂的内容。但你不能不接触。

哦，额外花一个小时看下配置什么的，学会自己走通它的编译。然后以后实际开发中，你基本上也用不到，但你得学会和理解。

好的，收到

同样在学习 rust 中～

步子迈太大了，先学 Vue ，然后 css 、tailwind 。最后 ts 。react 和 next 是用来进阶的。next 还不稳定，你学了也没用，更新几个版本之后写法又变了。

前端最难的是 CSS

vue 啥的 我司目前项目框架中没用到，主要是 react 和 nextjs ，所以起步就只能从这里开始了，咱也不是要转前端开发，其实就是要能兼顾前端功能开发

html 可以 div 一把梭,js 是基本功,css 是魔法(入个门就行) 学完后直接上手 vue

＃29 原来如此，那其实推荐用 cursor 或者 windsurf 写，react,next 没必要学

既然 java 的话，我感觉可以看看 wasm 相关的 UI 。
html 本身没难度，但是那个 CSS ，真是太难搞定了。
Kotlin 有 wasm 的支持，使用 compose web 也能开发出 UI 。
wancool.vercel.app/
我有个实例网站，这个网站你可以 F12 看看，没有使用任何 html 节点。全是 wasm 里面用 cavans 绘制的。我觉得也是一个思路。

理论上像 extjs 这种是最适合后端的

cursor 这玩意在用了，我司前端建议我们用上！ react 、next 有没有必要学，我感觉是后端开发的弊病，凡是技术相关的都喜欢去整体了解一遍 ，总感觉不捋一遍心里不放心，我大抵是病了，病的不清

time.geekbang.org/column/intro/100023201?tab=catalog

s21.ax1x.com/2024/12/10/pAH1Gy8.png

这个课在极客时间 10w 学了。

img.so/image/2RXG5C

这图就发不了是吧

ai 辅助一下 感觉看课有点浪费时间. 也不用学太深吧 写多了看多了就会了..

找个项目做就可以了

我一直做的是 Android 开发 今年想在 uTools 上面上一款插件 学前端的时候 看 Vue Vite ant design 的官方文档 一开始就硬写 写的多了 就理解了

可视化 做界面, 不过好像没有比较好用的

0 基础 1 个小时看配置肯定搞不明白，我在配置这里浪费了最少 1 天时间。

先去请教产品或 UI ，弄明白几种通常使用的界面布局结构。然后学习和理解白 MVC 的概念，了解啥叫组件，如何封装组件，什么叫数据绑定。如何实现事件驱动、局部刷新、懒加载、预加载。最后随便学下 JS 语法什么的，就可以开干了。

楼主开个群，同后端，搭个伙，顺道分享一些学习资源和心得

前端东西很多
如果只是写逻辑，看看 nodejs 啥的，ts 可以后看
如果页面也包括，那么就多了

推荐直接 nextjs 的官方文档入门： nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home

然后就是推荐用 AI 的工具开发一些小 demo： www.myaiexp.com/zh?category=dev-tools&subcategory=code-assist

学习不是目的，能做出来的想要的东西才是目的，能拿到正反馈才能坚持下去。

倒不是 css 有多难，不就两个 layout ，flex 和 grid
关键耗时，导致的啰嗦