【React入門】JSX記法の基礎を抑えよう!!

スポンサーリンク
スポンサーリンク
スポンサーリンク

こんな人にオススメ!

  • いざRaectを触り始めたがJSXについていまいち分からない。
  • JavaScriptが大好き
  • いざReactを触ってみたけどよくわからない。

JSX記法とは

まずReactとはFacebook社が公開したUI構築のためのjsライブラリのことです。

その中でJSXとは「babelのよってJavaScriptに変換される」 というのを意識ましょう。出ないとコードを書いている途中でつまづくと思います。

  • コンポーネントという単位で、UIごとに機能を宣言的に実装する
  • MVC/MVVMでいうところのView/View-modelのみを担当する
    • その他の部分はRedux/Fluxを組み合わせて構築する例が多い模様
  • HTMLのDOMを直接操作せず、Virtual DOM に対して操作を行う
    • Virtual DOMからHTML DOMへの反映はReactが効率的に行ってくれる
  • jQueryと併用できる
  • Bootstrapのような、UIのデザインライブラリとしての機能は持たない

さらに今回はフロントエンドエンジニアではない方に、React で実装した箇所のデザインとかを触っていただくときに、最低限知ってれば良さそうな知識をまとめてあります。

  • 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() の返り値を表示する
class CounterButton extends.React.Component {
    constructor(props) {
        super(props)
        this.state = {
            clickCount = 0
        }
    }

    increment = () => this.setState({clickCount: this.state.clickCount + 1})

    render() {
        <div>
          <button onClick={this.increment}>{this.state.clickCount}</button>
        </div>
    }
}
  • FunctionalComponent は関数の返り値を表示する
const Room = (room) => (
    <tr>
      <td>{room.name}</td>
      <td>{room.age}</td>
      <td>{room.price}</td>
      <td>{room.layout}</td>
      <td>{room.exposure}</td>
    </tr>
)
  • FunctionalComponent は ClassComponent の中のループから呼び出されるよくある例
class RoomList extends.React.Component {
    constructor(props) {
        super(props)
        this.state = {
            rooms: []
        }
    }

    componentWillMount() {
        fetch('api.example.com')
          .then(res => res.json())
          .then(json => this.setState(rooms: json.rooms))
    }

    render() {
        <table>
          <thead>
            <tr>
              <th>部屋名</th>
              <th>年齢</th>
              <th>価格</th>
              <th>間取り</th>
              <th>向き</th>
            </tr>
          </thead>
          <tbody>
            {this.state.rooms.map(room => <Room key={room.id} room={room} />)}
          </tbody>
        </table>
    }
}
  • 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'} `

一覧

引数/戻り値など詳細は公式のリファレンスを参照のこと

分類メソッドタイミング
Mounting(DOMへの追加時)constructor()コンポーネントのマウント(DOMへの追加)前
componentWillMount()マウント前
render()マウント時
componentDidMount()マウント後
Updating(コンポーネントの更新時)componentWillReceiveProps()setProps()によるプロパティの更新時
shouldComponentUpdate()stateかpropsの変更による更新の可否の問合せ
componentWillUpdate()更新前
render()更新時
componentDidUpdate()更新後
Unmounting(DOMからの削除時)componentWillUnmount()アンマウント(DOMからの削除)時

後書き

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

RaectはComponnentを再利用できるので以上に便利です。

Reactを覚えて快適なフロントエンドライフを送りましょう!