Why Astro?
Learn why Astro is an ideal choice with easy learning, full customization, multiframework support, and top-notch performance.
We'll cover the following...
Before we begin, let’s discuss why someone would choose Astro in the first place. In this lesson, we’ll explore some of the benefits that Astro offers over other frameworks.
Easy learning curve
One of the main advantages of Astro is its shallow learning curve. Astro’s syntax closely resembles JavaScript XML (JSX), which makes it easy to get started if we already have experience with React. To understand the structure of an Astro component, let’s take the following as an example where we have the layout, styles, and script in the same component. See src/pages/index.astro
in the code example below to inspect the component:
/// <reference path="../.astro/types.d.ts" /> /// <reference types="astro/client" />
Note: When making changes to the interactive widget, rerun the application to apply the changes.
Astro components consist of the following four distinct sections:
Frontmatter: We can see in lines 1–4 that the frontmatter section contains logic that is only available during server-side rendering (SSR). The
text
variable is defined here and can be injected into the Astro template to enable dynamic behavior. In this example, thetext
variable holds the'Toggle Text'
value.HTML layout: Below the frontmatter section, we can write any valid HTML ...