🌟

Astroチュートリアルメモその3-1,2【コンポーネント】

2022/11/04に公開

チュートリアルでは3の1と2。

Astroでコンポーネントを扱う。

Reactとほとんど同じ。

コンポーネント用のastroファイルを作り、読み込みたいページでimportする。

コンポーネントを作成

チュートリアルではsrc/components/というフォルダを作り、そこに保存している。

Next.jsなどでも、似たような形でフォルダを作るが、それと同じでフォルダ名に決まりはない。レイアウトなどのコンポーネントを作ることもあり、それらはプロジェクトによって異なる。

前に作った各ページへのリンク部分をナビゲーションコンポーネントとして独立させる。

src/components/Navigation.astro

---
---
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>

作ったコンポーネントは各ファイルでimportして使う。

src/pages/index.astro

---
import Navigation from '../components/Navigation.astro';
---
//抜粋

<Navigation />

Reactと同じように、Astroでもコンポーネント内でコンポーネントを呼び出せる。

先ほどのナビを別のコンポーネントで呼び出し、ヘッダーコンポーネントとして使用する。

src/components/Header.astro

---
import Navigation from "../components/Navigation.astro";
---

<header>
  <nav>
    <Navigation />
  </nav>
</header>

index.astroなどではimport文と本文を書き換え、<Header />を使うことでコンポーネントを呼び出す。

チュートリアルではその後、Navigationコンポーネントのクラス指定でCSSをつけて、レスポンシブになるようにしている。