ישנם בעיקר שני מרכיבים ב- React:

• רכיבים פונקציונליים
• רכיבי כיתה

רכיבים פונקציונליים

• רכיבים פונקציונליים הם פונקציות JavaScript בסיסיות. אלה בדרך כלל פונקציות חץ, אך ניתן ליצור אותן גם בעזרת functionמילת המפתח הרגילה .
• לפעמים מכונים רכיבים "מטומטמים" או "חסרי מדינה" מכיוון שהם פשוט מקבלים נתונים ומציגים אותם בצורה כלשהי; כלומר הם אחראים בעיקר על ביצוע ממשק המשתמש.
• componentDidMountלא ניתן להשתמש בשיטות מחזור חיי תגובה (למשל ) ברכיבים פונקציונליים.
• אין שיטת עיבוד המשמשת ברכיבים פונקציונליים.
• אלה אחראים בעיקר לממשק המשתמש והם בדרך כלל מצגת בלבד (למשל, רכיב כפתור).
• רכיבים פונקציונליים יכולים לקבל אביזרים ולהשתמש בהם.
• יש להעדיף רכיבים פונקציונליים אם אינך צריך להשתמש במצב תגובה.

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

רכיבי כיתה

• רכיבי הכיתה משתמשים בכיתה ES6 ומרחיבים את Componentהכיתה ב- 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;

עוד מידע

• רכיבי תגובה
• רכיבים פונקציונליים לעומת כיתתיים
• רכיבים פונקציונליים חסרי-מדינה בתגובה
• מצב ומחזור חיים