如果有錯誤，歡迎留言指教~ Q_Q

Stateful Component vs no-Stateful Component

function component 其實就是 JavaScript 的 function

傳給 function 的參數就是 props 啦~

Stateful Component

const NewsSlider = ({ title, ...props }) => {

    return (
        <div> I am NewsSlider~ { title } </div>
    )
}

no-Stateful Component

const Footer = () => {

    return (
        <div> I am FOOTER </div>
    )
}

<input /> 就是一個元件 input，擁有不同的邏輯跟樣式

我們要告訴 input 長出我們需要的樣式
我們就需要給 input 元件更多的資訊，讓他知道要做什麼事
type= button 一顆按鈕
checkbox password 一個密碼輸入框
radio text 一個文字輸入框

我們說type就是input的其中一種屬性，
藉由這個屬性，我們可以給元件更多資訊，
讓他獲得更多詳細的資訊，更精確完成你想要的畫面或是商務邏輯

一個元件也可以有不只一種屬性
像是 input 還有 name value id 各自都有各自的功能

<input type="checkbox" class="checkbox" checked="true" />

props: component 接收從外部的資料

props 從上層傳進來後，不能直接被修改值，要保持 immutable 的特性

像是 html 的屬性，例如：name、href
props 是我們自訂的 component 屬性 -> prop，全名 property

<Card title="Card1" description="card1 desc">


const Card = (props) => {
  const { title, description } = props;
  return (
    <div className="card">
      <div className="card-title">{title}</div>
      <div className="card-body">{description}</div>
    </div>
  );
};

component 的命名 -> 字首必須為大寫: NewsSlider

state: component 自己內部的狀態

Component 可接收外部傳進來的 props 進來的資料之外，也可以保存自身的 state

也可以擁有自己的 state 資料，當 state 改變時，component 則會 render

那怎樣使用 state 呢~

那就繼續看下一篇吧~