建立元件的步驟

1. 使用 export default 匯出
2. 定義函式 function Xxxx() {}
3. return markup

補充：Default export 和 Named export

JavaScript 中主要有兩種匯出方式 default export 和 named export

• 一個檔案只能有一個 default export，但可以多個 named export
• 建議兩者不要混用，例如：在同一個檔案同時用 default export 和 named export
• 元件如何 export 會決定 import 的方式，default export -> default import，named export -> named import

default import 可以指定任何名稱，記得不用 {} !

import User from './user.js'; // not {User}, just User

new User('John');

named import 使用的名稱必須和 named export 一致

// user.js
export class User {...}

// profile.js 載入 user
import {User} from './user.js'
// import {MyUser} 無效，名稱必須為 {User}

使用 default export，import 的名稱可以自訂 （但容易造成混淆，不推薦！）

import User from './user.js';
import MyUser from './user.js';

可使用名稱和檔名一致的方式：

import User from './user.js';
import LoginForm from './loginForm.js';
import func from '/path/to/func.js';

或是統一用 named export 的方式！

JSX 規則：

• 回傳一個根元素
• 所有的 tag 都要 close，無論是 self-colosing tag <img /> 還是 wrapping tags <div>...</div>
• 屬性要以 camelCase 命名
• JSX 使用 {} 寫 JavaScript
  • 可以使用 {} 在 tag 中嵌入文字或是作為屬性值
  • {{}} 代表傳入物件

可以透過 props 傳遞值給元件使用 (包含物件、陣列、函式)，由父元件定義 props 內容傳給子元件，子元件接收 props

傳了兩個 props 給 <Avatar>，一個 person 物件，一個 size 數值

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

// Avatar 元件，可解構使用 props
function Avatar({ person, size }) {
  // ....
}

// 也可以寫成
function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

React 元件只接收一個參數 props 物件，如果不會使用到整個 props，可使用解構取出需要的值

props 重複性很高，person, size, isSepia, thickBorder 通通要在 <Avatar> 屬性再寫一次

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

可以把全部的 Profile 的 props 通通一次傳給子元件 Avatar

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

HTML 常見巢狀結構

<div>
  <img />
</div>

在 React 也可以使用元件包元件的方式

<Card>
  <Avatar />
</Card>

父元件會將包住內容全部視為 children prop，例如：<Avatar> 被視為 children，整個傳入<Card> 中

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

將 children 想像成每個元件都會有的空位，其父元件可以決定要填入的內容。

Props 注意事項

• props 不是傳入後就固定不變的，子元件可以隨著時間一直接收不同的 props 值
• props 是不可變的 (Immutable)，如果元件需要異動自己的 props，必須去跟父元件要一個新的 props 物件，JavaScript Engine 會收回舊物件的記憶體
• 千萬不要更改 props，可以用 set state 作法