インストールしたreact のファイルを検分する

vue案件が多い中、reactを使用する必要があったので、勉強することにした。

react 勉強シリーズ

目次

前回に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 アプリ

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

    削除したものはなに?

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

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

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

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

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

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

    削除したのは、

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

    の5行で、1つ目はcss なので問題がない。

    それ以外である。

    残りの4つは2つに分けることができる。

    reportWebVitals

    まずは1つ目の「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 モード

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

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

    次に読むおすすめ記事

    letの仕様に関する知識を問うJavaScriptの問題

    JavaScriptで文字列falseをBoolean型に変更しようとして沼に落ちた

    JavaScriptにおけるcount++と++countの違いについて調べてみた

    Vue3のベースプロジェクトを作成したので、仕上げにhuskyを導入する

    複雑な文字列パターンをマッチさせる必要がある場合はIF分ではなく正規表現を使うべきだとChat GPTが言ってた

    この記事に対するコメント

    お気軽にコメントを下さい

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です