Как создать компонент в React?react-5

Основные способы создания компонентов

1. Функциональные компоненты

Современный стандарт (рекомендуемый подход с React 16.8+)

// Простейший функциональный компонент
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// С использованием стрелочной функции
const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

// С деструктуризацией props
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Особенности:

• Простота написания
• Используют хуки (hooks) для состояния и жизненного цикла
• Нет проблем с контекстом this

2. Классовые компоненты

Устаревший, но поддерживаемый подход (используется в legacy-коде)

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Особенности:

• Имеют методы жизненного цикла
• Используют this.state и this.setState()
• Требуют привязки контекста для обработчиков событий

Создание компонента с состоянием

Функциональный компонент с хуком useState

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

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

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

Создание компонента с обработкой событий

function ButtonWithAlert() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Создание составного компонента

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h2>Card Title</h2>
      <p>Card content goes here</p>
    </Card>
  );
}

Правила создания компонентов

1. Именование:

   • Всегда с большой буквы (MyComponent, а не myComponent)
   • Используйте PascalCase для имен файлов (MyComponent.jsx)

2. Один компонент — один файл (кроме небольших вспомогательных компонентов)

3. Props:

   • Всегда проверяйте типы с помощью PropTypes или TypeScript
   • Избегайте мутации props

4. Ключи (keys):

   • Обязательны для элементов списка

   {items.map(item => (
     <ListItem key={item.id} item={item} />
   ))}
   

Резюмируем

1. Функциональные компоненты — современный стандарт:

   • Простые функции
   • Используют хуки для состояния и жизненного цикла
   • Рекомендуются для новых проектов

2. Классовые компоненты — устаревший подход:

   • Наследуют от React.Component
   • Используют методы жизненного цикла и this.state
   • Важно знать для поддержки legacy-кода

3. Общие правила:

   • Именование с большой буквы
   • Четкое разделение ответственности
   • Предсказуемое поведение (чистые функции)

Совет: Для новых проектов всегда используйте функциональные компоненты с хуками — это современный, более простой и производительный подход.