Reactなんもわからんところから色々メモするスクラップ
nakayasu-yuichi最近は、create react app から始めずに viteを使うのが "イマドキ"らしい。
ここのチュートリアルなどを参考にまずは hello world 的なものを作るところから始めてみようと思う
nakayasu-yuichiUIライブラリとしては MUI を採用する
UIライブラリは依存度が強すぎるとバージョンアップ時に苦労するらしい。
最初は採用するものの、ブロジェクトが大きくなる前に色々と考えた方がいいのかも?
(まだわからない)
nakayasu-yuichiバックエンドができていない状態では、モックデータが欲しいところ。
そういう場合は、MSWを使用すると良いとのこと。
まだ何者かもよく分かっていないが、プロジェクトを作ってから使い方や導入方法などを見ていこうと思う
MSW = Mock Service Worker
導入は、この記事あたりを参考にしよう
nakayasu-yuichinode.js は最新にしておいた方がいいという助言のもと、とりあえず22系かな。と
普通にダウンロードしたらv20.18.0だった
nakayasu-yuichiテストはvitestを採用
npm install -D vitest
MUIもインストール
npm install @mui/material @emotion/react @emotion/styled
Viteでプロジェクトを作った
npm create vite@latest . -- --template react-ts
続いて、こちらを打つことでアプリが立ち上がる
npm install
npm run dev
ブラウザで見るには o + enter
nakayasu-yuichi画面の遷移には「ルーター」が必要
現時点で「ちょっときてる」のは、TanStack Router とのこと
nakayasu-yuichiしかし、みんなが取り扱いに慣れている ReactRouterを採用することにした
- 知見がたまっているので、人に聞きやすい
- 急激に陳腐化するものではない
- 従来のシンプルなルーターから少し離れてきている(らしい) メジャーバージョンアップでそれが顕著に
nakayasu-yuichiVSCodeに「Prettier」を導入した。
これでコードフォーマットを自動でしてくれる。
- リポジトリのルートに
.vscodeディリクトリを作って、settings.jsonを配置。 - 中身は以下のようにした
{
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"eslint.workingDirectories": [
{
"mode": "auto"
}
]
}
index.htmlのデフォルトのHTMLはlang="en"になっているため、jaに変更した。
日本向けのWEBアプリだったらまずやっておいたほうがいいだろうという細かい実装
<!doctype html>
<html lang="ja">
:
今回なら、components/articles というディレクトリに
components/articles/article-list-
components/articles/article
というディレクトリわけをした。
それぞれの下に export文だけを書くファイルである index.tsを置いて、
呼び出し側で簡単にインポートができるようにしておく
nakayasu-yuichi各コンポーネントは以下のように定義する (一例)
import React from 'react';
interface HogeProps {
fuga: string;
}
export const Hoge = ({
fuga
}: HogeProps) => {
return (
<何かしらのDOM />
);
};
ディレクトリ構成
参考
src
|
+-- app # アプリケーションレイヤが含まれる：
| (このフォルダは使用するメタフレームワークによって異なるかもしれません。)
| +-- routes # アプリケーションのルート / ページにもなる
| +-- app.tsx # メインアプリケーションコンポーネント
| +-- provider.tsx # 異なるグローバルプロバイダでアプリケーション全体をラップするアプリケーションプロバイダ
| +-- router.tsx # アプリケーションルータの設定
+-- assets # assetsフォルダには、画像やフォントなどの静的ファイルを格納できます。
|
+-- components # アプリケーション全体で使用される共有コンポーネント
|
+-- config # グローバル設定、エクスポートされた環境変数など。
|
+-- features # 機能ベースのモジュール
|
+-- hooks # アプリケーション全体で使われる共有フック
|
+-- lib # アプリケーション用にあらかじめ設定された再利用可能なライブラリ
|
+-- stores # グローバルなステートストア
|
+-- test #ユーティリティとモック
|
+-- types # アプリケーション全体で使われる共有型
|
+-- utils # 共有ユーティリティ関数