アストロとの邪悪な高速サイトを構築:入門

7724 ワード
astro react javascript テキストリンク
つのシーンのホットな新しいフレームワークですAstro , そして、それはすべての配送の少ないクライアント側のJavascriptです.私は気まぐれに与えることに決めて、反応を書くことができることにかなり満足していました、そして、私が望むときだけ、スクリプトをロードするとき、即時のパフォーマンス利益を見てください.
アストロはまだその初期の人生(初期の書き込み時に0.17.3)ですが、すでにそれと遊ぶ人々の素晴らしいコミュニティを行っています.彼らに加わって、それを試しましょう!

箱から出るもの


アストロは何もインストールすることなく、かなりのビットが付属しています!

アストロファイル

.astro ファイルは主にHTMLですが、いくつかのJavaScriptのグッズです.あなたがHTMLとJSで快適であるならば、あなたは.astro .
これら.astro ファイルはJSXとFrontMatterからいくつかの非常に強力なテンプレートを作成する概念を借りる.例えば、
---

// Area A

import MyComponent from './MyComponent.astro'

let name = 'Cassidy'
let food = ['apple', 'banana', 'cake']

---

<!--Area B-->

<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <MyComponent></MyComponent>

    {name} was here
    <ul>
      {food.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  </body>
</html>
上記のコードスニペットの「領域A」は「フロントエンド」スクリプトです.JavaScriptとTypesScriptの両方と完全に互換性があり、他のコンポーネントをインポートすることもできます.これはページビルド時に実行されます.この領域は完全に任意であるので、あなたがそれを必要としないならば、あなたは完全にそれを取り除くことができます.
「地域B」は、私の意見では、本当にアストロが光るところです.それはちょうどHTMLです.ないまで.あなたがインポートするコンポーネント(あなたが選択したフレームワークにおいて、あなたが反応し、VUEが並んでいることができるように)を追加することができます<head> , そしてもっとたくさん.
これら.astro ファイルもprops , だから、お互いの内のコンポーネントとして使用することができますし、フロントエンドで指定された値をインポート!
もっと力がある.astro 私がここに言ったより多くの構成要素.here's the docs あなたがより読みたいならば.

あなたの好きなフレームワークとライブラリのレンダラ


アストロは自動的に反応するためのレンダラ、Vue、Svelte、およびpreactで構成されて!これらのフレームワークを実際にインストールする必要はありません.You can override this , 任意のレンダラを追加または削除したい場合.
また、ボックスのマークダウンをサポート.md あなたが作るかもしれないファイル<Markdown> あなたのコンポーネント.astro ファイルも!
あなたは疑問に思うかもしれませんねあなたは正しい.あなたがAstroでどんな反応/Vue/どんな構成要素でもするとき、それはデフォルトでそのコンポーネントのためにHTMLをレンダリングするが、クライアント側のインタラクションではありません!あなたのコンポーネントを使用したい場合は、決して恐れて、いくつかのbuilt-in hydration オプション:
  • <MyComponent client:load /> レンダリングするMyComponent ページロード
  • <MyComponent client:idle /> レンダリングするMyComponent すぐにメインスレッドは無料です
  • <MyComponent client:visible /> レンダリングするMyComponent 要素がビューポートに入るとき(ユーザがスクロールするとき)

    • ページベースのルーティング


    最近の他の多くのフレームワークと同様にpages/ ディレクトリはすでにビルドされ、.astro or .md ファイル内のファイルが自動的にあなたのアプリケーションのルートになります.
    これは完全に構成されているので、もしあなたが別のディレクトリであなたのルートをポイントしたい場合は、することができます!
    また、データからページを生成するコレクションと呼ばれるものを作ることもできます!したがって、たとえば、あなたがブログの記事のCMSを持っている場合は、そのAPIからルートとページをプルして生成することができます.あなたも、グループのコンテンツをすることができますし、ページネーションは、同様に組み込まれています.コレクションAPIは、Astro柱から来て、そしてis documented here .

    スタイリングと国家管理


    スタイリングと状態管理はまだAstroの初期の実装ですが、かなりサポートされています.
    ボックスから、グローバルCSSがサポートされており、スコープのCSSとCSSモジュールの周りにいくつかの制限があります.あなたはstyling quickstart 詳細については、しかし、可能性は、スタイルにあなたの好きな方法が可能です.
    状態管理に関して、あなたが望むサポートは、あなたが使うフレームワーク/図書館に依存します.反応のために、文脈API、反跳とJOTAIは現在完全に支持されます、そして、Reduxは部分的に支えられます.Vueは部分的なVuexをサポートしており、Svelteは完全なsvelteの店をサポートしています.Their team is open to PRs and issues あなたが好きなものが組み込まれていない場合.

    アンド


    また、サポートされているAstroでは、サイトマップやカスタム構成を含む.チェックアウトdocs あなたがすべてを読みたいならば.
    それまでは、ビルドしましょう!

    始める


    まず第一に、あなたはノードを必要とするでしょう.マシン上のJS、特に14.15.1の最小バージョン.これは、ESモジュール(またはESM)を使用して構築されているため、これを使用することができますのでimport あなたの心臓の内容への声明.アディオスrequire !
    新しいディレクトリを作ってから、
    npm init astro
    これは、彼らのスターターキットといくつかの他のオプションから選択できるアプリケーションのテンプレートセレクタをプルアップします.私はスターターキットと一緒に行きました.なぜなら、私はスノボで、自分のものを作るのが好きだからです.その後、先に行くことができますnpm install そして、あなたが望むならば、あなたのGitnpm start .
    そしてそれで、あなたはレースにオフです!デフォルトのページでは、プロジェクトの構造が表示されます.デフォルトではastro.config.js .

    助けて！


    私の小さな開発者ラム心配しないでください、私はあなたを持っている.

    上のこのボタンをクリックするとan Astro starter project Netlifyであなたのために、あなたのgithubにそれをクローンします.それはあなたが学んだAstroのデフォルトのすべてを含んでいるでしょう、そして、サンプルは反応するために成分に反応します!
    または、CLIを使用したい場合は、次のように実行できます.
    npm init astro my-new-project --template cassidoo/astro-netlify-starter
    次回まで!
    [白俊]3048/アリ
    sql serverソートルール