{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/explore-installed-react-files",
  "path": "/posts/explore-installed-react-files",
  "publishedAt": "2021-12-15T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "javascript",
    "react",
    "reactを勉強する"
  ],
  "textContent": "前回にreactの環境構築をしたので、今回はインストールしたファイルを細かく見ていくことにする。\n\nreact app のファイル構成\n\n最初にインストールした時点で存在しているフォルダは下記一覧。\n\nnode_modulesの中身は多すぎるので、抜粋した。\n\nどうやらこの中でも必要じゃないファイルがいくつかあるらしいので、残しておくべきファイルを整理する。\n\n必要フォルダ構成\n\n必要なフォルダ構成は上記の通り。\n\nそれ以外は削除してフォルダ構成をクリーニングする。\n\nすると当然依存ファイルがなくなるので、下記エラーが吐き出される。\n\nなので、依存関係をすべて解決すれば、再び、表示される。\n\n私は下記、参考書を参考に勉強したので、そこに詳しい依存関係解決後のコードがある。\n\nはじめてつくるreact アプリ\n\nキンドルアンリミテッドで無料なので、自身で依存関係を解決できないのであれば、参考にしてください。\n\n\\[sc name=\"kindleunlimited_234x60\" \\]\\[/sc\\]\n\n削除したものはなに？\n\nはじめてつくるreact アプリに従ってクリーニングした。\n\nさて、ここで気になるのは削除した依存関係と不要とされた記述はなんなのか、ということである。\n\n気にならないのであればそれでいいが、それもそれで今後が怖いので、一応調べておく。\n\nいじったのは App.js と index.js の２つ。\n\nApp.jsに関しては、読み込んでいるreact のメインビジュアルを変更を削除しただけなので、特に問題はない。\n\n気になるのは index.js の方。\n\n削除したのは、\n\nの５行で、１つ目はcss なので問題がない。\n\nそれ以外である。\n\n残りの４つは２つに分けることができる。\n\nreportWebVitals\n\nまずは１つ目の「reportWebVitals」。\n\nこちらはimport で読み込み、関数を実行している？\n\nどうやらこれは「WebVitals計測ライブラリ」というものらしい。\n\nreactの公式でも解説されている。\n\n使い方とかは下記が詳しいのでメモ。\n\nCreateReactAppにWebVitals計測ライブラリが入ったので試してみた\n\n確かに必要はなさそうなので、最小限のアプリとかを作る場合は削除しても問題なさそうだが、まあ、試しに使ってもいいので、あえて削除する必要もないくらいの感覚。\n\nReact.StrictMode\n\n最後が<React.StrictMode>という開始タグと</React.StrictMode >という閉じタグ。\n\nこちらも公式にあったので、参照。\n\n> StrictMode はアプリケーションの潜在的な問題点を洗い出すためのツールです。Fragment と同様に、StrictMode は目に見える UI を描画しません。StrictMode の子孫要素に対しては、付加的な検査および警告が動くようになります。\n\n現状のコードを見ると、\n\nとなっているので、アプリ全体の問題点を洗い出してくれるようになる。\n\nつまり、これはあったほうがいいのか？\n\nしかも本番環境には影響を与えないとのこと。\n\nstrict モード\n\nうーん、こちらは残したほうが良さそうなので、残しておく。\n\n次はやっとこさ、ソースをいじっていく。",
  "title": "インストールしたreact のファイルを検分する"
}