В React в основному є два компоненти:

• Функціональні компоненти
• Компоненти класу

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

• Функціональні компоненти - це основні функції JavaScript. Це, як правило, функції зі стрілками, але їх також можна створити за допомогою functionключового слова regular .
• Іноді їх називають "німими" або "без громадянства" компонентами, оскільки вони просто приймають дані та відображають їх у певній формі; тобто вони в основному відповідають за надання UI.
• Методи життєвого циклу реагувати (наприклад, componentDidMount) не можна використовувати у функціональних компонентах.
• У функціональних компонентах не використовується метод візуалізації.
• Вони в основному відповідають за користувальницький інтерфейс і зазвичай є лише презентаційними (наприклад, компонент кнопки).
• Функціональні компоненти можуть приймати та використовувати реквізит.
• Функціональним компонентам слід віддавати перевагу, якщо вам не потрібно використовувати стан React.

import React from "react"; const Person = props => ( 
Hello, {props.name}
 ); export default Person;

Компоненти класу

• Компоненти класу використовують клас ES6 і розширюють Componentклас у React.
• Іноді їх називають «розумними» або «державними» компонентами, оскільки вони, як правило, реалізують логіку та стан.
• Методи життєвого циклу React можна використовувати всередині компонентів класу (наприклад, componentDidMount).
• Ви передаєте реквізит до компонентів класу і отримуєте доступ до них за допомогою this.props

import React, { Component } from "react"; class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } } render() { return ( 
Hello Person
 ); } } export default Person;

Більше інформації

• Компоненти React
• Функціональні компоненти проти класу
• Функціональні компоненти та бездержавні функціональні компоненти в React
• Держава та життєвий цикл