Reactの仕様を把握するためにReactのドキュメントを読み直しております。
下記の章を読んで独断と偏見で覚えておきたい！と思ったポイントを紹介します！
実装経験の浅い私が当たり前の仕様を一覧化した記事です！
Reactの仕様を熟知されている方はそっと記事を閉じてください！
デフォルトエクスポートと名前付きエクスポート
デフォルトエクスポートの特徴としてimportの後は好きな名前をつけられます。
名前付きエクスポートは、エクスポート側とインポート側の名前が一致しないとエラーになります。
上記の理由からデフォルトエクスポートでの実装はなるべく避けた方が良いですし、チームでどちらかに統一することで混乱を避けられると思います！
JSXとReactは別もの
一緒に扱われることが多いのでReact独自のものと思われている方も多いかもしれませんが、実は単体で使えます。
JSX（JavaScript XML）は、Meta社によって開発されたJavaScriptの構文拡張で、JavaScriptファイル内にHTMLのようなコードを記述できるようにするものです。
ほぼ全てをキャメルケースで記述すること
JavaScriptの変数名は一定の制限があり、ハイフンを含めたり、classのような予約語を使えません。
なのでline-heightはlineHeight、classはclassNameを使います！
aria-*やdata-*属性はHTMLと同じようにハイフンをつけて記述します。
aria-*やdata-*属性がハイフン形式で記載される歴史的背景について気になったので調べたので気になる方はご覧ください！
&&演算子を使う場合左辺に数字を使わない
左辺が0と評価された場合Reactは0を表示します。
例えば下記のようなコードの場合0が表示されてしまいます。
count && <p>{count}</p>
なので数値の場合には、下記のように変更することで想定した表示を実現できます！
count > 0 && <p>{count}</p>
=>の次に{が続く場合は明示的にreturnを書く必要がある
アロー関数は=>の直後の式を自動で返します。
ただ、{}を利用してブロック形式にした場合は複数業コートを書けるようになりますが、returnを書く必要があります！
<>...</>フラグメントではkeyを渡せない
map()などでアイテムを生成する場合一意のアイテムであることを証明するためにkeyを定義する必要があります。
フラグメント記法だとkeyを渡すことはできないので<div>を利用するか明確な<Fragment>構文を利用します。
import { Fragment } from 'react'
const listItem = list.map(listItem =>
<Fragment key={listItem.id}>
<p>{listItem.text}</p>
</Fragment>
)
keyに関する注意点
keyを利用する際は3つの注意点を覚えておきましょう！
-
keyはアイテムのindexを利用してはならない -
Math.random()を利用したその場で値を生成するのは避ける -
keyはpropsとして受け取らないので、IDを必要とする場合は別のpropsとして渡す必要がある
上2つは、リストの順序が入れ替わったり、再レンダリングされた場合にkeyとアイテムが一致しなくなるバグの原因になるためです…
StrictModeで純関数ではない計算式を検出する
ReactのStrictModeは関数を2度呼び出します。
正しい純関数であれば2度とも同じ結果を返しますが、そうでなかった場合純関数ではないと判断できるわけです！
まとめ
内容はかなり初歩的なものだと思います。
ただ、これまでしっかりドキュメントを読んでこなかったので仕様について深く知る良い機会でした！
100％理解できなかったとしても、メインバージョンがアップデートされた時などは一通り目を通すのも良いかもしれないと感じました。
まだ、3つ章が残っているので引き続き読み進めます！