Back to articlesTutorial
Proxy Component
Understanding Proxy Components in React to create reusable and maintainable code.
#react#patterns#components
MailChimp Killer Team
January 01, 20252 minTutorial
Proxy Component
Understanding Proxy Components
Your Notes
Detail what you learned heresrc/exercise/01.md or on a Notion page
Understanding
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 AppExercise
Imagine a site structure containing like buttonsfunction 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<button>Like</button>
// to
<input type="Button" value="Like"/>
// or another: Bootstrap Buttons / Material-ui Button etc ...Bonus
1. Change the Button Implementation
Use<input> instead of <button> and apply a style of your choice.
ex:
{backgroundColor:'lightblue', border:'none', padding:'6px 6px' cursor: 'pointer'}Written by
MKT
MailChimp Killer Team
Author
Related Articles
Tutorial
Next.js Guide for Beginners
A complete guide to get started with Next.js
Aug 08, 20261 min
Read more
TutorialWelcome to our Blog with MDX
Discover how MDX combines the simplicity of Markdown with the power of React components to create rich and interactive content.
Jan 05, 20253 min
Read more
DevelopmentIntroduction to Next.js 15
Next.js 15 brings many improvements and new features for developing modern React applications.
Jan 15, 20251 min
Read more