🚀🚀🚀Astro：一个可以同时写React、Vue、Svelte、SolidJS等多种语言的框架

// 全局安装
npm i -g astro
// 初始化项目
npm create astro@latest

---
// 组件脚本（JavaScript）
---
<!-- 组件模板（HTML + JS 表达式）-->

- <div className="box" dataValue="3" />
+ <div class="box" data-value="3" />

---
// 包含多个元素的模板
---
<p>无需将元素包装在单个容器元素中。</p>
<p>Astro 支持模板中的多个根元素。</p>

---
---
<!-- HTML 注释语法在.astro 文件中是有效的 -->
{/* JS 注释语法也是有效的 */}

---
const name = "Astro";
---
<div>
  <h1>你好 {name}!</h1>  <!-- 输出 <h1>Hello Astro!</h1> -->
</div>

---
const name = "Astro";
---
<h1 class={name}>支持属性表达式</h1>
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />

---
const htmlString = '<p>Raw HTML content</p>';
---
<Fragment set:html={htmlString} />
<>helloe!!!</>

---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- 渲染成 <div>Hello!</div> -->
<Component /> <!-- 渲染成 <MyComponent /> -->

<style>
  h1 {
    color: red;
  }
  .text {
    color: blue;
  }
</style>

<style is:global>
  h1 {
    color: red;
  }
  .text {
    color: blue;
  }
</style>

// <button class="alert" onClick={onClick}>Click me!</button>
// 上面的点击写法是无效的
<button class="alert">Click me!</button>
<script>
  // 在页面上找到所有带有 `alert` 类的按钮。
  const buttons = document.querySelectorAll('button.alert');
  // 处理每个按钮上的点击事件。
  buttons.forEach((button) => {
    button.addEventListener('click', () => {
      alert('按钮被点击了！');
    });
  });
</script>

<!-- 原先 -->
<span class:list={[ 'hello goodbye', { world: true }, [ 'friend' ] ]} />
<!-- 输出 -->
<span class="hello goodbye world friend"></span>

---
const rawHTMLString = "Hello <strong>World</strong>"
---
<h1>{rawHTMLString}</h1>
  <!-- 输出：<h1>Hello &lt;strong&gt;World&lt;/strong&gt;</h1> -->
<h1 set:html={rawHTMLString} />
  <!-- 输出：<h1>Hello <strong>World</strong></h1> -->

<BuyButton client:load />
<ShowHideButton client:idle />
<HeavyImageCarousel client:visible />
<SidebarToggle client:media="(max-width: 50em)" />
<SomeReactComponent client:only="react" />
<SomePreactComponent client:only="preact" />
<SomeSvelteComponent client:only="svelte" />
<SomeVueComponent client:only="vue" />
<SomeSolidComponent client:only="solid-js" />

npx astro add react

import { defineConfig } from 'astro/config';
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
  integrations: [react()]
});

import React from "react"
import { useState } from "react"
const ReactComponent = () => {
  const [count, setCount] = useState(0)
  return <div onClick={() => setCount(count + 1)}>React：{count}</div>
}
export default ReactComponent

---
import Layout from '../layouts/Layout.astro';
import ReactComponent from "../components/ReactComponent";
---
<Layout title="Welcome to Astro.">
    <main>
        <ReactComp client:load></ReactComp>
    </main>
</Layout>