A React főleg két komponenst tartalmaz:

• Funkcionális alkatrészek
• Osztály-alkatrészek

Funkcionális alkatrészek

• A funkcionális komponensek a JavaScript alapvető funkciói. Ezek általában nyílfüggvények, de létrehozhatók a szokásos functionkulcsszóval is.
• Néha „buta” vagy „hontalan” komponenseknek nevezik őket, mivel egyszerűen elfogadják az adatokat és valamilyen formában megjelenítik azokat; vagyis elsősorban ők felelősek a felhasználói felület megjelenítéséért.
• A reakció életciklus-módszerek (például componentDidMount) nem használhatók funkcionális komponensekben.
• A funkcionális komponensekben nincs renderelési módszer.
• Ezek elsősorban a felhasználói felületért felelősek, és általában csak prezentációs jellegűek (például egy gomb komponens).
• A funkcionális alkatrészek elfogadják és felhasználhatják a kellékeket.
• A funkcionális komponenseket előnyben kell részesíteni, ha nem kell használni a React állapotot.

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

Osztály-alkatrészek

• Az osztálykomponensek az ES6 osztályt használják, és a Reactben kibővítik az Componentosztályt.
• Néha „intelligens” vagy „állapotos” komponenseknek hívják őket, mivel hajlamosak megvalósítani a logikát és az állapotot.
• A reagálási életciklus-módszerek alkalmazhatók osztálykomponenseken belül (például componentDidMount).
• Átadja a kellékeket az osztály összetevőinek, és hozzájuk fér 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;

Több információ

• React Components
• Funkcionális vs osztályösszetevők
• Állapotú és hontalan funkcionális alkatrészek a React
• Állapot és életciklus