JSX alternatives

JSX alternatives
Average rating: 1
(2 votes)

Thanks! You’ve rated this material!

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.

JSX is a domain-specific language, which means that we need to transform our code with JSX in order to get regular JavaScript, otherwise browsers won’t understand our code.

  • 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 React.createElement or 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 null, and 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 hconstantly.

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!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111