What is Astro's component syntax?

An Astro component is a .astro file with a code fence (---) section and a template section. The code fence is the component script (runs at build time on the server): --- const { title, posts } = Astro.props; const date = new Date().toLocaleDateString(); ---. Below the fence is HTML template: <h1>{title}</h1><p>{date}</p>{posts.map(p => <a href={p.url}>{p.title}</a>)}. Key features: Static by default: Astro components produce no runtime JavaScript. Props: const { name } = Astro.props. Slots: <slot /> for content injection. Client-side scripts: <script>console.log("runs in browser")</script> — bundled and deduplicated. Scoped styles: <style>h1 { color: blue; }</style> — automatically scoped to the component. Unlike React/Vue components, Astro components have no reactivity — they run once at build/request time and produce static HTML.