React(入門)簡単な操作、コンポーネント、Propsとstate(この辺は知らないとやばい!)

# CodeSandBox
1番環境構築が楽でした。

https://codesandbox.io/

create sandboxをした後にGitHub連携できます。
sign inでGitHubと連携し、リポジトリまで作れます。

https://codesandbox.io/post/open-beta

https://dev.classmethod.jp/articles/linking-codesandbox-with-github/

# Reactを動かす準備
CodeSandBoxからcreateでReactを選択してください。
これがJSをレンダリングする目印です。
```index.html
#省略
<div id="root"></div>
#省略
```

```index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";　//APPのファイルを読み込む

const rootElement = document.getElementById("root");　//rootのIDを取得
const root = createRoot(rootElement);

root.render(　　//renderでJSの内容
  <StrictMode>
    <App />
  </StrictMode>
);
```
import App from "./App";　でAPPのファイルを読み込んでApp.jsに反映しています。
画面には
```
Hello CodeSandbox
Start editing to see some magic happen!
```
みたいな画面が出てきます。
```App.js
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
```
style.cssは今回は不要です。


# JSX記法
Reactのお作法となる書き方です。***JavaScriptの中でHTMLのタグを書いていく書き方***です。
```index.js
import React from "react"; //Reactをインポート
import ReactDom from "react-dom"; //React-domをインポート

const App = () => {
  return <h1>React入門</h1>;
};
//React開発の基盤作り
ReactDom.render(<App />, document.getElementById("root")); //レンダリング //rootはindex.htmlの<div id="root"></div>

//React入門と画面に出てきます。
```
JavaScriptの中にHTMLを書いていきます。

```index.js
import React from "react"; //Reactをインポート
import ReactDom from "react-dom"; //React-domをインポート

const App = () => {
  return (
    <div>
      <h1>React入門</h1>
      <p>基礎</p>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </div>
  );
};
//React開発の基盤作り
ReactDom.render(<App />, document.getElementById("root")); //レンダリング //rootはindex.htmlの<div id="root"></div>
```
divを消した書き方も可能です。
```index.js
import React from "react"; //Reactをインポート
import ReactDom from "react-dom"; //React-domをインポート

const App = () => {
  return (
    <>
      <h1>React入門</h1>
      <p>基礎</p>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};
//React開発の基盤作り
ReactDom.render(<App />, document.getElementById("root")); //レンダリング //rootはindex.htmlの<div id="root"></div>
```
***<>と</>の中***には***React.Fragmentが隠れている状況***です。書いても出力はできます。

# コンポーネント
srcの中にApp.jsのファイルを作ります。```基本コンポーネント名の先頭は大文字```です。

```App.js
import React from "react"; //Reactをインポート

const App = () => {　//Appはこの中でしか使えない
  return (
    <>
      <h1>React入門</h1>
      <p>基礎</p>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```

App.jsをjsxに変えます。これでReactのコンポーネントを使っていることがわかります。
```App.jsx
import React from "react"; //Reactをインポート

const App = () => {　//Appはこの中でしか使えない
  return (
    <>
      <h1>React入門</h1>
      <p>基礎</p>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```

```index.js
import React from "react"; //Reactをインポート
import ReactDom from "react-dom"; //React-domをインポート
import App from "./App"; //App.jsからimport


//React開発の基盤作り
ReactDom.render(<App />, document.getElementById("root")); //レンダリング //rootはindex.htmlの<div id="root"></div>
```

# イベントやstyleの使い方
```{}はJSの扱い```です。```{{}}```の使い方ですが、外は***JS宣言***で中***はJSのオブジェクト***です。
styleはh1タグの後などで使えます。

```App.jsx
import React from "react"; //Reactをインポート

const App = () => {
  //Appはこの中でしか使えない
  const clickButton = () => alert();
  const contentStyle = {
    color: "bluegreen",
    fontSize: "20px",
    fontWeight: "30px"
  };
  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <p style={contentStyle}>基礎をやる</p>
      <button onClick={clickButton}>ボタン</button>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```

# Propsとは
***コンポーネントに渡す引数***のことです。
```コンポーネント```は画面の1単位のようなものです。
1画面から1つのテキストボックスまで色々あります。

https://qiita.com/rio_threehouse/items/7632f5a593cf218b9504


https://ja.reactjs.org/docs/components-and-props.html


# 実際にコードを書いていく
下のコードのcontentStyleが増えていけば増えていくほど、毎回毎回、
contentStyle2~ から永遠とコードを書くことになります。
そこで解決できるのが```prop```です。

```App.jsx
import React from "react"; //Reactをインポート

const App = () => {
  //Appはこの中でしか使えない
  const clickButton = () => alert();
  const contentStyle = {
    color: "green",
    fontSize: "20px",
    fontWeight: "30px"
  };

  const contentStyle2 = {
    color: "red",
    fontSize: "20px",
    fontWeight: "30px"
  };

  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <p style={contentStyle}>基礎をやりましょう</p>
      <p style={contentStyle2}>アウトプットもしっかりやろう</p>
      <button onClick={clickButton}>ボタン</button>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```
srcからフォルダを作成し、componentsという名前にします。
そしてColorMessage.jsxというファイルを作成します。

```ColorMessage.jsx
import React from "react";

const ColorMessage = () => {
  const contentStyle = {
    color: "green",
    fontSize: "20px",
    fontWeight: "30px"
  };
  return <p style={contentStyle}>基礎をやりましょう</p>;
};

export default ColorMessage;
```
 propsで条件を渡して、動的に変わるコンポーネントにします。
```App.js
import React from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";

const App = () => {
  //Appはこの中でしか使えない
  const clickButton = () => alert();
  const contentStyle2 = {
    color: "red",
    fontSize: "20px",
    fontWeight: "30px"
  };
  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <ColorMessage color="green" message="基礎をやりましょう"/> 　//条件を渡す
      <p style={contentStyle2}>アウトプットもしっかりやろう</p>
      <button onClick={clickButton}>ボタン</button>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```
## propsを使いこなす
propsをさらに使って整理していきます。

```ColorMessage.jsx
import React from "react";

const ColorMessage = (props) => {
 
  const contentStyle = {
    color: props.color, //colorを指定
    fontSize: "20px",
    fontWeight: "30px"
  };
  return <p style={contentStyle}>{props.children}</p>; //propsを渡す その際childrenを使う
};

export default ColorMessage;
```
```children```は***親要素から受け取ったpropsを全て子要素に渡せる***みたいです。

https://bonoponz.hatenablog.com/entry/2020/06/23/%E3%80%90React%E3%80%91%7Bchildren%7D%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E5%8F%97%E3%81%91%E6%B8%A1%E3%81%99


```App.jsx
import React from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";

const App = () => {
  //Appはこの中でしか使えない
  const clickButton = () => alert();
  const contentStyle2 = {
    color: "red",
    fontSize: "20px",
    fontWeight: "30px"
  };
  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <ColorMessage color="green">基礎をやりましょう</ColorMessage> //このように書き換えができる
      <ColorMessage color="orange">基礎は大事</ColorMessage> //このように書き換えができる
      <p style={contentStyle2}>アウトプットもしっかりやろう</p>
      <button onClick={clickButton}>ボタン</button>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```

# 毎回propsを書かないために
propsを毎回書くのは面倒なので***毎回書かないやり方***があるみたいです。
***分割代入***を使っていきます。
```ColorMessage.jsx
import React from "react";

const ColorMessage = (props) => {
  const { color, children } = props;//propsの代入
  const contentStyle = {
    color, //color: color,を省略
    fontSize: "20px",
    fontWeight: "30px"
  };
  return <p style={contentStyle}>{children}</p>; //propsを省略
};

export default ColorMessage;
```

# state
各コンポーネントごとが持つ状態で、stateが変更されると再レンダリングされます。

```App.jsx
import React, { useState } from "react"; //Reactをインポート 
import ColorMessage from "./components/ColorMessage";

const App = () => {
  //Appはこの中でしか使えない
  const clickButton = () => alert();
  const clickPlus = () => {
    //setCount(100); //プラスボタンを押すと100になる
    setCount(count + 1); //プラスボタンを押すと+1
  };
  const [count, setCount] = useState(0); //[]で配列の分割代入　1つ目はstateとして使う変数名　2つ目はそのstateを変更するための関数 0で初期値を設定
  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <ColorMessage color="green">基礎をやりましょう</ColorMessage>
      <ColorMessage color="orange">基礎は大事</ColorMessage>
      <p>{count}</p>
      {/* <p style={contentStyle2}>アウトプットもしっかりやろう</p> */}
      <button onClick={clickPlus}>プラスボタン</button>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```
次に```useState```を使っていきます。

```App.jsx
import React, { useState } from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";

const App = () => {
  //Appはこの中でしか使えない
  const clickButton = () => alert();
  const clickPlus = () => {
    //setCount(100); //プラスボタンを押すと100になる
    setCount(count + 1); //プラスボタンを押すと+1
  };
  const [count, setCount] = useState(0); //[]で配列の分割代入　1つ目はstateとして使う変数名　2つ目はそのstateを変更するための関数 0で初期値を設定
  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <ColorMessage color="green">基礎をやりましょう</ColorMessage>
      <ColorMessage color="orange">基礎は大事</ColorMessage>
      <p>{count}</p>
      {/* <p style={contentStyle2}>アウトプットもしっかりやろう</p> */}
      <button onClick={clickPlus}>プラスボタン</button>
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```


### index.js
index.jsはこんな感じです。

```index.js
import React from "react"; //Reactをインポート
import ReactDom from "react-dom"; //React-domをインポート
import App from "./App"; //App.jsからimport

//React開発の基盤作り
ReactDom.render(<App />, document.getElementById("root")); //レンダリング //rootはindex.htmlの<div id="root"></div>
```

# 資料

https://www.udemy.com/course/modern_javascipt_react_beginner/