Hackeando JSX: Construyendo en Minecraft con React

Rate this content
Bookmark
SlidesGithub

Cuando se combina con una función de renderizado personalizada, JSX se puede utilizar para construir rápidamente un lenguaje de marcado específico de dominio personalizado. Te mostraré cómo abordar esto utilizando el ejemplo de crear construcciones en Minecraft.

Felix Wotschofsky
Felix Wotschofsky
7 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

JSX se puede utilizar para crear construcciones en Minecraft escribiendo código pseudo-HTML dentro de JavaScript. Se puede transpilar a un formato que el navegador puede entender y no se limita a React. JSX permite la creación de una representación intermedia que se puede convertir en comandos para Minecraft. Se puede utilizar la herramienta existente con JSX, eliminando la necesidad de analizadores personalizados y habilitando el soporte de linting e IDE. El código fuente del proyecto está disponible en GitHub.

1. Uso de JSX para Construcciones en Minecraft

Short description:

Hola Día de React, hablaré sobre cómo podemos usar JSX para crear construcciones en Minecraft. JSX es una forma de escribir código pseudo-HTML dentro del código JavaScript. Puede ser transpilado en algo que el navegador puede entender. JSX no está limitado a React y se puede usar con otras funciones. Permite la creación de una representación intermedia que puede convertirse en comandos para Minecraft. Usar JSX para construir un DSL personalizado es beneficioso porque es familiar para los desarrolladores y tiene una curva de aprendizaje baja.

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.

2. Uso de JSX para Construcciones en Minecraft - Parte 2

Short description:

Puedes confiar en las herramientas existentes al usar JSX, eliminando la necesidad de analizadores personalizados y habilitando el soporte de linting e IDE. La función apply build convierte las construcciones JSX en elementos del juego, similar a montar un árbol React en un elemento DOM HTML. Construir con JSX es fácil y familiar, como se demuestra en el componente de casa legible. Ejecutar la aplicación con bun permite la renderización en tiempo real de la construcción. Si creas algo usando JSX, por favor compártelo conmigo. El código fuente de este proyecto está disponible en GitHub.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Luchando contra la Deuda Técnica con la Refactorización Continua
React Day Berlin 2022React Day Berlin 2022
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
Afrontémoslo: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de Frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica. En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Muchas empresas en todo el mundo están considerando adoptar Micro-Frontends para mejorar la agilidad empresarial y la escala, sin embargo, hay muchas incógnitas cuando se trata de cómo se ve en la práctica el camino de migración. En esta charla, discutiré los pasos necesarios para migrar con éxito una aplicación React monolítica a una arquitectura de frontend más modular y desacoplada.
Patrones avanzados para la gestión de API en aplicaciones React a gran escala
React Advanced Conference 2021React Advanced Conference 2021
20 min
Patrones avanzados para la gestión de API en aplicaciones React a gran escala
Top Content
En esta charla, descubrirás cómo gestionar operaciones asíncronas y cancelación de solicitudes implementando una capa de API mantenible y escalable y mejorándola con una lógica de cancelación desacoplada. También aprenderás cómo manejar diferentes estados de API de una manera limpia y flexible.
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
React Summit 2022React Summit 2022
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
Por lo general, crear aplicaciones web y móviles requiere diferentes conjuntos de tecnologías, y es bastante difícil compartir código. Esta charla mostrará cómo agregué una aplicación web de React y una aplicación móvil de React Native en el mismo monorepo utilizando Nx, y cómo optimicé el intercambio de código entre la aplicación web de React y la aplicación móvil de React Native.
Desarrollo y Fomento de Bibliotecas de Componentes
React Advanced Conference 2022React Advanced Conference 2022
22 min
Desarrollo y Fomento de Bibliotecas de Componentes
¿Qué hace que una biblioteca de componentes sea buena? Para crear una biblioteca de componentes que las personas quieran usar, es necesario navegar entre la extensibilidad, la facilidad de uso y la consistencia de diseño. Esta charla cubrirá cómo abordar estos factores al construir una biblioteca de componentes en React, cómo medir su éxito y cómo mejorar las tasas de adopción.