Reactに関する情報まとめ

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タブが追加されています。
実行中に利用されている値の確認が可能です。

yarnについて

プロジェクトでは、package.jsonファイルにて必要なパッケージのバージョンを定義しています。
しかし、各パッケージの依存関係は固定されません。

yarnコマンドは、各依存関係を全て記録するためにyarn.lockファイルを作成しています。

リンク

CDN リンク

ReactをCDNを介して利用する場合に読み込むスクリプト

変数

varダメ！
letとconst推奨！

理由は調べてね

コンパイラオプション

TypeScriptではtsconfig.jsonに「”noImplicitAny”: true」を設定しておきましょう。
引数の型定義を暗黙的にTrueにしない設定です。

「”strictNullChecks”: true」も設定しましょう。
デフォルトだと、すべての型にnullとundefinedが代入できてしまいます。

とは言いつつも、strictオプションが有効になっていれば上記がまとめて有効になります！

クラスの継承について

クラスの継承は避けるべき。
今は合成が良いらしい。

型宣言

インターフェース（interface）ではなく型エイリアス（type）を使うようにしよう。

インターフェースは再宣言でプロパティが追加されてしまうが、型エイリアスではそのようなことにならない。
つまり、保守性が高い。

リンク集

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：リソースファイルを１つにする

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」コマンドで、対話的に設定を作成することができる。