Структура проекта и первые компоненты

Введение

Давайте представим, что у вас есть шкаф, полный вещей. Если всё в нём разложено по полочкам, вы легко найдёте, что вам нужно. Но если там творится хаос, найти любимую футболку будет задачей уровня "Во все тяжкие". Аналогично, в React-проекте: хорошая структура делает код читаемым, поддерживаемым и удобным для командной работы.

Четкая организация структуры позволяет:

• Упростить навигацию по коду.
• Повысить читаемость и переиспользуемость компонентов.
• Работать в команде без конфликтов.
• Быстрее находить и исправлять баги.

Основная структура проекта

Для приложения учёта расходов нам потребуется структура, которая масштабируется и удобна для реальной работы.

src/
│
├── components/           # Универсальные UI-компоненты (кнопки, инпуты и т.д.)
│   ├── Button.tsx
│   └── Header.tsx
│
├── pages/                # Страницы (routes) приложения
│   ├── DashboardPage.tsx
│   ├── LoginPage.tsx
│   ├── RegisterPage.tsx
│   └── TransactionsPage.tsx
│
├── services/             # Взаимодействие с бекендом (API-запросы)
│   └── transactionService.ts
│
├── hooks/                # Кастомные хуки
│   └── useTransactions.ts
│
├── store/                # Redux или Context для управления глобальным состоянием
│   ├── index.ts
│   └── transactionsSlice.ts
│
├── styles/               # Общие стили
│   └── globals.css
│
├── App.tsx               # Основной компонент приложения
└── index.tsx             # Точка входа

Создание первых компонентов

1. Компонент Button

Кнопка — один из самых часто используемых элементов в любом приложении. Давайте создадим её как переиспользуемый компонент. Создайте файл Button.tsx в папке components.

//components/Button.tsx
import React from 'react';

// Интерфейс для пропсов компонента Button
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

// Функциональный компонент Button
const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
};

export default Button;

Теперь мы можем вставить эту кнопку в любое место, например, в DashboardPage:

import Button from '../components/Button';

<Button label="Добавить транзакцию" onClick={() => console.log('Добавить')} />

2. Компонент Header

Теперь добавим заголовок. Создайте файл Header.tsx в папке components.

// components/Header.tsx
import React from 'react';

interface HeaderProps {
  title: string;
}

const Header: React.FC<HeaderProps> = ({ title }) => {
  return <h1>{title}</h1v;
};

export default Header;

Теперь в любой странице — будь то дашборд или профиль — можно отобразить заголовок:

<Header title="Ваши финансы под контролем" />

Создание первой страницы

Создадим первую рабочую страницу — DashboardPage, где будет отображаться текущий баланс и список последних транзакций.

//pages/DashboardPage.tsx
import React from 'react';
import Header from '../components/Header';
import Button from '../components/Button';

const DashboardPage: React.FC = () => {
  const handleAddClick = () => {
    console.log('Добавление новой транзакции');
  };

  return (
    <div>
      <Header title="Обзор бюджета" />
      <p>Баланс: $1,250</p>
      <Button label="Добавить транзакцию" onClick={handleAddClick} />
    </div>
  );
};

export default DashboardPage;

Глобальные стили

Мы не будем оставлять стили без внимания! Создайте файл globals.css в папке styles:

/* styles/globals.css */
cssCopyEditbody {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

h1 {
  font-size: 24px;
  margin-bottom: 16px;
}

И не забудьте подключить его в index.tsx:

import './styles/globals.css';

Типичные ошибки новичков на старте

1. Хаос в структуре — если каждый компонент лежит где попало, работа с проектом превращается в мучение.
2. Непоследовательная типизация — забудете описать пропсы или типы состояния, и вскоре начнётся отладка наугад.
3. Слишком много CSS-решений — старайтесь придерживаться одного подхода: CSS Modules, Tailwind или styled-components.

Теперь ваш проект имеет логичную структуру и базовые компоненты. Вы готовы к созданию сложных страниц и функциональности. Далее мы займёмся интеграцией Redux и построением глобального состояния!