ローカル環境でReactのチュートリアル

やっと出来た・・・。

Reactのチュートリアル自体はこちらです。
チュートリアル：React の導入 – React

チュートリアル内にCodePenの"スターターコード"が有るのですが、
・インテリセンスが効かない
・成形しない
・Developer Toolsがイマイチ分かりにくい
　（チュートリアル内にやり方は記載されています）
ので、試しにくくて苦しみました。
環境を作らなくても良いのは助かるのですが・・・。

そこで、ローカルで環境作って（と言う程でもありませんが）
取り組みたくなり、色々と探しながら行った覚書です。

自分も一から行ったのでは無いのでおぼろげです。
・vscodeインストール
　webで検索してみて下さい。それっぽい拡張も入れると楽です。
　元々使っていました。
　
・node.jsインストール
　webで検索してみて下さい。ターミナルでは出来そうにないです。
　インストールされていたものが古かった為、再インストールしました。

・gitインストール
　webで検索してみて下さい。元々使っていました。
　練習なので、あまり必要性も感じませんが・・・。　

・ターミナルで "Create React App"
　ド素人が環境なんて作れません。こちら一択です。
新しい React アプリを作る – React
　すごく時間がかかります・・・。

・ターミナルで "npm start"する
　一度インストール出来ているか確認します。(僕はyarn startしました)
　"cd" でインストールファルダに移動する事を忘れずに。
　クルクル回っていれば成功です。
　エラー画面ばかり見ていると辛いので、一度Ctrl+Cで止めます。

・"components"フォルダを作成
　別の名前でも構いませんが、"src"フォルダ内にコンポーネント用の
　フォルダを作ります。

　そう、後々の事を考えるとコンポーネントでやりたかったんです。
　作り方はターミナルだろうが、vscodeのGUIであろうが何でも構いません。

・"components"フォルダに"game.js"ファイル新作
　ファイルを新作します。中身はこちらの"JS"の物をコピペ。
　（完成しているものです・・・）
https://codepen.io/gaearon/pen/gWWZgR?editors=0010

・"game.js"ファイルを修正
　コピペ、そのままではエラーになります。
　先頭に以下を追加。

import React from 'react';
・・・

又、コンポーネントとしたいのでこちらを修正。

・・・
// const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(<Game />);
export default Game;
・・・

・"game.css"を作成
　別の名前でも構いませんが、"src"フォルダ内に"game.css"を
　新作します。中身はこちらの"CSS"の物をコピペ。
https://codepen.io/gaearon/pen/gWWZgR?editors=0010
　cssファイルは"components"フォルダ内に作るべきなのか、
　"src"フォルダ内に作るべきなのか、正直な所分かっていません。
　お作法的な問題なのだろうと思うのですが・・・。

・"App.js"を修正する
　丸ごとゴソッと書き換えです。

import './game.css';
import Game from './components/game';

function App() {
  return (
    <Game></Game>
  );
}

export default App;

"index.js"を書き換えても良いのかもしれませんが、"App.js"を
書き換えるのがお作法っぽかったので、そうしました。

・再びターミナルで "npm start"する
　確認です。CodePenと同じ動作なら成功です。
　"game.js"をチュートリアルの最初の物に書き換えて、進めましょう。