Опорная идея
Пропсы (props) — это входные данные компонента, которые передают от родителя как атрибуты:
function Hello({ name }) { return <h1>Привет, {name}!</h1>; }
<Hello name="Аня" /> // отрисует «Привет, Аня!» <Hello name="Боря" /> // «Привет, Боря!»
Запись { name } в скобках параметра — это деструктуризация: достаём поле name из объекта пропсов. Можно принять весь объект и обращаться через props.name, но деструктуризация короче и нагляднее.
Передавать можно любые значения — числа, массивы, объекты, функции (через фигурные скобки):
<Card title="Курс" price={0} tags={["js", "react"]} />
Важное правило: пропсы доступны только для чтения. Компонент не должен их менять — он лишь отображает то, что получил. Данные текут сверху вниз: от родителя к ребёнку.