Translate React syntax to Enhance elements

We’re often asked by React developers why patterns they’ve learned while writing JSX don’t translate to writing web components. In this doc, we’ll describe some common gotchas that developers coming from React or other JavaScript frameworks may run into when writing plain vanilla web components.

String Interpolation

const element = `<h1>${title}</h1>`;

const element = <h1>{title}</h1>;

Attribute Quoting

const image = `<img src="${href}" />`;

const image = <img src={href} />

Rendering Markup from Arrays

const todoList = `<ul>
  ${todos.map((todo) => (
    `<li key="${todo.id}">${todo.text}</li>`
  ))}.join('')
</ul>`

const todoList = <ul>
  {todos.map((todo) => (
    <li key={todo.id}>{todo.text}</li>
  ))}
</ul>

For a more in depth look at the differences between Enhance and React components, read this post on the Begin blog.