元件

在為什麼要用JS框架，就提到了元件的使用，我們來試試看，把我們把「我是吳濟聰」的部分獨立成一個元件。

import styles from './page.module.css'
function **myName()**{
  return(
    <h2>我是吳濟聰</h2>
  )
}
export default function Home() {
  return (<div className={styles.page}><h1>Hello</h1>**<myName/>**</div>)
}

會發現「我是吳濟聰」不見了，並且會看到:

Warning: <myName /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

<aside> 📢 在React裡，元件名稱都要以大寫開頭

</aside>

要改成:

import styles from './page.module.css'
function MyName(){
  return(
    <h2>我是吳濟聰</h2>
  )
}
export default function Home() {
  return (<div className={styles.page}><h1>Hello</h1><MyName/></div>)
}

我們新增一個檔案: MyName.tsx，把MyName()的內容獨立寫在一個檔案裡。

myname.tsx

function MyName(){
  return(
    <h2>我是吳濟聰</h2>
  )
}

page.tsx

import styles from './page.module.css'
export default function Home() {
  return (<div className={styles.main}><h1>Hello</h1>**<MyName/>**</div>)
}

原因是MyName現在不在page.tsx裡了，所以，找不到MyName。所以，我們利用import來取得MyName。

page.tsx

import styles from './page.module.css'
**import MyName from './myname'**
export default function Home() {
  return (<div className={styles.page}><h1>Hello</h1><MyName/></div>)
}

還是不行~~~

原來，是因為我們漏了export default，export表示這個部分可以讓其他的程式可以使用 (類似java的public)。