これらを参考にして、Reactの設定・準備について書いていきます。
まず、コマンドプロンプトで、npmやnpxのコマンドを使えるようにしないといけないが、
これはNode.jsをダウンロード、インストールすることで、同時に達成できる。
React.jsの本格的な設定は避けて、簡単につかえるCreate React Appを使えるようにします。
コマンドプロンプトを開くと、ホームディレクトリになっているので、そこで、
npx create-react-app myappと記載し、Enterを押す。
ここではプロジェクト名をmyappに設定してますが、好みのプロジェクト名にしてもらってよいです。
ホームディレクトリ下に、myappディレクトリが作成されました。
cdコマンドを使用し、そのディレクトリに移動し、
npm start myapp と記載し、Enterを押す。
自動的にブラウザが開かれ、localhost:3000につながれ、Reactのロゴが表示されます。
ファイルエクスプローラーで、『App.js』をコピーし、同じディレクトリに、『App1.js』の名前（App以外なら何でもよい）で保存する。
あるサイトにアクセスされた際に、一番初めにアクセスされるものはindexファイルであるという原則があります。
ここでは、index.jsというファイルがまず実行されます。それでは、このファイルをVSCodeか何かエディタで開いてください。
その中に登場してくる『App』をすべて『App1』に変更してください。
ブラウザのURL欄に『localhost:3000』を入れてEnterするとまえと同じで変わっていませんね。
これで準備が終了です。今後は、このApp1.jsを修正していきます。
この場合は、index.jsに書かれており、まず、初めにindex.jsが呼ばれ、そこから、App1.jsが呼ばれるという仕組みになってます。
では、App1.jsをごっそり下記に書き換えてみましょう。
App1.js
localhost:3000につなぐと
白紙に『yuuzaki』と書かれているだけのものに変わりました。
ちなみに、index.jsはデフォルトでは下記のようなものです。
Youtubeの２．の動画で5：30あたりで、JSXを使わない場合の等価コードがしょうかいされておりましたので、そこについて確認します。
そもそもReact.jsでかならずJSXを使わないといけないことはなく、バニラJavaScriptでもよいのです。
ただ、その場合、ややこしくなります。
App1.jsをJSXなしで書いてみます。
App1.js
カレンダーでも
document.getElementById("year_month").innerHTML = `${year}年${month+1}月`;
という記載を紹介してますが、テンプレートエンジンっぽい記載ですね。
今回はHTMLではなくJSXで追加してますが、、、
ちなみにindex.jsは下記です。
