Posted on Oct 18 Hello, developer.Today, let's talk about JSX, the love-hate relationship of all React developers. Many hate it, many love it, but have you ever wondered how you could make the most of the power of JSX outside the usual React context?Well, you're in the right place!In the vast world of web development, the use of JSX in combination with React has changed how we create dynamic and responsive user interfaces. It must be admitted that the developer experience (DX) offered by React dominates over other frameworks, and JSX is one of the factors that has contributed to the success of this endeavor.However, at times, you might feel the need to free JSX from this tight connection with React, thus opening the doors to new creative possibilities.Here's where the questions arise: how can we use JSX independently, without the weight of React? This article is here to guide you through the construction of a Template Engine that will allow you to do just that.Imagine being able to leverage the powerful syntax of JSX in scenarios outside the traditional framework, customizing how JSX elements are evaluated and rendered (pretty cool, huh?).Before diving into the creation of our template engine, let's take a quick look at what's behind the scenes between JSX and React:JSX, which stands for JavaScript XML, is a kind of markup language that looks very similar to HTML. In reality, behind a JSX tag, there's the React.createElement function that handles the transformation of components. Yes, JSX tags are actually JavaScript functions (when you've recovered from the shock, keep reading).Initially, JSX was designed to be used exclusively with React, but over time, it has evolved more and more to be considered a project on its own.Our goal is, therefore, to create a template engine that adapts to our needs using JSX. Whether you're building a lightweight and fast app or exploring unusual scenarios, this template engine will be the key to opening new doors to our creativity.Let's start with this:I want to maintain the DX of React and write a core capable of translating my JavaScript functions, enriched with JSX, into a representation of pure HTML.Imagine being able to define your user interface declaratively and then, with a magical touch, make it ready for action.But how do we achieve all this?Simple, we need a bundler! In particular, in this article, I'll use Webpack, but you can reconstruct everything with Vite, EsBuild, etc.I'll try to guide you step by step.Let's initialize the project.Create a new folder and type:npm init -yDone? Great.Now we need two things in particular:The first thing is to install Webpack, and the second is to use a transpiler to "transform" our JSX into JavaScript objects.As for the second point, we'll use Babel, but let's focus on Webpack for now.npm i -D webpack webpack-cli webpack-dev-server html-webpack-pluginGreat! Now let's install Babel.npm i -D @babel/cli @babel/core @babel/preset-env babel-loaderLast piece: we need a Babel plugin that allows us to transpile JSX. We'll delve into its usage later.npm i -D @babel/plugin-transform-react-jsxNow that we've installed all the necessary dependencies, let's add the following scripts to our package.json.Plainly put, these scripts are for running our project and building it if we want to. Now, we need to create our "magic." Thanks to the babel/plugin-transform-react-jsx plugin, we can tell Babel to handle a custom runtime for transpiling JSX.Essentially, we will now customize how Babel should "evaluate" JSX expressions. So, in the root of our project, let's create the file jsx-runtime.js.This very minimal runtime allows us to transform our "components" with props into pure HTML, bidding farewell to the Virtual DOM. Consider that we could extend the runtime to handle custom components, directives, or anything else that comes to mind. In short, see it as the foundation of our template engine or a future framework.Let's add the last piece of the puzzle: the webpack configuration file. Again, in the root of the project, let's create the webpack.config.js file.If we look at the module attribute, we find the configuration for Babel and the plugin plugin-transform-react-jsx, which refers to the root of the project to find our custom runtime file.Aaaaaand that's it, we're done.If you want a working example of what I've described so far, I've prepared a functional project for you on StackBlitz.What's missing? A reactivity system. But that's another story...And so, our journey into the discovery of an independent template engine based on JSX comes to an end. We've explored the reasons behind the need to free JSX from React, delved into the architecture of the template engine, and tackled the challenge of implementing a flexible and powerful templating language.With this tool at your disposal, you're now armed with a new perspective in web development. Take a look at the benefits that this freedom can bring to your daily workflow.Your feedback is valuable. If you've experimented with the proposed template engine, have questions, or suggestions on how to improve it, feel free to share them in the comments. If the article has been helpful, share it with your developer friends!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Mohamed Yahia - Oct 16 Ege Aytın - Oct 17 Rhys - Oct 16 tech foutraque - Oct 16 Once suspended, argonauta will not be able to comment or publish posts until their suspension is removed. Once unsuspended, argonauta will be able to comment and publish posts again. Once unpublished, all posts by argonauta will become hidden and only accessible to themselves. If argonauta is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Riccardo Tartaglia. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag argonauta: argonauta consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging argonauta will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.