# 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が格納されます。詳しい処理内容に関しては、ここでは説明しません。

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