[分享] 前端工程师的准备

楼主: RunRun5566 (跑跑五六)   2016-12-09 18:00:07
HTML5重点:
1. 基本语法结构
2. 各种tag的使用时机,以及他们的特性
3. <form> 跟 <input> 好好琢磨一下,毕竟处理资料是家常便饭
4. 如何引用其他CSS档案或者JavaScript档案
5. <head> 中引用JS档案跟<body>中引用JS档案的差别
6. 常见的<meta>属性设定,ex:UTF-8编码, 让网页支援RWD
结语:HTML这块只要能在适当时间引用适当标签即算熟练,重点在CSS
CSS3重点:
1. 基本的CSS属性,文字颜色&背景颜色等等
2. <重要> display属性中,block & inline-block & inline 的差别,
要能灵活的操作元素,display属性一定要熟
3. <重要> position属性中, absolute & relative & fixed & static & initial
& inherit 的差别, 只要你能活用 display & position,什么样的layout
你都可以刻出来的
4. 利用 @media 来实现你的RWD设计,当你会了这项技能,其实你可以不需要
bootstrap
5. 利用 @keyfram 来完成动画特效
6. 根据状态来调整CSS元素, :hover, :focus 等等
7. CSS selector规则, .class-1 > .class-2 跟 .class-1 .class 的差别,
以及一些特殊选择语法 ::first-letter, :nth-child() 等等
8. <重要> 一些用来让CSS攥写更方便的语法,SASS & LESS & POSTCSS
9. 遇到想达到的效果却不知道采用何种属性的话,google就对了
结语:不要轻易的使用bootstrap做作品,直接用CSS手动去刻吧
JavaScript重点:
1. JavaScript基本语法
2. JavaScript如何去操控HTML元素(DOM)
3. JavaScript如何去设定事件(addEventListener)
4. <重要> 什么是 module Pattern?
5. <重要> 什么是 asynchronous 异步编成,怎么使用 Promise
6. 什么是 closure 闭包? 什么是 callback function?
7. 如何使用 JavaScript 的 prototype 去实现物件导向设计以及继承
8. 当你以上都搞懂,学习ES6
结语:以上是前端JavaScript必备技术,全部拥有才能避免写出shit code
====================
当你掌握以上W3C的各项技巧
基本上你已经可以把所有看到的网站都自己写出来
且不需要靠任何library像是 JQuery & Bootstrap
这些东西要全部掌握吸收可能需要时间研读跟练习
但你也可以顺便获得学习 React 的入场券
=====================
React 入门重点:
1. 在电脑上安装node, 并知道什么是npm, 以及如何安装套件
2. Google 搜寻 React ES6 tutorial, 这边只能靠你自己多摸索喜欢的教学
3. JSX是什么,如何攥写ES6+JSX
4. Webpack是什么,怎么使用,为什么要用Webpack (搞懂原因很重要)
5. 了解React 的 Component是什么,他能带来什么好处?
6. 了解React Component的生命周期以及对应的function, EX: componentDidMount
7. 了解什么是 props, 什么是 state, 并且搞清楚他们的差异
8. 了解React 是怎么利用 vDOM 来做到高效渲染
9. 使用热门套件 React-Router 设定你的React应用路径
小结:到这边你已经可以利用React去打造完整的网站了,但学习React真的不简单
推荐搜寻:Youtube -> React Tutorials
React 进阶重点:
1. 什么是 Redux? 先了解概念以及运作流程图
2. 如何在 React 中导入 Redux?
3. Redux 中的action呼叫起来很方便,但如果我要让他支
援异步处理要怎么做? (搜寻 Redux-Thunk)
4. 我已经熟悉 React + Redux,但我要做SEO,怎么办?
(搜寻 Isomorphic 或者 Universal, 这两者大同小异,并且详读)
5. 第四点就是所谓的 Server Side Rendering, 你必须先学会
如何用 Express 打造基本应用。
6. <困难> 假如我使用Redux管理React的资料流,我要怎么
套用在Isomorphic架构上?
(搜寻 Redux Store Server Side, 基本概念就是在server端
先抓取好资料并且产生初始化的store并将资料转成纯字串,
最后将此字串直接硬写在静态html上回传到客户端并塞成全域变量,
如此客户端即可直接利用类似 window.__STATE__ 这种方式取得,
客户端只需直接用此资料再重新打造一次store就行了)
7. 多看Github上别人做的 React 专案架构,优化你的开发流程
小结:当你会 Isomorphic 架构,基本上已经可以毕业了,剩下就是怎么让开发顺畅
总结:基本上从入门到React可以一条龙的直接Over
也是我最推荐的一条路,毕竟如果你真的懂React
代表很多基础知识你都能cover
现阶段学React还是一个机会多且薪水质量不错的路线
前端技术还有很多很多,像是如何使用热门的第三方API (fb, google)
甚至你可以试试用 Docker 去加速部署你的React应用
另外想往高处爬,后端技术你也一定要了解,这部分用NodeJS很方便
加上Express这个框架他不像Rails帮你做了很多事情
所以你可以自己去慢慢摸索怎么架构一个web
EX: 租一台 Digital Ocean 机器来玩玩吧,一个月才 150
作者: max241 (养生之道)   2016-12-09 18:12:00
Vue 已崛起
作者: cokellen (cokellen)   2016-12-09 18:13:00
推 分享! 有个小错误 => [clojure 必包]
作者: knives   2016-12-09 18:14:00
连Docker都要会
作者: chatnoir (对不起)   2016-12-09 18:15:00
大推本篇~ 另外想请问有推荐用react-redux开发的专案吗?
作者: william45682 (Bear熊)   2016-12-09 18:23:00
好实用回去好好看
作者: Ekmund (是一只小叔)   2016-12-09 18:25:00
提问~以有工作经验的菜鸟而言 这条的时间线大约多长?
作者: mythnc (迷小心)   2016-12-09 18:26:00
若不想碰fb相关技术有其他选择吗?
作者: Kumasan314 (熊)   2016-12-09 18:29:00
推 感谢
作者: adjust222 (阿逢)   2016-12-09 18:37:00
感谢前辈的分享! 我试试看半年内 能达到哪种程度
作者: michaelchen1 (麥克麥克)   2016-12-09 18:37:00
作者: chrome (老大是Google)   2016-12-09 18:37:00
作者: takasaki (小七8号)   2016-12-09 18:45:00
不觉得vue可超越react
作者: FLAMEDDD   2016-12-09 18:51:00
请问“多看Github别人React 专案架构,优化你的开发流”这点能不能讲详细点,到底该怎么看。(按到2,待会补推。) 感谢
作者: arthur104 (arthur)   2016-12-09 19:42:00
觉得用react的公司好像不多…css 可以在加个 flexbox
作者: BLGreenTea (大麦绿茶)   2016-12-09 19:53:00
作者: yyc1217 (somo)   2016-12-09 19:55:00
我觉得还可以增加吸收新知的管道 不是永远只有这些
作者: aaadult (成人)   2016-12-09 20:01:00
好奇这些都会月薪多少
作者: asleisureto (ASLE)   2016-12-09 20:04:00
月薪起码15~20万吧
作者: Jasonzheng (jason)   2016-12-09 20:05:00
好文!Typo => closure
作者: menshuei (红茶)   2016-12-09 20:08:00
前面vue很不错学,文档看一下几乎可马上就上手了
作者: drajan (EasoN)   2016-12-09 20:11:00
我们公司的前端也都用这些技术 最菜的资历大约两年左右
作者: zeroshine (rain)   2016-12-09 20:22:00
个人觉得 isomophic 不一定要列入
作者: prosea (prosea)   2016-12-09 20:54:00
感谢分享!!觉得react, angular 不晓得在台湾使用哪一种比较多
作者: fouring (香菇)   2016-12-09 21:07:00
感谢分享!
作者: nurockplayer (塔奇巧克力)   2016-12-09 21:32:00
现在很多用Angular的公司都在转React吧认识的猎人头说公司几乎都是找React
作者: kurtsgm   2016-12-09 21:37:00
最近两年感觉起来React比Angular有优势一些
作者: Trick   2016-12-09 21:40:00
前端主流换超快
作者: kener1988 (豆仔)   2016-12-09 21:47:00
推一个 前端基本功差不多这样
作者: p90085 (你是光你是风)   2016-12-09 21:48:00
作者: Boston (Boston)   2016-12-09 21:53:00
6. 什么是 clojure 闭包? => closure
作者: konanno1 (konanno1)   2016-12-09 22:10:00
作者: peter9s3b   2016-12-09 23:07:00
谢谢分享!!
作者: smdf (我依然相信)   2016-12-10 00:15:00
作者: roc10087 (Valda)   2016-12-10 00:29:00
推(已笔记
作者: jrsiaya (Alistair)   2016-12-10 00:54:00
笔记
作者: Arser   2016-12-10 01:26:00
@keyframe少e喔
作者: vikamirror   2016-12-10 01:30:00
感谢前辈分享 推
作者: TETZ (你今天宅了吗?)   2016-12-10 04:13:00
好多中国用语.....
作者: v3dys6f3a3j5 (柳上上)   2016-12-10 05:11:00
(笔记 感谢各位前辈 我要成为网页设计大师
作者: FakeLusiwa (born to be free)   2016-12-10 08:54:00
谢谢分享!
作者: beaprayguy (小羊快跑啊)   2016-12-10 08:57:00
Ng2说真的我觉得比较适合全端typescript强型别写法和server side大致雷同但你也可以扩充typescript到react我觉得维护考量typescript导入是正确的
作者: jack0204 (Jarbar王朝)   2016-12-10 09:34:00
很多中国用语? 我怎么看不出来?
作者: jjwei ( <囧> )   2016-12-10 10:45:00
作者: cokellen (cokellen)   2016-12-10 11:22:00
中国用语有差吗?学技术还分国籍= =
作者: andreli (小狗跟正妹是我的死穴)   2016-12-10 11:39:00
如果只是要玩前端用github pages就够了吧还有this的观念, 在stackoverflow上看到很多人会因为这个然后程式出问题找不到原因
作者: s06yji3 (阿南)   2016-12-10 12:13:00
3个月是平均一天花几个小时?因为我觉得3个月不太够
作者: lovdkkkk (dk)   2016-12-10 12:15:00
有基础后可再看些前端知识 如 https://goo.gl/Zf6jP6
作者: jacksonxu (K3R)   2016-12-10 13:33:00
前端资源懒人包 http://goo.gl/eYS28w
作者: TFnight (二十四夜)   2016-12-10 14:57:00
作者: tz5514 (屁安)   2016-12-10 15:20:00
React > Vue > Angular
作者: youtuuube000 (小孩)   2016-12-10 17:10:00
好人 推!
作者: BlockChain   2016-12-10 19:30:00
感谢 一起冲锋吧
作者: v3dys6f3a3j5 (柳上上)   2016-12-10 20:29:00
推 很感谢这些前辈的心得文 不然有时新人会徬徨不知道要怎么开始
作者: ymcheung (ymc)   2016-12-11 09:02:00
看不太出来有中国用语阿?
作者: zucu   2016-12-11 09:43:00
作者: yutou88 (yutoueeb)   2016-12-11 11:01:00
推 优质文
作者: atpx (秋雨的心情)   2016-12-11 17:30:00
优质文, 不推对不起自己
作者: willier15987 (Tuantuan)   2016-12-11 17:57:00
作者: Cian0710   2016-12-12 00:02:00
作者: lineage0916 (白穆)   2016-12-12 00:55:00
谢谢前辈分享,很受用
作者: vn509942 (如履薄冰)   2016-12-12 12:09:00
感謝分享 滿有趣的
作者: sarsman (DeNT15T♠)   2016-12-13 05:30:00
推 有參考價值
作者: jakert123 (kaka3315)   2016-12-13 15:17:00
作者: tw0517tw (无冬夜)   2016-12-14 00:49:00
Relay 如何?
作者: meteor007 (meteor007)   2016-12-14 04:33:00
请问,没经验要学ASP.NET,这样的流程也是通用吗?
作者: aks (我白烂 固我在)   2016-12-14 13:20:00
優質文
作者: maxfock (Max)   2016-12-14 19:55:00
個人推react作為一個學習的目標,學會react,基本的js功力跟觀念算是足夠了。但是前端進步太快了,抓緊基本功,才不怕在這一堆花花綠綠的框架中迷失。也能在從框架本身的設計概念中,吸取更多的經驗
作者: TETZ (你今天宅了吗?)   2016-12-15 05:53:00
異步編成>非同步 質量>品質 優化>最佳化 but whatever反正我都看英文的
作者: PolarGG (PolarGG)   2016-12-17 17:34:00
优质文
作者: fun4i0220 (嗯嗯搭啦)   2016-12-18 12:06:00
作者: spark991905   2016-12-18 12:08:00
推推推
作者: hstt   2016-12-19 07:58:00
如果走React+es6,在导typescript 根本自找麻烦
作者: next1118   2016-12-19 12:12:00
作者: answer91   2016-12-20 16:39:00
感恩

Links booklink

Contact Us: admin [ a t ] ucptt.com