Agenda

[TakayasuNasu]

• [x] Reactの開発環境を作る
• [x] コンポーネント思考とは何かを学ぶ
• [x] ES2015の書き方を学ぶ
• [x] ステート(state)とは何か
• [x] ライフサイクルメソッドを使ってみる
• [x] React Hooksを使ってみる
• [x] Styled-componentをさわってみる
• [x] Styled-componentでレスポンシブのページを作る
• [x] React-routerを使って複数ページを作る
• [ ] Jestでテストを実行する
• [ ] TypeScriptを使って書き換えてみる
• [ ] axiosでサーバーからJsonを取得する

[TakayasuNasu]

componentDidMount()

componentDidMount() は、コンポーネントがマウントされた（ツリーに挿入された）直後に呼び出されます。DOM ノードを必要とする初期化はここで行われるべきです。リモートエンドポイントからデータをロードする必要がある場合、これはネットワークリクエストを送信するのに適した場所です。このメソッド内ですぐに setState() を呼び出すことができます。

---

componentDidUpdate(prevProps, prevState, snapshot)

更新が行われた直後に componentDidUpdate() が呼び出されます。このメソッドは最初のレンダーでは呼び出されません。

---

componentWillUnmount()

componentWillUnmount() は、コンポーネントがアンマウントされて破棄される直前に呼び出されます。タイマーの無効化、ネットワークリクエストのキャンセル、componentDidMount() で作成された購読の解除など、このメソッドで必要なクリーンアップを実行します。

---

constructorを下記に変更

  constructor(props) {
      super(props);
      this.state = {
        date: new Date(),
        count: 0
      }
      this.countUp = this.countUp.bind(this)
  }

Clock.jsに下記を追加

  componentDidMount() {
    console.log('%ccomponentDidMount', 'color:skyblue; font-size: 20px;')
  }

  componentWillUnmount() {
    console.log('%ccomponentWillUnmount', 'color: orange; font-size: 20px;')
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('%ccomponentDidUpdate', 'color: lime; font-size: 20px')
  }

  countUp() {
    let presentCount = this.state.count
    presentCount += 1
    this.setState({count: presentCount})
  }

render内に下記を追加

<button onClick={this.countUp}>Count UP</button>
<p>Count {this.state.count}</p>

[TakayasuNasu]

React Hooksを使ってみるための準備

srcディレクトリ直下にClockWithUse.jsを作成

下記をコピペ

import React, { useState, useEffect  } from 'react'

const ClockWithUse = props => {
  return (
    <React.Fragment>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </React.Fragment>
  )
}

export default ClockWithUse

ClockWithUse.defaultProps = {
  date: new Date()
}

Clock.jsと同じように、ページが表示されたタイミングでログ出力と、ボタン押下でカウントアップする機能を実装する。

[TakayasuNasu]

Styled-componentの準備

npm install --save styled-components styled-media-query styled-reset

または

yarn add styled-components styled-media-query styled-reset

参考: morajabi/styled-media-query: 💅💍 Better media queries for styled-component