mapを使って繰り返すメリット
mapを使うことによって、配列の中身を繰り返してくれる。
※詳しい使い方は以前作成したmapについての投稿をチェック
①見やすい
②変更箇所があったときに、一箇所の修正ですむ
③追加や削除をすぐに行える
④データと処理を分けることができる
リファクタリング
①拡張子をjsxにまとめる。
jsxにすることでエディタがReact用にコードの補完を行ってくれる。
②srcディレクトリに「pages,components,styles」をまとめる。
pagesだけでも機能するが、srcにまとめた方がスッキリして見やすい。
※注意点はsrcが存在する状態でのpages単独使用はできない
③jsxファイルとcss modulesファイルをまとめる。
例えばMainというというフォルダーを作り、Main.jsxとMain.module.cssを格納する。
さらにMain.jsxをindex.jsxに変更することで、インポートに記述が少なくて済む。
※ただコードを探すときは大変。全てindexになっているから。
絶対パス設定
①jsconfig.jsonを作成。
②自動的に絶対パスにする方法
・「コマンド+カンマ」を押す。
・検索で「Import Module Specifier」を探す。
・none-relativeを選択する。
※上記の設定で「settings.json」に記述が追加されるが、チームで開発を行うときはしっかりgithubにあげるようにする。