Глава 3. HTML и CSS основы для будущего React-разработчика

Зачем эта глава

React работает с HTML-структурой и CSS-оформлением. Даже если ты хочешь быть «только React-разработчиком», тебе нужны основы.

В этой главе мы без сложных терминов разберём, как строится страница и как задаются стили.

Теория (коротко)

HTML — это структура. Он отвечает за заголовки, абзацы, кнопки, списки и формы.

CSS — это внешний вид. Он отвечает за цвета, отступы, размер текста, сетки.

В React ты пишешь HTML-подобный код, который называется JSX.

Минимальный HTML-скелет

<div>
  <h1>Заголовок</h1>
  <p>Текст абзаца</p>
  <button>Кнопка</button>
</div>

Простой CSS пример

.card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.card h1 {
  margin-bottom: 8px;
}

Стилизация в React

В React можно использовать обычный CSS, CSS Modules и styled-components.

CSS Modules — удобны, когда хочешь изолировать стили в одном компоненте.

/* Card.module.css */
.card {
  padding: 16px;
  border-radius: 12px;
}

import styles from "./Card.module.css";

function Card() {
  return <div className={styles.card}>Карточка</div>;
}

styled-components — подходит, если хочешь писать стили прямо в JS.

import styled from "styled-components";

const Button = styled.button`
  background: #1a5fb4;
  color: white;
`;

Задания