[前端自學轉職攻略] 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
好好宅在家
設計師也蝦皮購－前陣子為工地買什麼？
家中修繕或裝潢想要找各種小零件時，直接上網採買可以省去不少煩惱～看看Sylvia這回為了工地買了些什麼吧～
#開箱#蝦皮分潤計畫#裝修工程
Thumbnail
avatar-avatar
好好宅在家
設計師也蝦皮購－前陣子為工地買什麼？
家中修繕或裝潢想要找各種小零件時，直接上網採買可以省去不少煩惱～看看Sylvia這回為了工地買了些什麼吧～
#開箱#蝦皮分潤計畫#裝修工程
Thumbnail
avatar-avatar
Chloe小窩
我的簡單生活練習：三款包包與日常小物開箱分享
👜簡單生活，從整理包包開始！我的三款愛用包＋隨身小物清單開箱，一起來看看我每天都帶些什麼吧🌿✨
#蝦皮#開箱#蝦皮分潤計畫
Thumbnail
avatar-avatar
Chloe小窩
我的簡單生活練習：三款包包與日常小物開箱分享
👜簡單生活，從整理包包開始！我的三款愛用包＋隨身小物清單開箱，一起來看看我每天都帶些什麼吧🌿✨
#蝦皮#開箱#蝦皮分潤計畫
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#軟體開發#前端
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News