Unlearning everything

When working with React for the first time, it’s essential to approach it with an open mind. This is because React represents a new way of designing web and mobile applications, breaking away from many traditional best practices.

In the last two decades, we’ve learned that separation of concerns is crucial, often involving separating logic from templates. We aim to write JavaScript and HTML in different files, and various templating solutions have been created to aid developers in achieving this goal.

However, the problem with this approach is that it often creates an illusion of separation. In reality, JavaScript and HTML are tightly coupled, no matter where they live. To illustrate this, let’s consider an example template:

{{#items}} 
  {{#first}} 
    <li><strong>{{name}}</strong></li> 
  {{/first}} 
  {{#link}} 
    <li><a href="{{url}}">{{name}}</a></li> 
  {{/link...