ReactのコンポーネントとuseStateについて

https://github.com/KyleAndKelly/ReactStepByStep/tree/main/react-basic

Reactのコンポーネント

紹介

• コンポーネントはユーザーインターフェースの一部であり、独自のロジックと外観を持つことができます。コンポーネント同士は入れ子にしたり、複数回再利用したりすることができます。
• コンポーネントベースの開発により、開発者は積み木を組み立てるように、大規模なアプリケーションを構築できます。
• 

使用方法

• Reactでは、コンポーネントとは頭文字が大文字の関数であり、その内部にコンポーネントのロジックとUI（ユーザーインターフェース）が含まれています。コンポーネントをレンダリングするには、タグとして記述するだけで済みます。

  function Son1(props) {
     console.log(props.name)
     console.log(props.age)
     console.log(props.isTrue)
     console.log(props.list)
     console.log(props.obj)
     console.log(props.funct)
     console.log(props.child)
  }
  
  function Son2(props) {
    console.log(props.children)
  }
  
  function Son3({onGetMsg}){
    const  sonMsg = "hello bro"
    onGetMsg(sonMsg)
  }
  
  function Son4(props){
    console.log("now in Son4")
    console.log(props.msg)
  }
  
  function Son5(){
    return (  <Son6/>)
  }

  ReactのuseState

  紹介

• useStateはReactのHook（関数）で、コンポーネントに状態変数を追加することを可能にします。これにより、コンポーネントのレンダリング結果を制御できます。

• 通常のJavaScript変数とは異なり、状態変数が変更されるとコンポーネントのUIもそれに応じて更新されます（データ駆動のビュー）。
  

  使用方法

• useStateは関数であり、戻り値は配列です。

• 配列の1つ目の要素は状態変数、2つ目の要素は状態変数を変更するためのset関数です。

• useStateの引数はcountの初期値として使用されます。

  const [count, setState] = React.useState(0)

• Reactでは、状態は読み取り専用と見なされ、常に置き換える必要があります。直接状態を変更してもビューの更新は引き起こされません。

const updateCount = ()=>{
  // count++ //not work
  setState(count+2)
}