Learn TypeScript 3 by Building Web Applications

React elements

In the previous section, we mentioned that JSX code is transpiled into React.createElement function calls. As its name implies, the createElement function of React creates React elements. But what are those?

"Elements are the smallest building blocks of React apps."

- React website

To understand, let's take a look at the JavaScript code that the last JSX example transpiles into:

function FullName(props) { 
  render(React.createElement('span', null, props.givenName, ' ',   props.lastName)); 
} 
 
const element = React.createElement('div', { 
  id: 'root' 
}, React.createElement(FullName, { 
  givenName: 'Sebastien', 
  lastName: 'Dubois' 
}), React.createElement(FullName, { 
  givenName: 'Alexis', 
  lastName: 'Georges' 
})); 

The properties defined ...