Reactを試してみよう

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

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

<!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コンポーネント

<!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でバージョンの切り替えが可能）
カウンタープログラムを作成

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をインストール

# 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