V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
kimjosda
V2EX  ›  问与答

前端新手,想学习做项目,怎么上手比较好?

  •  
  •   kimjosda · 2020-09-07 11:00:46 +08:00 via Android · 2509 次点击
    这是一个创建于 1522 天前的主题,其中的信息可能已经有所发展或是发生改变。
    题主目前学习了 reactjs,redux,react-router,styled-component,了解些 npm script,webpack

    先前也做了一些 demo,比如计算器,用 hn 的 api 做了简单的页面
    现在,想做一些稍微复杂的 demo,感觉很难下手。

    我去 Github 上,搜了一些项目,比如音乐播放器,商城,后台管理系统之类的,从第一次 commit 开始看,好多地方看不懂,不知道别人整体的构思是怎么样的。这样就感觉很难看下去。

    v 友们是怎么学习别人的前端项目的呢?
    第 1 条附言  ·  2020-09-07 12:19:44 +08:00
    参考 v 友的回答后,有了一点想法:

    先做基本的一些功能组件,各种组件都写一下。
    然后,根据组件化思想,大项目也是由各种基础的组件构成的,
    后面再去看别人的完整项目可能也会容易一些。

    如何知道有哪些组件,
    个人想法就是,参考网课目录,参考他人项目 /产品,自己思考
    第 2 条附言  ·  2020-09-07 12:21:10 +08:00
    处于个人原因,就不选择网课了

    一个是网课比较贵,负担不起

    二是,难道别人都是看网课学的?感觉也不太现实,应该有别的途径
    第 3 条附言  ·  2020-09-27 16:16:20 +08:00
    时隔 20 天,随便说几句
    参照了 v 友的意见,找了下视频,有些难找。。。
    后面还是自己硬着头皮看了个 GitHub 上的项目,然后尝试写了些小的 demo,感觉好了一些。
    感觉自己基础有些不够扎实,所以之前看的时候有些障碍。
    感觉还是开源好,能够免费学东西。。。
    15 条回复    2020-09-07 17:52:33 +08:00
    murmur
        1
    murmur  
       2020-09-07 11:04:29 +08:00   ❤️ 4
    去慕课买个课学一下就可以了,讲的还不错,没有前端基础突然上全家桶是很痛苦

    尤其是 redux,哪个设计太恶心了,很多项目没必要这么复杂的状态管理
    murmur
        2
    murmur  
       2020-09-07 11:06:30 +08:00   ❤️ 1
    所以说 vue 的 vuex 做了两个重大简化
    1 、action 的官方推荐不要求定义常量,当然我认为这个是 js 编辑器的锅,不定义常量没法自动补全
    2 、可以直接 disptach 字符串,不要求做 action creator,需要参数直接 dispatch 传参就行了
    kimjosda
        3
    kimjosda  
    OP
       2020-09-07 11:23:36 +08:00 via Android
    @murmur 谢谢大佬提供的思路
    murmur
        4
    murmur  
       2020-09-07 11:33:04 +08:00   ❤️ 2
    我谈一下我看教程和实际项目的区别

    教程( demo 项目)为了演示某个框架的特色,会做完全的剥离和规范化,react 开发很多人特别在乎这个副作用、纯函数这个东西,如果是小的项目,一般的 ajax 操作可能就直接写到组件里,然后数据 state 搞定就完了,因为这些东西既不可能被复用,也不会传递给太深的组件,但是按照一些教程,他会把相关的东西都扔到 action 里,这样本来你触发 ajax 操作应该在当前文件就找到对应代码,“工程”化后直接不知道就扔到哪个 action 里了,如果你没有好的 ide 代码定位都是个问题。同样的还有组件拆分,如果是简单的 list,我们会直接 list 、listitem 在一个组件做完,但是按照“工程”化之后,list 、listitem 要做到 2 个组件来,一是文件拆开了,二是多了很多参数传递,透传也是传参也增加阅读负担,还是有些人认为 ul/li 这种写法下看不出谁是 list,谁是 listitem 呢?

    所以没人给你说,这种拆的碎碎碎碎碎的工程是真的难读。
    murmur
        5
    murmur  
       2020-09-07 11:49:44 +08:00   ❤️ 1
    不同项目的侧重点不一样,我认为只有复杂到 app 替代品,而且是生产力 app,才真的需要巨复杂的状态管理

    因为前端最终要服务用户,你定义了巨复杂的状态,说明你有巨复杂的功能,除非这东西真的巨复杂,否则你让用户怎么学习呢

    就比如你看的音乐播放器,他的重点在哪里

    1 、炫酷的界面,面向用户的娱乐产品,界面不行 59 分起步,比如你可以学习的,那个旋转的唱片封面是怎么做的

    2 、播放器,废话,播放器的核心当然是放歌,怎么读取加密信息,怎么反下载,怎么控制音量、自动重复,拖条,超越系统音量是怎么实现的?

    3 、歌词同步,现在还要要求反过来拖动歌词定位音乐

    这些东西都是前端的基础,有 css,有 js,而且交互也够多,我认为这才是你要学习的重点
    hyyou2010
        6
    hyyou2010  
       2020-09-07 12:03:50 +08:00   ❤️ 1
    我大概会从两个角度看:
    1,看页面结构是怎样搭积木的,因为这类框架最优秀的地方就是小结构搭积木为大结构
    2,根据点击看路由变化,路由变迁也就是整个 UI 界面的操作流程
    yhxx
        7
    yhxx  
       2020-09-07 12:48:11 +08:00   ❤️ 1
    https://panjiachen.github.io/vue-element-admin-site/zh/guide/
    后台管理系统可以看看这个大佬的

    反正别被 xx 棒棒团 xx 自学团之类的割了韭菜就好
    IGJacklove
        8
    IGJacklove  
       2020-09-07 12:52:53 +08:00   ❤️ 1
    找个教程跟着做个项目了解个大概就差不多了,其他就看看开源项目基本都能看懂.项目其实没啥好学的,如果时间充裕可以多花点时间巩固一下基本功,多看看书,js,css 什么的.网上一大堆录播实战课程,跟着做一个基本能了解个大概.
    kimjosda
        9
    kimjosda  
    OP
       2020-09-07 13:09:29 +08:00
    @murmur 谢谢您特地回复了这么多,我会认真参考的
    kimjosda
        10
    kimjosda  
    OP
       2020-09-07 13:10:38 +08:00
    @yhxx 用 react 来借鉴 vue 项目,也是不错的想法
    Pho3nix
        11
    Pho3nix  
       2020-09-07 13:23:39 +08:00
    网课:tb/公开课
    enchilada2020
        12
    enchilada2020  
       2020-09-07 13:24:45 +08:00 via Android
    写个博客先?
    1490213
        13
    1490213  
       2020-09-07 16:59:17 +08:00 via Android   ❤️ 1
    我是后端,目前学前端两个月,过程如下:
    1. 高级程序设计,ES6 入门,CSS,HTML 浏览了一下 MDN 目录。
    2. 看了 vue 文档,文档里的示例写了一下,找了一个 GitHub 的 admin 系统,学着写页面,顺便看 element,vuex,vue-router,axios 。
    3. 研究 vue 内部实现,主要是模板编译过程,vnode diff,双向绑定,nexttick,模仿 vue 的模板编译自己实现了一个小的匹配 html 和一些拓展语法的 parser,以及一个简单的 js 订阅发布机制,顺便根据里面的用法进一步学了一些 js 知识,如微任务宏任务,promise 实践,js 函数执行栈,eventloop 等。

    接下来准备看看 node 和 webpack 。
    fouo
        14
    fouo  
       2020-09-07 17:13:08 +08:00   ❤️ 1
    B 站那么多优质免费网课
    Jinnn
        15
    Jinnn  
       2020-09-07 17:52:33 +08:00   ❤️ 1
    入门的话推荐 b 站的网课, 网课有很多带你走完一个项目的, 初学阶段非常合适
    等到你对这些项目有一定的了解之后, 在做自己的项目, 就不用看网课了, 看各种文档就好
    个人认为, 网课可以缩短前期学习熟悉的时间, 如果你觉得很难下手, 不知道别人的构思的话
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1343 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 105ms · UTC 23:36 · PVG 07:36 · LAX 15:36 · JFK 18:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.