非 JS エンジニア向けの React (JSX) の簡単な説明
2018-04-05 Thu.
はじめに
いわゆる JS エンジニアではない方に、React で実装した箇所のデザインとかを触っていただくときに、最低限知ってれば良さそうな知識をまとめます。
説明すること
- JSX 記法について
- JS の埋め込みについて
- Component について
- StyledComponents について
説明しないこと
- Redux
JSX 記法
- XML を JS の中に書くことで、JS 内に DOM を表現する記法
- XML であって HTML ではない
- class ではなく className
- 各種プロパティは
-
区切りではなくlowerCamelCase
を用いる - XML なのでタグは必ず閉じられる。
<br />
など - style の中は css ではなく JS の { key: value } を用いる
- 数値系のものは基本的に px であり、単位を省略し number 型で書く
- 例:
<div style={{ marginRight: 10 }}>
- 変数展開については以下でも説明する
JS を展開する {}
記法
<button className={this.props.status}>
など- ある変数が true の場合のみ、等は
&&
演算子を用いる{isAuthenticated && <p>ようこそ</p>}
- 条件分岐を書く場合は三項演算子を用いる場合が多い
{isAuthenticated ? <p>ようこそ、{userName}さん</p> : <p>ようこそ、ゲストさん<p/>}
- JSX タグで囲わずに文字のみを表示したい場合は、
''
で囲み、 JS の文字列として扱う
{}
記法が使えるのはあくまで JSX 内のみ、単なる文字列内で変数展開したい場合は template literal (`Hello ${name}`
)を使用する{isAuthenticated ? `ようこそ、${userName}さん` : 'ようこそ、ゲストさん'}
- 配列のループ処理なども、返り値が展開されるように書く
{rooms.map(room => <Room key={room.id} name={room.name} />)}
- Style 等、 Object を渡す箇所では
{{}}
と二重になる
JSX を返す Component
- 状態を持つ Class か、状態を持たない(引数のみによって表示内容が決定する) Function で表す
- ClassComponent は
render()
の返り値を表示する
- FunctionalComponent は関数の返り値を表示する
- FunctionalComponent は ClassComponent の中のループから呼び出されるよくある例
- Component は基本的に 1 つの DOM node を返す必要がある
- React v16 移行は JSX のみで使用できる
<> any dom nodes... </>
で囲うことができる<>
以下の DOM node が並列して HTML に展開される
- React v15 まででは div で囲うなどしていた
- React v16 移行は JSX のみで使用できる
StyledComponents を使用した CSS in JS
-
CSS を JS の中に記載するというアプローチがある
- CSS のスコープを JS 内に閉じることができる
- 動的にプロパティが変化するアニメーション等では、 JS で Style を操作するよりも直感的
-
React において代表的なものとして StyledComponentsがある
- JS の template literal を使用するため、素の css の記法が使用できる
- 一部 scss 的な記法も使用できる
- 変数は JS 側で保持し、 template literal 内で展開する形になる
- スタイル適用済みの Component を生成できる
styled.div` margin-right: 10px; `
- 独自の Component にスタイルを適用する場合は以下のようにする
styled(MyButton)` margin-right: 10px; `
- 状態によって変わる場合は関数を使用する
styled.button` color: ${status => status === 'danger' ? 'red' : 'white'} `
- 細かいことは公式ドキュメントを参照
- JS の template literal を使用するため、素の css の記法が使用できる
Pickup
Under Construction