Commencer

Prêt à commencer ?

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

Pas de carte de crédit requise

Restez informé de nos derniers articles et actualités du développement web.

Pas de spam, désabonnement à tout moment

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.

tsx

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

tsx

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

tsx

<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.

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

tsx

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

tsx

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

tsx

<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:

tsx

{backgroundColor:'lightblue', border:'none', padding:'6px 6px' cursor: 'pointer'}

Prêt à commencer ?

Newsletter

Proxy Component

Articles connexes

Bienvenue sur notre Blog avec MDX

Introduction à Next.js 15

Découverte de Tailwind CSS v4

Prêt à commencer ?

Newsletter

Proxy Component

Proxy Component

Comprendre les Proxy Component

Tes notes

Comprendre

Exercice

Bonus

1. Changer l'implémentation du Bouton

Articles connexes

Bienvenue sur notre Blog avec MDX

Introduction à Next.js 15

Découverte de Tailwind CSS v4

Proxy Component

Comprendre les Proxy Component

Tes notes

Comprendre

Exercice

Bonus

1. Changer l'implémentation du Bouton