為何選擇學習 React？

雖然目前在開發中主要使用 Vue3（Composition API），但這一次的鐵人賽，我決定將焦點放在 React 上。

通常，我們會因為某些契機而決定學習新的技術。而我學習 React 的契機，源自於 YouTube 上的一部影片 2020 Vue vs. React 前端擂台戰，影片中 React 的講者強調了一個觀點：

React 更好被 Code Review 👍

React 更好被 Code Review 👍

React 更好被 Code Review 👍

Vue 的語法糖（雙面刃）

為了提供更好的開發體驗，Vue 提供了一系列實用的語法糖。舉例來說，讓我們看看 v-model 這個 directive（指令）背後是如何實現的。

<input type="text" v-model="searchText" />

實際上，Vue 的官方文件 已經有解釋 v-model 的運作方式。

它是使用 input 事件將 $event.target.value 賦予給值 searchText，接著將 searchText 的值動態綁定給 value 屬性。

若是不熟悉這些語法糖的工作原理，很有可能會不當使用它們。

<input
  type="text"
  :value="searchText"
  @input="searchText = $event.target.value"
/>

React 提供更純粹的 JavaScript 開發體驗

相較於 Vue，React 不提供過多的語法糖，而是仰賴 JavaScript 本身的特性。

舉例來說，當有一組陣列 fruits 需要進行列表渲染時：

const fruits = [
  { id: 1, title: 'Apple' },
  { id: 2, title: 'Banana' },
  { id: 3, title: 'Guava' }
]

Vue 主要使用 v-for 這個 directive（指令）。

<ul>
  <li v-for="fruit in fruits" :key="fruit.id">
    {{ fruit.title }}
  </li>
</ul>

React 主要使用 JavaScript 的陣列方法 map 來實現相同功能，因此開發者可以更好地理解 JavaScript 本身的特性。

<ul>
  {fruits.map((fruit) => (
    <li key={fruit.id}>
	  {fruit.title}
	</li>
  ))}
</ul>

更好被 Code Review

根據上述內容，由於 Vue 的 template 裡充斥著各種語法糖，而 React 更傾向純粹的 JavaScript，因此在 2020 Vue vs. React 前端擂台戰 這部影片中，講者著重強調 React 更容易進行 Code Review，這也引起了我對於 React 這套前端 Library 的興趣。

結語

「React 個人讀書會」將會以 Udemy 上的課程：The Ultimate React Course 2023: React, Redux & More 做為學習內容，這門課程的講師 Jonas Schmedtmann 有幾個特點：

1. 講解的節奏適中、咬字清晰。
2. 課程皆提供英文字幕（非自動生成），可以搭配 Udemy Dual Subtitles 這個 Google 擴充套件翻譯成繁體中文（中英文相互對照）。
3. 不僅講解基礎，還會解釋其背後的運作原理。

這是我第二次參加 iT 鐵人賽，也在這邊期許自己每一年都能持續的挑戰，累積自身的經驗！

參考資料

• 2020 Vue vs. React 前端擂台戰
• [Day 01] 前言：React 為什麼這麼難學的好？