Video: Hacking JSX: Building in Minecraft with React

Rate this content
Bookmark
SlidesGithub
Video Summary and Transcription
The video explores how JSX, a syntax extension for JavaScript that resembles HTML, can be used to create builds in Minecraft. By leveraging the familiarity of JSX, developers can create a custom domain-specific language (DSL) for Minecraft, making it easier to convert JSX syntax into game commands. This approach eliminates the need for custom parsers and allows for the use of existing tools for linting and IDE support. The apply build function in JSX is akin to mounting a React tree to an HTML DOM, transforming JSX builds into game elements. By running the app with Bun, developers can enjoy real-time rendering of their builds. The video encourages viewers to share their JSX creations and highlights the availability of the project’s source code on GitHub. The talk also touches on the role of the react.createElement() function, which is what JSX is transpiled into when using React, and how JSX can be used outside of React with custom handlers. The coordinates system in Minecraft, which uses x, y, and z for placing blocks, is also discussed.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

JSX is a way of writing pseudo-HTML code within JavaScript code. It needs to be transpiled into something the browser can understand, typically a call to React's react.createElement() function.

A domain specific language (DSL) is a programming language designed to do one thing particularly well, unlike general-purpose languages like JavaScript that can solve any problem. Examples include SQL for databases and HTML for web page structure.

JSX can be used to create builds in Minecraft by converting JSX syntax into game commands. This involves creating a custom JSX handler function that converts the JSX into an array of objects or commands understood by the game.

There are two main reasons: 1) Familiarity with JSX means there is no steep learning curve, and 2) Existing tooling for JSX, such as parsers, linters, and IDE support, can be leveraged, eliminating the need to write custom tools.

The react.createElement() function is what JSX is transpiled into when using React. It converts JSX syntax into React elements that the browser can understand.

Yes, JSX can be used outside of React by using a custom function that has the same signature as react.createElement(). This allows for custom behavior and use cases.

The intermediary representation is a way to convert JSX syntax into a different format, such as an array of objects or classes. This format can vary depending on the problem being solved.

In Minecraft, blocks are placed using three coordinates: x, y, and z. Each block also has a type, defined by an ID value.

Using JSX for creating custom languages offers advantages like familiarity, reducing the learning curve, and leveraging existing tooling for parsing, linting, and IDE support.

The source code for the JSX Minecraft build project is available on GitHub.

Video transcription and chapters available for users with access.

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

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Watch video: Fighting Technical Debt With Continuous Refactoring
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
Monolith to Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
Advanced Patterns for API Management in Large-Scale React Applications
React Advanced 2021React Advanced 2021
20 min
Advanced Patterns for API Management in Large-Scale React Applications
Top Content
This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.
Run Games Within Your React Native Apps
React Day Berlin 2022React Day Berlin 2022
28 min
Run Games Within Your React Native Apps
Top Content
Today's Talk discusses integrating Unity into React Native apps for game development. Unity provides a wide range of capabilities and can be seamlessly integrated with React Native. The integration involves using the Unity View component and the Unity Message callback to enable communication between the two platforms. Native plugins are created to facilitate communication between Unity and React Native. The performance of Unity in React Native apps is comparable to regular React Native apps, and the decision to use Unity or React Native depends on the app's use case and need for advanced UI and gaming capabilities.
Game Development with ReactJS, CSS, and React Three Fiber
JS GameDev Summit 2023JS GameDev Summit 2023
22 min
Game Development with ReactJS, CSS, and React Three Fiber
Jorge Rubiano, a Software Engineer from Colombia, shares puzzle, isometric, and board games developed using React.js and CSS. He demonstrates the use of WebGL and 3.js for creating 3D games on the web. ReactiveFiber, a renderer that combines React and 3.js, is showcased in movement-based and color-changing games. The Talk concludes with the development of a bowling game using ReactiveFiber and complex components.