Der er hovedsageligt to komponenter i React:

• Funktionelle komponenter
• Klassekomponenter

Funktionelle komponenter

• Funktionelle komponenter er grundlæggende JavaScript-funktioner. Disse er typisk pilfunktioner, men kan også oprettes med det almindelige functionnøgleord.
• Nogle gange kaldet "dumme" eller "statsløse" komponenter, da de simpelthen accepterer data og viser dem i en eller anden form; det er de er hovedsagelig ansvarlige for gengivelse af brugergrænsefladen.
• React-livscyklusmetoder (for eksempel componentDidMount) kan ikke bruges i funktionelle komponenter.
• Der anvendes ingen gengivelsesmetode i funktionelle komponenter.
• Disse er primært ansvarlige for brugergrænsefladen og er typisk kun præsentationsmæssige (for eksempel en knapkomponent).
• Funktionelle komponenter kan acceptere og bruge rekvisitter.
• Funktionelle komponenter bør foretrækkes, hvis du ikke har brug for at bruge React-tilstanden.

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

Klassekomponenter

• Klassekomponenter gør brug af ES6-klassen og udvider Componentklassen i React.
• Nogle gange kaldet "smarte" eller "stateful" komponenter, da de har tendens til at implementere logik og tilstand.
• React-livscyklusmetoder kan bruges i klassekomponenter (for eksempel componentDidMount).
• Du sender rekvisitter ned til klassekomponenter og får adgang til dem med 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;

Mere information

• Reager komponenter
• Funktionelle vs klassekomponenter
• Stateful vs Stateless Functional Components in React
• Tilstand og livscyklus