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

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

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

• Функционалните компоненти са основни JavaScript функции. Това обикновено са функции със стрелки, но могат да бъдат създадени и с обикновената functionключова дума.
• Понякога наричани „тъпи“ или „несъстоятелни“ компоненти, тъй като те просто приемат данни и ги показват в някаква форма; тоест те са отговорни главно за изобразяване на потребителския интерфейс.
• Методите на жизнения цикъл на React (например 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 Components
• Функционални срещу клас компоненти
• Функционални компоненти срещу състояние без гражданство в React
• Състояние и LifeCycle