HighBridge’s blog

勉強の記録

2021/8/14

日々の記録

精進メモ

React + Node.js本

  • Virtual DOMによって差分のみの変更になるのでReactは早く動作する
<!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">
    // 定期的に時間を表示
    setInterval(() => {
      const d = new Date()
      const [hour, min, sec] = [
        d.getHours(),
        d.getMinutes(),
        d.getSeconds()
      ]
      const z2 = (v) => { // 0で埋めて表示する関数を定義
        const s = "00" + v 
        return s.substr(s.length - 2, 2)
      }
      // 表示するDOMを指定
      const elem = (<div>
          {z2(hour)}:{z2(min)}:{z2(sec)}
        </div>);
      // DOMを置き換える
      ReactDOM.render(elem, 
        document.getElementById("root"))
    }, 1000);
  </script>
  
</body>
</html>

<!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">
    // コンポーネントを利用
    const dom = <div>
        <PhotoText image="pic1" label="南国の浜辺でゆったり" /> 
        <PhotoText image="pic2" label="南国の海は開放的" /> 
        <PhotoText image="pic3" label="海、海、海、青い海" /> 
    </div>

    // ReactでDOMを書き換え
    ReactDOM.render(dom, document.getElementById('root'))

    // 関数でコンポーネントを定義
    function PhotoText (props) {
      const url = "img/" + props.image + ".jpeg"
      const label = props.label
      const boxStyle = {
        border: "1px solid silver",
        margin: "8px",
        padding: "4px"
      }
      return <div style={boxStyle}>
          <img src={url} width="128"/>
          <span> {label} </span>
      </div>
    }
  </script>
  
</body>
</html>
  • 複雑なタイプのコンポーネントを作ろうとした場合は関数では限界あるので、クラスを用いて定義する。
<!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 Greeting extends React.Component {
      render() {
        return <h1>{this.props.type}</h1>
      }
    }

    // コンポーネントを利用
    const dom = <div>
      <Greeting type="Hello!" />  
      <Greeting type="Good morning!" />  
    </div>
    // ReactでDOMを書き換え
    ReactDOM.render(dom, document.getElementById('root'))
  </script>
</body>
</html>

<!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">
    // アロー演算子でコンポーネント定義
    const TitleParts = (props) => (
      <div style={{backgroundColor: 'red', color: 'white'}}>
        <h3>{props.title}</h3>  
      </div>
    )
    const ContentParts = (props) => (
      <div style={{border: '1px solid blue', margin: 15}}>
        <div>あらすじ: {props.body}</div>  
      </div>
    )
    // メインコンポーネント
    const Book = (props) => (
      <div>
        <TitleParts title={props.title} />
        <ContentParts body={props.body} />   
      </div>
    )
    // ReactでDOMを書き換え
    ReactDOM.render(
      (<div>
        <Book title='三国志' body='昔の中国の話'/>  
        <Book title='民数記' body='昔のイスラエルの話 '/>
        <Book title='西遊記' body='猿が活躍する話' />
      </div>),
      document.getElementById('root')
    )
  </script>
</body>
</html>
  • 2章の4終了