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

看板Soft_Job作者 (跑跑五六)時間7年前 (2016/12/09 18:00), 7年前編輯推噓69(70推 1噓 21→)
留言92則, 72人參與, 最新討論串1/1
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 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.137.35.248 ※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1481277610.A.AFE.html ※ 編輯: RunRun5566 (223.137.35.248), 12/09/2016 18:01:09
推
12/09 18:12, , 1F
Vue 已崛起
12/09 18:12, 1F
推
12/09 18:13, , 2F
推 分享! 有個小錯誤 => [clojure 必包]
12/09 18:13, 2F
謝謝
推
12/09 18:14, , 3F
連Docker都要會
12/09 18:14, 3F
推
12/09 18:15, , 4F
大推本篇~ 另外想請問有推薦用react-redux開發的專案嗎?
12/09 18:15, 4F
※ 編輯: RunRun5566 (223.137.35.248), 12/09/2016 18:19:54
推
12/09 18:23, , 5F
好實用回去好好看
12/09 18:23, 5F
推
12/09 18:25, , 6F
提問~以有工作經驗的菜鳥而言 這條的時間線大約多長？
12/09 18:25, 6F
如果你真的很有熱忱,三個月我覺得綽綽有餘,前提是你有問題可以自己Google解決
→
12/09 18:26, , 7F
若不想碰fb相關技術有其他選擇嗎？
12/09 18:26, 7F
推
12/09 18:29, , 8F
推 感謝
12/09 18:29, 8F
推
12/09 18:37, , 9F
感謝前輩的分享! 我試試看半年內 能達到哪種程度
12/09 18:37, 9F
推
12/09 18:37, , 10F
推
12/09 18:37, 10F
推
12/09 18:37, , 11F
推
12/09 18:37, 11F
推
12/09 18:45, , 12F
不覺得vue可超越react
12/09 18:45, 12F
噓
12/09 18:51, , 13F
請問「多看Github別人React 專案架構，優化你的開發流」
12/09 18:51, 13F
→
12/09 18:51, , 14F
這點能不能講詳細點，到底該怎麼看。
12/09 18:51, 14F
像是看別人React專案的資料夾是怎樣整理的,他用了哪些技術,他的Webpack設定檔怎麼寫的,他怎麼區隔開發環境跟上線環境等等的
→
12/09 18:52, , 15F
（按到２，待會補推。）　感謝
12/09 18:52, 15F
推
12/09 18:54, , 16F
12/09 18:54, 16F
推
12/09 19:06, , 17F
12/09 19:06, 17F
推
12/09 19:42, , 18F
覺得用react的公司好像不多…
12/09 19:42, 18F
推
12/09 19:44, , 19F
css 可以在加個 flexbox
12/09 19:44, 19F
推
12/09 19:53, , 20F
推
12/09 19:53, 20F
→
12/09 19:55, , 21F
我覺得還可以增加吸收新知的管道 不是永遠只有這些
12/09 19:55, 21F
推
12/09 20:01, , 22F
好奇這些都會月薪多少
12/09 20:01, 22F
推
12/09 20:04, , 23F
月薪起碼15~20萬吧
12/09 20:04, 23F
我是不知道15~20的機會有沒有啦,但起碼六七萬是一定有的
推
12/09 20:05, , 24F
好文！Typo => closure
12/09 20:05, 24F
推
12/09 20:08, , 25F
前面vue很不錯學，文檔看一下幾乎可馬上就上手了
12/09 20:08, 25F
推
12/09 20:11, , 26F
我們公司的前端也都用這些技術 最菜的資歷大約兩年左右
12/09 20:11, 26F
※ 編輯: RunRun5566 (220.136.62.183), 12/09/2016 20:21:51
推
12/09 20:22, , 27F
個人覺得 isomophic 不一定要列入
12/09 20:22, 27F
推
12/09 20:54, , 28F
感謝分享！！覺得react, angular 不曉得在台灣使用哪一
12/09 20:54, 28F
→
12/09 20:54, , 29F
種比較多
12/09 20:54, 29F
推
12/09 21:07, , 30F
感謝分享！
12/09 21:07, 30F
推
12/09 21:32, , 31F
現在很多用Angular的公司都在轉React吧
12/09 21:32, 31F
→
12/09 21:33, , 32F
認識的獵人頭說公司幾乎都是找React
12/09 21:33, 32F
推
12/09 21:37, , 33F
最近兩年感覺起來React比Angular有優勢一些
12/09 21:37, 33F
還有 19 則推文
還有 3 段內文
推
12/10 10:45, , 53F
推
12/10 10:45, 53F
推
12/10 11:22, , 54F
中國用語有差嗎？學技術還分國籍= =
12/10 11:22, 54F
推
12/10 11:39, , 55F
如果只是要玩前端用github pages就夠了吧
12/10 11:39, 55F
→
12/10 11:40, , 56F
還有this的觀念, 在stackoverflow上看到很多人會因為這個
12/10 11:40, 56F
→
12/10 11:40, , 57F
然後程式出問題找不到原因
12/10 11:40, 57F
推
12/10 12:13, , 58F
3個月是平均一天花幾個小時？因為我覺得3個月不太夠
12/10 12:13, 58F
推
12/10 12:15, , 59F
有基礎後可再看些前端知識 如 https://goo.gl/Zf6jP6
12/10 12:15, 59F
推
12/10 13:33, , 60F
前端資源懶人包 http://goo.gl/eYS28w
12/10 13:33, 60F
推
12/10 14:57, , 61F
推
12/10 14:57, 61F
→
12/10 15:20, , 62F
React > Vue > Angular
12/10 15:20, 62F
推
12/10 17:10, , 63F
好人 推!
12/10 17:10, 63F
→
12/10 19:30, , 64F
感謝 一起衝鋒吧
12/10 19:30, 64F
推
12/10 20:29, , 65F
推 很感謝這些前輩的心得文 不然有時新人會徬徨不
12/10 20:29, 65F
→
12/10 20:29, , 66F
知道要怎麼開始
12/10 20:29, 66F
推
12/11 09:02, , 67F
看不太出來有中國用語阿？
12/11 09:02, 67F
推
12/11 09:43, , 68F
推
12/11 09:43, 68F
推
12/11 11:01, , 69F
推 優質文
12/11 11:01, 69F
推
12/11 17:30, , 70F
優質文, 不推對不起自己
12/11 17:30, 70F
推
12/11 17:57, , 71F
推
12/11 17:57, 71F
推
12/12 00:02, , 72F
推
12/12 00:02, 72F
推
12/12 00:55, , 73F
謝謝前輩分享，很受用
12/12 00:55, 73F
推
12/12 12:09, , 74F
感謝分享 滿有趣的
12/12 12:09, 74F
推
12/13 05:30, , 75F
推 有參考價值
12/13 05:30, 75F
推
12/13 15:17, , 76F
推
12/13 15:17, 76F
推
12/14 00:49, , 77F
Relay 如何?
12/14 00:49, 77F
推
12/14 04:33, , 78F
請問，沒經驗要學ASP.NET，這樣的流程也是通用嗎?
12/14 04:33, 78F
推
12/14 13:20, , 79F
優質文
12/14 13:20, 79F
推
12/14 19:55, , 80F
個人推react作為一個學習的目標，學會react，基本的js功
12/14 19:55, 80F
→
12/14 19:55, , 81F
力跟觀念算是足夠了。但是前端進步太快了，抓緊基本功，
12/14 19:55, 81F
→
12/14 19:55, , 82F
才不怕在這一堆花花綠綠的框架中迷失。也能在從框架本身
12/14 19:55, 82F
→
12/14 19:55, , 83F
的設計概念中，吸取更多的經驗
12/14 19:55, 83F
→
12/15 05:53, , 84F
異步編成>非同步 質量>品質 優化>最佳化 but whatever反正我
12/15 05:53, 84F
→
12/15 05:53, , 85F
都看英文的
12/15 05:53, 85F
推
12/17 17:34, , 86F
優質文
12/17 17:34, 86F
推
12/18 12:06, , 87F
推
12/18 12:06, 87F
推
12/18 12:08, , 88F
推推推
12/18 12:08, 88F
→
12/19 07:58, , 89F
如果走React+es6，在導typescript 根本自找麻煩
12/19 07:58, 89F
推
12/19 12:12, , 90F
推
12/19 12:12, 90F
推
12/20 16:39, , 91F
感恩
12/20 16:39, 91F
推
12/27 14:37, , 92F
推
12/27 14:37, 92F
‣ 更多 RunRun5566 的文章
文章代碼(AID): #1OIe2gh- (Soft_Job)