大家好～這篇主要會來複習一下近幾天記錄的Components元件基本使用方法

一、

React 是由數個Components（元件）所組成，是一個小而且可重複使用的程式碼
每建立一組Components，我們可以當作是寫成 JavaScript 的 Function

import React from "react"

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

export default Button

如果需要將元件打包傳遞給任何元件使用，必須記得在每個Components結束時加上export default Function名稱;如果需要引入其他檔案或Components元件，則使用import

import React from "react" //引入元件
import "./product.css" //引入檔案，寫入"相對路徑"

二、

定義宣告變數/常數利用{}將值帶入元件中

import React from "react"
import "./product.css"

const productName = "i'm product name" //宣告 productName 常數
const productPrice = "$1,000" //宣告 productPrice 常數

const Product = () => {
  return (
    <div>
      <div>
        <h2>{productName}</h2> //使用{}將常數放入
        <p>{productPrice}</p>
      </div>
    </div>
  )
}
export default Product

三、

props主要用來提供值給組件使用，不論是設定屬性或是資料，都可以利用Props來完成資料傳遞，因此就算是同一個組件，也可能會依照提供的Props而有所不同。
使用{}+props.屬性，即可以調用父層資訊

import React from "react"
import "./product.css"

const Product = (props) => {
  return (
    <div>
      <div>
        <h2>{props.title}</h2>  //{}+ props.屬性
        <p>{props.price}</p>  //{}+ props.屬性
      </div>
    </div>
  )
}

export default Product

props使用規範

Props 是唯獨的（ read-only ）代表的是 props 物件，因為資料流向是單向的，傳資料進入總是會回傳同一個結果，所以props是不可被變動的。

Components 命名規範

Component 的字首必須是大寫字母
React 會將小寫字母開頭的名稱當作是原始 DOM 標籤。
例如：<div /> 就會被視為是 HTML 的 div 標籤，但是 <Product /> 則是一個 component

以上內容是對於近期整理Components基本操作方法
如果內文有誤，非常歡迎大大們給予指教～～