React Components

What is React Component

A component is a small, reusable piece of UI. Think of it like a LEGO block. You build buttons, headers, cards, and pages by combining these blocks.

// Header.jsx
export default function Header() {
  return <h1>My Website</h1>
}

// App.jsx
import Header from "./Header";

export default function App() {
  return (
    <div>
      <Header />
      <p>Welcome to my app!</p>
    </div>
  );
}
            

Types of Components

React supports both function-based and class-based components.

Modern React encourages using function components with Hooks. Class components still work, but they're rarely needed in modern React.

Function Component (Recommended)

export default function Welcome() {
  return <h2>Hello, React!</h2>
}

Class Component (Legacy)

import { Component } from "react";

export default class Welcome extends Component {
  render() {
    return <h2>Hello, React!</h2>
  }
}

JSX Basics

JSX lets you write HTML-like code inside JavaScript. It's a syntax extension that compiles to JavaScript. This makes your UI code easier to read and reason about.

JSX uses an XML-type syntax. For example, the <br> tag is written as <br />.

Simple JSX:

const name = "Avi";

export default function Greeting() {
  return <h3>Hello, {name}!</h3>;
}

JSX Rules

JSX is a syntax extension for JavaScript used in React to define the UI. Here are some rules for JSX:

• One parent element must be returned. Use a wrapper like <div> or <>...</> (Fragment).
• Use className instead of class.
• Use htmlFor instead of for.
• Self-close empty tags: <img />, <input />.
• Use { } to insert JavaScript expressions.
• Attributes use camelCase: onClick, tabIndex.

JSX Rules example:

export default function Card() {
  const title = "New Year Card";
  const year = new Date().getFullYear();

  return (
    <section className="card">
      <h3>{title}</h3>
      <p>Happy New Year: {year}</p>
      <img src="/newyear.svg" alt="new year" />
    </section>
  );
}

Use Fragment

export default function Text() {

  return (
    <>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </>
  );
}

Composing Components (Nesting)

You can build bigger UIs by nesting components. For example, create separate components for <header>, <nav>, <main>, and <footer>, then compose them inside a layout container.

function Header() {
  return <header><h1>My Site</h1></header>;
  }

function Nav() {
  return <nav>nav</nav>;
}

function Footer() {
  return <footer>Copyright © {new Date().getFullYear()}</footer>;
}

function Main() {
  return (
    <main>
      <h2>Home</h2>
      <p>This is the homepage.</p>
    </main>
  );
}

export default function App() {
  return (
    <div className="container">
      <Header />
      <Nav />
      <Main />
      <Footer />
    </div>
  );
}

Props

Props are inputs to components. They make components reusable by passing different data each time.

function Button({ label }) {
  return <button>{label}</button>
}

export default function App() {
  return (
    <div>
      <Button label="Login" />
      <Button label="Signup" />
    </div>
  )
              
  }