Примеры правильного кода в React: базовые компоненты, реквизиты, состояние, обработка событий и многое другое

Примеры правильного кода в React:

Пример 1: базовый компонент

import React from 'react';
class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}
export default MyComponent;

Пример 2: Функциональный компонент

import React from 'react';
function MyComponent() {
  return <div>Hello, World!</div>;
}
export default MyComponent;

Пример 3: Реквизит

import React from 'react';
function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}
export default MyComponent;

Пример 4: Состояние

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return <div>Count: {this.state.count}</div>;
  }
}
export default MyComponent;

Пример 5. Обработка событий

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <div>Count: {this.state.count}</div>
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}
export default MyComponent;

Пример 6. Условный рендеринг

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }
  render() {
    return (
      <div>
        {this.state.isLoggedIn ? (
          <div>Welcome, User!</div>
        ) : (
          <div>Please log in.</div>
        )}
      </div>
    );
  }
}
export default MyComponent;

Пример 7: списки и ключи

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['Apple', 'Banana', 'Orange']
    };
  }
  render() {
    return (
      <ul>
        {this.state.items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
}
export default MyComponent;

Пример 8. Жизненный цикл компонента

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ message: 'Hello, World!' });
    }, 1000);
  }
  render() {
    return <div>{this.state.message}</div>;
  }
}
export default MyComponent;