非 JS エンジニア向けの React (JSX) の簡単な説明

はじめに

いわゆる 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() の返り値を表示する

1class CounterButton extends.React.Component {
2    constructor(props) {
3        super(props)
4        this.state = {
5            clickCount = 0
6        }
7    }
8
9    increment = () => this.setState({clickCount: this.state.clickCount + 1})
10
11    render() {
12        <div>
13          <button onClick={this.increment}>{this.state.clickCount}</button>
14        </div>
15    }
16}

• FunctionalComponent は関数の返り値を表示する

1const Room = (room) => (
2  <tr>
3    <td>{room.name}</td>
4    <td>{room.floor}</td>
5    <td>{room.price}</td>
6    <td>{room.layout}</td>
7    <td>{room.exposure}</td>
8  </tr>
9);

• FunctionalComponent は ClassComponent の中のループから呼び出されるよくある例

1class RoomList extends.React.Component {
2    constructor(props) {
3        super(props)
4        this.state = {
5            rooms: []
6        }
7    }
8
9    componentWillMount() {
10        fetch('api.example.com')
11          .then(res => res.json())
12          .then(json => this.setState(rooms: json.rooms))
13    }
14
15    render() {
16        <table>
17          <thead>
18            <tr>
19              <th>部屋名</th>
20              <th>階</th>
21              <th>価格</th>
22              <th>間取り</th>
23              <th>向き</th>
24            </tr>
25          </thead>
26          <tbody>
27            {this.state.rooms.map(room => <Room key={room.id} room={room} />)}
28          </tbody>
29        </table>
30    }
31}

• Component は基本的に 1 つの DOM node を返す必要がある
  • React v16 移行は JSX のみで使用できる <> any dom nodes... </> で囲うことができる
    • <> 以下の DOM node が並列して HTML に展開される
  • React v15 まででは div で囲うなどしていた

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'}
  `
  

  • 細かいことは公式ドキュメントを参照