Frontend Engineering | VoidX Academy

20. Components

Building UI with Components

In standard HTML, you are limited to the built-in tags the browser gives you (<div>, <p>, <button>). React allows you to build your own custom tags. A Component is an independent, reusable piece of the user interface.

Function-Based Components

In modern React, components are simply JavaScript functions that return JSX. Historically, developers used "Class Components", but functional components are now the absolute industry standard.

// This is a React Component.
// RULE: It MUST start with a capital letter.
function App() {
  return (
    <div className="app-container">
      <h1>Hello World</h1>
      <p>Welcome to my new React application.</p>
    </div>
  );
}

export default App;

Nesting and Reusability

The true power of components is that they can be nested inside one another. You can build a small component (like a <Button />), and use it multiple times inside a larger component (like a <Navbar />).

// A small, reusable component
function SubscribeButton() {
  return <button className="btn-sub">Subscribe Now</button>;
}

// A larger component that uses the smaller one
function Sidebar() {
  return (
    <aside>
      <h2>Newsletter</h2>
      <p>Get the latest updates.</p>
      {/* We use our custom component exactly like an HTML tag */}
      <SubscribeButton />
    </aside>
  );
}

Separation of Concerns

By breaking your UI down into smaller components, your codebase becomes vastly easier to manage. If the subscription button breaks, you don't have to search through a massive 2,000-line HTML file; you just open the SubscribeButton.jsx file and fix it there.

20. Components

Building UI with Components

Function-Based Components

Nesting and Reusability

Separation of Concerns

Knowledge Check

20. Components

Building UI with Components

Function-Based Components

Nesting and Reusability

Separation of Concerns

Knowledge Check