Hackeando JSX: Construyendo en Minecraft con React

Hola React Day, mi nombre es Felix y hablaré sobre cómo podemos usar JSX para crear construcciones en Minecraft. Además, también exploraré la idea de usar JSX como un lenguaje específico de dominio en general.

Entonces, en primer lugar, ¿qué es un lenguaje específico de dominio? Un lenguaje específico de dominio o DSL para abreviar, es un lenguaje de programación que está diseñado para hacer una cosa particularmente bien. Y eso contrasta con un lenguaje de programación de propósito general como por ejemplo JavaScript, que en teoría es capaz de resolver cualquier problema.

Entonces, por ejemplo, SQL. SQL es muy bueno interactuando con bases de datos de manera muy concisa, pero en general es limitado en funcionalidad y no puede resolver todos los problemas. O en otras palabras, SQL no es Turing completo. Otro ejemplo muy famoso de un lenguaje específico de dominio es HTML. HTML está diseñado para definir la estructura de una página web. Pero como estamos hablando de JavaScript y React aquí, no podemos usar HTML directamente. En su lugar, usamos algo llamado JSX.

JSX es una forma de escribir código pseudo-HTML dentro del código JavaScript. Pero como los navegadores no admiten nativamente JSX, esta sintaxis JSX necesita ser primero transpilada en algo que el navegador puede entender. Y esto es, en el caso de React, una llamada a una función llamada react.createElement() que luego, al final, representa el mismo contenido que nuestro JSX. Pero la gran parte de JSX es que no estamos limitados a usarlo con React. En su lugar, podemos usar cualquier función en lugar de React.createElement() para luego usar JSX y agregarle comportamiento personalizado.

Entonces, en este caso, primero creo un componente de bloque personalizado que luego se alimenta en mi función de manejador JSX personalizada, en este caso una función JSX de Minecraft. Y esto funciona porque mi función tiene la misma firma de función que react.createElement() Por lo tanto, puedo tomar mi función como objetivo para la transpilación desde JSX. En este ejemplo aquí, he expandido este ejemplo y también lo he envuelto en un fragmento. Y ahora la idea es que con mi manejador JSX personalizado, puedo convertir esta sintaxis JSX en un array que consta de objetos simples. Pero ahora esa es la parte importante. Dependiendo del caso de uso o del problema que estás intentando resolver, esta representación intermedia puede verse completamente diferente. Es posible que quieras usar clases en su lugar o posiblemente preservar la anidación que fue creada por JSX. Esta representación intermedia dependerá en gran medida del problema que estás intentando resolver.

Soy capaz de convertir este array en un conjunto de comandos que son entendidos por el juego y luego se convierten en una construcción real dentro de Minecraft. En caso de que no lo sepas, Minecraft es un juego de caja de arena 3D donde puedes colocar bloques donde como definido por tres coordenadas, x, y y z. Y cada bloque por supuesto tiene un tipo, en este caso está definido por este valor de ID.

Entonces, en general, la pregunta sería ¿por qué usarías JSX para construir un DSL personalizado? La primera razón es que tú y tus colegas ya están familiarizados con JSX. Por lo tanto, no hay una gran curva de aprendizaje y es fácil de adoptar.

Y probablemente, número dos, mucho más importante, puedes confiar en las tooling existentes. Por ejemplo, no necesitas escribir un analizador personalizado para transformar tu marcado JSX en el resultado final. En su lugar, puedes simplemente escribir ese manejador JSX y listo. No necesitas escribir un analizador de lenguaje. Y también puedes confiar en las tooling existentes para el linting o también para el soporte de IDE, porque JSX es ampliamente soportado en las tooling.

Entonces, ¿cómo se ve esto en un panorama más amplio? Aquí he creado una función apply build que al final es lo que convierte mi construcción, como se define aquí en JSX, en algo que está realmente en el juego. Y puedes pensar en esto de manera similar a montar tu árbol React en un elemento DOM HTML cuando usas React regularmente. Y ahora con este componente de aldea, esto es simplemente JSX puro, como te dije. Es muy fácil entrar en la idea de construir algo con JSX, porque ya estás familiarizado con él. Como aquí, este componente de casa es solo una colección de otros componentes, que es, como creo, muy legible en general.

Así que ahora si ejecuto esta aplicación con bun, porque bun tiene soporte incorporado para JSX, puedo efectivamente ver cómo mi construcción se va renderizando en el juego. Ok, eso es todo. Espero haber podido darte una pequeña idea de cómo puedes usar JSX para cualquier propósito que quieras. Si terminas construyendo algo, o construyendo un lenguaje personalizado efectivamente en JSX, me encantaría ver lo que estás creando. Así que por favor, ponte en contacto conmigo, me encantaría verlo. Y el código fuente de este proyecto que acabo de mostrarte está disponible en github. Gracias por tu tiempo.