// React Router DOM (ce que vous connaissez)
<Route path="/users/:id" element={<UserPage />} />

// TanStack Router (alternative type-safe)
const userRoute = createRoute({
  path: '/users/$id',
  component: UserPage,
  validateSearch: z.object({ tab: z.string().optional() }),
})

// ❌ Avec useState : verbeux et re-renders à chaque frappe
function SignupForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [age, setAge] = useState('');
  // ... un useState par champ, ça s'accumule vite !
}

npm install react-hook-form @hookform/resolvers

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2, 'Au moins 2 caractères'),
  email: z.string().email('Email invalide'),
  age: z.number().min(18, 'Minimum 18 ans'),
});

type FormData = z.infer<typeof schema>;

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormData) => {
    console.log('Données validées :', data); // Type-safe !
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="Nom" />
      {errors.name && <span>{errors.name.message}</span>}

      <input {...register('email')} placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}

      <input {...register('age', { valueAsNumber: true })} placeholder="Age" type="number" />
      {errors.age && <span>{errors.age.message}</span>}

      <button type="submit">S'inscrire</button>
    </form>
  );
}

// ❌ Le pattern classique : répétitif et sans cache
function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, []);

  // ... gérer loading, error, data à chaque fois
}

npm install @tanstack/react-query

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// Lire des données
function UserList() {
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json()),
  });

  if (isLoading) return <p>Chargement...</p>;
  if (error) return <p>Erreur : {error.message}</p>;

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

// Écrire des données (POST, PUT, DELETE)
function CreateUser() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (newUser) => fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(newUser),
    }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] }); // Rafraîchit la liste !
    },
  });

  return <button onClick={() => mutation.mutate({ name: 'Alice' })}>Ajouter</button>;
}

npm install recharts

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const data = [
  { mois: 'Jan', ventes: 400 },
  { mois: 'Fev', ventes: 300 },
  { mois: 'Mar', ventes: 600 },
  { mois: 'Avr', ventes: 800 },
  { mois: 'Mai', ventes: 500 },
];

function SalesChart() {
  return (
    <LineChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="mois" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="ventes" stroke="#8884d8" strokeWidth={2} />
    </LineChart>
  );
}

npm install three @react-three/fiber @react-three/drei

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

function RotatingCube() {
  return (
    <mesh rotation={[0.5, 0.5, 0]}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="royalblue" />
    </mesh>
  );
}

function Scene() {
  return (
    <Canvas style={{ height: '400px' }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <RotatingCube />
      <OrbitControls />
    </Canvas>
  );
}

npm install framer-motion

import { motion } from 'framer-motion';

function AnimatedCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="card"
    >
      <h3>Je suis animée !</h3>
    </motion.div>
  );
}

import * as Dialog from '@radix-ui/react-dialog';

function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Ouvrir</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="overlay" />
        <Dialog.Content className="dialog">
          <Dialog.Title>Mon Dialog</Dialog.Title>
          <Dialog.Description>Contenu accessible et fonctionnel.</Dialog.Description>
          <Dialog.Close>Fermer</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

# Ajouter un composant
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add select

// Le composant est copié dans votre projet — vous le possédez !
import { Button } from '@/components/ui/button';

function MyPage() {
  return (
    <div>
      <Button variant="default">Primaire</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Supprimer</Button>
    </div>
  );
}

npm install zustand

import { create } from 'zustand';

// Créer un store en 5 lignes
const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({
    items: [...state.items, item],
  })),
  removeItem: (id) => set((state) => ({
    items: state.items.filter(item => item.id !== id),
  })),
  clearCart: () => set({ items: [] }),
}));

// Utiliser dans n'importe quel composant — sans Provider !
function CartIcon() {
  const itemCount = useCartStore((state) => state.items.length);
  return <span>Panier ({itemCount})</span>;
}

function CartPage() {
  const { items, removeItem, clearCart } = useCartStore();
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          {item.name} <button onClick={() => removeItem(item.id)}>X</button>
        </div>
      ))}
      <button onClick={clearCart}>Vider le panier</button>
    </div>
  );
}