V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hsuyeung
V2EX  ›  程序员

后端程序员想要学习一下前端,有无比较好的学习路线推荐

  •  1
     
  •   hsuyeung · 2022-03-17 11:30:29 +08:00 · 13240 次点击
    这是一个创建于 983 天前的主题,其中的信息可能已经有所发展或是发生改变。

    情况

    1. 后端开发(主力 JAVA ,平时也会写写 Go 玩儿)
    2. 前端 JS 还行(自己玩玩的程度,工作肯定不够),CSS 老大难!
    3. 喜欢看文档学,视频辅助,但是不喜欢一直看视频学习。
    4. 学习更倾向项目驱动,有需求让我练手我就能很快上手一门新技术,但是纯学习就比较枯燥。

    问题

    1. 想要闲暇时学习一门前端框架,不用于工作,只为了自己也能写点页面什么的玩玩儿,算是兴趣爱好。Vue 、React 、Angular 纠结选择哪一个作为刚开始学习的框架以及该语言的学习路线。
    2. 除了语言框架,有无一些比较好的 CSS 样式的框架推荐
    3. 有没有什么比较好的练手的项目推荐(个人目前想法是,自己挺喜欢阮一峰博客那个样式,看起来也不是特别复杂,就准备决定了语言和框架后做仿一套练练手,不知是否合适)
    第 1 条附言  ·  2022-03-19 18:04:59 +08:00
    看见大家如此热情地帮忙解答疑惑,十分感谢。

    我看了大家的讨论后决定先学学 react 吧,js 和 css 的确需要巩固巩固,现在个疑问就是有必要再专门学习 ts 吗?
    77 条回复    2022-03-19 09:52:07 +08:00
    monster1priest
        1
    monster1priest  
       2022-03-17 11:40:24 +08:00 via iPhone
    React 直接开撸,配合蚂蚁的 antd 都不用写 css
    真感兴趣后面再细学
    murmur
        2
    murmur  
       2022-03-17 11:42:47 +08:00   ❤️ 1
    vue 一把唆,学什么 react ,有学 react 的时间 vue 都做完了
    Jwyt
        3
    Jwyt  
       2022-03-17 11:45:27 +08:00
    虽然我不懂前端,但是看了前两楼,op 不如学 angular 吧
    kensoz
        4
    kensoz  
       2022-03-17 11:48:19 +08:00   ❤️ 2
    看了前三楼,建议 Svelte.js (狗头)
    irytu
        5
    irytu  
       2022-03-17 11:49:02 +08:00 via iPhone
    还是 Reactjs 吧 理念很好 易懂 不过 css 确实是难啊…
    raaaaaar
        6
    raaaaaar  
       2022-03-17 11:52:14 +08:00   ❤️ 1
    月经
    cweijan
        7
    cweijan  
       2022-03-17 11:52:47 +08:00
    必须是 vue, 语法类似后端的 template, 对于非专业前端而言是不二之选, 直接从官方文档和官方构建工具 vite 文档学习就好了, 很简单.
    gotonull
        8
    gotonull  
       2022-03-17 11:58:43 +08:00
    css 真的太难了
    siteshen
        9
    siteshen  
       2022-03-17 12:16:59 +08:00
    推荐 react ,react 学起来可能比 vue 麻烦些,但概念比较少。
    darknoll
        10
    darknoll  
       2022-03-17 12:26:15 +08:00
    react 生态更好,建议学 react ,vue 生态真的不怎么样
    SingeeKing
        11
    SingeeKing  
       2022-03-17 12:29:44 +08:00
    非得谈框架的话,Javaer 建议 Angular

    另外,CSS 怎么都是必备的吧,推荐 https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/welcome 学习基本的 CSS 知识,然后 flex 之类的直接看 MDN ,再之后看看 tailwind 就够了
    hsuyeung
        12
    hsuyeung  
    OP
       2022-03-17 12:31:00 +08:00 via iPhone
    @monster1priest
    @irytu
    @siteshen
    @darknoll
    react 的话很早之前跟着官网把 reactjs 文档过了一遍但是有些忘了,需要再去看看,再往后的学习路线有什么推荐的吗
    hsuyeung
        13
    hsuyeung  
    OP
       2022-03-17 12:35:15 +08:00 via iPhone
    @SingeeKing 感谢~ css 的确还是需要补一补
    hsuyeung
        14
    hsuyeung  
    OP
       2022-03-17 12:39:52 +08:00 via iPhone
    @cweijan vue 在生态(文档、ui 、各种轮子)方面和 react 相比如何呢? vite 倒是没有接触过,我去瞅瞅
    xiaxichenSama
        15
    xiaxichenSama  
       2022-03-17 13:04:54 +08:00
    我也是做后端的,现在也是 vue 一把梭。react 没学过。
    Hanggi
        16
    Hanggi  
       2022-03-17 13:06:48 +08:00
    首先还是推荐学习 React ,目前当之无愧的主流。
    如果你需要做一些处理大量页面数据的项目,推荐 Angular ,他的双向绑定会提供很好的体验。

    Vue 属于后来者,它借鉴了 React 和 Angular 等其他优秀项目,在国内拉拢了一波人气,如果公司技术栈的是 Vue 的话可以学习。
    sjhhjx0122
        17
    sjhhjx0122  
       2022-03-17 13:40:18 +08:00
    学 angular 啊,理念想通,入门快,学完 ng 就会 vue 了,差不多的
    ahswch
        18
    ahswch  
       2022-03-17 13:54:38 +08:00
    fullstackopen ( react 全栈) vue 的话直接看文档撸
    error523
        19
    error523  
       2022-03-17 13:55:00 +08:00
    css 试试 tailwind ?
    gitdoit
        20
    gitdoit  
       2022-03-17 13:55:39 +08:00   ❤️ 1
    我也是后端, 对前端感兴趣. 静下心来 看个三天 css,只要不整花活,就足够支撑日常开发了. js 也是,有语言基础 学起来很快; 框架我用的 vue,直接整最新的. 上慕课网上找了个项目跟着来一遍就差不多了
    sinnosong1
        21
    sinnosong1  
       2022-03-17 14:01:13 +08:00   ❤️ 8
    @j4talias https://chinese.freecodecamp.org/learn ,把前端相关的撸完就差不多了。我也是后端目前已经在写前端部分的了。
    AilF
        22
    AilF  
       2022-03-17 14:05:59 +08:00
    🐴一个
    dcsuibian
        23
    dcsuibian  
       2022-03-17 14:07:30 +08:00   ❤️ 5
    后端程序员,我的路线是:
    阮一峰 ES5 、ES6 。Vue 全家桶视频。Node.js 。Webpack 。《精通 CSS 》。Ant Design Pro Vue 。React 。。。
    yangzzzzzz
        24
    yangzzzzzz  
       2022-03-17 14:10:57 +08:00
    前端入门基础百度 “表严肃” ,实战时 vue 和 react 都行,vue 的话推荐直接学 vue3 吧
    zhaol
        25
    zhaol  
       2022-03-17 14:18:39 +08:00
    别理楼上生态的,以你的需求,vue 和 react 都足够了。vue 反倒是全家桶比较简单,可以直接撸代码。react 还要学其他的概念,后端的话推荐 vue ,简单粗暴,容易理解
    mxT52CRuqR6o5
        26
    mxT52CRuqR6o5  
       2022-03-17 14:27:01 +08:00 via Android
    熟悉 spring 的话可以去看看 angular ,不熟悉 spring 就去学 react/vue
    murmur
        27
    murmur  
       2022-03-17 14:27:52 +08:00
    什么叫生态,vue 不能干活么,前端的脸面是 css ,css 是要自己画出来的

    你需要 rn ,那叫生态,大的组件都是纯 js 的,不存在 react 能干 vue 就干不了
    sy20030260
        28
    sy20030260  
       2022-03-17 14:28:25 +08:00
    我自己是 React ,因为油管上 React 的优质教程比 Vue 多一些,但其实入门的话资源都不少,区别不大。CSS 的话蛮推荐简单了解下之后直接上 Tailwind CSS 的,既可以避开一些新手不友好的 CSS 技术细节,但又不至于像 ant 这类组件库一样完全屏蔽了 CSS ,达不到学习目的
    Dragonphy
        29
    Dragonphy  
       2022-03-17 14:31:09 +08:00   ❤️ 1
    Vue ,里面提到的学一下 https://www.v2ex.com/t/831969
    murmur
        30
    murmur  
       2022-03-17 14:42:51 +08:00
    @sy20030260 tailwindcss 是看上去美好用起来坑,你还要自己组合各种东西

    btn-warning 、btn-success 和 btn color-green height-30 fontsize-14 哪个更友好,很明显前者语义性更强

    既然学不会 css 就慢慢学,用组件自带的主题不一定好看,但是也不会太丑
    zhwithsweet
        31
    zhwithsweet  
       2022-03-17 14:48:17 +08:00   ❤️ 9
    你看看这楼上的,哪个不是前端高手,哪个不是行业专家?你一个后端学得过他们?学个锤子,不学了
    sy20030260
        32
    sy20030260  
       2022-03-17 15:03:09 +08:00   ❤️ 1
    @murmur 问题不是组件库好不好看,而是用 ant 这类组件库基本就屏蔽了 css 达不到学习目的。用 Tailwind 也可以直接抄别人写好的 UI ,不需要自己组合,而且根据 className 直接就可以知道对应的 native css 是怎样的,后面转 css 就容易多了。反正我自己用 ant 这类组件库是没搞懂 css ,而用 Tailwind 写了两三个小项目基本就知道 css 该咋写了。Tailwind 语义性确实是个问题,但更多影响的大项目的可维护性,对于新手学习来说没有太大影响
    vsitebon
        33
    vsitebon  
       2022-03-17 15:27:11 +08:00
    react 走一遍初始教程,然后就直接上手项目,项目中学习会快很多
    dfkjgklfdjg
        34
    dfkjgklfdjg  
       2022-03-17 15:27:30 +08:00
    React 和 Vue 还是 NG 的抉择

    如果有 Java 和 JS 的基础,你可以学 React 并没有那么麻烦,很快就可以理解上手。
    如果想要所有的问题都有一个明确解的可以选择 Vue ,只需要记住一些 API 和语法糖即可。
    NG 真的不怎么推荐,国内应用太少了解决问题老大难,没有多少人可以和你聊起来。

    生态的问题其实很虚,React 是很活跃,但不是所有人都想要从脚手架到状态管理都要自己搞定或者去一个一个辨别是否好用。
    Vue 看起来没有那么活跃,但是都给出了一个工具给你用,大部分的人都在维护那么几个官方库,并不用自己去找很多基础的东西,心智负担会很少,可以没有顾虑的使用,只是有些地方确实有点黑盒。

    -----

    CSS 的问题其实不是靠学,而是靠积累,多自己纯手撸一些 CodePen 上好看的样式持续一段时间就清楚了,
    然后就是组合 css 所需要的脑洞了。
    libook
        35
    libook  
       2022-03-17 15:42:16 +08:00   ❤️ 4
    看 MDN ,即便很多东西你都知道了,有些边边角角的你不知道的信息可能对你解决问题有很大帮助,建议认真看一看。
    教程部分: https://developer.mozilla.org/zh-CN/docs/Web/Tutorials
    Reference 部分:
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

    都看完之后,MDN 上其他主题可以按需来看。

    框架可以随便挑一个看,因为很多东西都是相通的,求快就看 Vue ,中文文档写得很好。

    CSS 样式框架有两种,一种是跟前端框架绑定在一起的如 Element 、Ant Design ;还有一种是无框架依赖的,可以看看 Bulma ,主要用的是 flex 布局。
    liuw666
        36
    liuw666  
       2022-03-17 16:23:33 +08:00 via iPhone   ❤️ 2
    学 vue 概念的时间,react 都写完了
    kidonng
        37
    kidonng  
       2022-03-17 16:27:06 +08:00 via Android
    前端框架推荐 Alpine.js ,可以说是“设计给后端”的框架,几乎无学习负担
    CSS 框架自然是 Bootstrap 默秒全🐶
    Terry05
        38
    Terry05  
       2022-03-17 16:31:27 +08:00
    不要吵了,不要吵了,学 Solid.js
    10bkill1p
        39
    10bkill1p  
       2022-03-17 16:34:45 +08:00
    看到上面这么多人推框架,就没有人推荐 Vanilla JS 吗(狗头)
    murmur
        40
    murmur  
       2022-03-17 16:38:01 +08:00
    @liuw666 vue 的概念就是模板引擎,这玩意是个后端程序员都应该接触过,

    if->v-if
    for->v-for

    这就是编程语言

    还需要学的

    到底是 v-if 好学,还是 useEffect 好学
    usapla
        41
    usapla  
       2022-03-17 16:44:47 +08:00
    @sinnosong1 #21 谢谢,已经收藏了
    pengtdyd
        42
    pengtdyd  
       2022-03-17 17:00:24 +08:00
    一点前端基础都没有就推荐框架???我觉的先把基础学学吧
    henryhu
        43
    henryhu  
       2022-03-17 17:16:14 +08:00
    没人提 css 的框架 Bulma ?
    plzcomeon
        44
    plzcomeon  
       2022-03-17 17:22:37 +08:00
    学 PHP (手动狗头)
    licoycn
        45
    licoycn  
       2022-03-17 17:25:01 +08:00
    还是先从基础学走,HTML 、CSS 、JavaScript ,等熟悉而后再慢慢接触 Vue 及 TypeScript 这一类。

    看楼上大多数都说 CSS 很难,如果不是特别炫酷的效果,CSS 无非就是边距、边框、定位、层级、阴影、过渡等一些效果,语法都是固定的,基础的学会了再上手 Less 或 Sass 就会发现新大陆。
    cr217
        46
    cr217  
       2022-03-17 17:25:23 +08:00
    @murmur 比起 ref 、reactive 、toRefs 、toRef ,还是 useEffect 好学😂
    WispZhan
        47
    WispZhan  
       2022-03-17 19:40:56 +08:00 via Android
    Java or go 后端学前端,如果想系统性的,推荐先从 Angular 开始。
    原因是知识点全,框架理念,逻辑概念类似。而且你不需要到处找你不熟悉的各种插件和组件。

    你等把所有 Angular 概念吃透了,就可以安心折腾任何一个前端框架了
    Envov
        48
    Envov  
       2022-03-17 19:42:55 +08:00   ❤️ 3
    推荐后端学习前端必经路线:
    1:学习 nodejs v14 和 npm 包管理工具,产出 [js 操作计算机文件] 、 [js 操作 excel 表格] 的小工具就可以结束了。这时候你需着重了解 commonJS 的模块化 js 概念
    2:学习 webpack 4.x ,它使用 nodejs 给前端提供了强大的工程化能力,产出 一个自定义打包工具就行
    3:学习 vue.js,利用 webpack 产出一个脚手架
    4:使用 vue-cli 脚手架
    x86
        49
    x86  
       2022-03-17 19:45:22 +08:00
    标记下,css 和 js 头疼
    cz5424
        50
    cz5424  
       2022-03-17 19:56:49 +08:00 via iPhone
    同后端,学了 vue2 ,表示 vue2 要过时,vue3 要重学,css 也没那么难,感觉 webpack 被 vue cli ,vite 代替,或者说隐藏了起来。另外,本人招前端的时候发现前端的简历都是会用 xxx 框架,xxx 组件,非常不解,有人解答吗
    dNib9U2o8x
        51
    dNib9U2o8x  
       2022-03-17 20:14:34 +08:00
    @sy20030260 tailwind 维护性还好,项目大了肯定要拆分组件的,里面不会有大量的 html, 基本组件本身的语义就够用了,如果觉的还不够,还有 @layer
    redtech
        52
    redtech  
       2022-03-17 20:25:40 +08:00
    @cz5424 你一个后端 面面前端 这么卷了吗
    BaiLinfeng
        53
    BaiLinfeng  
       2022-03-17 20:59:06 +08:00
    我是比较喜欢看视频,不喜欢看文档,总感觉文档是外来语
    P233
        54
    P233  
       2022-03-17 21:09:41 +08:00
    给自己打个广告 /t/841029
    ruoxie
        55
    ruoxie  
       2022-03-17 21:12:01 +08:00
    到底 css 难在哪?
    cz5424
        56
    cz5424  
       2022-03-17 21:26:11 +08:00 via iPhone
    @redtech 不是全栈是全干工程师了
    v2eb
        57
    v2eb  
       2022-03-17 21:37:12 +08:00
    yunyuyuan
        58
    yunyuyuan  
       2022-03-17 22:25:53 +08:00
    框架的话,建议 vue3 ,vue3 挺灵活的,这有个视频详细介绍了 vue3 的思维 https://www.bilibili.com/video/BV1rC4y187Vw
    waltcow
        59
    waltcow  
       2022-03-17 22:50:24 +08:00
    tailwindcss/windicss + react
    qqqqqcy
        60
    qqqqqcy  
       2022-03-18 00:53:26 +08:00
    5 年大厂前端发言,当然是 vue 好,react 概念太多了,如果要面试装逼或者造轮子才推荐 react ,非前端学这个纯粹找虐
    a132811
        61
    a132811  
       2022-03-18 01:12:45 +08:00
    前端工程的概念很多都麻烦要死,还不通用,
    webpack 什么的概念太多了,哪年就淘汰了,增加不少调试的复杂性,调试 async-wait 编译后的代码我就遇到不少断点错误的问题。

    不过我想说基于 deno 的框架可能是未来 比如 https://alephjs.org/ 看起来还不错

    不过现在 deno 没有任何生态可言,千万别用于生产。目前适合喜欢造轮子的把玩
    anguiao
        62
    anguiao  
       2022-03-18 01:21:24 +08:00
    @pengtdyd JS 的基础,学过其他语言的没必要再仔细看,其他的坑可以以后再踩。
    shuimugan
        63
    shuimugan  
       2022-03-18 02:32:47 +08:00
    Angular 简单啊,一两天上手不是什么问题,还带 AOT ,在我看来这才是真正的企业级框架。
    看一下官方一个小案例 https://angular.io/generated/live-examples/reactive-forms/stackblitz.html 代码结构工整又符合直觉。

    再看看隔壁 React 的帖子 https://v2ex.com/t/840200 一个发布了 9 年的框架,在 2022 年状态管理这个问题上,居然有 20 个库在解决,不觉得很搞笑吗?

    当然最简单的还要数 amis ,纯 json 定义页面,非常无脑,做东西贼快。
    wangyzj
        64
    wangyzj  
       2022-03-18 09:12:51 +08:00
    永远 vue2
    phinex
        65
    phinex  
       2022-03-18 09:27:54 +08:00
    这是引战啊 一二楼要干起来了
    GoogleJP
        66
    GoogleJP  
       2022-03-18 09:34:27 +08:00
    React
    Daiwf
        67
    Daiwf  
       2022-03-18 09:58:33 +08:00
    阮一峰的博客这么丑。。他主要是靠内容。只要内容写的好。哪怕直接 html 里纯文字也有人抢着看。
    liuw666
        68
    liuw666  
       2022-03-18 10:56:20 +08:00 via iPhone
    @murmur #40 模版语法我不认为是个后端程序员都学过。 如果只说写页面,react 用 jsx 随便写个方法就是一个组件,而 vue 写组件就麻烦些,要写模版,模版语法个人觉得不好用,使用组件的时候还得注册一下。 重要的是 ts 在 react 支持的好,写 java 的人用 ts 肯定写的更舒服。

    要说 v-if 的话,我只能说 jsx 的判断比 v-if 写的顺手 🤦‍♂️ useEffect 就是生命周期的问题,不管哪个前端框架都会遇到吧

    这些东西都太主观了,要学习的人不一定就都认为这个东西好学,大家对同一个概念的理解是不同。反正我是觉得 react 上 ts 支持的好,更自由,写起来方便,虽然默认支持的功能没 vue 多…。 没有 ts 我是不想写 js 代码的……
    ZiLong
        69
    ZiLong  
       2022-03-18 11:03:57 +08:00
    看了回答,卑微后端表示还是不学了
    NCry
        70
    NCry  
       2022-03-18 11:38:29 +08:00
    没有任何经验的话肯定是先从基础开始的,就算是学 Java 也不大可能一上手就推荐 Spring 吧。
    murmur
        71
    murmur  
       2022-03-18 11:52:23 +08:00
    @ruoxie 面试,css 有 n 种方法,理论上你学 1 种兼容性最好的就可以,但是面试希望你会 n 种,还知道最炫酷的那种,比如别的要 4 行,你在 chrome 里 1 行就可以
    WhateverYouLike
        72
    WhateverYouLike  
       2022-03-18 12:48:06 +08:00 via Android
    @murmur tailwindcss 也可以封装组件呀,最后封一个 btn 出来就可以
    EPr2hh6LADQWqRVH
        73
    EPr2hh6LADQWqRVH  
       2022-03-18 12:56:47 +08:00
    百家争鸣,谁都不行
    bobo2
        74
    bobo2  
       2022-03-18 13:32:03 +08:00
    大佬不要学了,给我们前端留条生路吧>_<
    laravel
        75
    laravel  
       2022-03-18 15:40:59 +08:00
    依次学 html css (后端来说主要就是各种布局 flex 布局 grid 布局,动画这些锦上添花吧) javascript (这个才是主要的) 最好学学 javascript 设计模式
    然后 nodejs webpack vue/react 挑一个,然后学 vue/react 生态系统里常用的东西比如 vue-router 、react-router-dom 、vuex 、redux 这些
    然后学 ui 框架,Vue 的 element-ui ,react 的 antd 这种的
    MrDavidJones
        76
    MrDavidJones  
       2022-03-18 20:04:20 +08:00 via iPhone
    别学了 互联网都别碰
    bthulu
        77
    bthulu  
       2022-03-19 09:52:07 +08:00
    react 自身是简单, 但是 react 你想做点像样的项目, 那 react 全家桶里的 redux 啥的, 光概念就能绕晕你. 如果只是学着玩不打算做项目或者打算学个很长时间,那就 react. 想短时间学个七七八八拿来做项目, 那就 vue.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2681 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 15:22 · PVG 23:22 · LAX 07:22 · JFK 10:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.