Astroの最初の観察、天文学的結果

通常、私は新しいツールとフレームワークの誇大宣伝列車に飛び乗る人ではありません.しかし、アストロは私の興味を起こさせました.
その最も基本的な形で、それはウェブサイトを構築するフレームワークです.
しかし、それはそれより少しであることがわかります!
アストロの背後のチームは、最大のオープンソースプロジェクトからインスピレーションを得て、アストロで彼らの原則を使いました.

アストロがなぜそんなに大きいのか

完全なHTML出力は、JavaScriptを必要としない限り、さらにはオプションが付属しています!

SEO Focussed、サイトマップ統合、RSSフィードが行われ、ページ化とコレクション

Byofのアプローチは、どのようなフレームワークを選択すると、反応して快適な、svelte、vue、またはそれらのどれも🤷‍♂️.

静的HTMLになるコンポーネント

これは、反応のようなインタラクティブなコンポーネントライブラリの間のスーパーコンビネーションのようになります.
アストロもファイルと呼ばれる.astro ファイル.彼らはとても似ている.jsx ファイル!
いくつかのマイナーな違いはexcellent comparison table .
しかし、もちろん、アストロがとても大きい主な理由:
パフォーマンス
それの後ろに狂った理由は、速度インデックスでとてもよいです.それは完全に静的なHTML出力を持つ自然の原因です.
そして、私はそれが大好きです.
もちろん、EureTenも純粋なHTML出力ですが、我々は簡単に再利用することができますJavaScriptのコンポーネントを持っていない.

Astroから始める

最良の方法は任意のフレームワークやツールを開始するには試してみることです.
それで、先に行って、アストロを走らせましょう.
インストールは簡単に入手できます.

# Create folder and navigate to it
mkdir astro-website
cd astro-website

# Init astro project
npm init astro
# Install all dependencies
npm install
# Start Astro!
npm start

Note: The Astro init gives you super cool options for which template and framework to use!

データフェッチ

外部APIからいくつかのデータを取得し、いくつかのカードコンポーネントをレンダリングする超簡単なWebサイトの構築を見てみましょう.
私たちはAnime API 今日の記事のためにtop エンドポイント.
我々のインデックスの上にそれを定義しましょう.アストロファイル.

---
import Card from '../components/Card.astro'
const remoteData = await fetch('https://api.jikan.moe/v3/top/anime/1').then(response => response.json());
---

次に、各結果から次のデータをカードで作成します.

タイトル

イメージ

エピソード

スコア

href (リンクする)

先に行き、すべてのデータオブジェクトをカードにマップしましょう.

<main class="grid">
  {remoteData.top.map((item) =>
  <Card
    title="{item.title}"
    score="{item.score}"
    episodes="{item.episodes}"
    href="{item.url}"
    image="{item.image_url}"
  />)}
</main>

主な要素にグリッドクラスを追加し、スタイル要素を追加することができます.
私は、それが正しくコンパイルすることができるように、言語をSCSSと定義しました.

<style lang="scss">
  .grid {
    margin: 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    @media (max-width: 650px) {
      grid-template-columns: repeat(1, 1fr);
      margin: 2rem;
    }
    gap: 3rem;
  }
</style>

では、このカードコンポーネントがどのように見えるかを見てみましょう.
新しいファイルを作成するCard.astro にcomponents 図書館.

--------
export interface Props {
  title: string;
  image: string;
  episodes: number;
  score: float;
  href: string
}

const { title, image, episodes, score, href  } = Astro.props;
--------
<article>
    <img src={image} alt={title} />
    <div class="content">
        <a href={href}><h2>{title}</h2></a>
        <p>📺 Episodes: {episodes}</p>
        <p>⭐️ Rating: {score}</p>
    </div>
</article>

<style>
    article {
        line-height: 1.5;
        background: #fff;
        border-radius: 8px;
        color: #333;
        overflow: hidden;
    }
    img {
        max-height: 290px;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .content {
        padding: 1rem;
    }
    h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    ul {
        list-style: none;
    }
</style>

私は、このアプローチが非常に満足するとわかります.単にデータをコンポーネントに渡すことができます.
そして、コンポーネント自体は、3つの線の間の定義部分のきれいに造られています--- それは私たちの実際のコードを含んでいます.
そして、変数をバインドするHTMLのセクションがあります.
そして、下には、いくつかの基本的なカードスタイルを追加するスタイル要素があります.
この結果、次のようになります.

ここで見ることもできます.
Astro movie website
のGitHub )

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or