React Islands

Erstelle Islands mit React - der beliebtesten JavaScript Library.

Überblick

Bundle-Größe: 44-45kb (React + ReactDOM Runtime)

React ist am besten für komplexe UIs mit einem großen Ökosystem von Libraries und Components geeignet.

Stattdessen Preact verwenden?

Für die meisten Islands bietet Preact die gleiche API mit nur 4kb Bundle-Größe (10x kleiner). Erwäge Preact für bessere Performance.

Grundstruktur

// islands/counter.jsx
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

function CounterComponent({ title = 'Counter' }) {
  const [count, setCount] = useState(0);

  return (
    <div className="p-6 bg-white rounded-lg border">
      <h3 className="text-lg font-semibold mb-4">{title}</h3>
      <p className="mb-2">Count: {count}</p>
      <div className="flex gap-2">
        <button
          onClick={() => setCount(count - 1)}
          className="px-4 py-2 bg-gray-600 text-white rounded"
        >
          -
        </button>
        <button
          onClick={() => setCount(count + 1)}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          +
        </button>
      </div>
    </div>
  );
}

export default class CounterIsland {
  constructor(element, props = {}) {
    this.root = createRoot(element);
    const initialData = JSON.parse(element.dataset.initialData || '{}');
    this.root.render(<CounterComponent {...initialData} {...props} />);
  }

  destroy() {
    this.root?.unmount();
  }
}

Core Hooks

useState - State Management

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  const [items, setItems] = useState([]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

useEffect - Seiteneffekte

import { useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  // Run once on mount
  useEffect(() => {
    fetch('/api/data')
      .then(r => r.json())
      .then(setData);
  }, []);

  // Run when count changes
  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);

  // Cleanup
  useEffect(() => {
    const interval = setInterval(() => {}, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>{data?.title}</div>;
}

useRef - DOM-Referenzen

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  function focusInput() {
    inputRef.current?.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus</button>
    </>
  );
}

Vorteile

• ✅ Großes Ökosystem - Viele Libraries & Components
• ✅ Team Experience - Weit verbreitet
• ✅ Hooks API - Moderne, funktionale Patterns

Nachteile

• ❌ Große Bundle-Größe - 44-45kb (10x größer als Preact)
• ❌ Performance - Virtual DOM Overhead
• ❌ Bundle-Größe - Nicht ideal für Islands

Preact verwenden

Für die meisten Islands ist Preact die bessere Wahl - gleiche API, nur 4kb Bundle-Größe.

Vollständige Beispiele

Siehe Beispiele mit Islands für vollständige Implementierungen:

• Counter - State Management
• Contact Form - Formulare mit Validierung
• Image Carousel - Intervals & Lifecycle
• Search Filter - Live Search & Filtering