最初の観察

27247 ワード
hydration astro partial vite テキストリンク
Astro オープンソースのWebフレームワークはIslands Architecture . それはフレッドK . Schott、マシューフィリップス、ネイトムーアによって作成され、仕事の成長としての力を同時に積雪とSkypackで行われている.

概略

  • Introduction
  • Partial Hydration
  • Client Directives

  • Set up
  • Create project and install Astro dependency
  • Add CLI Commands
  • Create a Page
  • Start Development Server

  • Add Components
  • Create a Markdown Component
  • Create a React Component
  • Create a Svelte Component

  • Deploy to Netlify
  • Create a GitHub Repository
  • Connect GitHub Repository to Netlify

    • 導入
    フレームワークは、部分的な水和と主流のウェブ開発会話に「相互作用の島」の概念をもたらすために、かなりの量の信用に値します.

    部分水和
    私はこれを持っているが、ここに要約です.会話は10年以上もの間、fringesで存在していました.完全にこれらのテクニックをサポートした最初のフレームワークは、マルコは、2014年に作成されたが、2019年頃まで奇数カモのまま.
    しかし、最後の2年間では、同様の動機付けとSlinkity、高齢者を含む先行技術の描画フレームワークの流入があった.JSは、les lesとqwik.フレッドK . Schottは、建築と目標を説明しますIntroducing Astro: Ship Less JavaScript (June 8, 2021) :

    Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro.

    In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. The result is a fully static website with all JavaScript removed from the final page.


    多くのフレームワークがありますがReact , Vue , and Svelte これにより、ビルド時に静的HTMLにコンポーネントをレンダリングできます.クライアントにこれらのプロジェクトを水和させたい場合は、静的なHTMLと一緒に依存関係の全バンドルを出荷する必要があります.一方、Astroには、単一のコンポーネントとそのコンポーネントが必要となる依存関係を読み込む機能が含まれます.

    クライアントディレクティブ
    アストロは5を含むclient:* 実行時にクライアントにコンポーネントを水和させる指示.ディレクティブは、コンポーネントをどのようにレンダリングするかを示すコンポーネント属性です.
    指令
    説明<Component client:load />コンポーネントをページロードで水和します.<Component client:idle />メインスレッドが解放されるとすぐにコンポーネントを水和します.<Component client:visible />要素がビューポートに入るとすぐに、コンポーネントを水和します.<Component client:media={QUERY} />ブラウザが指定したメディアクエリにマッチするとすぐにコンポーネントを水和します.<Component client:only />ページロードでコンポーネントを水和させるclient:load . コンポーネントはビルド時にスキップされます.

    設定する
    このチュートリアルでは、フレームワークがどのように動作するかをより良い方法であると信じているので、スターターテンプレートのいずれかを使用する代わりに、ゼロからAstroプロジェクトを構築しますtemplates 本当に素晴らしいです.
    このチュートリアルのコードはすべて見つかりますon my GitHub .

    プロジェクトの作成とインストール
    プロジェクト用の新しいディレクトリを作成します.cd プロジェクトに初期化するpackage.json ファイルをインストールしますastro 依存.
    mkdir ajcwebdev-astro
cd ajcwebdev-astro
yarn init -y
yarn add -D astro
echo 'node_modules\ndist\n.DS_Store' > .gitignore

    CLIコマンドを追加する
    次のスクリプトを追加しますpackage.json .
    "scripts": {
  "dev": "astro dev",
  "start": "astro dev",
  "build": "astro build",
  "preview": "astro preview"
},
    すべてのコマンドはプロジェクトのルートから実行されます.
  • yarn dev and yarn start 両方ともローカル開発サーバーを起動しますlocalhost:3000 .
  • yarn build 生産サイトを構築する./dist .
  • yarn preview 展開する前にローカルビルドをプレビューします.

    • ページを作る
    アストロルックス.astro or .md 中のファイルsrc/pages ディレクトリ.各ページは、そのファイル名に基づいてルートとして公開されます.画像などの静的資産は、public ディレクトリ.
    mkdir -p src/pages public
touch src/pages/index.astro
    インサイドsrc/pages ディレクトリ作成index.astro ファイル.
    <!-- src/pages/index.astro -->

--------
let title = 'ajcwebdev-astro'
--------

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <title>{title}</title>
  </head>

  <body>
    <main>
      <header>
        <div>
          <h1>ajcwebdev-astro</h1>
        </div>

        <p>Hello! This is an example Astro project by Anthony Campolo (ajcwebdev).</p>
      </header>
    </main>

    <footer>
      <h3>Find me on the internet:</h3>

      <ul>
        <li><a href="https://github.com/ajcwebdev">GitHub</a></li>
        <li><a href="https://twitter.com/ajcwebdev">Twitter</a></li>
        <li><a href="https://dev.to/ajcwebdev">DEV</a></li>
      </ul>
    </footer>
  </body>
</html>

    開発サーバ
    yarn dev
    オープンlocalhost:3000 ホームページをご覧ください.


    コンポーネントの追加
    ディレクトリ名を作成しますcomponents 内部src 任意のアストロ/反応/Vue/svelte/preactのコンポーネントを保持する.その後、我々は保持する3つの余分なディレクトリを作成します.astro , .jsx , and .svelte Markdownのためのファイル、反応して、それぞれsvelteコンポーネント.

    マークダウンコンポーネントを作成する
    最初の例では、Markdownを使用し、静的にレンダリングします.アストロは、ビルトイン Markdown component それはどんなものにもインポートできます.md ファイル.
    mkdir -p src/components/markdown
touch src/components/markdown/HelloMarkdown.astro
    インポートMarkdown コンポーネントastro/components とマークダウンを書きます.
    <!-- src/components/markdown/HelloMarkdown.astro -->

--------
import { Markdown } from 'astro/components';
--------

<article>
  <section>
    <h2>Markdown</h2>

    <Markdown>
      ### This is an h3 with Markdown

      *Pretty* **cool**, ***right***?

      * Unordered
      * List

      1. Ordered
      2. List
    </Markdown>
  </section>
</article>
    復帰index.astro インポートHelloMarkdown から'../components/markdown/HelloMarkdown.astro' . 場所<HelloMarkdown /> インサイドmain タグ.
    <!-- src/pages/index.astro -->

--------
import HelloMarkdown from '../components/markdown/HelloMarkdown.astro';

let title = 'ajcwebdev-astro';
--------

<html lang="en">
  <head>
    ...
  </head>

  <body>
    <main>
      <header>
        ...
      </header>

      <HelloMarkdown />
    </main>

    <footer>
      ...
    </footer>
  </body>
</html>


    反応コンポーネントの作成
    Astroを設定するには、astro.config.mjs プロジェクトのルートでファイルします.すべての設定はオプションであり、デフォルトの設定に関する情報を含む完全な設定APIを見ることができますGitHub .
    touch astro.config.mjs
    次のコードを追加しますastro.config.mjs 反応レンダラを有効にし、Response JSXコンポーネントのサポートを提供します.
    // astro.config.mjs

export default ({
  renderers: [
    '@astrojs/renderer-react'
  ],
})
    私たちはreact ディレクトリをHelloReact.jsx コンポーネント内部.
    mkdir src/components/react
touch src/components/react/HelloReact.jsx
    それはあなたが契約しているので、反応のコンポーネントですuseState それはonClick イベントハンドラ<button> .
    // src/components/react/HelloReact.jsx

import { useState } from 'react'

export default function HelloReact({ children, count: initialCount }) {
  const [count, setCount] = useState(initialCount)

  const add = () => setCount((i) => i + 1)
  const subtract = () => setCount((i) => i - 1)

  return (
    <>
      <div className="children">
        {children}
      </div>

      <div className="counter">
        <button onClick={subtract}>-</button>

        <pre>{count}</pre>

        <button onClick={add}>+</button>
      </div>
    </>
  )
}
    インポートHelloReact コンポーネントはHelloMarkdown コンポーネント.しかし、今回我々は含まれているsomeProps 初期設定で初期設定count to 0 .
    <!-- src/pages/index.astro -->

--------
import HelloMarkdown from '../components/markdown/HelloMarkdown.astro'
import HelloReact from '../components/react/HelloReact.jsx'

const someProps = {
  count: 0,
}

let title = 'ajcwebdev-astro'
--------

<html lang="en">
  <head>
    ...
  </head>

  <body>
    <main>
      <header>
        ...
      </header>

      <HelloMarkdown />

      <HelloReact {...someProps} client:visible>
        <h2>React</h2>
      </HelloReact>
    </main>

    <footer>
      ...
    </footer>
  </body>
</html>
    また、含まれてclient:visible 要素がビューポートに入るとすぐに、コンポーネントを水和させます.


    Svelteコンポーネントを作成する
    追加renderer-svelte to renderers インastro.config.mjs svelteレンダラを有効にするには、svelteコンポーネントのサポートを提供し、あなたの空き時間にsveltekitを十分に書き換えることができます.Svelteはとてもクールです.私はまだ仕事でsvelteを書くことができますか?
    // astro.config.mjs

export default ({
  renderers: [
    '@astrojs/renderer-react',
    '@astrojs/renderer-svelte'
  ],
})
    あなたはドリルを知っている.
    mkdir src/components/svelte
touch src/components/svelte/HelloSvelte.svelte
    私たちのsvelteコンポーネントは、我々の反応コンポーネントと同じ機能を含みます.
    <!-- src/components/svelte/HelloSvelte.svelte -->

<script>
  let count = 0

  function add() {
    count += 1
  }

  function subtract() {
    count -= 1
  }
</script>

<div class="children">
  <slot />
</div>

<div class="counter">
  <button on:click={subtract}>-</button>

  <pre>{ count }</pre>

  <button on:click={add}>+</button>
</div>

    輸入HelloSvelte に設定するclient:visible .
    <!-- src/pages/index.astro -->

--------
import HelloMarkdown from '../components/markdown/HelloMarkdown.astro'
import HelloReact from '../components/react/HelloReact.jsx'
import HelloSvelte from '../components/svelte/HelloSvelte.svelte'

const someProps = {
  count: 0,
}

let title = 'ajcwebdev-astro'
--------

<html lang="en">
  <head>
    ...
  </head>

  <body>
    <main>
      <header>
        ...
      </header>

      <HelloMarkdown />

      <HelloReact {...someProps} client:visible>
        <h2>React</h2>
      </HelloReact>

      <HelloSvelte client:visible>
        <h2>Svelte</h2>
      </HelloSvelte>
    </main>

    <footer>
      ...
    </footer>
  </body>
</html>


    Netlifyへの配備
    アストロドキュメントにはa dozen different deployment options . プロジェクトをNetlifyに展開します.
    クリエイトアnetlify.toml ビルド設定ファイルです.
    touch netlify.toml
    追加yarn build ビルドコマンドとdist を返します.
    [build]
  command = "yarn build"
  publish = "dist"
    我々の最終的なプロジェクト構造は、ここにあります.
    /
├── public/
├── src/
│   ├── components/
│   │   ├── markdown/
│   │   │   └── HelloMarkdown.astro
│   │   ├── react/
│   │   │   └── HelloReact.jsx
│   │   └── svelte/
│   │       └── HelloSvelte.svelte
│   └── pages/
│       └── index.astro
├── netlify.toml
└── package.json

    githubリポジトリを作成する
    git repoを初期化し、githubリポジトリにプッシュします.
    git init
git add .
git commit -m "svreactro"
gh repo create ajcwebdev-astro
git push -u origin main

    に接続します
    あなたのGithubリポジトリをnetlifyに接続します.

    「サイト設定」に移動し、カスタムドメイン名を指定します.

    オープンajcwebdev-astro.netlify.app 配備されたサイトを見るには.

    おめでとう、あなたは現在、マイクロフロントエンドの専門家であり、あなたの上司に25〜30 %の賃金バンプを求めることが許されます.
    What is React?
    [白俊]231号:分解合(Python)