HomePrivacyTermsDocsBlog
Connexion
AgentMail by Mike Codeur

By Mike Codeur

© 2026 AgentMail by Mike Codeur. All rights reserved.

Product

  • Features
  • Pricing
  • Demo
  • Updates

Resources

  • Documentation
  • Blog
  • Support
  • API

Legal & Contact

  • Legal Notice
  • Privacy Policy
  • Contact
  • Careers
Commencer

Prêt à commencer ?

Rejoignez des milliers d'utilisateurs qui créent des choses incroyables avec notre plateforme.

Commencer gratuitement

Pas de carte de crédit requise

Newsletter

Stay updated with our latest articles and web development news.

No spam, unsubscribe anytime

Retour aux articlesTutorial

Proxy Component

Comprendre les Proxy Component en React pour créer du code réutilisable et maintenable.

#react#patterns#components
MailChimp Killer Team
01 janvier 20252 min
Tutorial

Proxy Component

Comprendre les Proxy Component

Tes notes

Détaille ce que tu as appris ici src/exercise/01.md ou sur une page Notion

Comprendre

Derrière ce nom barbare il s'agit d'une chose assez simple. Il s'agit d'un composant réutilisable. Selon le principe DRY (don't repeat yourself) nous ne voulons pas avoir à dupliquer certaines portions de code. Les composants proxy sont utiles car ils permettent d'isoler le code des futures changements comme nous allons le voir dans les exercices.
function Checkbox() {
  return <input type="checkbox" value="check" />
}

function App() {
  return <Checkbox />
}

export default App

Exercice

Imaginons la structure de site contenant des boutons like
function Header() {
  return (
    <div>
      <h1>Welcome</h1>
      <button>Like</button>
    </div>
  )
}
function Content() {
  return (
    <div>
      <h2>Articles</h2>
      <span>article 1</span>
      <button>Like</button>
      <span>article 2</span>
      <button>Like</button>
      <span>article 3</span>
      <button>Like</button>
    </div>
  )
}
function Footer() {
  return (
    <div>
      <h3>Contact us</h3>
      <button>Like</button>
    </div>
  )
}

function App() {
  return (
    <React.Fragment>
      <Header />
      <Content />
      <Footer />
    </React.Fragment>
  )
}

export default App
imaginons nous souhaitons changer l'implémentation du bouton
<button>Like</button>
// par
<input type="Button" value="Like"/>
// ou autre : Bootstrap Buttons / Material-ui Button etc ...
Il faudrait remplacer l'implémentation de ce bouton partout dans le code. Dans cet exercice nous allons créer un composant proxy.

Bonus

1. Changer l'implémentation du Bouton

Utilise <input> à la place de <button> et applique un style de ton choix. ex:
{backgroundColor:'lightblue', border:'none', padding:'6px 6px' cursor: 'pointer'}
Écrit par
MKT
MailChimp Killer Team
Auteur
Publié le 01 janvier 2025

Articles connexes

Tutorial
Tutorial

Guide Next.js pour Débutants

Un guide complet pour débuter avec Next.js

08 août 20261 min
Lire la suite
Bienvenue sur notre Blog avec MDXTutorial

Bienvenue sur notre Blog avec MDX

Découvrez comment MDX combine la simplicité du Markdown avec la puissance des composants React pour créer du contenu riche et interactif.

05 janv. 20255 min
Lire la suite
Design
Design

Découverte de Tailwind CSS v4

Tailwind CSS v4 apporte une révolution dans la façon de styler nos applications web.

10 janv. 20251 min
Lire la suite