1028.us

管理ページへ

ログアウト

DOMの書き換え

JSXという拡張文法で記述し、Babelで変換する。

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<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">
    // ReactDOM.render()メソッド
    // 第1引数:描画内容
    // 第2引数:描画先のDOM内容
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    )
  </script>
  
</body></html>
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<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="disp"></div>

<script type="text/babel">
  // オブジェクトの取得
  const root = document.querySelector('#disp')
  // メッセージの取得(ユーザー定義関数)
  const msg = getGreeting()
  
  // DOMの書き換え
  ReactDOM.render(msg, root)
  
  // 関数定義
  function getGreeting () {
    // ランダムな値を得る
    const r = Math.floor(Math.random() * 3)
    // 値に応じてメッセージを返す
    if (r == 0) return <p>今日も頑張りましょう。</p>
    if (r == 1) return <p>こんにちは。</p>
    if (r == 2) return <p>朗らかな日ですね。</p>
  }
</script>
</body></html>

List of Category