lennythedev

React createElement

JSX is not required to write React. You don’t even need Babel to compile JSX and other next-gen JS. You just need createElement:

So <Hello name="lenny"/> is equivalent to:

React.createElement(Hello, {
  name: "lenny",
})
/**
React.createElement(
  type,
  [props],
  [...children]
)
**/

JSX

function Hello(props) {
  return <div>Hello {props.name}</div>
}

function App() {
  return <Hello name="lenny" />
}

ReactDOM.render(Hi, document.querySelector(".app"))

React.createElement

function Hello(props) {
  return React.createElement("div", null, "Hello ", props.name)
}

function App() {
  return React.createElement(Hello, {
    name: "lenny",
  })
}

ReactDOM.render(Hi, document.querySelector(".app"))

Try it in Babel


lenmorld
Full-stack ramblings and journal about anything web