在學 React 之前，
你必須懂的 JavaScript

// const：裝了不能換（最常用）
const name = 'Joseph';
const age = 26;
const isLoggedIn = true;

// let：可以重新賦值
let count = 0;
count = count + 1;  // ✅ 可以，count 現在是 1

// name = 'Mary';   // ❌ 錯誤！const 不能重新賦值
// const x;         // ❌ 錯誤！const 宣告時一定要給值

// 三種基本型別
const myString = 'Hello';   // 字串
const myNumber = 42;         // 數字
const myBoolean = true;      // 布林（true 或 false）

// 函式：接收輸入，處理後產生輸出
function greet(name) {           // name 是「參數」（輸入）
  return '你好，' + name + '！'; // return 是「輸出」
}

const result = greet('Joseph');
console.log(result);  // 你好，Joseph！

// 可以有多個參數
function add(a, b) {
  return a + b;
}
console.log(add(3, 5));  // 8

// 沒有 return → 回傳 undefined
function sayHello(name) {
  console.log('Hello ' + name);  // 只做事，不回傳值
}
const val = sayHello('Mary');
console.log(val);  // undefined

// 建立陣列（用中括號）
const fruits = ['蘋果', '香蕉', '芒果'];

// 用索引存取（從 0 開始！）
console.log(fruits[0]);  // '蘋果'
console.log(fruits[1]);  // '香蕉'
console.log(fruits[2]);  // '芒果'

// 取得長度
console.log(fruits.length);  // 3

const fruits = ['蘋果', '香蕉', '芒果'];

// .map()：把每個元素「變換」成新的東西
// 傳入一個函式，針對每個元素執行，回傳「新陣列」
const tagged = fruits.map(fruit => fruit + ' 🍴');
console.log(tagged);  // ['蘋果 🍴', '香蕉 🍴', '芒果 🍴']
// 原本的 fruits 不變！.map() 永遠回傳新陣列

// .filter()：篩選符合條件的元素，回傳「新陣列」
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens);  // [2, 4, 6]

// .find()：找到「第一個」符合條件的元素
// 找到就回傳那個元素，找不到就回傳 undefined
const found = fruits.find(fruit => fruit === '香蕉');
console.log(found);  // '香蕉'

const notFound = fruits.find(fruit => fruit === '西瓜');
console.log(notFound);  // undefined

// 物件：把相關資料組合在一起
const user = {
  name: 'Joseph',        // 字串
  age: 26,               // 數字
  isAdmin: false,        // 布林
  address: {             // 巢狀物件！物件裡面可以再放物件
    city: '高雄',
    country: '台灣',
  }
};

// 兩種存取屬性的方式
console.log(user.name);           // 'Joseph'（點記法，最常用）
console.log(user['age']);         // 26（中括號記法）

// 巢狀物件用點記法一層層往下
console.log(user.address.city);   // '高雄'

// 修改屬性的值（物件是 const，但裡面的屬性可以改）
user.age = 27;                    // ✅ 可以
console.log(user.age);            // 27

// 1. 用「物件陣列」存資料
//    每一本書是一個物件，所有書放在一個陣列
const books = [
  { id: 1, title: 'Clean Code',        author: 'Robert Martin', price: 650 },
  { id: 2, title: "You Don't Know JS", author: 'Kyle Simpson',  price: 450 },
  { id: 3, title: 'Design Patterns',   author: 'GoF',           price: 800 },
];

// 2. 用「函式」建立 Component
//    接收一本書的物件作為 props，回傳 UI
function BookCard({ book }) {     // ← 參數是物件，下一篇會教解構賦值
  return (
    <div style={{ border: '1px solid #eee', padding: '16px', margin: '8px', borderRadius: '8px' }}>
      <h3 style={{ margin: 0 }}>{book.title}</h3>
      <p style={{ color: '#666' }}>作者：{book.author}</p>
      <p style={{ fontWeight: 'bold', color: '#e55' }}>NT${book.price}</p>
    </div>
  );
}

// 3. 用「.map()」把資料陣列轉成 UI
//    每本書呼叫一次 BookCard，key 用 book.id（唯一識別）
function BookList() {
  return (
    <div>
      <h2>書單</h2>
      {books.map(book => (
        <BookCard key={book.id} book={book} />
      ))}
    </div>
  );
}

// BookList 渲染出來大概長這樣：
// <div>
//   <h2>書單</h2>
//   <div>Clean Code — Robert Martin — NT$650</div>
//   <div>You Don't Know JS — Kyle Simpson — NT$450</div>
//   <div>Design Patterns — GoF — NT$800</div>
// </div>