React Компоненти

Компоненти схожі на функції, які повертають елементи HTML.

Компоненти React

Компоненти — це незалежні фрагменти коду, які можна багаторазово використовувати. Вони служать тій самій меті, що й функції JavaScript, але працюють ізольовано та повертають HTML.

Компоненти бувають двох типів: компоненти класу та компоненти функцій. У цьому посібнику ми зосередимося на компонентах функцій.

Створіть свій перший компонент

Під час створення компонента React назва компонента МАЄ починатися з великої літери.

Компонент класу (Class)

Компонент класу повинен містити інструкцію extends React.Component. Ця інструкція створює успадкування React.Component і надає компоненту доступ до функцій React.Component.

Для компонента також потрібен метод render(), цей метод повертає HTML.

class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}

Компонент функції (Function)

Ось той самий приклад, що й вище, але замість нього створено за допомогою компонента Function.

Компонент Function також повертає HTML і поводиться приблизно так само, як компонент Class, але компоненти Function можуть бути написані з використанням набагато меншого коду, їх легше зрозуміти, і їм буде віддано перевагу в цьому посібнику.

function Car() {
return <h2>Hi, I am a Car!</h2>;
}

Рендеринг (візуалізація) компонента

Тепер ваша програма React має компонент під назвою Car, який повертає елемент <h2>.

Щоб використовувати цей компонент у своїй програмі, використовуйте синтаксис, подібний до звичайного HTML: <Car />

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Props (Реквізит)

Компоненти можна передати як props, що означає властивості (реквізити).

Реквизити схожі на аргументи функції, і ви надсилаєте їх у компонент як атрибути.

Ви дізнаєтеся більше про props в наступному розділі.

function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);

Компоненти в компонентах

Ми можемо посилатися на компоненти всередині інших компонентів:

function Car() {
return <h2>I am a Car!</h2>;
}

function Garage() {
return (
<>
  <h1>Who lives in my Garage?</h1>
  <Car />
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Компоненти у файлах

React — це повторне використання коду, тому рекомендується розділяти ваші компоненти на окремі файли.

Для цього створіть новий файл із розширенням .js і вставте в нього код:

function Car() {
return <h2>Hi, I am a Car!</h2>;
}

export default Car;

Щоб мати можливість використовувати компонент Car, вам потрібно імпортувати файл у ваш додаток.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

function (props) {
return <h2>Hi, I'm {props.name}</h2>;
}