Reactを基本からまとめてみた【6】【State（ステート）】

##はじめに
####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Reactの学習した事を言語化し、認識の深化による備忘録として記載。

##Stateとは
コンポーネント単位で状態を保持する為の仕組み。
『状態』とは、数値、文字列、配列などWebアプリケーションを表すデータの事。

##Propsとの違い
コンポーネント単位で状態を保持。Stateだと親子関係なくそれぞれ独立した仕組み。
Propsの場合、親コンポーネントから子コンポーネントへ値を渡す仕組み。
Stateの場合、一度定義したものは後々変更する事ができる。

##StateとPropsの違い
####Props 　親コンポーネントから子コンポーネントへ値を渡す仕組み

親コンポーネント：Post.js

Post.js

<Button title="Post"/> 　 ➡️　 親から子へ ⬇️

子コンポーネント：Button.js

Button.js

<button class=" ">
<I class= "..."/>
{props.title} ⬅️ 親から子へ　⬅️
</button>

➡︎ 『Post』変更不可

####State コンポーネント単位で状態を保持する仕組み

親コンポーネント：App.js

App.js

state={admin: trune}　⬅️お互い独立

子コンポーネント：Counter.js

Counter.js

state={count: 0}　⬅️お互い独立
icrement=()=> {
 count++
}

➡︎ 『count: 5』変更可能

##React.Fragmentとは
React でよくあるパターンの 1 つに、コンポーネントが複数の要素を返すというものがある。フラグメント (fragment) を使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになる。

sample.js

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

##実際にコーディングを行う
####(1) 作成するアプリのイメージ共有

count:0 が表示されている。『Increment』ボタンを押したら増え、
『Decrement』ボタンを押したら減るアプリ。

####(2) counterプロジェクトを新規作成

terminal
creat-react-app <プロジェクト名>

####(3) index.jsとApp.jsを作成する

デフォルトのファイルを全部削除して、index.jsとApp.jsを作成する。

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.querySelector("#root"));

App.js

import React from "react";

const App = () => {
  return (
    <div>
      <div>App</div>
    </div>
  );
};
export default App;

####(4)semantic-ui-cdnを導入する

https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css

上記のコードを　piblic/index.html　に貼り付ける。

####(5) Counter.jsを作成する

① src/components / Counter.jsを作成する。
② React.Fragmentを使用する。

Counter.js

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  const onCountUp = () => {
    setCount(count + 1);
  };
  const onCountDown = () => {
    setCount(count - 1);
  };
  return (
    <React.Fragment>
      <p>Count: {count}</p>
      <button className="ui primary button" onClick={onCountUp}>
        Increment
      </button>
      <button className="ui red button" onClick={onCountDown}>
        Decrement
      </button>
    </React.Fragment>
  );
};

export default Counter;

####(6) App.jsを作成する

App.js

import React from "react";
import Counter from "./components/Counter";

const App = () => {
  return (
    <div className="ui container" style={{ marginTop: "20px" }}>
      <Counter />
    </div>
  );
};

export default App;

##参考サイト
[【React入門】#6 State（ステート）の理解]
(https://www.youtube.com/watch?v=ykiCPXF4bzU&t=1039s)