1. Создание компонента React:
   Чтобы создать компонент React в TypeScript, вы можете использовать либо компонент-функцию, либо компонент класса. Давайте рассмотрим оба примера:

   // Function Component
   import React from 'react';
   const MyComponent: React.FC = () => {
    return <div>Hello, React TypeScript!</div>;
   };
   // Class Component
   import React, { Component } from 'react';
   class MyComponent extends Component {
    render() {
      return <div>Hello, React TypeScript!</div>;
    }
   }

2. Добавление реквизитов в компонент.
   Свойства позволяют передавать данные из родительского компонента в дочерний компонент. Вот пример того, как вы можете определять и использовать реквизиты в TypeScript:

   interface MyComponentProps {
    name: string;
   }
   const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
    return <div>Hello, {name}!</div>;
   };
   // Usage
   <MyComponent name="John" />;

3. Управление состоянием с помощью useState Hook:
   Хук useStateReact позволяет управлять состоянием в функциональных компонентах. Вот пример:

   import React, { useState } from 'react';
   const Counter: React.FC = () => {
    const [count, setCount] = useState(0);
    const increment = () => {
      setCount(count + 1);
    };
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={increment}>Increment</button>
      </div>
    );
   };

4. Обработка ввода формы с помощью контролируемых компонентов.
   Управляемые компоненты позволяют вам управлять вводом формы как частью состояния вашего компонента. Вот пример:

   import React, { useState } from 'react';
   const MyForm: React.FC = () => {
    const [value, setValue] = useState('');
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      setValue(event.target.value);
    };
    return (
      <div>
        <input type="text" value={value} onChange={handleChange} />
      </div>
    );
   };

5. Извлечение данных с помощью хука useEffect:
   Хук useEffectиспользуется для обработки побочных эффектов в функциональных компонентах. Вот пример получения данных из API:

   import React, { useState, useEffect } from 'react';
   const MyComponent: React.FC = () => {
    const [data, setData] = useState([]);
    useEffect(() => {
      fetch('https://api.example.com/data')
        .then((response) => response.json())
        .then((data) => setData(data));
    }, []);
    return (
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
   };

Это всего лишь несколько примеров, которые помогут вам начать свой путь к освоению React с помощью TypeScript. Не забывайте практиковаться, экспериментировать и исследовать огромные возможности, которые предлагают эти технологии. Приятного кодирования!