Skip to content
Learni
Voir tous les tutoriels
Frontend

Comment intégrer Ant Design dans une application React en 2026

18 minINTERMEDIATE
ReactAnt DesignUI Components
Read in English

Introduction

Ant Design est la bibliothèque de composants UI la plus utilisée dans l'écosystème React pour les applications d'entreprise. En 2026, elle reste incontournable grâce à son système de design cohérent, ses composants accessibles et ses outils de personnalisation avancés. Ce tutoriel intermédiaire vous guide pas à pas pour intégrer Ant Design dans une application React existante, configurer le thème, et exploiter des composants complexes comme les formulaires et tableaux. Vous apprendrez à éviter les pièges courants et à adopter les bonnes pratiques de structuration.

Prérequis

  • React 18+ et TypeScript
  • Node.js 20+
  • Connaissances de base en React et hooks
  • Projet Create React App ou Vite initialisé

Installation des dépendances

terminal
npm install antd @ant-design/icons
npm install -D @types/react

Cette commande installe Ant Design et ses icônes officielles. Les types sont déjà inclus dans la version récente d'Ant Design, mais on s'assure de la compatibilité TypeScript.

Configuration du provider

src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider } from 'antd';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 6,
        },
      }}
    >
      <App />
    </ConfigProvider>
  </React.StrictMode>
);

Le ConfigProvider permet de définir le thème global dès la racine. Cela centralise les couleurs et le rayon des bordures pour toute l'application.

Utilisation d'un bouton simple

src/components/ActionButton.tsx
import React from 'react';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

interface Props {
  onClick: () => void;
}

export const ActionButton: React.FC<Props> = ({ onClick }) => {
  return (
    <Button type="primary" icon={<PlusOutlined />} onClick={onClick}>
      Ajouter un élément
    </Button>
  );
};

Ce composant réutilisable illustre l'import d'icônes et l'utilisation des props de style d'Ant Design. Le type primary applique automatiquement la couleur définie dans le thème.

Création d'un formulaire complet

src/components/UserForm.tsx
import React from 'react';
import { Form, Input, Button, message } from 'antd';

const UserForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    message.success('Utilisateur créé avec succès');
    form.resetFields();
  };

  return (
    <Form form={form} layout="vertical" onFinish={onFinish}>
      <Form.Item name="name" label="Nom" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">Enregistrer</Button>
      </Form.Item>
    </Form>
  );
};

export default UserForm;

Le hook useForm gère la validation et la soumission. Les règles de validation sont déclaratives et Ant Design affiche automatiquement les messages d'erreur.

Tableau de données avancé

src/components/DataTable.tsx
import React from 'react';
import { Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: string;
  name: string;
  status: string;
}

const columns: ColumnsType<DataType> = [
  { title: 'Nom', dataIndex: 'name', key: 'name' },
  { 
    title: 'Statut', 
    dataIndex: 'status', 
    key: 'status',
    render: (status) => <Tag color={status === 'Actif' ? 'green' : 'red'}>{status}</Tag> 
  }
];

const data: DataType[] = [
  { key: '1', name: 'Alice', status: 'Actif' },
  { key: '2', name: 'Bob', status: 'Inactif' }
];

export const DataTable = () => <Table columns={columns} dataSource={data} />;

Les colonnes typées avec ColumnsType offrent une excellente autocomplétion. Le render personnalisé permet d'afficher des Tags colorés selon la valeur.

Bonnes pratiques

  • Toujours envelopper l'application avec ConfigProvider pour centraliser le thème
  • Utiliser les hooks de formulaire (useForm) plutôt que la gestion manuelle d'état
  • Importer uniquement les composants nécessaires pour optimiser la taille du bundle
  • Définir des types TypeScript stricts pour les données des tableaux
  • Préférer les messages de notification plutôt que les alertes natives

Erreurs courantes à éviter

  • Oublier d'importer le fichier CSS d'Ant Design (antd/dist/reset.css)
  • Modifier directement les classes CSS au lieu d'utiliser le token de thème
  • Ne pas gérer les états de chargement dans les tableaux volumineux
  • Utiliser des versions incompatibles d'Ant Design avec React 19

Pour aller plus loin

Découvrez nos formations avancées sur la conception d'interfaces modernes avec Learni Group.