Zet - What are the core differences between Astro template syntax and React JSX?

What are the core differences between Astro template syntax and React JSX?

Astro uses .astro files with a syntax that resembles JSX but is compiled away at build time.

Key Differences

1. Class vs className

<!-- Astro -->
<div class="container">...</div>

<!-- React -->
<div className="container">...</div>

2. Comments

<!-- This is a comment -->

{/* React comment */}

3. Top-level elements

<!-- Astro - must wrap in single element -->
<div>
  <p>One</p>
  <p>Two</p>
</div>

<!-- React - can return arrays -->
<>
  <p>One</p>
  <p>Two</p>
</>

4. Frontmatter fence

---
const title = "Hello";
const count = 1 + 2;
---

5. No state or lifecycle

Astro components are static by default. Use client:* directives for interactivity:

<Counter client:load />  <!-- Hydrate immediately -->
<Counter client:visible />  <!-- Hydrate when visible -->

6. Conditional rendering

{isLoggedIn ? <Dashboard /> : <Login />}
{showMessage && <Message />}

7. Loops

{items.map((item) => (
  <li>{item.name}</li>
))}

8. Styling

<style>
  .highlight {
    color: red;
  }
</style>

When to Use What

Astro ships zero JavaScript by default unless you explicitly add client:* directives.

#astro #react #frontend #webdev