HighBridge’s blog

勉強の記録

2021/8/15

react 日々の記録

精進メモ

React + Node.js本

  • 本格的なコンポーネントを作る。状態を持つコンポーネントはstateオブジェクトを利用する。一度値を設定した後は、setState()メソッドを介して値を変更するように定められている。
  • setState()を用いると自動的にコンポーネントの再描画が行われる。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    // 状態を持った時計コンポーネントの定義
    class SClock extends React.Component {
      constructor (props) {
        super(props)
        // 状態の初期化
        this.state = {
          now: (new Date())
        }
        // 毎秒状態を更新する
        setInterval(e => {
          this.setState({ now: (new Date())})
        }, 1000)
      }
       // 描画内容を返す
      render() {
        const now = this.state.now
        const hh = this.fmt(now.getHours())
        const mm = this.fmt(now.getMinutes())
        const ss = this.fmt(now.getSeconds())
        return (<div>{hh}:{mm}:{ss}</div>)
      }
      fmt (v) {
        const s = "00" + v
        return s.substr(s.length - 2, 2)
      }
    }

    // コンポーネントを配置
    ReactDOM.render(
      <div><SClock /></div>,
      document.getElementById('root')
    )
  </script>
  
</body>
</html>
  • 2の5終了
  • 属性onClickに波括弧と共に関数オブジェクトを指定して、クリックの処理を記述できる
  • クリックしたらクラスのメソッドを呼ぶにはあらかじめclickHandlerにthisを結びつけておく必要がある
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    // コンポーネントの定義
    class Hello extends React.Component {
      constructor (props) {
        super(props)
        // イベントハンドラをthisで結びつける
        this.clickHandler = this.clickHandler.bind(this)
      }
      clickHandler (e) {
        const name = this.props.name
        window.alert(`こんにちは、${name}さん`)
      }
      render () {
        // クリックイベントを指定
        return (
          <div onClick={this.clickHandler}>Click Me</div>
        )
      }
    }
    
    // コンポーネントを使う
    ReactDOM.render(
      <Hello name="クジラ"/>,
      document.getElementById('root')
    )
  </script>
  
</body>
</html>

Reactでイベントの記述方法

class コンポーネント名 extends React.Component {
  render() {
    const handler = (e) => alert('Hello')
    return <button onClick={handler}>Click</button>
  }
}
  • クラスメソッドにthisをバインドしておく
class コンポーネント名 extends React.Component {
  constructor () {
    this.classHandler = this.classHandler.bind(this)
  }
  classHandler () {
    alert('hello')
  }
  render() {
    return <button onClick={this.classHandler}>Click</button>
  }
}
  • アロー関数でクラスのメソッドを呼び出す
class コンポーネント名 extends React.Component {
  classHandler() {
    alert('hello')
  }
  render() {
    return <button onClick={e => this.classHandler(e)}>
      Click</button>
  }
}
  • 本格的にReact/JSXの開発をするときはcreate-react-appで開発環境を手軽に整えることができる。リリース用にビルドするのも用意。
  • webpackを用いて、開発環境をカスタマイズすることがcreate-react-appよりも容易になる。
  • 2章終了！！！