Here are 6 key characteristics of Component-Based Architecture implemented in React JS. These examples will demonstrate how React components embody the characteristics of
- Reusability
- Encapsulation,
- Interchangeability
- Scalability
- Maintainability
- Composition
Reusability
Components can be reused across different parts of the application.
Example: A Button component used multiple times
function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
}
function App() {
return (
<div>
<Button label="Submit" onClick={() => alert('Submit clicked')} />
<Button label="Cancel" onClick={() => alert('Cancel clicked')} />
</div>
);
}
Encapsulation
Components encapsulate their logic and styles, preventing outside interference.
Example: UserProfile component encapsulating user data
function UserProfile({ name, email }) {
return (
<div>
<h3>{name}</h3>
<p>Email: {email}</p>
</div>
);
}
function App() {
return (
<UserProfile name="John Doe" email="john@example.com" />
);
}
Interchangeability
Components can be swapped or replaced without affecting the app's overall functionality.
Example: Swapping a PrimaryButton with SecondaryButton
function PrimaryButton({ label, onClick }) {
return <button style={{ backgroundColor: 'blue', color: 'white' }} onClick={onClick}>{label}</button>;
}
function SecondaryButton({ label, onClick }) {
return <button style={{ backgroundColor: 'gray', color: 'white' }} onClick={onClick}>{label}</button>;
}
function App({ usePrimary }) {
return (
<div>
{usePrimary ? <PrimaryButton label="Click Me" onClick={() => alert('Primary clicked')} /> :
<SecondaryButton label="Click Me" onClick={() => alert('Secondary clicked')} />}
</div>
);
}
Scalability
Components make it easy to scale by adding more features without affecting existing components.
Example: Adding more Product components to scale the app
function Product({ name, price }) {
return (
<div>
<h3>{name}</h3>
<p>Price: ${price}</p>
</div>
);
}
function ProductList() {
const products = [
{ name: 'iPhone 13', price: 999 },
{ name: 'Samsung Galaxy S21', price: 799 },
{ name: 'Google Pixel 6', price: 599 },
];
return (
<div>
{products.map((product, index) => (
<Product key={index} name={product.name} price={product.price} />
))}
</div>
);
}
function App() {
return <ProductList />;
}
Maintainability
Components are isolated, so they can be easily maintained and updated independently.
Example: Updating the Product component without affecting the rest of the app
function Product({ name, price }) {
// Add a new feature to show if the product is on sale
const isOnSale = price < 700;
return (
<div>
<h3>{name}</h3>
<p>Price: ${price} {isOnSale && <span>(On Sale!)</span>}</p>
</div>
);
}
function App() {
return (
<div>
<Product name="Google Pixel 6" price={599} />
</div>
);
}
Composition
Components can be combined or composed to build more complex UIs.
Example: Composing Header, Product, and Footer into a single Page
function Header() {
return <h1>Welcome to My Shop</h1>;
}
function Product({ name, price }) {
return (
<div>
<h3>{name}</h3>
<p>Price: ${price}</p>
</div>
);
}
function Footer() {
return <footer>Contact us at shop@example.com</footer>;
}
function Page() {
return (
<div>
<Header />
<Product name="Apple Watch" price={399} />
<Footer />
</div>
);
}
function App() {
return <Page />;
}
Top comments (0)