前端渣男—從 Vue 跨到 React，基本概念
前言
在前端領域，每隔幾年都會有一次大的革新，很有可能現在手上持有的武器，過了幾年就風化在歷史當中；如果對技術抱持著從一而終的心態，很有可能辜負了青春辜負了薪水。
與其說前端內卷嚴重，不如說選擇前端這個職業、就是要讓自己變成渣男，只要夠帥夠有才華，什麼技術都可以信手拈來、又不會惹一身腥。
而近期前端市場上的熱門框架，就是 Vue 和 React 了（Angular 阿姨等我成長起來）。網路上有許多比較兩者的優劣了；但身為渣男，就好好欣賞兩者不同的美、然後逐一攻破吧！
不過，由於筆者是先學了 Vue 並應用在工作上，然後再自己學習 React，所以大部分的視角會從 Vuer 來看 React 專案的差別出發。
（這系列文章會先以Vue3 和 React18 + Typeacript來製作 SPA 網站做參考）
Vue 和 React 的基本差別-專案結構
如果本地機器還沒安裝 node 環境、npm 的話，建議nvm，然後透過 nvm 來下載並管理 node 版本。（之前筆者在 Mac OS 環境上用 Homebrew 來下載 node，把環境弄得超不乾淨，只好用時光機回朔然後使用nvm）。架好 node 環境之後，對於 Vue 的專案初始化，可以參考 vue-cli的簡介；react 的部分，可以直接在 terminal npx create-react-app {project name} --template typescript，如 npx create-react-app demo-app --template typescript
- Vue3+Typescript 初始專案
- React+Typescript 初始專案
肉眼可見，最大的差別就是 Vue 專案中的 .vue 和 React 中的 .jsx，其餘的不能說是大同小異，但可以說是幾乎一模一樣。
Vue 的.vue
這算是 Vue 迷人的地方。<template>裡是寫畫面（html）的地方， <sylte>裡面寫 css，<script>就當然是寫 javascript/typescript 的地方，然後再 export 出去，變成可複用的組件。而 Vue2 和 Vue3 的差別，就是在<script>中是使用 Option API 還是 Composition API（之後有機會再補充）。
可以看到，.vue 檔案都是以這樣的方法來組成組件，清晰明瞭，我覺得這是 Vue 對新手友好的地方。
React 的.jsx
如果 Vue 是把原本大坨的 HTML+CSS+Javascript 利用.vue拆成一個個小的 HTML+CSS+Javascript，而 React 可以說是把所有東西都寫成了 Javascirpt/Typescript。
要寫出一個 JSX 組件，是有Class-based 或是 Functional兩種方法。不過近期 React 專案應該都是以Functional + react hook為主了。不過兩者的共同點就是，只要透過{}. 可以在 HTML 裏面寫 Javascript，而不像 Vue 只能用 v-if、v-for 等等框架提供的 api，這對自由度有很大的提升！
小結
雖然因為工作專案的緣故，大部分都是使用 Vue、也很習慣 Vue 的寫法了；不過人都是吃著碗內看著碗外，React 這種自由的 jsx 寫法也吸引到了筆者。之後也會慢慢深入了解和比較兩者的差異！
ChangeLog
- 20220817 初稿