スポンサーリンク

Reactの動作を探る

ファイルを確認

自動生成されたプロジェクトhello-worldのファイル構成は次のようになっていた。

サーバー上のファイル構成と想定すると通常publicフォルダーのindex.htmlがトップページに該当する。しかし内容を見てみるとこのような一文があった。

このindex.htmlがそのまま表示されているわけではなく、テンプレートのようだ。さらに怪しいsrcフォルダー内のindex.jsを見てみる。

見慣れない命令が沢山ある。しかし、全体把握を優先し細かな確認は後回しとする。ここでのポイントは、9行目の「<App />」のようだ。

これがなぜポイントかというと、サイトを表示すると「Edit src/App.js and save to reload.」と表示される。つまり、App.jsがメイン処理と推測できるからである。この「<App />」でApp.jsを呼び出しているのだろう。

App.jsの中身を見てみる。

サイトの表示内容と見比べると、それに該当するHTMLらしき命令があることから、こちらがメイン処理で間違いない。

まとめてみる

public/index.htmlはテンプレートのHTMLでこれをベースにし、src/index.jsが起動しApp.jsを呼び出しサイトの描画を完成させているようだ。

今度どのようにReactを学習していくか、このプロジェクトhello-worldを解析しながら機能追加を行っていくか、チュートリアル的なものをやってみるか、悩みどころである。

前へ<ーーー>つづく

タイトルとURLをコピーしました