В чём разница между элементом (Element) и компонентом (Component)?

// React-элементы (все это объекты!)
const element1 = <h1>Привет, мир! 👋</h1>;
const element2 = <div className="container">Контейнер 📦</div>;
const element3 = <button onClick={handleClick}>Кнопка 🖱️</button>;
 
// То же самое в виде объектов (что React видит внутри)
const elementObj = {
  type: 'h1',
  props: {
    children: 'Привет, мир! 👋'
  }
};

// Функциональный компонент
function Welcome({ name }) {
  // Возвращает элемент
  return <h1>Привет, {name}! 👋</h1>;
}
 
// Классовый компонент
class Goodbye extends Component {
  render() {
    // Возвращает элемент
    return <h1>Пока, {this.props.name}! 👋</h1>;
  }
}

// Элемент - обычный объект
const element = {
  type: 'button',
  props: {
    className: 'btn',
    onClick: handleClick,
    children: 'Нажми меня! ✨'
  }
};
 
// Не может изменяться - только создается заново

// Компонент - функция или класс
function Button({ text, onClick }) {
  // Может иметь логику, состояние, эффекты
  return <button onClick={onClick}>{text} ✨</button>;
}
 
// Может быть переиспользован с разными props

// Создание элементов
const title = <h1>Заголовок 📰</h1>;
const paragraph = <p>Параграф 📝</p>;
const button = <button>Кнопка 🖱️</button>;

// Использование компонентов
const welcome = <Welcome name="Александр" />;
const goodbye = <Goodbye name="Александр" />;
const customButton = <Button text="Сохранить 💾" onClick={save} />;

// Элемент нельзя изменить
const element = <div>Привет 👋</div>;
// element.props.children = "Пока"; // ❌ Не работает!
 
// Вместо этого создаем новый элемент
const newElement = <div>Пока 👋</div>;

// Компонент с состоянием
function Counter() {
  const [count, setCount] = useState(0); // ✅ Может изменяться
  
  return (
    <div>
      <p>Счетчик: {count} 🔢</p>
      <button onClick={() => setCount(count + 1)}>
        Увеличить ➕
      </button>
    </div>
  );
}

// Каждый элемент уникален
const header1 = <h1>Заголовок 1 📌</h1>;
const header2 = <h1>Заголовок 2 📌</h1>;
// Нет способа "переиспользовать" элемент

// Компонент можно использовать многократно
function Card({ title, content }) {
  return (
    <div className="card">
      <h2>{title} 📇</h2>
      <p>{content} 📝</p>
    </div>
  );
}
 
// Переиспользование компонента
<Card title="Карточка 1" content="Содержимое 1" />
<Card title="Карточка 2" content="Содержимое 2" />
<Card title="Карточка 3" content="Содержимое 3" />

// 1. Компонент принимает props
function UserProfile({ user }) {
  // 2. Компонент возвращает элементы
  return (
    <div className="user-profile">
      <img src={user.avatar} alt={user.name} />
      <h1>{user.name} 👤</h1>
      <p>{user.email} 📧</p>
    </div>
  );
}
 
// 3. Использование компонента создает элемент
const element = <UserProfile user={userData} />;
 
// 4. React преобразует элемент в DOM
// (на самом деле это сложнее из-за Virtual DOM)

// Шаг 1: JSX
const app = <Welcome name="Александр" />;
 
// Шаг 2: Транспиляция в React.createElement
const appElement = React.createElement(Welcome, { name: "Александр" });
 
// Шаг 3: React вызывает компонент Welcome
// Шаг 4: Welcome возвращает элемент <h1>Привет, Александр!</h1>
// Шаг 5: React обновляет DOM

// Простые элементы
const header = <h1>Добро пожаловать! 🎉</h1>;
const footer = <footer>© 2023 Мой сайт 🌐</footer>;
 
function App() {
  return (
    <div>
      {header}
      <main>Основной контент 📚</main>
      {footer}
    </div>
  );
}

// Компонент для переиспользования
function Button({ type, text, onClick }) {
  const buttonTypes = {
    primary: 'btn-primary 🟦',
    secondary: 'btn-secondary 🟩',
    danger: 'btn-danger 🟥'
  };
  
  return (
    <button 
      className={buttonTypes[type]} 
      onClick={onClick}
    >
      {text} {type === 'primary' ? '✨' : ''}
    </button>
  );
}
 
// Использование компонента
<Button type="primary" text="Сохранить 💾" onClick={save} />
<Button type="secondary" text="Отмена ❌" onClick={cancel} />
<Button type="danger" text="Удалить 🗑️" onClick={delete} />

// Простой элемент
const simpleButton = <button>Нажми меня! 👆</button>;

// Переиспользуемый компонент
function SmartButton({ onClick, children, disabled = false }) {
  return (
    <button 
      onClick={onClick} 
      disabled={disabled}
      style={{ 
        opacity: disabled ? 0.5 : 1,
        cursor: disabled ? 'not-allowed' : 'pointer'
      }}
    >
      {children} {disabled ? '🔒' : '🔓'}
    </button>
  );
}
 
// Использование
<SmartButton onClick={handleClick}>Сохранить 💾</SmartButton>
<SmartButton disabled>Недоступно 🚫</SmartButton>

// Элементы
const title = <h1>Список задач 📋</h1>;
const item1 = <li>Купить хлеб 🍞</li>;
const item2 = <li>Позвонить врачу 📞</li>;
 
// Компоненты
function TodoList({ todos }) {
  return (
    <div>
      <h1>Список задач 📋</h1>
      <ul>
        {todos.map(todo => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </ul>
    </div>
  );
}
 
function TodoItem({ todo }) {
  const [completed, setCompleted] = useState(todo.completed);
  
  return (
    <li 
      style={{ 
        textDecoration: completed ? 'line-through' : 'none' 
      }}
      onClick={() => setCompleted(!completed)}
    >
      {todo.text} {completed ? '✅' : '⏳'}
    </li>
  );
}