I recently learnt how to build a web app using Astro JavaScript framework.
As always, I started with the Documentation. I found this Build a Blog Tutorial and started doing it.
Here is what I learnt.
Astro uses file based routing. Web pages are stored in pages directory and files have a .astro extension.
Files start with frontmatter script.
What is a frontmatter script?
It is like a code block except curly braces are replaced with the three dashes each at the beginning and start of the block.
Frontmatter script has JavaScript statements.
After the frontmatter script, we have html.
This makes two sections of an Astro component. It is very similar to React functional component where component is a function that returns JSX.
To quote from the tutorial:
Astro’s templating syntax is similar to JSX syntax. If you’re ever wondering how to use your script in your HTML, then searching for how it is done in JSX is probably a good starting point!
---
const pageTitle = "About Me";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{pageTitle}</title>
</head>
<body>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<h1>{pageTitle}</h1>
<h2>... and my new Astro site!</h2>
<p>
I am working through Astro's introductory tutorial. This is the second
page on my website, and it's the first one I built myself!
</p>
<p>
This site will update as I complete more of the tutorial, so keep checking
back and see how my journey is going!
</p>
</body>
</html>Place this code in a file named about.astro in src/pages directory. Before that you have to actually install Astro.
Run command npm run dev and open http://localhost:4321 in your web browser. This is how you build a web page in Astro.