React y el método createElement

Aunque usar la sintaxis JSX en React es una práctica extendida, es posible que existan circunstancias en las que prefieras no usarla. En este tutorial te mostramos un pequeño truco para que puedas usar React sin JSX y sin escribir demasiado código.

Abrevia el método `createElement`

Aunque la capacidad de usar la sintaxis JSX es una de las ventajas más llamativas del uso de React, en realidad JSX es syntax sugar para el método React.createElement, usar JSX en React es completamente opcional.

Es posible que por alguna razón, sean requerimientos de tu proyecto, debugging o preferencias personales, decidas no usar la sintaxis JSX en React. Si ese es el caso, puedes usar este pequeño truco para reducir la cantidad de código que necesites escribir:

«Solo debes guardar la referencia al método React.createElement dentro de una variable con un nombre corto»

Ejemplo sin abreviar:

const rootNode = document.getElementById("app");

const Welcome = React.createElement("div", {key: 'welcome'}, [
  React.createElement("h1", {key: 'welcome-1'}, "Hello, John Doe"),
  React.createElement("h2", {key: 'welcome-2'}, "Hello, Jane Doe")
]);

ReactDOM.render(Welcome, rootNode);

Ejemplo con abreviación:

const rootNode = document.getElementById("app");
const e = React.createElement;

const Welcome = e("div", {key: 'welcome'}, [
  e("h1", {key: 'welcome-1'}, "Hello, John Doe"),
  e("h2", {key: 'welcome-2'}, "Hello, Jane Doe")
]);

ReactDOM.render(Welcome, rootNode);

Nota que de esta manera tu código en React será mucho más corto y legible. Aunque por supuesto, siempre puedes cambiar de opinión y comenzar a usar JSX.