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

こんな人にオススメ！
1. JSX を返す Component
2. StyledComponents を使用した CSS in JS
  1. 一覧
後書き

こんな人にオススメ！

いざ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を覚えて快適なフロントエンドライフを送りましょう！