Why React uses, in my opinion, the perfect rendering engine

In 20 years of web development, I have been able to test a lot of libraries, frameworks, and other ways to write components and pages.

As soon as you want to build something a bit advanced, you quickly end up having to use templating engines, to facilitate dynamic rendering.

There have been quite a few different approaches to handling this. We've had server-side approaches, like in Asp and Php, with portions of dynamic code in server tags.

Then came approaches that were more and more focused on client-side rendering, and with them a lot of template engines. The majority of these template engines allow some flexibility, with conditions, loops etc..

But I've never felt fully satisfied with having to integrate directives into HTML code. Of course, placing an ngIf or a v-if is fine, but I find that it gets away from the very essence of what the web has to offer.

The web browser offers HTML templating, CSS styling and Javascript scripting, I never understood why it was so complex not to be able to conciliate this without having to destructure one's thinking to do so.

When I started learning Angular, I had been doing web design for a long time, and I wondered how it could have come to this...

As if the difficulties encountered with the first version of ASP.NET hadn't taught us a lesson... Having such a framework is good... When you come from a backend world practicing C# :-) But it's a bit like seeing the sun through your window knowing that you have to stay locked inside. It's a bit of a hindrance to creativity.

Then one day, I discovered React... and saw this :

render(React.createElement(React.Fragment, null,
    React.createElement("div", null,
        React.createElement("div", null, "Hello")));

O.M.G How you dare write this to target that

<div>
  <div>Hello</div>
</div>

And then I said to myself I will NEVER use this piece of 💩 ... until they added what I call a game changer.

In 3 letters... JSX.

The first time I saw a piece of code in JSX I said : Are you kidding me guys ? You want me to return a HTML tag in the middle of my code ?? 😆

And then I reread it again...

function MyComponent(props: {param: string, list: string[]}) {
  const listBody = (
    <ul>
    {props.list.map(_ => <li>{_}</li>)}
    </ul>
  );

  return (
    <div>
      This is the body with {props.param}
      {listBody}
    </div>
  );
}

And this time I said : These guys are genius...; This is exactly how we need to reconcile HTML and Script together as there was no frontier between them...

Few days later, a friend of mine was looking some React code written in JSX and said : No way, I'm more confortable to explicitly place a directive in a HTML tag, it is more natural than returning HTML in a script !?

Then I asked him how in a simple code, he will write a loop when he wants to write a loop... And the answer was...

for ( let i=0; i<10; i++) {
  ...
}

Yep, obviously, when you want a loop, you write a loop, because you are just using a natural coding skill, the way it should be used.

So I told him if declaring an object as a literal makes him feel unconfortable.

const myObj = { someKey: "someValue" };

And, no, it seems again normal.

So I asked him that if some fields can be declared between 2 curly braces, why it will be more complex to define an object between 2 tags ?

const myDiv = <div>My content<div/>;

The object is clearly defined too, and the result is stored in the myDiv variable. Maybe it is more easy to write complex code by inserting Tags into the code that the reverse.

You have to code the template, not to templatize the code. No need to encapsulate fake code inside strings here. You use HTML with code the easiest way possible.

In the beginning of this post I said Why React uses, in my opinion, the perfect rendering engine.

I'm not saying that React itself is the perfect library, event Vue can use JSX.

What I'm just saying, is that using JSX templating, and in particular with React, makes me feel as free as I always was when designing pure HTML components.

Enjoy, and remember : Don't feed the troll 😄 especially in comments...

Top comments (4)

Michael J. Ryan • Oct 30 '20

Been at web app dev for 25 years here... I actually loved JSX from the start, I did some similar work with e4x, but it was only ever supported in Mozilla browsers, and even then JSX is much better.

It was literally the culmination of everything I'd wanted in a UI framework for JS/HTML. XAML was close-ish, similar for Adobe Flex.. but targetting the browser directly was the real game changer... was already doing babel (6to5?) translations, so it was a natural progression.