HlibPanchenko/react-laravel-frontend-skill

Was macht react-laravel-frontend-skill?

Ein Claude-Skill für professionelle React-Frontend-Entwicklung mit Laravel-APIs.

Überblick

Dieser Skill bietet Claude (und anderen KI-Agenten) eine Reihe von Best Practices und konkreten Richtlinien für die Entwicklung von React-Frontends, die mit Laravel-Backends kommunizieren. Er deckt Techniken für die API-Integration, das State-Management, die Fehlerbehandlung und die Strukturierung von Projekten ab.

Hauptmerkmale

• Komponenten-Architektur: Empfehlungen für die Aufteilung in logische, wiederverwendbare Komponenten (Container, Präsentationskomponenten).
• API-Integration: Beispiele für die Verwendung von Axios oder Fetch mit Laravel-Routen, einschließlich Authentifizierung (Sanctum, JWT) und CSRF-Schutz.
• State-Management: Nutzung von React-Hooks wie useState, useEffect, useReducer oder der Context API.
• Fehlerbehandlung: Einheitliche Behandlung von API-Fehlern, Anzeige von Benachrichtigungen und Logging.
• Typisierung: Optional TypeScript-Unterstützung für bessere Typsicherheit.
• CORS-Konfiguration: Hinweise zur korrekten Einrichtung von CORS in Laravel, um Frontend-Anfragen zu erlauben.
• Routing: Einsatz von React Router für clientseitiges Routing, abgestimmt auf Laravel-Authentifizierungs-Middleware.

Verwendung

Um den Skill zu aktivieren, fügen Sie die folgende Konfiguration in Ihre Claude-Projekt-Settings ein:

{
  "skills": {
    "react-laravel-frontend": {
      "repository": "HlibPanchenko/react-laravel-frontend-skill"
    }
  }
}

Anschließend können Sie Claude Anweisungen wie "Erstelle eine React-Komponente für die Benutzerliste, die Daten von der Laravel-API /api/users abruft" geben, und der Skill wird nach den definierten Konventionen Code generieren.

Beispiele

Axios-Instanz mit Laravel-Setup

// api/axios.js
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:8000/api',
  withCredentials: true,
  headers: {
    'Accept': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  }
});

// CSRF-Token für Laravel
api.interceptors.request.use(config => {
  const token = document.querySelector('meta[name="csrf-token"]')?.content;
  if (token) {
    config.headers['X-CSRF-TOKEN'] = token;
  }
  return config;
});

export default api;

Hook für Datenabruf mit Laravel-Authentifizierung

// hooks/useAuth.js
import { useState, useEffect } from 'react';
import api from '../api/axios';

const useAuth = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await api.get('/user');
        setUser(response.data);
      } catch (error) {
        console.error('Authentifizierungsfehler:', error);
        setUser(null);
      } finally {
        setLoading(false);
      }
    };
    fetchUser();
  }, []);

  return { user, loading };
};

export default useAuth;

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert – siehe die LICENSE-Datei für Details.