React Functional Components, Props та JSX - Підручник React.js для початківців

React - одна з найпопулярніших бібліотек JavaScript для побудови користувальницьких інтерфейсів.

Якщо ви хочете стати розробником інтерфейсу або знайти роботу з веб-розробки, вам, мабуть, було б корисно вивчити React поглиблено.

У цій публікації ви збираєтесь вивчити деякі основи React, такі як створення компонента, синтаксис JSX та Props. Якщо у вас немає або мало досвіду роботи з React, ця публікація для вас.

Для початку, ось як ви можете встановити React.

Що таке JSX?

Перше, що ви зрозумієте після встановлення вашого першого проекту React, це те, що функція JavaScript повертає деякий HTML-код:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Це спеціальне та дійсне розширення синтаксису для React, яке називається JSX (JavaScript XML). Зазвичай у проектах, пов'язаних з інтерфейсом, ми зберігаємо HTML, CSS та JavaScript в окремих файлах. Однак у React це працює трохи інакше.

У проектах React ми не створюємо окремих файлів HTML, оскільки JSX дозволяє нам писати HTML і JavaScript, об’єднані разом в одному файлі, як у прикладі вище. Однак ви можете розділити ваш CSS в інший файл.

На початку JSX може здатися трохи дивним. Але не хвилюйтеся, ви звикнете.

JSX дуже практичний, оскільки ми також можемо виконувати будь-який код JavaScript (логіку, функції, змінні тощо) всередині HTML безпосередньо за допомогою фігурних дужок {}, наприклад:

function App() { const text = 'Hello World'; return ( 

{text}

); }

Крім того, ви можете призначити HTML-теги змінним JavaScript:

const message = 

React is cool!

;

Або ви можете повернути HTML всередині логіки JavaScript (наприклад, якщо-інакше випадки):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Я не буду вдаватися в подальші подробиці JSX, але обов’язково враховуйте такі правила під час написання JSX:

  • Теги HTML та компонентів завжди повинні бути закритими
  • Деякі атрибути, такі як “class”, стають “className” (оскільки клас відноситься до класів JavaScript), “tabindex” стає “tabIndex” і повинен бути записаний camelCase
  • Ми не можемо повернути більше одного елемента HTML одночасно, тому обов’язково оберніть їх усередині батьківського тегу:
return ( 

Hello

World

);
  • або як альтернативу ви можете обернути їх порожніми тегами:
return (  

Hello

World

);

Ви також можете переглянути мою інструкцію React for Beginners для отримання додаткової інформації:

Що таке функціональні та класні компоненти?

Після звикання до синтаксису JSX наступне, що слід зрозуміти, - це структура React на основі компонентів.

Якщо ви переглянете приклад коду вгорі цього повідомлення, ви побачите, що код JSX повертається функцією. Але функція App () не є звичайною функцією - вона насправді є компонентом. Отже, що таке компонент?

Що таке компонент?

Компонент - це незалежний багаторазовий блок коду, який розділяє інтерфейс на менші частини. Наприклад, якщо ми створювали інтерфейс Twitter із React:

Замість того, щоб будувати весь інтерфейс користувача під одним єдиним файлом, ми можемо і повинні розділити всі розділи (позначені червоним) на менші незалежні частини. Іншими словами, це компоненти.

React має два типи компонентів: функціональнийі клас. Давайте розглянемо кожен з них детальніше.

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

Перший і рекомендований тип компонентів у React - це функціональні компоненти. Функціональний компонент - це в основному функція JavaScript / ES6, яка повертає елемент React (JSX). Згідно з офіційними документами React, наведена нижче функція є дійсним функціональним компонентом:

function Welcome(props) { return 

Hello, {props.name}

; }

Ви також можете створити функціональний компонент із визначенням функції стрілки:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Ця функція є дійсним компонентом React, оскільки вона приймає єдиний аргумент об'єкта "props" (що позначає властивості) з даними та повертає елемент React. - responsejs.org

Щоб мати можливість використовувати компонент пізніше, потрібно спочатку експортувати його, щоб можна було імпортувати де-небудь ще:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

Після імпорту ви можете викликати компонент, як у цьому прикладі:

import Welcome from './Welcome'; function App() { return ( ); }

Отже, функціональний компонент у React:

  • є функцією JavaScript / ES6
  • повинен повернути елемент React (JSX)
  • завжди починається з великої літери (конвенція про імена)
  • за потреби приймає реквізит як параметр

Що таке компоненти класу?

Другий тип компонента - це компонент класу. Компоненти класів - це класи ES6, які повертають JSX. Нижче ви бачите нашу ту саму функцію привітання, цього разу як компонент класу:

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

На відміну від функціональних компонентів, компоненти класу повинні мати додатковий метод render () для повернення JSX.

Навіщо використовувати компоненти класу?

Раніше ми використовували компоненти класу через "стан". У старих версіях React (версія <16.8) не було можливості використовувати стан всередині функціональних компонентів.

Тому нам потрібні були функціональні компоненти лише для відображення інтерфейсу користувача, тоді як ми використовували б компоненти класу для управління даними та деяких додаткових операцій (наприклад, методів життєвого циклу).

Це змінилося із введенням React Hooks, і тепер ми також можемо використовувати стани у функціональних компонентах. (Я буду висвітлювати стан та хуки в наступних публікаціях, тому не заперечуйте перед ними).

Компонент класу:

  • є класом ES6, буде компонентом, коли він "розширить" компонент React.
  • за потреби бере реквізит (у конструкторі)
  • повинен мати візуалізацію ()метод повернення JSX

Що таке реквізит у React?

Іншим важливим поняттям компонентів є спосіб їх спілкування. React має спеціальний об'єкт, який називається prop (означає властивість), який ми використовуємо для передачі даних від одного компонента до іншого.

Але будьте обережні - пропс передає дані лише в односторонньому режимі (лише від батьківського до дочірнього компонентів). За допомогою реквізиту неможливо передати дані від дочірнього батька або до компонентів на одному рівні.

Давайте переглянемо функцію App () вище, щоб побачити, як передавати дані за допомогою реквізиту.

По-перше, нам потрібно визначити проп для вітального компонента і призначити йому значення:

import Welcome from './Welcome'; function App() { return ( ); }

Реквізит - це спеціальні значення, і вони також роблять компоненти більш динамічними. Оскільки компонент Ласкаво просимо тут є дочірньою структурою, нам потрібно визначити реквізит для його батьків (App), щоб ми могли передавати значення та отримувати результат, просто звертаючись до "імені" реквізиту:

function Welcome(props) { return 

Hello, {props.name}

; }

Реакційний реквізит справді корисний

Тож розробники React використовують реквізити для передачі даних, і вони корисні для цієї роботи. Але як щодо управління даними? Реквізит використовується для передачі даних, а не для маніпулювання ними. Я збираюся висвітлити управління даними за допомогою React у своїх майбутніх публікаціях тут, на freeCodeCamp.

Тим часом, якщо ви хочете дізнатись більше про React та веб-розробку, сміливо підписуйтесь на мій канал YouTube.

Дякую за читання!