Astro

CLIが提供されているのでそのまま使ってみる。今回はpnpmを利用する。

# create a new project with npm
npm create astro@latest

# or yarn
yarn create astro

# or pnpm
pnpm create astro@latest

hanetsuki

astroのベース環境が作成できた。

hanetsuki

Reactを使えるようにする。

astro add react

hanetsuki

TypeScript化

pnpm add -D @types/react @types/react-dom typescript

mv astro.config.mjs astro.config.ts

hanetsuki

Card.tsx

import {ElementType, ReactNode} from 'react'

type Props = {
  as?: ElementType
  children: ReactNode
}

export default ({as: Tag = 'div', children}: Props) => {
  return (
    <Tag>
      {children}
    </Tag>
  )
}

index.astro

---
import Card from "../components/Card";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
    <Card as="p">
      test
    </Card>
  </body>
</html>

hanetsuki

ちょっと触ってみたが使用感はいまいちピンとまだきてない。
ビルド結果あたりでなるほどと思えることがあるんだろうか🤔

このスクラップは2022/07/18にクローズされました