Reactアプリの構造

Reactアプリの構造に関して説明します。

VSCodeにてfirst-projectを開きましょう。

ファイル構成は以下になっているかと思います。

node_modules/
public/
src/
index.html
package.json
package-lock.json

まず、package.jsonは前セクションにて説明しましたが、このプロジェクトに必要なライブラリを記述したり、プロジェクトの情報を記述します。

次にnode_modulesも前セクションにて説明しましたが、package.jsonを参照してインストールされたライブラリが格納されています。

package-lock.jsonに関しては、npm installした際に、インストールされた各ライブラリのバージョンと、そのライブラリを使用するのにインストールしたライブラリのバージョンが自動で記述されます。

publicディレクトリは、ページに表示する画像や動画を格納する場所になります。

src(ソース)ディレクトリは、Componentやロジックを格納する場所になります。

index.htmlはベースとなるHTMLファイルで、<script type="module" src="/src/main.tsx"></script>と記述されていますが、

src/main.tsxを見てみると、以下のような処理にて、<div id="root"></div>にComponentが格納されます。詳しい処理内容に関しては、ここでは説明しません。

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)