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.

7 min
12 Dec, 2023

AI Generated Video Summary

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2021React Advanced Conference 2021
20 min
Advanced Patterns for API Management in Large-Scale React Applications
In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner.
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Developing and Driving Adoption of Component Libraries
What makes a component library good? In order to create a component library that people want to use you need to navigate tradeoffs between extensibility, ease of use, and design consistency. This talk will cover how to traverse these factors when building a component library in React, how to measure its success, and how to improve adoption rates.