Key characteristic of Component-Based Architecture

Here are 5 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
Co…


This content originally appeared on DEV Community and was authored by muthu raja

Here are 5 key characteristics of Component-Based Architecture implemented in React JS. These examples will demonstrate how React components embody the characteristics of

  1. Reusability
  2. Encapsulation, Interchangeability
  3. Scalability
  4. Maintainability
  5. 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 overall functionality of the app.
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 />;
}


This content originally appeared on DEV Community and was authored by muthu raja


Print Share Comment Cite Upload Translate Updates
APA

muthu raja | Sciencx (2024-10-21T05:10:27+00:00) Key characteristic of Component-Based Architecture. Retrieved from https://www.scien.cx/2024/10/21/key-characteristic-of-component-based-architecture/

MLA
" » Key characteristic of Component-Based Architecture." muthu raja | Sciencx - Monday October 21, 2024, https://www.scien.cx/2024/10/21/key-characteristic-of-component-based-architecture/
HARVARD
muthu raja | Sciencx Monday October 21, 2024 » Key characteristic of Component-Based Architecture., viewed ,<https://www.scien.cx/2024/10/21/key-characteristic-of-component-based-architecture/>
VANCOUVER
muthu raja | Sciencx - » Key characteristic of Component-Based Architecture. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/21/key-characteristic-of-component-based-architecture/
CHICAGO
" » Key characteristic of Component-Based Architecture." muthu raja | Sciencx - Accessed . https://www.scien.cx/2024/10/21/key-characteristic-of-component-based-architecture/
IEEE
" » Key characteristic of Component-Based Architecture." muthu raja | Sciencx [Online]. Available: https://www.scien.cx/2024/10/21/key-characteristic-of-component-based-architecture/. [Accessed: ]
rf:citation
» Key characteristic of Component-Based Architecture | muthu raja | Sciencx | https://www.scien.cx/2024/10/21/key-characteristic-of-component-based-architecture/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.