Компоненты — строительные блоки React-приложений

Зачем это нужно?

1. Переиспользование: один компонент можно использовать в разных местах
2. Изоляция: код компонента не влияет на остальные части приложения
3. Поддержка: легко находить и исправлять ошибки
4. Читаемость: приложение разбито на понятные куски

Главная мысль:

React-приложение — это дерево компонентов. Один большой компонент собирает внутри себя множество маленьких.

Важно: В современных проектах (с хуками) используют только функциональные компоненты. Классовые — для понимания legacy-кода.

Простой компонент:

function Welcome() {
  return <h1>Привет, мир!</h1>;
}

Стрелочная функция:

const Welcome = () => {
  return <h1>Привет, мир!</h1>;
};

Сокращённый вариант (если одна строка):

const Welcome = () => <h1>Привет, мир!</h1>;

Компонент с параметрами (props):

function Welcome(props) {
  return <h1>Привет, {props.name}!</h1>;
}

Использование в другом компоненте:

function App() {
  return (
    <div>
      <Welcome name="Алексей" />
      <Welcome name="Мария" />
      <Welcome name="Иван" />
    </div>
  );
}
// На экране:
// Привет, Алексей!
// Привет, Мария!
// Привет, Иван!

Почему с большой буквы?

1. <welcome /> — React поймёт как HTML-тег
2. <Welcome /> — React поймёт как компонент

Базовый классовый компонент:

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Привет, мир!</h1>;
  }
}

С параметрами (props):

class Welcome extends React.Component {
  render() {
    return <h1>Привет, {this.props.name}!</h1>;
  }
}

С состоянием (state):

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Счёт: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +1
        </button>
      </div>
    );
  }
}

Важно! В классовых компонентах:

1. Нужно наследовать React.Component
2. Обязателен метод render(), возвращающий JSX
3. props доступны через this.props
4. state доступен через this.state

Функциональный компонент по частям:

// 1. Импорты
import React from 'react';

// 2. Сам компонент
function UserCard({ name, age, city }) {
  // 3. Логика (переменные, функции)
  const greeting = `Привет, ${name}!`;
  
  const handleClick = () => {
    alert(`Возраст: ${age}`);
  };

  // 4. Возврат JSX
  return (
    <div className="card">
      <h2>{greeting}</h2>
      <p>Город: {city}</p>
      <button onClick={handleClick}>Показать возраст</button>
    </div>
  );
}

// 5. Экспорт
export default UserCard;

Классовый компонент по частям:

// 1. Импорты
import React from 'react';

// 2. Объявление класса
class UserCard extends React.Component {
  // 3. Конструктор (если нужно state)
  constructor(props) {
    super(props);
    this.state = { isVisible: true };
  }

  // 4. Методы компонента
  handleClick() {
    alert(`Возраст: ${this.props.age}`);
  }

  // 5. Метод render (обязателен)
  render() {
    const { name, city } = this.props;
    return (
      <div className="card">
        <h2>Привет, {name}!</h2>
        <p>Город: {city}</p>
        <button onClick={() => this.handleClick()}>Показать возраст</button>
      </div>
    );
  }
}

// 6. Экспорт
export default UserCard;

Компоненты могут вкладываться друг в друга:

// Дочерний компонент
function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

// Родительский компонент
function App() {
  const handleClick = () => alert('Клик!');
  
  return (
    <div>
      <h1>Моё приложение</h1>
      <Button text="Нажми меня" onClick={handleClick} />
      <Button text="Ещё кнопка" onClick={handleClick} />
    </div>
  );
}

Можно передавать внутрь компонента другие компоненты через props.children:

function Card({ children }) {
  return (
    <div className="card">
      <h3>Карточка</h3>
      {children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <p>Это содержимое карточки</p>
      <button>Кнопка внутри</button>
    </Card>
  );
}

Дефолтный экспорт (один на файл):

export default function Button() { ... }
// Импорт:
import Button from './Button';

Именованный экспорт (несколько):

export function Button() { ... }
export function Input() { ... }
// Импорт:
import { Button, Input } from './components';

Какой выбрать?

1. Для главного компонента в файле — export default
2. Для вспомогательных или нескольких компонентов — export

1. Создай новый файл src/components/Greeting.jsx
2. Напиши функциональный компонент Greeting, который принимает пропс name и выводит <h2>Привет, {name}!</h2>
3. Создай файл src/components/UserCard.jsx
4. Напиши классовый компонент UserCard, который принимает пропсы name, age, city и выводит карточку с этими данными
5. В App.jsx импортируй оба компонента и отобрази их на странице

Проверка: На экране должно появиться приветствие и карточка с данными пользователя.

В следующем уроке разберём Props и State — главные механизмы передачи данных. Ты поймёшь, как данные текут через компоненты, как хранить изменения и как заставить интерфейс реагировать на действия пользователя. Это фундаментальная тема, без которой React-приложения не работают.