前回にreactの環境構築をしたので、今回はインストールしたファイルを細かく見ていくことにする。

react app のファイル構成

最初にインストールした時点で存在しているフォルダは下記一覧。

|--node_modules
| |--(抜粋)
|--public
| |--favicon.ico
| |--index.html
| |--logo192.png
| |--logo512.png
| |--manifest.json
| |--robots.txt
|--README.md
|--src
| |--App.css
| |--App.js
| |--App.test.js
| |--index.css
| |--index.js
| |--logo.svg
| |--reportWebVitals.js
| |--setupTests.js
|--.gitignore
|--package.json
|--README.md
|--yarn.lock

node_modulesの中身は多すぎるので、抜粋した。

どうやらこの中でも必要じゃないファイルがいくつかあるらしいので、残しておくべきファイルを整理する。

必要フォルダ構成

|--node_modules // 必要
| |--(抜粋)
|--public
| |--favicon.ico
| |--index.html // 必要
| |--logo192.png
| |--logo512.png
| |--manifest.json
| |--robots.txt
|--README.md
|--src
| |--App.css // 必要
| |--App.js // 必要
| |--App.test.js
| |--index.css
| |--index.js // 必要
| |--logo.svg
| |--reportWebVitals.js
| |--setupTests.js
|--.gitignore // 必要
|--package.json // 必要
|--README.md // 必要
|--yarn.lock // 必要

必要なフォルダ構成は上記の通り。

それ以外は削除してフォルダ構成をクリーニングする。

すると当然依存ファイルがなくなるので、下記エラーが吐き出される。

./src/logo.svg
Error: ENOENT: no such file or directory, open 'C:\Users\kyoryu\Desktop\react-app\src\logo.svg'

なので、依存関係をすべて解決すれば、再び、表示される。

私は下記、参考書を参考に勉強したので、そこに詳しい依存関係解決後のコードがある。

はじめてつくるreact アプリ

キンドルアンリミテッドで無料なので、自身で依存関係を解決できないのであれば、参考にしてください。

[sc name=“kindleunlimited_234x60” ][/sc]

削除したものはなに？

はじめてつくるreact アプリに従ってクリーニングした。

さて、ここで気になるのは削除した依存関係と不要とされた記述はなんなのか、ということである。

気にならないのであればそれでいいが、それもそれで今後が怖いので、一応調べておく。

いじったのは App.js と index.js の２つ。

App.jsに関しては、読み込んでいるreact のメインビジュアルを変更を削除しただけなので、特に問題はない。

気になるのは index.js の方。

削除したのは、

// import './index.css';
// import reportWebVitals from './reportWebVitals';
// <React.StrictMode>
// </React.StrictMode >
// reportWebVitals();

の５行で、１つ目はcss なので問題がない。

それ以外である。

残りの４つは２つに分けることができる。

reportWebVitals

まずは１つ目の「reportWebVitals」。

こちらはimport で読み込み、関数を実行している？

どうやらこれは「WebVitals計測ライブラリ」というものらしい。

reactの公式でも解説されている。

使い方とかは下記が詳しいのでメモ。

CreateReactAppにWebVitals計測ライブラリが入ったので試してみた

確かに必要はなさそうなので、最小限のアプリとかを作る場合は削除しても問題なさそうだが、まあ、試しに使ってもいいので、あえて削除する必要もないくらいの感覚。

React.StrictMode

最後が<React.StrictMode>という開始タグと</React.StrictMode >という閉じタグ。

こちらも公式にあったので、参照。

StrictMode はアプリケーションの潜在的な問題点を洗い出すためのツールです。Fragment と同様に、StrictMode は目に見える UI を描画しません。StrictMode の子孫要素に対しては、付加的な検査および警告が動くようになります。

現状のコードを見ると、

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

となっているので、アプリ全体の問題点を洗い出してくれるようになる。

つまり、これはあったほうがいいのか？

しかも本番環境には影響を与えないとのこと。

strict モード

うーん、こちらは残したほうが良さそうなので、残しておく。

次はやっとこさ、ソースをいじっていく。