DEV Community

loading...

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

nomoredeps profile image NoMoreDeps ใƒป3 min read

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")));
Enter fullscreen mode Exit fullscreen mode

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

<div>
  <div>Hello</div>
</div>
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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++) {
  ...
}
Enter fullscreen mode Exit fullscreen mode

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" };
Enter fullscreen mode Exit fullscreen mode

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/>;
Enter fullscreen mode Exit fullscreen mode

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...

Discussion (4)

pic
Editor guide
Collapse
tracker1 profile image
Michael J. Ryan

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.

Collapse
nomoredeps profile image
NoMoreDeps Author

Yeah, I Remember too the time Babel was named 6to5 lol

Collapse
gr3g profile image
Greg Motyl

I remember when I saw JSX for the very first time... I had similar feelings. Today, I love it too ๐Ÿ˜ƒ

Collapse
realjonahgeek profile image
Jonathan Mwebaze

Awesome article, reactjs is truly a blessing