React基础：原生写法&react写法前言实现：有一个"计数"按钮，点击按钮，弹出"保存成功" 原生实现 react

前言

实现：有一个"计数"按钮，点击按钮，弹出"保存成功"

原生实现

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>react初识</title>
</head>

<body>
  <div id="root">
    <button class="save" onclick="handleSave()">保存</button>
  </div>
  <script>
    function handleSave() {
      alert('保存成功')
    }
  </script>
</body>

</html>

react实现

引用react资源
React.createElement创建一个react元素
ReactDOM.render将元素绘制到id=root的元素里面

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>react初识</title>
</head>

<body>
  <div id="root">
  </div>

  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <script>
    const buttonAttr = {
      className: 'save',
      onClick: function () {
        alert('保存成功')
      }
    }
    const reactElement = React.createElement('button', buttonAttr, '点击')
    ReactDOM.render(reactElement, document.getElementById('root'))
  </script>

</body>

</html>

使用jsx

引用react资源和label
编写 jsx button元素
ReactDOM.render将元素绘制到id=root的元素里面

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>react初识</title>
</head>

<body>
  <div id="root">
  </div>

  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">
    function handleSave() {
      alert('保存成功')
    }
    const reactElement = <button className="save" onClick={handleSave}>保存</button>
    ReactDOM.render(reactElement, document.getElementById('root'))
  </script>

</body>

</html>