Reactに関するちょっとした情報まとめです
情報
命名について
React では、イベントを表す props には on[Event]
という名前、イベントを処理するメソッドには handle[Event]
という名前を付けるのが慣習となっています。
コンポーネントの名前は、必ず大文字から始めなければならない。
例:〇Greet、×greet
小文字で定義すると、コンポーネントとして呼び出すことはできない。
コンポーネントについて
コンポーネントは関数かクラスで作ることができます。
自分のstateを持たず、renderメソッドだけの場合に利用しよう
プロパティとステート
プロパティはクラスに値を持たせるもの。
ステートはコンポーネントの状態を表す値を持つもの。
クラスのコンポーネントであれば、プロパティもステートも持つことが可能。
一番の大きな違いは、表示が変わるかどうか。
プロパティは変更しても表示が変わらず、ReactDOM.rendorを呼び出す必要がある。
しかし、ステートは自動で表示が更新されるため、ReactDOM.rendorを呼び出す必要がない!
注意点としては、ステートの更新はsetStateを利用すること。
this.state.countなどに直接値を代入してはいけない。
React Developer Tools
Facebookが提供しているブラウザのデベロッパーツール。
Chromeの拡張機能として提供されているので、インストールしておこう。
Reactは実行時に表示内容が更新されるため、そのままでは動作確認が難しいです
そのためのデバッグツールです。
ブラウザの開発ツール画面にComponentsとProfilerタブが追加されています。
実行中に利用されている値の確認が可能です。
![](https://anikitech.com/blog/wp-content/uploads/2021/06/image-28-1024x194.png)
yarnについて
プロジェクトでは、package.jsonファイルにて必要なパッケージのバージョンを定義しています。
しかし、各パッケージの依存関係は固定されません。
yarnコマンドは、各依存関係を全て記録するためにyarn.lockファイルを作成しています。
リンク
ReactをCDNを介して利用する場合に読み込むスクリプト
変数
varダメ!
letとconst推奨!
理由は調べてね
コンパイラオプション
TypeScriptではtsconfig.jsonに「”noImplicitAny”: true」を設定しておきましょう。
引数の型定義を暗黙的にTrueにしない設定です。
「”strictNullChecks”: true」も設定しましょう。
デフォルトだと、すべての型にnullとundefinedが代入できてしまいます。
とは言いつつも、strictオプションが有効になっていれば上記がまとめて有効になります!
クラスの継承について
クラスの継承は避けるべき。
今は合成が良いらしい。
型宣言
インターフェース(interface)ではなく型エイリアス(type)を使うようにしよう。
インターフェースは再宣言でプロパティが追加されてしまうが、型エイリアスではそのようなことにならない。
つまり、保守性が高い。
おすすめのチュートリアル
リストが保存されないToDoアプリ
参考にしたURL群
React Hooks と TypeScript で簡単 TODO アプリ
リンク集
Reactのkey propに配列のindexを使うことが良くない理由
無駄な再描画がされるし、並び順が変更されてしまうかもしれません。
なので、keyはつけようね
ディレクトリ構造
初期状態では以下のディレクトリが存在する。
- node_modules
- public
- src
node_modules
必要なモジュールが格納されています。
reactやreact-domもここに存在しています。
public
Webで公開されるフォルダです。
HTMLやCSSなどが存在します。
src
Reactで作成したファイルが格納されています。
Reactで使用するものです。
SPAに必要なもの
モジュール
- React
- React-Router:ページ遷移
- Redux:状態管理
- MaterialUI:UIコンポーネント
- babel:トランスコンパイラ
- webpack:リソースファイルを1つにする
MaterialUI
yarn add @material-ui/core
React-Router
npm install react router-dom
Redux
yarn add redux
yarn add react-redux
TypeScriptに必要なモジュール
ESLint
静的解析ツールのTypeScript ESLint
「yarn eslint –init」コマンドで、対話的に設定を作成することができる。