React: How do you separate the view layer from domain logic?

I have gone on record saying how much I hate JSX, but it’s how people write React, so it’s not optional for someone calling himself a front end developer. The reason I hate it is that it requires you to intermingle JavaScript code with something that looks mostly like HTML all in the same blob of text. I do find that unpleasing aesthetically. But my main reason for not liking this is that it encourages us to write the view layer and the domain logic together in large intermingled blobs very much like those old web pages that were just one giant PHP script 10 years ago.

That said, I’m still learning React. I haven’t studied much how other people write in React beyond small, simple examples. Such examples do not illustrate how to avoid the ugliness I mean to avoid. I remain hopeful however that there are good practices in place somewhere that we can learn.

Here’s an article that looks relevant: https://dev.to/tomekbuszewski/high-level-view-and-logic-separation-in-react-39n0. However it does begin with the sentence, “One of React’s greatest strengths is the ability to separate the view from the logic.” That makes me skeptical. Assuming all known programming languages are logically equivalent, I guess you can separate view from logic in machine code. The relevant question is whether it’s easy, whether the language lends itself to that. This guy suggests you need to write two different “components” to separate the view from the logic. The fact that some React expert suggested that suggests to me that React by its nature strongly discourages separation of view from logic.

Today I have been building a small React widget that helps us estimate the daily amount of a drug in the bloodstream assuming the same dosage every day and assuming the drug has a known elimination half-life. That information is published for just about any well-known drug. The source code is here: https://github.com/xerocross/drug-steady-state . As of this writing, it is still a work in progress. I wrote a large, ungainly component file, and I don’t like that. Thus, the main thing that interests me now is to learn/develop a good reusable technique for separating things without adding too much extra fluff.

I’m starting to think that in React we have to write “components” as dumb views and move all of the domain logic into helper modules. Practically speaking, this is very similar to having two different React “components” as suggested in the article linked above. But I see a semantic difference. Having a view component and a logic component seems like it means that react’s notion of what a component is is flawed.

I have one important domain logic functions and a few helper functions it calls. I can remove that domain logic into another module easily enough. It’s astonishing how long the remaining file is, and now it’s all just React fluff and view logic. Parts of the view could be factored out into smaller components, but right now I see no value in that. And lets not forget useful code like the following.

this.handleHalfLifeChange = this.handleHalfLifeChange.bind(this);
this.handleDosageChange = this.handleDosageChange.bind(this);
this.increaseNumDays = this.increaseNumDays.bind(this);

I’m not sure much more can be done. Maybe React is just verbose and ugly.