基礎から学ぶReact/React Hooks学習メモ 3 Reactを試してみよう

# Reactを試してみよう

## HTMLファイルでReactを試してみる

- 「いいね前」「いいね済」がトグルするボタン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88686/56ce7bd9-3176-cefe-3a30-1e32c0e9c8f3.png)

```html
<!DOCTYPE html>
<html>
  <head>
    <title>いいねボタン</title>
    <meta charset="UTF-8" />
    <!-- Reactを読み込む -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- babelを読み込むとJSXが使えるようになる -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- Reactコンポーネントが表示される -->
    <div id="likesButtonContainer"></div>

    <script type="text/babel">
      const LikeButton = () => {
        const [liked, setLiked] = React.useState(false);

        const toggleLiked = () => setLiked(!liked);

        return (
          <button className="likeButton" onClick={toggleLiked}>
            {liked ? "いいね済" : "いいね前"}
          </button>
        );
      };

      // ReactがLikeButtonをDOMに変換して、HTMLのDOMコンテナに追加する
      const domContainer = document.querySelector("#likesButtonContainer");
      ReactDOM.render(<LikeButton />, domContainer);
    </script>
  </body>
</html>
```

- 文字列の入力状態を保持するNameInputコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88686/eacf3b4d-31f7-28d9-c158-caccec9911de.png)

```html
<!DOCTYPE html>
<html>
  <head>
    <title>React</title>
    <meta charset="UTF-8" />
    <!-- Reactを読み込む -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- babelを読み込むとJSXが使えるようになる -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- Reactコンポーネントが表示される -->
    <div id="App"></div>

    <script type="text/babel">
      const NameInput = () => {
        const [name, setName] = React.useState("〇〇");

        const handleOnChange = (event) => setName(event.target.value);

        return (
          <div>
            <input type="text" onChange={handleOnChange} />
            <p>こんにちは、{name}さん</p>
          </div>
        );
      };

      // ReactがNameInputをDOMに変換して、HTMLのDOMコンテナに追加する
      const domContainer = document.querySelector("#App");
      ReactDOM.render(<NameInput />, domContainer);
    </script>
  </body>
</html>
```

## CodeSandboxでReactを試してみる

- CodeSandBoxにログイン（https://codesandbox.io/）
- SandBoxを作成、Reactを選択する。（左下のDependenciedでバージョンの切り替えが可能）
- カウンタープログラムを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88686/01bf02f2-276b-0ba5-c48f-63e971c29ab3.png)


```js
import React, { useState } from "react";
import "./styles.css";

// 表示用コンポーネント
const CounterText = (props) => <p>現在のカウント数：{props.count}</p>;

const INITIAL_COUNT = 0;

const Counter = () => {
  const [count, setCount] = useState(INITIAL_COUNT);

  // カウントアップ、ダウンボタン。現在の値を引数で受け取ることができる
  const countAdd = () => setCount((prevCount) => prevCount + 1);
  const countSub = () => setCount((prevCount) => prevCount - 1);
  const countDouble = () => setCount((prevCount) => prevCount * 2);
  const countHalf = () => setCount((prevCount) => prevCount / 2);
  const countReset = () => setCount(INITIAL_COUNT);

  return (
    <>
      <CounterText count={count} />

      <button onClick={countAdd}>ボタン +1</button>
      <button onClick={countSub}>ボタン -1</button>
      <button onClick={countDouble}>ボタン *2</button>
      <button onClick={countHalf}>ボタン /2</button>
      <button onClick={countReset}>リセット</button>
    </>
  );
};

export default function App() {
  return <Counter />;
}
```

## Create React Appについて

- Node.jsをインストール

```sh
# yarnのインストール
npm install -g yarn
# プロジェクト作成
npx create-react-app react-practice
# アプリ起動
cd react-practice
yarn start
```

## Reactの開発を補助するツール

- node.js
    - JavaScriptをサーバーサイドで動かす
    - npmはJavaScriptのパッケージ管理ツール
- Babel
    - JSX→JavaScriptに変換
    - 新しい構文をES5のコードに変換する
- webback
    - 複数のJavaScriptのモジュールをまとめることにより、パフォーマンス向上が期待できる。
    - Sass→CSSへのコンパイル、画像の圧縮、ESlintなど

参考
- [基礎から学ぶReact/React Hooks](https://www.amazon.co.jp/dp/B09CP8T4TX)