[前端自學轉職攻略] 17. 前端框架怎麼選？

Chang-avatar-img
Chang
發佈於前端攻略指南
更新於 發佈於 閱讀時間約 1 分鐘
React 跟 Vue 二擇一，然後重構 side project


與其每個都只會一點，不如專精一個


雖然不同的框架在 API 和設計理念上可能存在差異，但仍有很多知識是共通的。一個框架要熟練，需要通過實做各種不同的功能後，才能深入理解。因此，建議先把時間和精力集中學習單一個框架。



選哪個框架好？


如果已經有找工作的方向，可以看目標職缺多數用哪個框架。如果還是沒有想法，建議：

  • 覺得 JavaScript 學起來很辛苦：Vue
  • 覺得 JavaScript 學起來得心應手：React


2023.stateofjs.com
2023.stateofjs.com



重構 side project


使用框架來重構 side project，從實作中學習，並體驗前端框架與原生 JavaScript 開發效率上的差異。

從原生 JavaScript 轉向前端框架時，思考方式需要稍微轉換一下，主流前端框架都提供很完善的官方文件，不同於學習 JavaScript，這邊會建議先把文件看過一遍，了解主要的使用方式後，再開始重構。

使用前端框架時，應儘量避免直接操作 DOM 元素，不要把 JavaScript 的作法原封不動的套入使用。

前端轉職經驗談前端攻略指南
留言
avatar-img
留言分享你的想法！
avatar-img
前端轉職經驗談
5會員
41內容數
零基礎到成功轉職，一路上會遇到哪些挑戰、應該如何解決？ - 猶豫階段：「這適合我嗎？薪水如何？...」 - 起步階段：「怎麼開始學？要不要做 side project？...」 - 成長階段：「如何優化開發效率？選擇框架？...」 - 面試階段：「怎麼準備技術和行為面試？...」
前端轉職經驗談的其他內容
2025/03/09
如何找 side project 點子
原文：HOW TO GET STARTUP IDEAS 原文是針對如何找出創業的題目，不過如果想做 side project 卻苦無想法的話，也可以參考看看。 獲得創業點子的方法不是刻意去想創業點子，而是尋找問題，最好是你自己面臨的問題。 最優秀的創業點子通常具有三個共同點： 這是創辦
2025/03/09
如何找 side project 點子
原文：HOW TO GET STARTUP IDEAS 原文是針對如何找出創業的題目，不過如果想做 side project 卻苦無想法的話，也可以參考看看。 獲得創業點子的方法不是刻意去想創業點子，而是尋找問題，最好是你自己面臨的問題。 最優秀的創業點子通常具有三個共同點： 這是創辦
2025/02/02
JavaScript 入門實戰：適合初學者的10 個基礎練習
學習 JavaScript 時，理解語法和概念是一回事，實際應用又是另一回事。許多初學者會遇到「看得懂範例，但自己寫不出來」的困境。因此，本文從實際開發的常見情境中，簡化出了 10 個範例，讓你能夠逐步練習，慢慢熟悉寫程式的思考方式。
2025/02/02
JavaScript 入門實戰：適合初學者的10 個基礎練習
學習 JavaScript 時，理解語法和概念是一回事，實際應用又是另一回事。許多初學者會遇到「看得懂範例，但自己寫不出來」的困境。因此，本文從實際開發的常見情境中，簡化出了 10 個範例，讓你能夠逐步練習，慢慢熟悉寫程式的思考方式。
2025/01/30
State of JS 2024：前端開發者的年度技能檢測指南
每年一次的 State of JS 問卷調查，不只是觀察前端技術趨勢的工具，更是檢視自身技能與學習方向的絕佳機會。透過這份調查，你可以了解前端生態的變化，確保自己沒有錯過重要資訊，並規劃未來的學習路線。
Thumbnail
2025/01/30
State of JS 2024：前端開發者的年度技能檢測指南
每年一次的 State of JS 問卷調查，不只是觀察前端技術趨勢的工具，更是檢視自身技能與學習方向的絕佳機會。透過這份調查，你可以了解前端生態的變化，確保自己沒有錯過重要資訊，並規劃未來的學習路線。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
小愛和彤彤的小日常的沙龍
告別瞇眼寫功課！喜光TIONE⁺光健康智慧檯燈守護孩子視力
孩子寫功課時瞇眼？小心近視！這款喜光全光譜TIONE⁺光健康智慧檯燈，獲眼科院長推薦，網路好評不斷！全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉，讓孩子學習更舒適、保護眼睛！
#方格新手#保護眼睛#閱讀
Thumbnail
avatar-avatar
小愛和彤彤的小日常的沙龍
告別瞇眼寫功課！喜光TIONE⁺光健康智慧檯燈守護孩子視力
孩子寫功課時瞇眼？小心近視！這款喜光全光譜TIONE⁺光健康智慧檯燈，獲眼科院長推薦，網路好評不斷！全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉，讓孩子學習更舒適、保護眼睛！
#方格新手#保護眼睛#閱讀
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
徵才：創作者營運專員/經理（Operations Specialist）｜Creator Partnership 部門
創作者營運專員/經理（Operations Specialist/Manager）將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力，找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
#vocus#方格子#求職
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
徵才：創作者營運專員/經理（Operations Specialist）｜Creator Partnership 部門
創作者營運專員/經理（Operations Specialist/Manager）將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力，找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
#vocus#方格子#求職
Thumbnail
avatar-avatar
Web開發日誌
簡單聊聊，我為什麼又多下載react跟tailwind使用
先從react開始： 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
#程式#React#TailwindCSS
Thumbnail
avatar-avatar
Web開發日誌
簡單聊聊，我為什麼又多下載react跟tailwind使用
先從react開始： 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
#程式#React#TailwindCSS
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - 自訂義指令 directive
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
#六角學院#學習#Vue
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - 自訂義指令 directive
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
#六角學院#學習#Vue
Thumbnail
avatar-avatar
小黑與程式的邂逅
[Java Script]Vue.js
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
#JavaScript#VisualStudioCode#VueCLI
Thumbnail
avatar-avatar
小黑與程式的邂逅
[Java Script]Vue.js
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
#JavaScript#VisualStudioCode#VueCLI
Thumbnail
avatar-avatar
s_SoNg的沙龍
React ViewRerender架構
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
avatar-avatar
s_SoNg的沙龍
React ViewRerender架構
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
avatar-avatar
再寫5分鐘
軟體設計模式 | 模板模式 : 以Vue.js為例
樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。
#應用程式#測試#Android
Thumbnail
avatar-avatar
再寫5分鐘
軟體設計模式 | 模板模式 : 以Vue.js為例
樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。
#應用程式#測試#Android
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - Vue Router及具名視圖
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
#六角學院#Vue#前端
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - Vue Router及具名視圖
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
#六角學院#Vue#前端
Thumbnail
avatar-avatar
再寫5分鐘
後端開發環境好難架，初學資料庫到底需要了解哪些東西?
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
#資料庫#PostgreSQL#MySQL
Thumbnail
avatar-avatar
再寫5分鐘
後端開發環境好難架，初學資料庫到底需要了解哪些東西?
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
#資料庫#PostgreSQL#MySQL
Thumbnail
avatar-avatar
咖啡因學習教室
2024 網頁x人因xDjango 實務課程 02 前後端概念
當我剛開始接觸這個領域的時候，經常會看到有人在討論： 到底要做前端還是後端工程師呢？後端工程師賺的比前端工程師多？前端工程師轉後端工程師？那前端與後端到底是什麼呢？ 這篇文章提供了前端與後端的基本概念並舉例來說明。同時也介紹了前端的三大要素以及後端的運作原理，對於想深入瞭解前後端的讀者會非常有幫助。
#網頁#文章#伺服器
Thumbnail
avatar-avatar
咖啡因學習教室
2024 網頁x人因xDjango 實務課程 02 前後端概念
當我剛開始接觸這個領域的時候，經常會看到有人在討論： 到底要做前端還是後端工程師呢？後端工程師賺的比前端工程師多？前端工程師轉後端工程師？那前端與後端到底是什麼呢？ 這篇文章提供了前端與後端的基本概念並舉例來說明。同時也介紹了前端的三大要素以及後端的運作原理，對於想深入瞭解前後端的讀者會非常有幫助。
#網頁#文章#伺服器
Thumbnail
avatar-avatar
36號系統
React大前端時代元件構思方法
前言 現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
#React#軟體開發#前端
Thumbnail
avatar-avatar
36號系統
React大前端時代元件構思方法
前言 現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
#React#軟體開發#前端
Thumbnail
avatar-avatar
36號系統
前端開發者的斜槓設計技能，打造動態icon，開發Loading Page
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
#前端#軟體開發#設計
Thumbnail
avatar-avatar
36號系統
前端開發者的斜槓設計技能，打造動態icon，開發Loading Page
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
#前端#軟體開發#設計
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News