Hacking JSX: Building in Minecraft with React

Hello React Day, my name is Felix and I will be talking about how we can use JSX to create builds in Minecraft. Furthermore, I will also be exploring the idea of using JSX as domain specific language in general.

So first of all, what even is a domain specific language? A domain specific language or DSL for short, it's a programming language that is designed to do one thing particularly well. And that is in contrast to a general purpose programming language such as for example JavaScript, which in theory is able to solve every problem.

So take for example SQL. SQL is very good at interacting with databases in a very concise manner, but it is overall limited in functionality and isn't able to solve every problem. Or in other words, SQL isn't Turing complete. Another very famous example for a domain specific language is HTML. HTML is designed to define the structure of a web page. But since we are talking about JavaScript and React here, we aren't able to use HTML directly. Instead, we use something called JSX.

JSX is a way of writing pseudo-HTML code within JavaScript code. But since browsers don't natively support JSX, this JSX syntax needs to be first transpiled into something that the browser can in fact understand. And this is, in the case of React, a call to a function called react.createElement() which then, in the end, represents the same content as our JSX does. But the great part about JSX is that we aren't limited to using it with React. Instead, we can use whatever function instead of React.createElement() to then use JSX and add custom behavior to it.

So in this case, I first of all create a custom block component which then gets fed into my custom JSX handler function, in this case a minecraft JSX function. And this works because my function has the exact same function signature as react.createElement() Therefore, I can take my function as target for transpolation from JSX. In this example here, I've expanded this example and also wrapped it in a fragment. And now the idea is that with my custom JSX handler, I'm able to convert this JSX syntax into an array consisting of plain objects. But now that's the important part. Depending on the use case or the problem that you're trying to solve, this intermediary representation may look completely different. You may want to use classes instead or possibly preserve the nesting that was created by JSX. This intermediary representation will greatly depend on the problem you're trying to solve.

I'm able to convert this array into a set of commands which are understood by the game and then turned into an actual build within Minecraft. In case you don't know, Minecraft is a 3D sandbox game where you can place blocks wherever as defined by three coordinates, x, y and z. And each block of course has a type, in this case it's defined by this ID value.

So therefore in general, the question why would you use JSX for building a custom DSL. The first reason is that you and your colleagues are already familiar with JSX. Therefore there isn't a great learning curve and it's easy to adopt.

And probably, number two, way more important, you can rely on existing tooling. So for example you don't need to write a custom parser for transforming your JSX markup into the final result. Instead, you can just write that JSX handler and be done. You don't need to write a language parser. And also you can rely on existing tooling for linting or also for IDE support, because JSX is widely supported across tooling.

So, what does this look like in a greater picture? Here I've created an apply build function which in the end is what converts my build, as defined here in JSX, into something that's actually in the game. And you can think of this similarly to mounting your React tree to an HTML DOM element when using React regularly. And now with this village component, this is just plain JSX, as I told you. It is very easy to get into the idea of building something with JSX, because you already are familiar with it. Like here, this house component is just a collection of other components, that is, as I think, very readable overall.

So now if I run this app with bun, because bun has built-in JSX support, I can effectively watch as my build sort of gets rendered to the game. Ok, that's it. I hope I could give you a little insight of an idea of how you can use JSX for whatever purpose you want. If you end up building something, or building a custom language effectively on JSX, I'd love to see what you are creating. So please reach out to me, I'd love to see it. And the source code for this project that I just showed you is available on github.