JSX is a very popular choice nowadays for templating in various frameworks, not just in React (or JSX inspired templates). However, what if you don’t like it, or have a project where you want to avoid using it, or just curious how you can write your React code without it? We prepared some JSX alternatives for you.
- Renaming. While the resulting code is perfectly valid, and we can write all our React code in this style, there are several problems with this approach.
- Hyperscript. If you play a bit with either
h, you can see that it has several flaws. To start with, this function requires 3 arguments, so in case there are no properties, you have to provide
className, probably the most common property, requires to write a new object every time.
- If you are not against JSX per se, but don’t like the necessity to transpile your code, then there is a project called htm. It aims to do the same (and look the same) as JSX, but using template literals.
- Lisp-like Syntax. The library ijk brings the idea of writing your templates using only arrays, using positions as arguments. The main advantage is that you don’t need to write
Lool here for some examples how your code can possibly look like.
The world of software development has more than one variant for frontend and one for the backend. Explore also 8 alternative Ruby frameworks. Enjoy!