Как начинаешь новый проект?

Как начинать новый frontend проект

Запуск нового проекта - это важный процесс, который устанавливает фундамент для всей разработки. Вот методический подход.

1. Выбор технологического стека

Первый шаг - определиться с инструментами на основе требований проекта:

Для статических сайтов и лендингов:

• React + Vite (быстрая сборка, современные инструменты)
• Next.js (если нужна SSR, SSG, оптимизация)

Для больших приложений:

• Next.js (встроенная маршрутизация, API routes, оптимизации)
• TypeScript (строгая типизация)
• Tailwind CSS (утилитарные стили)

Stack для новых проектов:

Node.js (18+)
React (19+)
TypeScript
Tailwind CSS
Vite или Next.js
Pnpm (быстрее, чем npm)

2. Инициализация проекта

С помощью Create React App (CRA) - устаревает:

npx create-react-app my-app
cd my-app
npm start

С помощью Vite (современный выбор):

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

С помощью Next.js (рекомендуется для больших проектов):

npx create-next-app@latest my-app
cd my-app
npm run dev

3. Настройка TypeScript

Обновляем tsconfig.json для строгой типизации:

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

4. Установка и настройка Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js:

export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Настройка ESLint и Prettier

Установка:

npm install -D eslint prettier eslint-plugin-react
npm install -D eslint-config-prettier

.eslintrc.json:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

.prettierrc:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": false,
  "printWidth": 80,
  "tabWidth": 2
}

6. Структура папок

my-app/
├── src/
│   ├── components/
│   │   ├── ui/              (кнопки, инпуты, карточки)
│   │   ├── layout/          (header, footer, nav)
│   │   └── features/        (модули функционала)
│   ├── pages/               (маршруты, если не Next.js)
│   ├── hooks/               (пользовательские хуки)
│   ├── contexts/            (React Context)
│   ├── lib/                 (утилиты, API клиенты)
│   ├── types/               (TypeScript интерфейсы)
│   ├── styles/              (глобальные стили)
│   ├── App.tsx              (корневой компонент)
│   └── main.tsx             (точка входа)
├── public/                  (статические файлы)
├── tests/                   (тесты)
├── .env.example             (пример переменных окружения)
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── vite.config.ts           (или next.config.js)

7. Настройка тестирования

Vitest для unit тестов:

npm install -D vitest @testing-library/react @testing-library/jest-dom

vitest.config.ts:

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./src/test/setup.ts'],
  },
})

Playwright для E2E тестов:

npm install -D @playwright/test
npx playwright install

8. Настройка переменных окружения

.env.example:

VITE_API_URL=http://localhost:3000
VITE_APP_NAME=MyApp

.env.local (не коммитить):

VITE_API_URL=http://api.example.com

В коде:

const apiUrl = import.meta.env.VITE_API_URL

9. Git инициализация

git init
git add .
git commit -m "Initial commit"

.gitignore:

node_modules/
dist/
.env.local
.DS_Store
.vscode/
.idea/

10. Package.json скрипты

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .ts,.tsx",
    "format": "prettier --write src",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest --coverage",
    "type-check": "tsc --noEmit"
  }
}

11. API клиент

Создаём утилиту для работы с API:

// lib/api.ts
const API_URL = import.meta.env.VITE_API_URL

export async function fetchApi(endpoint: string, options: RequestInit = {}) {
  const response = await fetch(`${API_URL}${endpoint}`, {
    headers: {
      'Content-Type': 'application/json',
      ...options.headers,
    },
    ...options,
  })

  if (!response.ok) {
    throw new Error(`API error: ${response.status}`)
  }

  return response.json()
}

Чеклист готовности проекта

• TypeScript настроен со strict: true
• Tailwind CSS подключен
• ESLint и Prettier установлены
• Структура папок создана
• Git репозиторий инициализирован
• Переменные окружения настроены
• Виды тестирования (unit + E2E) настроены
• Build работает без ошибок
• API клиент готов
• README с инструкциями запуска

Best Practices

• Используй TypeScript от начала - проще исправлять ошибки
• Настрой линтинг и форматирование - сэкономит время на code review
• Не устанавливай лишние зависимости - они усложняют проект
• Структурируй код логически - облегчает навигацию в большом проекте
• Документируй переменные окружения - другим разработчикам будет понятнее
• Запланируй тестирование с начала - проще писать тесты параллельно с кодом

Правильная настройка проекта - это инвестиция, которая окупится во время разработки через удобство и скорость работы.