React をはじめてみる - しっぽを追いかけて

※ これは 2023/05/18 時点の create-react-app@5.0.1 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

Unity のネタ切れになってしまったので、これまであまり触ってこなかった分野をやってみることにする

それは React ！

UI にからんだクライアント系技術をひたすら習得していたものの、Web や JavaScript 系はあまり詳しくないので、これを機に触ってみることに

とりあえず上記チュートリアルの最初の一歩、ローカル開発環境の構築 のところをやってみる

スポンサードリンク

まず初手 VSCode で、適当なディレクトリを開く

node.js はすでに Firebase CLI でインストール済み、チュートリアルにあるようにターミナルを開いて下記のコマンドを実行

npx create-react-app my-app

実行結果はこんな感じ

C:\GitHub\React>npx create-react-app my-app
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\GitHub\React\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1424 packages in 49s

235 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...

added 62 packages, and changed 1 package in 4s

235 packages are looking for funding
  run `npm fund` for details
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

次は /src の配下のファイルを全削除する、とのことだったけど、Windows 用のコマンドではなかったので、普通にエクスプローラを開いて全削除した

次に /src/index.css のファイルを作成し、下記を入力して保存

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

さらに /src/index.js のファイルを作成し、下記を入力して保存

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

class Square extends React.Component {
    render() {
      return (
        <button className="square">
          {/* TODO */}
        </button>
      );
    }
  }
  
  class Board extends React.Component {
    renderSquare(i) {
      return <Square />;
    }
  
    render() {
      const status = 'Next player: X';
  
      return (
        <div>
          <div className="status">{status}</div>
          <div className="board-row">
            {this.renderSquare(0)}
            {this.renderSquare(1)}
            {this.renderSquare(2)}
          </div>
          <div className="board-row">
            {this.renderSquare(3)}
            {this.renderSquare(4)}
            {this.renderSquare(5)}
          </div>
          <div className="board-row">
            {this.renderSquare(6)}
            {this.renderSquare(7)}
            {this.renderSquare(8)}
          </div>
        </div>
      );
    }
  }
  
  class Game extends React.Component {
    render() {
      return (
        <div className="game">
          <div className="game-board">
            <Board />
          </div>
          <div className="game-info">
            <div>{/* status */}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      );
    }
  }
  
  // ========================================
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<Game />);

最後に VSCode のターミナルで下記のコマンドを実行

npm start

コマンドの実行結果は下記

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.31.64.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

ブラウザが自動で開いて下記の http://localhost:3000 の URL ページが表示された