React 跟 Angular 的框架分析 — Part 3: 兩個框架的優缺點
歡迎再度回到小孩子才做選擇，我兩個都要！React 跟 Angular 的框架分析系列！
這篇分析會切成以下四個部分，你現在在這裡：
- Angular 跟 React 的快速背景
- 快速帶過近幾年兩個框架的發展 trends （更詳細的 trends 分析會另外開一篇）
- 兩個框架的優缺點，每提一點，會附上實作 comparison
- 下集預告：配合後端 + 串起 API 後，誰勝出
準備好的話，我們就開始囉~
框架優缺點
如果可以拿食物來形容兩個框架的話，React 是單點套餐，可以一直加不同的配餐，而 Angular 就是全家桶一次給你、給你、都給你。
一切取決於你想要什麼東西。
但是，嘰裡呱啦講了那麼多，我們怎麼知道誰比較好？
簡單，寫出來就知道了！
接來下，我們拿 Todo List 當例子，把這個範例用 Angular 跟 React 各寫一次。
並在寫 code 時分析並提出兩個框架的優劣處。
框架結構
首先我們來理解一下 Angular 的結構 Angular 是採 MVC 方式，也就是說一個 component 上面，你會有 4 個檔案：
- TypeScript：component 邏輯
- css/scss: 如名 style 檔案
- HTML: 呈現的網頁
- spec.ts: 測試檔
在 TypeScript 檔案裡面寫好你的 class，html 顯示你的 template，scss 呈現 style，最後用 spec 來測試。
而 React 在資料結構上，就乾淨簡潔的許多
如果採用 JSX 的話， React 就只有一個 JSX 檔。
而我們之前提過 React 採取了 Virtual DOM 的方式，用 JSX 寫法的話，我們可以選擇要寫 class component 或是 functional component。
近幾年，因為 React Hooks 的崛起，functional 開始被重用，而 loading 的速度也更快了。
要測試 React 的話，跟 Angular 一樣 React 需要額外寫測試檔，但不一定每個 component 都要單獨寫一個！
React 個人小偏好
在 React 的資料夾結構上，我個人偏好是這樣：
components:
- Book
- index.js
- Book.jsx
把寫好的 component 分裝進一個專屬的資料夾，裡面有 index.js 跟 component 的 jsx 檔案。
在將 index.js 輸出 component，方便其他頁面讀取。
看完了結構，我們來聊聊撰寫時的便利度！
接下來的部分重寫中，上次舉的例子沒有特別好，所以還請各位客官見諒，他很快就會被補回來的！