1028.us

管理ページへ

ログアウト

変数の値を埋め込む

<!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">
  // 変数の宣言
  const item = "SDカード"
  const value = 1200
  
  // HTMLタグの中に変数の値を埋め込む
  const msg = <h1>{item} - {value}円</h1>
  
  // render()で描画
  const elm = document.getElementById("root")
  ReactDOM.render(msg, elm)
</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="root"></div>
<script type="text/babel">
  // 変数を定義
  const title = "書道"
  const imgUrl = "http://uta.pw/shodou/img/28/214.png"
  
  // JSXで要素を定義
  const msg =
    <div>
      <h1>{title}</h1>
      <p><img src={imgUrl} /></p>
    </div>
    
  // render()で描画 --- (※3)
  const elm = document.getElementById("root")
  ReactDOM.render(msg, elm)
</script>
</body></html>

List of Category