React Components & Props

Components sind die Bausteine jeder React-App. Props übergeben Daten zwischen Components!

Component Basics

// Simple Component
function Welcome() {
  return <h1>Willkommen!</h1>
}

// Component mit Props
function Greeting({ name }) {
  return <h1>Hallo {name}!</h1>
}

// Verwenden
<Greeting name="Anna" />

Props

function UserCard({ name, age, email, isActive }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Alter: {age}</p>
      <p>Email: {email}</p>
      {isActive && <span>Aktiv</span>}
    </div>
  )
}

// Verwenden mit verschiedenen Props
<UserCard name="Anna" age={25} email="anna@example.com" isActive={true} />

Children Prop

function Card({ children, title }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="card-body">
        {children}
      </div>
    </div>
  )
}

// Verwenden
<Card title="Mein Titel">
  <p>Das ist der Content!</p>
  <button>Click me</button>
</Card>

Default Props

function Button({ text = 'Click', color = 'blue', onClick }) {
  return (
    <button 
      className={`btn btn-${color}`}
      onClick={onClick}
    >
      {text}
    </button>
  )
}

// Ohne Props - nutzt Defaults
<Button onClick={handleClick} />

Props Destructuring

// ❌ Ohne Destructuring
function User(props) {
  return <div>{props.name} - {props.email}</div>
}

// ✅ Mit Destructuring
function User({ name, email }) {
  return <div>{name} - {email}</div>
}

// ✅ Mit Rest Operator
function User({ name, ...otherProps }) {
  return <div {...otherProps}>{name}</div>
}