ブラウザゲーム作ってみたいなって。
そんな訳で今回はReactに挑戦です。
公式のチュートリアルからやる。
https://ja.reactjs.org/tutorial/tutorial.html
VSCodeでゴニョゴニョしながらテストする感じで。
JavaScriptとか配列回すだけでGoogleさんやり方調べるレベル（getElementByClassがJSに実装されててビックリした程度）なので分からない事だらけですが、チュートリアル通りに進めて、チョイチョイと変更して挙動を確認しながら進めました。
何やねんアロー関数て。
propsとstateは以前に調べた際に見た記憶があるなー。
ミュータブルとイミュータブル？こんな富豪プログラムしてええん？
リフトアップは面倒だけど、手順を理解しやすいなー。
しっかし…(や{やら[とカッコ多いな～。
普通のJavaScriptの筈のconcat()とかも分からないのでイチイチGoogleに聞くので牛歩の歩みです。
途中からは酒を飲み始め…ヒストリーあたりから記憶が怪しくなります。
が、最後まで進めてちゃんと動く○×ゲームが完成しました！
意味不明で放置してる要素も多いけどね！
それはまた今後！
ただ一点。
正常に動いてるんだけど、デバッグコンソールに警告が表示されるんよね。
Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".書き損じではなく、なんか根本的な所で警告されてるっぽい。
調べたらReact18から react-dom でなく react-dom/client を使う形に変わったみたい。
https://keikenchi.com/what-to-do-if-you-get-a-react-dom-error-in-react-18
とりあえずつかってるReactのバージョンを確認（npm list –depth=0）したら…18だった。
WEB業界はすぐバージョンアップするから、1年前の記事でもそのままじゃ使えない事多いよね。
おっさんには厳しいよ！
上記のページを参考にチョイチョイ変更。
// import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
// const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(<Game />);
const root = createRoot(document.getElementById('root'));
root.render(<Game />);
とりあえず、これで警告も出なくなりました。
あとはチュートリアルにリストアップされていた改良アイデアを試してみようかなーって思ってます。
ヤル気が続けば、ね。
しかし、F5押したら検証出来るのってスゲー楽ですね。
PHPもローカル環境でゴニョゴニョしたら出来るんだろうけど…今でもテスト用サーバーにアップロードして検証してます！だるっ！
今は色々とセッティングすれば楽に出来るようになっているんでしょうが…おっさんにはその色々なセッティングが覚えられないです。マジで。
F5で検証！すらも翌日には忘れてて再度ググりました。
鳥と同じくらいの記憶力しかない。
コメント