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

This topic created in 2119 days ago, the information mentioned may be changed or developed.

题主目前学习了 reactjs,redux,react-router,styled-component,了解些 npm script,webpack

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

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

v 友们是怎么学习别人的前端项目的呢？

Supplement 1 · Sep 7, 2020

参考 v 友的回答后，有了一点想法：

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

如何知道有哪些组件，
个人想法就是，参考网课目录，参考他人项目 /产品，自己思考

Supplement 2 · Sep 7, 2020

处于个人原因，就不选择网课了

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

二是，难道别人都是看网课学的？感觉也不太现实，应该有别的途径

Supplement 3 · Sep 27, 2020

时隔 20 天，随便说几句
参照了 v 友的意见，找了下视频，有些难找。。。
后面还是自己硬着头皮看了个 GitHub 上的项目，然后尝试写了些小的 demo，感觉好了一些。
感觉自己基础有些不够扎实，所以之前看的时候有些障碍。
感觉还是开源好，能够免费学东西。。。

Demo

题主

webpack

npm

15 replies • 2020-09-07 17:52:33 +08:00

murmur

Sep 7, 2020

去慕课买个课学一下就可以了，讲的还不错，没有前端基础突然上全家桶是很痛苦

尤其是 redux，哪个设计太恶心了，很多项目没必要这么复杂的状态管理

murmur

Sep 7, 2020

所以说 vue 的 vuex 做了两个重大简化
1 、action 的官方推荐不要求定义常量，当然我认为这个是 js 编辑器的锅，不定义常量没法自动补全
2 、可以直接 disptach 字符串，不要求做 action creator，需要参数直接 dispatch 传参就行了

kimjosda

Sep 7, 2020 via Android

@murmur 谢谢大佬提供的思路

murmur

Sep 7, 2020

我谈一下我看教程和实际项目的区别

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

所以没人给你说，这种拆的碎碎碎碎碎的工程是真的难读。

murmur

Sep 7, 2020

不同项目的侧重点不一样，我认为只有复杂到 app 替代品，而且是生产力 app，才真的需要巨复杂的状态管理

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

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

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

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

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

这些东西都是前端的基础，有 css，有 js，而且交互也够多，我认为这才是你要学习的重点

hyyou2010

Sep 7, 2020

我大概会从两个角度看：
1，看页面结构是怎样搭积木的，因为这类框架最优秀的地方就是小结构搭积木为大结构
2，根据点击看路由变化，路由变迁也就是整个 UI 界面的操作流程

yhxx

Sep 7, 2020

https://panjiachen.github.io/vue-element-admin-site/zh/guide/
后台管理系统可以看看这个大佬的

反正别被 xx 棒棒团 xx 自学团之类的割了韭菜就好

IGJacklove

Sep 7, 2020

找个教程跟着做个项目了解个大概就差不多了,其他就看看开源项目基本都能看懂.项目其实没啥好学的,如果时间充裕可以多花点时间巩固一下基本功,多看看书,js,css 什么的.网上一大堆录播实战课程,跟着做一个基本能了解个大概.

kimjosda

Sep 7, 2020

@murmur 谢谢您特地回复了这么多，我会认真参考的

kimjosda

Sep 7, 2020

@yhxx 用 react 来借鉴 vue 项目，也是不错的想法

Pho3nix

Sep 7, 2020

网课：tb/公开课

KMpAn8Obw1QhPoEP

Sep 7, 2020 via Android

写个博客先？

1490213

Sep 7, 2020 via Android

我是后端，目前学前端两个月，过程如下:
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

Sep 7, 2020

B 站那么多优质免费网课

Jinnn

Sep 7, 2020

入门的话推荐 b 站的网课, 网课有很多带你走完一个项目的, 初学阶段非常合适
等到你对这些项目有一定的了解之后, 在做自己的项目, 就不用看网课了, 看各种文档就好
个人认为, 网课可以缩短前期学习熟悉的时间, 如果你觉得很难下手, 不知道别人的构思的话