Does react have a markup binding syntax? - reactjs

Question

I'm learning React and this is the way my tutorial says to bind, say, a table to a javascript array of Article objects:
<table>
<tbody>
{
articles.map(a =>
{
return <tr>
<td>
{a.property1}
</td>
<td>
{a.property2}
</td>
</tr>
})
}
</tbody>
</table>
I had been using knockout js, which supports a syntax that seems much more natural for this, in that it doesn't have all the curly braces and parentheses, which makes it much easier to see the structure of the HTML that you're trying to produce:
<table>
<tbody>
<tr data-bind="foreach: a in articles">
<td>
{a.property1}
</td>
<td>
{a.property2}
</td>
</tr>
</tbody>
</table>
Does React have a similar declarative style syntax?

Answer 1

JSX is just syntax sugar for JavaScript. This:
<tbody>
{
articles.map(a =>
{
return <tr> ...
gets transpiled to:
React.createElement('tbody', null,
articles.map(a => {
return React.createElement('tr', null,
// <td> elements
)
})
)
The brackets {} are needed in the JSX when interpolating a JavaScript expression into JSX, to indicate that what followed should be parsed as JavaScript rather than as JSX's HTML-like markup - that is, there's no way around the { in
<tbody>
{
articles.map(
in order to interpolate the articles into the <tbody>.
The best you'll be able to do is remove the { and return and use the arrow function's concise return in the .map callback:
<table>
<tbody>
{
articles.map(a => <tr>
<td>
{a.property1}
</td>
<td>
{a.property2}
</td>
</tr>
)
}
</tbody>
</table>
One of the arguable main benefits of React (for new learners who already know JS) is that it's just JavaScript, other than a few additional syntax rules about JSX. So there's no special syntax like foreach: a in articles - instead, the ordinary JavaScript logic for looping over an array is used, articles.map(a =>.