[分享] 前端工程師的準備

作者: 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