React的元件有兩種形式，過去是以Class Component的方式開發，在react 16.8之後，新增了React Hooks，也因為Functional Component相對精簡，使得Functional Component的開發方式逐漸成為主要的選項。所以，在本課程中，我們只介紹Functional Component。在react裡，我們盡量把程式切割為不同的元件，利用元件的切割，讓程式碼可以重複使用，也避免讓元件過於複雜、難以理解。要怎麼產生一個元件呢? 首先，先定義一個空的function。

基本概念

在App.js的同一個檔案夾裡，利用src旁邊的「New File」新增檔案，新增 Click.js

Untitled

如果利用最上面的「New File」新增 Click.js。

Untitled

檔案會在外面

Untitled

要把檔案拉進src檔案夾裡:

Untitled

export default function Click() {

}

接下來就跟App.js很像，可以利用return，寫一些要呈現在頁面上的內容

export default function Click() {
  return <div>點一下</div>;
}

在App.js裡，將這個元件放進去

<aside> 💡

記得要有import，否則，會顯示「Click is not defined」! 也就是import是指定Click的內容就是在同一個檔案夾的Click.js

</aside>

import "./styles.css";
import Click from "./Click";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      **<Click />**
    </div>
  );
}

<Click />

其實就是

<Click> </Click>