React — что это и зачем
React — самая популярная библиотека для строительства интерфейсов. ИИ генерирует React-компоненты по умолчанию когда речь про веб. Понимать React — это понимать половину современной фронтенд-разработки.
Главная идея — компоненты
Компонент — это переиспользуемый кусок UI. Кнопка — компонент. Карточка товара — компонент. Целая страница — компонент составленный из мелких. В React компонент = ОБЫЧНАЯ ФУНКЦИЯ которая возвращает JSX (то что видит пользователь). Имя компонента всегда с большой буквы — так React отличает компонент от обычного HTML-тега.
JSX — HTML внутри JS
JSX — это синтаксис который выглядит как HTML, но это JavaScript. <div>Привет</div> в .jsx-файле компилируется в React.createElement(...). Внутри JSX можно вставлять переменные через {}: <h1>{title}</h1>. Можно функции:
Атрибуты по правилам JS: className вместо class, htmlFor вместо for, camelCase для onClick, onChange.
Props — передача данных
Props — это аргументы компонента. Один объект со всеми переданными «атрибутами». Передаёшь так: <Greeting name="Алексей" />. Принимаешь так:
или с деструктуризацией
Props ТОЛЬКО ЧИТАЕМЫЕ — компонент не должен менять то что ему передали.
Дети — children
<Card>содержимое</Card> — то что между тегами доступно как props.children. Компоненты-обёртки используют children для того чтобы внутрь можно было вставить ЧТО УГОДНО:
Это как HTML — можешь вкладывать что хочешь в свой компонент.
// === Простой компонент ===
function Hello() {
return <h1>Привет, мир</h1>;
}
// Использование
<Hello />
// === С props ===
function Greeting({ name, age }) {
return (
<p>
Привет, {name}! Тебе {age} лет.
</p>
);
}
// Использование
<Greeting name="Алексей" age={28} />
// === С children ===
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div className="card-body">
{children}
</div>
</div>
);
}
// Использование — внутрь можно класть что угодно
<Card title="Профиль">
<p>Имя: Алексей</p>
<button>Редактировать</button>
</Card>
// === Композиция — главная сила React ===
function App() {
return (
<main>
<Greeting name="Алексей" age={28} />
<Card title="Профиль">
<p>Программист</p>
</Card>
<Card title="Заказы">
<ul>
<li>Молоко</li>
<li>Хлеб</li>
</ul>
</Card>
</main>
);
}
// === ВАЖНО: правила имён ===
function userprofile() {} // ❌ React воспримет как HTML-тег
function UserProfile() {} // ✅ с большой буквы — компонент
// className вместо class (class — зарезервированное в JS)
<div className="card"></div> // ✅
<div class="card"></div> // ❌ React предупредит
// Условный рендер через &&
{isLoggedIn && <p>Добро пожаловать</p>}
// Тернарный — для else
{isAdmin ? <AdminPanel /> : <UserPanel />}
// Список через map
{products.map(p => <Card key={p.id} title={p.name}>{p.price}</Card>)}
// key обязателен на каждом ребёнке списка — React им оптимизирует обновленияМинимальный React-проект — компоненты, props, children