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にあげるようにする。