Détaille ce que tu as appris ici
src/exercise/01.md ou sur une page Notion
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
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.
Utilise <input> à la place de <button> et applique un style de ton choix.
ex:
{backgroundColor:'lightblue', border:'none', padding:'6px 6px' cursor: 'pointer'}
Tutorial