昨天我們成功的客製化我們的 元件(Component)，傳入了不同的 Props，使每個元件都可以重複利用，今天我們就來切分我們原本做好的 Component 使我們的 React 專案更加的元件化吧～

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css';
import { Item } from './components/Item';

const root = ReactDOM.createRoot(document.getElementById('root'));


const todoList = [
  { id: 1,  todo: "今天學習 React", date: new Date(2022, 8, 19) },
  { id: 2, todo: "今天學習 Ruby", date: new Date(2022, 8, 20) },
  { id: 3, todo: "今天學習 JavaScript", date: new Date(2022, 8, 21) },
  { id: 4, todo: "今天學習 GO", date: new Date(2022, 8, 22) },
]
root.render(
  <>
    {todoList.map(({id, todo, date})=> {
      return <Item todo={todo} date={date} key={id} />
    })}
  </>
);

今天我們先將 src/index.js 的內容改成這樣
因為我想要 Items.js 這個元件再做更詳細的細分，我想要將時間的部分做成一個 Component

那你可能會有疑問為什麼還要再將元件切的更加瑣碎呢？
還記得我們曾說過 React 是由 Component 所組成的世界，將元件更加細分的好處，就是我可以將各個小元件運用在 React 專案的各處。

這邊讓我們思考一下，我們的 Items.js 這個元件基本上就是包含 代辦事項，以及 時間的部分

但是試想我們若是我們的專案變得更加巨大的話，可能我們某些地方只需要顯示時間的部分，我們並沒有要顯示出代辦事項的部分，那我們需要重新調整會相對比較困難，所以讓每個 Component(元件) 變成小而美，不但可以方便我們重複利用，當專案更加龐大時也相對更好維護

好了又落落長得說了那麼，讓我們開始寫 code 吧！

首先，讓我們新增一個元件吧！

我希望顯示時間的地方可以獨立出來做一個元件，
並且接收到父層 Component 也就是 Item.js 的 Props.date

// src/Components/ItemDate.js 
const ItemDate = ({ date }) => {
  const year = date.getFullYear()
  const month = date.toLocaleString('zh-TW', { month: 'long'} )
  const day = date.toLocaleString('zh-TW', { day: '2-digit'} )

  return(
    <>
      <div style={{display: "flex", alignItems: "center"}}>
        <div>紀錄時間：</div>
        <div className="date" >
          <div className="date_year">{year}</div>
          <div className="date_month">{month}</div>
          <div className="date_day">{day}</div>
        </div>
      </div>
    </>
  )

}

export { ItemDate }

// src/Components/Item.js 
import { ItemDate } from "./ItemDate"

const Item = ({todo, date}) => {
  return (
    <div>
      <div className="item">
        <div>
          <p className="todo">記事：{todo}</p>
        </div>
	// 由這遍傳入 date 給子層接收
        <ItemDate date={date} />
      </div>
    </div>
  )
}

export { Item }

.date {
  display: flex;
  flex-direction: column;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid #ececec;
  background-color: #1656a1;
  color: white;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}

.date_month {
  font-size: 1.25rem;
  font-weight: bold;
}

.date_year {
  font-size: 0.75rem;
}

.date_day {
  font-size: 1.5rem;
  font-weight: bold;
}

增加這些程式碼之後讓我們來看看畫面的呈現，若在專案中還有其他地方需要顯示時間的部分，那我們的 ItemDate.js 就可以拿出來重複利用了

小結

今天將昨天製作的元件，又切分為更小的元件了，也告訴大家這樣做的優點就是方便維護，也可以使小元件的用途更加廣