React Components(組件)

首先我們要先了解在 React 中最小的單位是 Element，一個按鈕可以是一個 Element，一段文字描述也可以是一個 Element，將數個 Element 組合起來就會是一個 Components，因此 React 頁面為數個 Components 組成。

常常聽到工程師其實是很不喜歡重複做同一件事情 XD
所以我們可以思考哪些Element之後會經常性重複使用，並將它變為Components~

Components 可以當作是 JavaScript 的 Function

建立一個專門存放 Components 的資料夾

以下將程式碼寫在 Components 資料夾中的 button.js 中
首先宣告一個自定義的 Function

//宣告一個 Function
const Button = () => {
  return (
    <div>
      <h1>day4 components</h1>
      <button>button1</button>
      <button>button2</button>
    </div>
  )
}

在每一個 Components 的最上方記得都需要先設定 import React from "react"

import React from "react"

const Button = () => {
  return (
    <div>
      <h1>day4 components</h1>
      <button>button1</button>
      <button>button2</button>
    </div>
  )
}

設定好一組自訂Components後，想要將它輸出給其他的頁面做使用
我們可以這樣做設定。
將需要輸出的 Components下方輸入export default "Function名稱"

import React from "react"

const Button = () => {
  return (
    <div>
      <h1>day4 components</h1>
      <button>button1</button>
      <button>button2</button>
    </div>
  )
}

export default Button //將 Button這個 Components 輸出

接著選擇需要使用這組 Components的頁面，將其import
以下在 app.js的頁面中引入Button這個 Components來做使用
在app.js上方輸入import Button from "./components/button"

import React from "react"
import Button from "./components/button"

const App = () => {
  return (
    <div>
      <h1>鐵人賽開跑</h1>
      <Button></Button> //成功引入後，將可以在 App 的 Function 中 使用 Button 的 Function
    </div>
  )
}

export default App

完成後的畫面如下圖
我們可以正確查看到 Button 的 Components 成功地被使用在 App.js 中～

以上是今天所學的內容，若文章中有錯誤的部分，歡迎大大們給予指教