The react hook function component does not use JSX

Time:2020-9-22

In the documents on the official website, JSX writing method is not used, only the description and examples of class components. After searching for a circle, no description of hook + function component was found. Here’s a supplement.

Import react JS file

<script crossorigin></script>
  <script crossorigin></script>

Create container

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

Javascript code

const { createElement, useState } = React
const { render } = ReactDOM

function App(props) {

  const numState = useState(0)
  const [num, setNum] = numState

  function addNum() {
    setNum(num+1)
  }

  return createElement('div', null, [
    createElement('p', {
      key: 'pp'
    }, num),
    createElement('button', {
      onClick: addNum,
      key: 'btn'
    }, 'Add')
  ])
}

render(createElement(App, null, null), document.getElementById('root'))