Astro as a languange

Will I have to learn a new programming language?

TLDR; no. If you know HTML, you already know enough to write an Astro component. At its core, its syntax is a superset of HTML. Capable of anything any other UI framework component can do, they are designed to feel familiar to anyone with HTML and JSX experience without any unnecessary complexity.

All Astro components are incredibly lean and have access to fetch remote data at build time, taking advantage of top-level await inside their component’s script to render data in its component’s template.

/*** @file MyComponent.astro */
---
// Component Script (JavaScript)
---
<!-- Component Template (HTML + JSX Expressions) -->

Astro components are dynamic but NOT reactive

Unless you use Astro in SSG mode, Astro components are templates that only run once, at build time. Therefore, their values are dynamic (NOT reactive) and will never change. Let’s check out some of the great features Astro brings to the table as opposed to conventional components:

---
// Template with multiple elements
const DynamicTag = 'div'; // Dynamic Tags
const items = ['2020', '2021', /*...*/]; // Fragments
const visible = true; // Conditionally display
---
<DynamicTag>Hello!</DynamicTag> // renders as <div>Hello!</div>

<p>
  Astro supports multiple root elements in a template. Bye `<>`!
  However, when using an expression to dynamically create
  multiple children there is no need to declare a `key` but
  you should wrap these inside a fragment as usual.
</p>

<ul>
  {items.map(item => (
    <>
      <li>Halloween {item}</li>
      <li>Thanksgiving {item}</li>
    </>
  ))}
</ul>

<p>Astro supports either `<Fragment/>` or its shorthand `<></>`.</p>

{visible && <p>I'm alive!</p>} // This WILL show

However, writing content in HTML can be a monumental task out of itself. Which brings us to the question: How does Astro integrate local or remote content using Markdown or MDX?