让我们使用Zero JS进行构建吧

首先

※这是 KWC 2022 年农历节日每日文章的第11天文章。

你好，我在KDDI Web Communications工作，是一名前端工程师，我叫Pike。这是我第一次使用Qiita。
我想介绍的是”Astro”。使用Astro，你可以使用前端框架（例如vue、angular、react）的全部功能。Astro还可以自动使用Github Actions进行部署。

为什么要转到Astro？

• github actions が既にある

• ゼロJS からビルドする（ユーザーさんに早い, bundleが小さい、lazy loadingもあり）

• 「framework」はどれでも良い (bring your own framework)

• 他の「framework」(next, nuxt, remix)　と似てる

JSXでかける

这个版本有哪些改变？

• サーバファスト：必要のJSのみを使う。(lazy loading, server side rendering)

folder-based-routing: react-routerなどは必要ない

我们开始吧

npm create astro@latest

将代码部署到GitHub Pages。

• deploy instructions

• astro.config.mjs を編集して

• import { defineConfig } from ‘astro/config’

export default defineConfig({
site: ‘https://astronaut.github.io’,
base: ‘/my-repo’,
})

.github/workflows/deploy.yml を作って

• 確認する：

AstroTemplate

React添加

• npm install –save-dev @astrojs/react react react-dom

$: vi components/ReactComponent.jsx

import React from "react";

const ReactComponent = () => {
    return (
        <div>Hello I'm a ReactComponent</div>
    )
}
export default ReactComponent

astro.config.mjs　に　reactを追加する。

import { defineConfig } from 'astro/config'
import react from '@astrojs/react';

export default defineConfig({
  site: 'https://pike-kwc.github.io',
  base: '/astroTemplate',
  integrations: [react()]
})

pages/index.astroに追加する。

import ReactComponent from '../components/ReactComponent.jsx'
...
<ReactComponent />

ほかのframeworkも自由に追加できます！

import react from '@astrojs/react';
import preact from '@astrojs/preact';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
import lit from '@astrojs/lit';
import alpine from '@astrojs/alpinejs';

• ステートを共有が必要であれば、nanostoreが　使える。

npm install nanostores @nanostores/react

表现

最后

非常感谢您阅读到这里。虽然内容几乎像是一份操作指南，但如果能对工程师的各位有所帮助，我将感到非常幸福。KWC 节日日历 2022 还将继续进行！明天也请期待吧！