reactチートシート

## reactをcdnで動かすときのテンプレート
毎回どこにいったか忘れるので、とりあえず適当なサンプルとともにアップさせていただきましたｗ

### 起動方法：
以下をコピペして適当な名前（xxx.html）で保存し、ブラウザで開くだけです。

```JavaScript
<html><head>
<meta charset="utf-8"></title></style>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</head> 


<body>
<div id="root"></div>
<script type="text/babel" >

const { useState } = React;

const App = () => {
  const [c, setC] = useState(0)

  const fc=()=>{
    const random = Math.floor( Math.random() * 6 +1);
    return random;
  }
  return (
    <div>
      <div >
	<p>cを150にせよ！！！！</p>
        <h1>c={c}</h1>
        <button onClick={() => setC(prevState => prevState + 1)}> +1  </button>
        <button onClick={() => setC(prevState => prevState  *3)}> *3  </button>
        <button onClick={() => setC(prevState => prevState - 2)}> -2  </button><br/>
        <button onClick={() => setC(0)}>リセット</button><br/>
        <button onClick={() => setC(fc)}>サイコロ</button><br/>
      </div>
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement)
</script>
</body></html>


```

## 関数の戻り値がほしいとき
　他の言語であれば、returnで戻り値を返すか、配列で渡してポインタ的に値を変更しますが、reactの場合は勝手が違うので最初戸惑いました。

　Reactの関数コンポーネントやクラスコンポーネントは、親から子にデータを渡すときにpropsを使用しますが、直接的な"戻り値"のようなものは存在しません。しかし、親コンポーネントと子コンポーネントの間でデータを双方向に通信するためのいくつかの方法があります。
　そのひとつがコールバック関数を使用する方法です。親から子へコールバック関数をpropsとして渡し、子コンポーネントが何らかの操作を行ったときにそのコールバック関数を呼び出して親に情報を返す方法です。

　例えば呼ぶ側にsetStateで作成した変数があり、呼ばれる側で値を書き換えたい場合です。

     const [c, setC] = useState(0)

  この場合変数cを渡すのではなくて、関数であるsetCを渡す様になっています。
　呼ばれた側でsetC関数を使って値を変化させると、呼ぶ側のcが変化しているという具合です。
### 呼ぶ側
    <Sub setC={setC} />




### 呼ばれる側
propsで受け取るところまでは同じですが、引数が関数なのでなかに処理を書いてあげます。

    const Sub = (props) =>{
      const plus1=()=>{
         props.setC(prevState => prevState + 1);
            ....

こうすると呼ぶ側の変数cが変化します。

ちなみに　prevState => prevState + 1　はアロー関数です。
通常アロー関数は　const v = (param) => { return param + 1; }
こんな形をしていますが、

まず、無名関数なので　const v =　の部分が取れる
次にパラメータが１つのときは()を省略できる
さらに、関数が1つの式だけから成る場合、中括弧とreturnを省略できる

というルールによってこのようにかけるのですね（Pythonから入った人間には戸惑いの3連チャンです;;;）




# サンプル
サンプルを兼ねて簡単なゲームを作ってみました。

### ゲームの目的:
ユーザは、与えられた回数の操作（ボタンクリック）で、数値（cとして表現される）を正確に150にすることを目指します。


### 起動方法：
以下をコピペして適当な名前（xxx.html）で保存し、ブラウザで開くだけです。


```JavaScript
<html><head>
<meta charset="utf-8"></title></style>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head> 

<body>
<div id="root"></div>
<script type="text/babel" >

const { useState } = React;

const NUM=11

const Sub = (props) =>{
  const plus1=()=>{
     props.setC(prevState => prevState + 1);
     props.setCt(prevState => prevState - 1);
  }
  const minus2=()=>{
   props.setC(prevState => prevState -1);
   props.setCt(prevState => prevState - 1);
  }
  const mul3=()=>{
   props.setC(prevState => prevState *3);
   props.setCt(prevState => prevState - 1);
  }
  const rndm=()=>{
     const random = Math.floor( Math.random() * 6 +1);
     props.setC(random);
     props.setCt(prevState => prevState - 1);
  }
  const reset2=()=>{
   props.setC(0);
   props.setCt(NUM);
  }
   return(
   	<div>
	        <button onClick={plus1}> +1  </button>
	        <button onClick={minus2}> -1  </button>
	        <button onClick={mul3}> x3  </button>
	        <button onClick={rndm}> random  </button>
           <br/><br/>
           <button onClick={reset2}> reset  </button>
       </div>
   )
}


const App = () => {
  const [c, setC] = useState(0)
  const [ct, setCt] = useState(NUM)   

  const judge=()=>{//◆成否の判定
        if (ct===0){
          return <h1>オーバー</h1>
       } else {

          if (c===150){
        		return <h1>成功！</h1>
          } else {
            return (
              <div>
                <h3>cを150にせよ！ </h3>
                <h2>残り{ct}回</h2>
                <h1>c={c}</h1>
              </div>
            )
          }
      }
    }  


   return (
    <div>
      {judge()}
      <Sub setC={setC} setCt={setCt} />
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement)
</script>
</body></html>
```



## アプリの詳細:
### 初期状態:
数値cは0からスタートします。
ユーザーは最大11回の操作を行うことができる（NUM=11として定義されています）。

### 操作ボタン:

+1: cの値を1増やし、操作回数を1減少させます。
-1: cの値を1減少させ、操作回数も1減少させます。
x3: cの値を3倍にし、操作回数を1減少させます。
random: cの値を1から6の間のランダムな数に設定し、操作回数を1減少させます。
reset: cの値を0にリセットし、操作回数を最大値（11）にリセットします。

### 成否の判定:

もし操作回数が0回になった場合、画面には"オーバー"と表示されます。
一方で、cの値が150になった場合、"成功！"と表示されます。
それ以外の場合、ユーザーはcの現在の値と残りの操作回数を見ることができます。

### コードの構造:
Sub コンポーネント: これは操作ボタンを表示するReactの関数コンポーネントです。親コンポーネントから受け取ったsetCとsetCtの関数を使って、cとctの状態を変更します。

App コンポーネント: これはアプリケーションのメインコンポーネントです。cとctの状態を保持しており、Subコンポーネントを子として持っています。また、cとctの値に基づいて成否を判定するjudge関数も含まれています。

最後に、アプリケーションのエントリーポイントであるrootというIDを持つdiv要素にAppコンポーネントがレンダリングされます。

このプログラムは、ユーザーが特定の操作を使用して数値を目標値にするというシンプルなゲームを提供することを目的としています。