React習得への道3

こんにちは！ジュンです！

今回も勉強したことをアウトプットしていきます。

今回はReactの覚えておくべきフォルダ・ファイルです。

最低5つ覚えておくと良いです。

①package.json

②srcフォルダ

　→③App.jsx

　→④assetsフォルダ

⑤index.html

①package.json

使っているライブラリの一覧やバージョンを管理している。

そのプロジェクトで何を使ってどう動かすかをまとめた設計書のようなもの。

npm install や npm run devといったコマンドは、このファイルをもとに必要なパッケージのインストールや管理を行う。

必要なライブラリやツールがある場合、このファイルを編集する。

package-lock.jsonとの違い

②srcフォルダ

アプリの中心となるフォルダ。

Reactアプリの中心となり、実際にコンポーネントやJSファイル、CSSファイルが入っている場所。

②srcフォルダ＞③App.jsx

Reactアプリの中心となるコンポーネントであり、画面全体の土台となるファイル。

②srcフォルダ＞④assetsフォルダ

画像やアイコンなど、Reactアプリで使う静的ファイルを格納するフォルダ。

ここにおくことでViteが画像を読み込み最適化し、正しいパスにJavaScript上で変換してくれる。

⑤index.html

Webアプリを起動した時に最初に読み込まれるページ。

<div id=”root”></div>があるおかげで、Reactが画面を描画できる。

主に下記を行う。

・<title>を変える

・<meta>を設定する

・favicon を指定する

・全体に関わるタグを置く