Detail what you learned here
src/exercise/01.md or on a Notion page
Behind this technical term lies something quite simple. It's a reusable component. Following the DRY principle (don't repeat yourself), we don't want to duplicate certain portions of code. Proxy components are useful because they isolate code from future changes as we'll see in the exercises.
function Checkbox() {
return <input type="checkbox" value="check" />
}
function App() {
return <Checkbox />
}
export default App
Imagine a site structure containing like buttons
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
Imagine we want to change the button implementation
<button>Like</button>
// to
<input type="Button" value="Like"/>
// or another: Bootstrap Buttons / Material-ui Button etc ...
We would need to replace the implementation of this button everywhere in the code. In this exercise, we'll create a proxy component.
Use <input> instead of <button> and apply a style of your choice.
ex:
{backgroundColor:'lightblue', border:'none', padding:'6px 6px' cursor: 'pointer'}
Tutorial