04. Props как способ работы с данными.md

Props как способ работы с данными

Реакт это не только про вёрстку, но и про работу с данными

В прошлом уроке мы изучили АПИ Реакта и узнали про функцию React.createElement(type, props, children). Давайте поговорим о пропах подробнее.

Пропы

Помните третий урок, где мы говорили про базовый Джаваскрипт? В Джсе есть тип данных Object — данные в формате ключ: значение, например,

{
  isUpdated: true,
  title: "2-комнатная квартира в центре Москвы"
}

Кстати, вопрос: назовёте сходу типы данных у каждого из ключей? ответ: Boolean и String.

Пропы — это объект со всеми пропами, которые вы передаёте или получаете в компоненте. Сложно? Так давайте сделаем свои компоненты и попробуем разобраться!

iframe: https://jsfiddle.net/yd2s3md4/10/embedded/js,html,result/

Сложно читать? Следующий урок избавит нас от необходимости писать React.createElement и мы перейдём к <Movie title="2001: A Space Odyssey" />

Тут нужно сделать ремарку: создание компонента — это объявление его через функцию, а вызов компонента (использование) — это передача его в React.createElement(). Почему можно передавать как функции, так и строки типа 'img' или 'h1'? Потому что Реакт сам и разбирается где ваш компонент, а где хтмл-тег.

Важное отличие пропов от атрибутов в ХТМЛ это факт, что туда можно передавать любые типы данных. Если вы помните, в атрибутах можно передавать только строки (isUpdated="true"), в Реакте можно даже функции. Это знание нам пригодится в 8 и 9 уроках.

Чилдрен

Чилдрен это то, что находится между открывающим и закрывающим тегом (<h1>title</h1>). Чилдрен доступен под props.children и передаётся третьим параметром в React.createElement() и, конечно же, тоже может быть любого типа — хоть функцией, а об этом уже в 19 уроке.

Итог

В этом самом маленьком уроке (!) мы разобрались с пропами подробнее и заложили понимание на будущее. Тезисно, пропы — это атрибуты компонентов, в которые можно передавать данные любых типов.

Кстати, почему пропс? Потому что properties — свойства.