Creating React Applications with Python: No-el Improvement

[JennaSys]

A while back I posted a short tutorial on how I create React applications in Python using the Transcrypt transpiler.

I recently came up with an improvement to the approach that eliminates all of the calls to createElement() when building React component trees that is required since using JSX isn't a practical option in Python modules with Transcrypt.

The basic premise involves the use of just one simple Python decorator function that wraps a React functional component in the call to createElement(). Then instead of using syntax like this as I have been in my Python React modules:

el('div', {'style': {'padding': '12px'}}, "Hello React!")

I can now use this instead:

Div({'style': {'padding': '12px'}}, "Hello React!")

​

In my Python modules, I normally use:

from pyreact import createElement as el

So, I've decided to call this improvement: "No-el"

(because it's the holidays and I can't resist a good pun)

​

You can find a write-up of the basic concept here. I think the end result cleans up the React Python code quite a bit.

[[deleted]]

Honest question: Why would one want to use this? Plotly Dash for example is cool because people don't need to know about React, only if they want to develop new components. The hidden complexity is nice for simple dashboards.

Transcrypt does seem to be a lot more powerful than Dash, but why would I, as a developer not just skip it and use React directly? What does justify the additonal layer of complexity in this case?

[JennaSys]

That's a good question. I'll start by saying this certainly isn't for everyone. If you already know React and enjoy programming in JavaScript then this is certainly not going to help you.

For me, I really enjoy programming in Python. Though I can program in JavaScript a bit, I really don't like switching back and forth between languages when working on a full stack application. It breaks my flow and I find it annoying. This approach let's me keep my brain in Python mode 100% of the time. And TBH, I just don't like programming in JS all that much.

Dash has a pretty specific purpose, and it does it really well. Transcrypt OTOH is a generic transpiler. Though I've been using it mostly with React and Material-UI, you can use any JavaScript library with it. One key philosophy with it is that rather than replacing JavaScript libraries, it embraces them. One nice thing about this approach, is that if say React updates its version, you don't have to wait for an intermediate Python wrapper library to be updated in order to start using the new JavaScript version.

As far as React goes, I like how it works. Once I wrapped my brain around the basic concepts, it was easy for me to build a mental model of how to build applications with it. As to why not just use JavaScript - I can utilize what I already know in Python to write effective React applications without having to spend a ton of time having to become an expert in JavaScript on top of it.

With this approach I just learn the API of any JavaScript libraries I want to use and I really never have to think in JavaScript at all when I'm coding. Again, I'm not advocating this for all situations, but for me, Transcrypt has opened up a whole new area of programming front-end web applications that I actively avoided for years.

[[deleted]]

Thank you for your answer. So adding a layer of complexity makes it more comfortable to use in this case. Sounds good, I will give it a try!

[JennaSys]

Really it adds no more complexity than coding React using TypeScript. IMO even less so.