#199: jugando con JSX

Probablemente debería haberlo aprendido hace mucho tiempo, pero, por desgracia, aquí estamos. Resulta que puedes saber qué función quieres que use JSX. Sí, JSX realmente solo tiene una transformación principal. Convierte las cuerdas angulares en JavaScript en una llamada de función. Entonces, si escribes una línea como esta en JavaScript :

divHello/div

Después del procesamiento (probablemente con Babel y el complemento JSX), obtendrá de forma predeterminada:

React.createElement("div", { class: "big" }, "Hello");

Pero si incluye un comentario directivo que le indica a JSX que desea usar su propia función, puede cambiar esa salida:

/* @jsx myFunction */divHello/div

Se convierte en:

/* @jsx myFunction */myFunction("div", { class: "big" }, "Hello");

Eso significa que podemos escribir nuestra propia función. Un poco raro, pero está bien.

El caso de uso real es para bibliotecas que no son React, como Preact. Aprendí esto mirando los ejemplos de Jason Miller:

Vue también se puede hacer de esta manera. Tenga en cuenta que tanto Vue como Preact incluyen esta hfunción especial diseñada para esto:

Valeri Karpov también tiene algunos casos de uso interesantes en su publicación de blog, “Una descripción general de JSX con 3 ejemplos que no son de React”.