はじめてのReactおさわりお兄さんの成長記録#1～index.htmlの所在～

#目次
・おさわりお兄さん（以下、おさ兄）の経歴について
・想定読者
・Reactのチュートリアルを終えて
・お兄さんの目標
・ホームページ的なものを作ってみよう（今ここ）

##おさわりお兄さんの経歴について
・システム会社勤務のお兄さん
・Java畑でSpring Frameworkで育ったJava脳の持ち主
・JavaとちょっとばかりのWebシステム作成に付随する知識アリマスタブン

##想定読者
・おさ兄同様Reactわかりません！やりはじめます！っていう同志たち
・おいおい見ちゃいられねえヒヨコさんだなぁ！っていうマウント兄貴
・ふふふ、頑張りなさい、、、、！っていう聖人兄貴

##Reactのチュートリアルを終えて
ごめん、ほんとは終えてねぇんだ。。。
「タイムトラベル機能の追加」からやめた
だって、ゲーム機能作りこんでいく雰囲気したから、
別にゲーム機能作りに詳しくなりたんじゃないんよ。

##お兄さんの目標
おさ兄はWebシステム、Web Appをツクレルヨウニナリタイデス・・・・
仕様とか要件とかないと、いざ作るぞ！ってなっても
さて、何作る？ってなりません？おさ兄はなります。
なのでいったんWebシステム、Web Appはこれ作るぜってなるまで
ホームページ的なものをReactで作ってみようと思ってみました。まる。

##ホームページ的なものを作ってみよう（今ここ）

###準備
チュートリアルから手順を拝借して
npx create-react-app my-app
を任意のディレクトリで実行
*my-apppは好きな名前でええんやで。ディレクトリ名になるんやで。
src配下をお掃除しーの、いざ！！

ホームページ的なものを作る入口といえば
index.html
ですよね。
(サーバーの作り方とか詳しいチューニングについては
まだおさ兄はｲｲﾃﾞｽ、ｵﾅｶｲｯﾊﾟｲ。。。)

チュートリアルでは作成せんかったけど、作ったろ！←ｺﾚｶﾞﾏﾁｶﾞｴﾉﾊｼﾞﾏﾘ
おさ兄はsrc配下にindex.jsとかと同じテンションで作って
html内に<div id="Koko" />みたいにして
チュートリアルで修めた感じでindes.jsに以下のコードを書いたのよ。

ReactDOM.render(
  <Koko />,
  document.getElementById('Koko')
);

そしたら、案の定エラーだったわけです。orz
結論いうと、__ｺﾚｶﾞﾏﾁｶﾞｴﾉﾊｼﾞﾏﾘ__で示したように
src配下のindex.htmlなんかReactさんは__見ちゃいなかった__のよ。
index.htmlは自分で作らなくてもpubli配下に
ちゃっかり最初のコマンドで作られてくれていたのよね。
だからそこのコードを直さねば、私のjstx？っていうの？は
反映されることなんてなかったということ。
以下、ディレクトリ構成抜粋

PUBLIC
    favicon.ico
    index.html　←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←
    logo192.png
    logo512.png
    manifest.json
    robots.txt
SRC
│  index.css
│  index.js
│
└─component　←おさ兄が自分で作った
        explore.js 
        top.js

public配下のindex.htmlを修正することで
自分が定義したソースが反映されました！ｲｴｲ

そこからは階層的にComponentって言えばええんか？を
呼び出せる感じにもってきたとこです。
もうちょい勉強したらGitHub Pagesとやらで公開できるらしいので
楽しみです。
ただ、あくまで最終目的はWebシステム Appの作成なので
Formとかデータの受け渡しとかRDBとかとのつなげ方とか
勉強していくつもりですたい。
Javaでいうセッションとかどーなるの、とか。
課題はいくつかあるだろうから初心者に優しい記事があればご紹介いただければ
うれしく存じます。おなしゃｓｓっす。

##今後の課題まとめ
・いい感じのComponent？つまるところ部品の使いまわし、分割とかの模索
2021/09/30 ~更新#2で解決 ・RDBとの接続方法調査
2021/09/30 更新#3で解決 ・REST通信のやり方（javascript久しぶりなので復習的な感じなのかReactならではなのか）
・Cookieとかセッションとか管理どなってるの調査
・データの受け渡し、持続方法の調査
※SPA（シングルページアプリ）ならそも持続なんぞないんか？
ひらきっぱでなんか上手いことやってるからええんか？ページ遷移とかReactでは考慮せんのか？
・コードテスト（UT）の仕方の調査
※普通どこテストすんの？ビジネスロジック書くようなったらjstx？js?部分が対象になるんか？
・固定文章の保持場所はどうするのがbetter？メッセージプロパティとか用意すんの？
・環境差分のデプロイ設定ってどぅすんの？
2021/09/30 追加・render内にREST通信のメソッドいれたら無限にリクエストするのなんで？

##参考URL
https://ja.reactjs.org/tutorial/tutorial.html
階層的にComponentどやって呼び出すねん！って思って人様のGithub覗きました。
参考になったので紹介しておきますね。
https://github.com/kenmori/React-Sample

以上、こんな適当にかいたような記事をみてくださり、まことにありがとうございます。
一人でも、同じ感じの人がいらっしゃいましたら気軽に話し合えれば
楽しくモチベ継続になるので宜しくお願い致します。