Шпаргалка — React

Общий

Создайте приложение React с шаблоном TypeScript

npx create-react-app uv-app --template typescript

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

Часто используемый

Обработка событий

<button onClick={activateLasers}>
  Activate Lasers
</button>

Список рендеринга

{
  students.map((obj: any, index: any) => (
    <div key={index}> {obj.title} </div>
  ))
}

Условный рендеринг

Тип 1: If стиль оператора

{props.hasImage &&
  <MyImage />
}

Тип 2: стиль оператора If else

{props.hasImage ?
  <MyImage /> :
  <OtherElement/>
}

Крючки

использование состояния

использованиеЭффект

использованиеселектор

Другие

Мемотизация

А. Компонент

Б. Функция

Вызов API с использованием Axios

Компоненты высшего порядка (HOC)

Контекстный API

Маршрутизация с помощью React-Router