Astro + React: Подключение и использование React-компонентов

npx astro add react

// astro.config.mjs (после установки)
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});

---
import StaticHeader from './StaticHeader.astro'; // Astro-компонент — нет JS
import ReactCounter from './ReactCounter.jsx'; // React-компонент

// Данные передаются в React-компонент как пропсы
const initialCount = 0;
---

<!-- Статичный HTML, без JS -->
<StaticHeader />

<!-- Клиентский JS загружается немедленно -->
<ReactCounter count={initialCount} client:load />

<!-- Клиентский JS загружается когда компонент попадает в viewport -->
<ReactCounter count={initialCount} client:visible />

<!-- JS загружается при простое браузера -->
<ReactCounter count={initialCount} client:idle />

// src/components/SearchBox.tsx
import { useState, useEffect } from 'react';

interface Post {
  title: string;
  url: string;
  description: string;
}

interface Props {
  posts: Post[];
}

export default function SearchBox({ posts }: Props) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<Post[]>([]);

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      return;
    }
    const q = query.toLowerCase();
    setResults(
      posts.filter(
        (p) =>
          p.title.toLowerCase().includes(q) || p.description.toLowerCase().includes(q),
      ),
    );
  }, [query, posts]);

  return (
    <div className="search-box">
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Поиск по статьям..."
        className="search-input"
      />
      {results.length > 0 && (
        <ul className="search-results">
          {results.map((post) => (
            <li key={post.url}>
              <a href={post.url}>
                <strong>{post.title}</strong>
                <span>{post.description}</span>
              </a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

---
import { getCollection } from 'astro:content';
import SearchBox from '../components/SearchBox.tsx';

// Данные собираются на сервере при сборке
const articles = await getCollection('articles');
const posts = articles.map((a) => ({
  title: a.data.title,
  url: `/articles/${a.id.replace('.mdx', '')}/`,
  description: a.data.description,
}));
---

<!-- posts передаётся в React как сериализованный JSON -->
<SearchBox posts={posts} client:visible />

import { useState, useCallback, useRef } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = useRef(count);

  const increment = useCallback(() => {
    prevCount.current = count;
    setCount((c) => c + 1);
  }, [count]);

  return (
    <div>
      <p>
        Текущее: {count}, Прошлое: {prevCount.current}
      </p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

---
// Простые типы — передаются напрямую
const title = 'Привет, React!';
const count = 42;
const tags = ['Astro', 'React'];
const config = { theme: 'dark', lang: 'ru' };

import MyReactComponent from '../components/MyReactComponent.tsx';
---

<MyReactComponent title={title} count={count} tags={tags} config={config} client:load />

---
import Modal from '../components/Modal.tsx';
---

<Modal title="Подтвердите действие" client:load>
  <p>Вы уверены, что хотите удалить элемент?</p>
  <button>Отмена</button>
</Modal>

// Modal.tsx
interface Props {
  title: string;
  children: React.ReactNode;
}

export default function Modal({ title, children }: Props) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Открыть</button>
      {open && (
        <div className="modal">
          <h2>{title}</h2>
          {children}
          <button onClick={() => setOpen(false)}>✕</button>
        </div>
      )}
    </>
  );
}

// Правильно: Context внутри одного острова
import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext<'light' | 'dark'>('light');

export default function ThemedApp() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  return (
    <ThemeContext.Provider value={theme}>
      <ThemeToggle onToggle={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))} />
      <ThemedContent />
    </ThemeContext.Provider>
  );
}

function ThemedContent() {
  const theme = useContext(ThemeContext);
  return <div className={`theme-${theme}`}>...</div>;
}