🌟

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

2022/11/04に公開約1,100字

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

https://docs.astro.build/en/tutorial/3-components/1/

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をつけて、レスポンシブになるようにしている。

次の記事

https://zenn.dev/k_neko3/articles/365f03d15d9bef

Discussion

ログインするとコメントできます