※ これは 2023/05/18 時点の create-react-app@5.0.1 の情報です
最新版では動作が異なる可能性がありますのでご注意ください
Unity のネタ切れになってしまったので、これまであまり触ってこなかった分野をやってみることにする
それは React !
UI にからんだクライアント系技術をひたすら習得していたものの、Web や JavaScript 系はあまり詳しくないので、これを機に触ってみることに
とりあえず上記チュートリアルの最初の一歩、ローカル開発環境の構築 のところをやってみる
スポンサードリンク
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 ページが表示された

ブラウザを閉じると、VSCode のターミナル側の入力待ち状態も終了した
とりあえずちゃんと起動できるようにはなったっぽい