概念

React 是前端三大框架之一，除了 React 之外還有 Angular 與 Vue

React 是 Library，使用 JSX，為 JS 的語法擴充，可以在 JS 中使用 HTML(XML)的語法糖

風格為 Declarative(宣告式)，非 Imperative(命令式)

const element = <h1>Hello!</h1>

---

Component(元件)

一般熟知的畫面可以想像成有很多元件組成

如下圖，可以將這個一個記帳項目視為一個元件，之中的日期或是價錢名稱都可以再拆為獨立元件

將畫面區塊化甚至更細節，達到重複使用、及關注點分離

Component 會像是樹狀結構

React Component 是由 JS function 實作出來

每個 Component 只能有一個父元素

---

實作元件

嘗試在 Component loop 出五筆資料

位於 app.js

const expenses = [
  {
    id: "e1",
    title: "Toilet Paper",
    amount: 94.12,
    date: new Date(2020, 7, 14),
  },
  { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) },
  {
    id: "e3",
    title: "Car Insurance",
    amount: 294.67,
    date: new Date(2021, 2, 28),
  },
  {
    id: "e4",
    title: "New Desk (Wooden)",
    amount: 450,
    date: new Date(2021, 5, 12),
  },
]

Expenses.js

結果

---

透過元件共用樣式

透過建立新的元件 Card，更改 Tag

---

現代與過去的寫法

過去的 React 中需要把這行寫入每個應用 JSX 的檔案

import React from "react"

並在下方使用 React.createElement(Name, Attributes, args)

// MODERN
return (
  <div>
    <h2>Let's get started!</h2>
    <Expenses data={expenses} />
  </div>
)

// OLD VERSION
return React.createElement(
  "div",
  {},
  React.createElement("h2", {}, "Let's get started!"),
  React.createElement(Expenses, { items: expenses })
)