What are props in React and how do you pass data between components?

// Parent component
function App() {
  const user = { name: 'Alice', age: 25 };
  
  return (
    <div>
      {/* Passing different prop types */}
      <Greeting 
        name="Alice"           // string
        age={25}               // number
        isLoggedIn={true}      // boolean
        user={user}            // object
        hobbies={['reading']}  // array
        onClick={() => {}}     // function
      />
    </div>
  );
}

// Child component with destructuring
function Greeting({ name, age, isLoggedIn }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
}

// With default props
function Greeting({ name = 'Guest', age = 0 }) {
  return <p>{name} is {age} years old</p>;
}