Как сделать сайт-визитку на React: пошаговое руководство для 2026 года

Короткий ответ: сайт-визитку на React в 2026 году делают в стеке Vite + React 18 + TypeScript + Tailwind CSS + react-helmet-async + prerender для SSG. Структура — 7 блоков: hero, о компании, услуги, преимущества, кейсы или отзывы, FAQ, контакты с формой. Форма отправляется в Telegram через бота. Деплой — на GitHub Pages бесплатно или на VPS за 300–500 ₽/месяц. Общее время разработки самостоятельно — 25–40 часов, с подрядчиком — от 50 000 ₽. Главное: не делать CSR-only сайт, обязательно настроить пререндер, иначе ни Яндекс, ни AI-краулеры не увидят контент.

Почему именно React, а не WordPress или конструктор

Для сайта-визитки доступны три пути: конструкторы (Tilda, Wix), WordPress, React или другой современный JS-фреймворк. Каждый имеет смысл в своём сценарии.

Конструктор подходит, если нужен лендинг на 1–3 страницы, нет требований к производительности, не планируется масштабирование. Стоимость — 500–1500 ₽/месяц подписки, плюс ограничение в брендинге и SEO.

WordPress логичен, если будет много контента, нужны блог и формы из коробки, разработчик дешевле React-фронтендера. Минусы — стоимость VPS выше из-за PHP и MySQL, регулярные обновления плагинов, проблемы с производительностью на дешёвом хостинге.

React-сайт со статической генерацией — лучший вариант, когда важна скорость загрузки (PageSpeed 95+), нужна свобода в дизайне и анимациях, планируется расширение до полноценной веб-платформы, важен SEO под Яндекс и AI-поиск. Хостинг копеечный (или бесплатный), вес страницы 50–150 КБ, обновлений нет — статический HTML живёт годами без поломок. Подробное сравнение есть в нашей статье React vs WordPress для SEO 2026.

Выбор стека: что брать и почему

Для визитки в 2026 году рабочий стек выглядит так.

Vite 5 — сборщик. В разы быстрее Webpack, dev-сервер запускается за секунду, HMR мгновенный. Билд продакшен-версии за 5–15 секунд.

React 18 — фреймворк. Зрелая экосистема, огромный пул разработчиков, отличная документация. Альтернатива — Vue 3, тоже хороший выбор, но React-разработчиков на рынке больше.

TypeScript — типизация. Для визитки можно обойтись без неё, но мы рекомендуем брать с первого дня: меньше ошибок, понятнее код через год, проще передавать другому разработчику.

Tailwind CSS — стили. Утилитарный подход, никакого хаоса в CSS-файлах, отличный production-вес (15–30 КБ после purge). Альтернатива — CSS-модули или styled-components, но Tailwind в 2026 году стандарт.

react-helmet-async — управление мета-тегами для каждой страницы.

react-router-dom — клиентский роутинг.

vite-plugin-prerender или puppeteer — статическая генерация HTML для SEO.

Для формы — fetch на собственный API-эндпоинт (Telegram bot или PHP-скрипт). Никаких тяжёлых форм-библиотек на визитке не нужно.

Структура сайта-визитки: 7 обязательных блоков

Визитка — это одностраничник или мини-сайт на 3–5 страниц с обязательным набором блоков.

Блок 1. Hero (первый экран). Заголовок с УТП (уникальным торговым предложением), подзаголовок, CTA-кнопка, фоновое изображение или градиент. Заголовок должен за 2 секунды объяснить, что вы делаете и для кого. Пример: «Разработка сайтов на React под ключ — для бизнеса в Москве и регионах».

Блок 2. О компании / обо мне. Кратко: кто вы, сколько лет на рынке, чем отличаетесь от конкурентов. 2–3 абзаца, фото или иллюстрация.

Блок 3. Услуги или продукты. Карточки с 3–6 услугами. На каждой — название, краткое описание (2–3 строки), иконка, кнопка «подробнее» или цена «от».

Блок 4. Преимущества. 4–6 пунктов: что получит клиент. Не «индивидуальный подход» и «качество», а конкретика: «Срок 14 дней», «Гарантия 1 год», «Бесплатная техподдержка 3 месяца».

Блок 5. Кейсы или отзывы. 3–5 примеров работ с фото и кратким описанием результата, либо отзывы клиентов с фотографией и должностью.

Блок 6. FAQ. 5–7 ответов на частые вопросы. Помогает закрыть возражения и работает на SEO + GEO (попадание в AI-ответы). О FAQ для AI подробно в статье GEO-оптимизация под YandexGPT.

Блок 7. Контакты с формой. Телефон, мессенджеры, email, форма обратной связи, карта (если есть офис), реквизиты в футере.

Шаг 1. Создание проекта на Vite

Открываем терминал, создаём проект:

npm create vite@latest my-vizitka -- --template react-ts
cd my-vizitka
npm install

Vite создаёт скелет с TypeScript и React. Удаляем дефолтный контент App.tsx, index.css.

Устанавливаем дополнительные пакеты:

npm install react-router-dom react-helmet-async
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Настраиваем tailwind.config.js — указываем content: ["./index.html", "./src/**/*.{ts,tsx}"], добавляем директивы в src/index.css:

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

Шаг 2. Базовая структура файлов

Создаём папки и файлы:

src/
  components/
    Header.tsx
    Footer.tsx
    Hero.tsx
    About.tsx
    Services.tsx
    Advantages.tsx
    Cases.tsx
    Faq.tsx
    Contacts.tsx
    ContactForm.tsx
  pages/
    HomePage.tsx
    ServicePage.tsx
  data/
    services.ts
    faq.ts
  App.tsx
  main.tsx
  index.css

В main.tsx оборачиваем приложение в HelmetProvider и BrowserRouter:

import { HelmetProvider } from "react-helmet-async";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <HelmetProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </HelmetProvider>
);

Шаг 3. Компоненты блоков

Каждый блок — отдельный компонент. Пример Hero.tsx:

export function Hero() {
  return (
    <section className="bg-gradient-to-br from-blue-600 to-indigo-800 text-white py-20">
      <div className="container mx-auto px-4 text-center">
        <h1 className="text-4xl md:text-6xl font-bold mb-6">
          Сайты на React под ключ
        </h1>
        <p className="text-xl mb-8">
          Быстрые, SEO-оптимизированные сайты для бизнеса
        </p>
        <a href="#contacts" className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold">
          Обсудить проект
        </a>
      </div>
    </section>
  );
}

Аналогично пишем остальные блоки. Контент услуг и FAQ выносим в data/services.ts и data/faq.ts — массивы объектов с типизацией. Это упрощает редактирование без правки JSX.

Шаг 4. Форма обратной связи через Telegram

Самый простой способ принимать заявки на статичном сайте без бэкенда — Telegram Bot API. Создаём бота через @BotFather, получаем токен и chat_id вашего канала или личного чата.

Компонент ContactForm:

const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [message, setMessage] = useState("");

const handleSubmit = async (e: FormEvent) => {
  e.preventDefault();
  const text = `Новая заявка:\nИмя: ${name}\nТел: ${phone}\nСообщение: ${message}`;
  await fetch(`https://api.telegram.org/botTOKEN/sendMessage`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ chat_id: "CHAT_ID", text }),
  });
  alert("Заявка отправлена");
};

Проблема: токен бота виден в исходниках. Это плохо. Лучше сделать прокси через свой PHP-скрипт или Cloudflare Worker, который принимает данные от формы и сам отправляет их в Telegram. Тогда токен спрятан на сервере.

Для визитки на 50–200 заявок в день этого решения достаточно. Если ожидается больше — стоит брать полноценный бэкенд.

Шаг 5. SSG — статическая генерация для SEO

Это самый важный шаг. Без SSG ваш React-сайт — это CSR (Client-Side Rendering): сервер отдаёт пустой HTML и JS-бандл, контент рендерится в браузере. Большинство поисковых ботов и все AI-краулеры таких страниц не видят. О том, как это убивает индексацию, мы писали в статье Сайт не попадает в нейросеть.

Подключаем vite-plugin-prerender:

npm install -D vite-plugin-prerender puppeteer

В vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import prerender from "vite-plugin-prerender";

export default defineConfig({
  plugins: [
    react(),
    prerender({
      staticDir: path.join(__dirname, "dist"),
      routes: ["/", "/uslugi", "/kontakty", "/o-nas"],
    }),
  ],
});

После npm run build в папке dist окажется не пустой index.html, а полноценные HTML для каждого роута с уже отрендеренным контентом. Их видят и Яндекс, и Google, и GPTBot, и YandexGPT-Bot.

Альтернатива — Next.js с режимом export или Astro. Они дают SSG из коробки, но для простой визитки Vite + prerender проще и легче.

Шаг 6. SEO-метатеги и Schema

На каждой странице используем react-helmet-async для уникальных title, description, og-тегов:

<Helmet>
  <title>Разработка сайтов на React — Like Sites</title>
  <meta name="description" content="..."/>
  <meta property="og:title" content="..."/>
</Helmet>

Добавляем JSON-LD разметку через тег <script type="application/ld+json"> внутри Helmet. Обязательные типы: Organization (или LocalBusiness), WebSite, BreadcrumbList. Для FAQ-блока — FAQPage. Для статей блога — Article. Полный гайд в нашей статье Schema.org: полный гайд.

Создаём robots.txt и sitemap.xml. В robots.txt разрешаем индексацию основным ботам и AI-краулерам (GPTBot, PerplexityBot, ClaudeBot, YandexGPT-Bot) — подробности в статье Robots.txt для AI-краулеров 2026.

Шаг 7. Деплой: GitHub Pages или VPS

Когда сайт готов, его нужно опубликовать. Два основных варианта.

GitHub Pages — бесплатно. Подходит, если домен можно настроить как поддомен github.io или ваш собственный без бэкенда. Создаём репозиторий, в файле .github/workflows/deploy.yml настраиваем GitHub Action, которая на каждый пуш в main билдит проект и публикует папку dist в ветку gh-pages. Через 1–2 минуты после пуша сайт обновлён. Свой домен подключается через настройки репозитория и CNAME у регистратора.

Минусы GitHub Pages: только статика (форму придётся отправлять через сторонний сервис), нет логов посещений (нужен Яндекс Метрика отдельно), ограничения по трафику (мягкие, но есть).

VPS — 300–500 ₽/месяц. Берём VPS у Selectel, Beget, Timeweb. Ставим nginx, настраиваем SSL через Let's Encrypt, билдим проект на локальной машине, заливаем папку dist на сервер через rsync или Git с deploy-хуком. Можно подключить GitHub Actions для автодеплоя по пушу.

Плюсы VPS: полный контроль, можно поднять PHP/Node для обработки форм без сторонних сервисов, свои логи, никаких ограничений. Минусы: 300–500 ₽/месяц, нужно базово знать Linux.

Для нашей команды стандартный сценарий — VPS на Beget или Selectel с автодеплоем через GitHub Actions. Подробнее о наших процессах — на странице разработки сайтов.

Производительность и Core Web Vitals

Сайт-визитка на React при правильной настройке выдаёт PageSpeed 95+ на десктопе и 90+ на мобильных. Что для этого нужно:

Минификация и code-splitting — Vite делает из коробки. Изображения в WebP с тегами srcset и loading="lazy" для всего, кроме первого экрана. Шрифты подгружаем через font-display: swap, локально с самого сервера, не с CDN Google Fonts (быстрее и приватнее). Никаких тяжёлых анимационных библиотек на визитке не нужно — CSS transitions достаточно.

Метрики Core Web Vitals для статической React-визитки: LCP < 1.5 с, FID < 50 мс, CLS < 0.05. Это лучшие показатели среди всех движков.

Сколько стоит разработка

Самостоятельно (если вы разработчик уровня middle): 25–40 часов работы. Если ваш час стоит 2000 ₽ — это эквивалент 50 000 – 80 000 ₽ упущенного времени, но прямых затрат 0.

С фрилансером на Хабре или FL.ru: 30 000 – 70 000 ₽ за полный цикл, срок 2–4 недели. Качество сильно зависит от исполнителя.

В студии типа Like Sites: 80 000 – 200 000 ₽ за визитку с уникальным дизайном, SSG, формами, базовой SEO-оптимизацией. Срок 3–5 недель. Подробный разбор стоимости — в нашей статье Сколько стоит сайт на React в 2026.

Готовый шаблон с настройкой: 15 000 – 30 000 ₽. Минус — все конкуренты используют те же 5–10 ходовых шаблонов, дизайн узнаваем.

Поддержка и обновления

В отличие от WordPress, у React-сайта нет регулярных security-обновлений плагинов. Минимальный поддерживающий цикл выглядит так.

Раз в 3–6 месяцев — обновление зависимостей через npm-check-updates, проверка совместимости, повторный билд и деплой.

Раз в месяц — проверка работы формы (тестовая заявка), мониторинг скорости через PageSpeed Insights, обновление контента (новые кейсы, отзывы).

По мере необходимости — добавление новых страниц, услуг, статей блога. Каждое добавление — обычный пуш в Git с автодеплоем.

Стоимость поддержки в студии — от 5000 ₽/месяц за базовый пакет (контент-апдейты, мониторинг, продление SSL). На странице цен расписаны тарифы.

Распространённые ошибки и как их избежать

Не настроили SSG. Сайт красивый, но ни в одной поисковой системе нет. Решение — обязательный prerender на этапе билда.

Токен Telegram-бота в исходниках. Любой может скачать ваш JS и спамить через ваш бот. Решение — прокси через PHP-скрипт или Cloudflare Worker.

Тяжёлые изображения. Hero-картинка на 2 МБ убивает скорость загрузки. Решение — WebP с явным width/height в HTML, srcset для разных экранов, lazy для всех картинок ниже первого экрана.

Нет аналитики. Без Яндекс Метрики и Google Analytics вы не узнаете, сколько посетителей, откуда и что им интересно.

Нет robots.txt и sitemap.xml. Боты долго ищут страницы, индексация задерживается на недели. Решение — добавить оба файла до запуска.

CSR-only без пререндера. Главная ошибка, которую мы видим в 80% самописных React-визиток. Подробности в статьях про проблемы индексации и статика vs динамика.

Что в итоге

Сайт-визитка на React в 2026 году — оптимальный выбор для бизнеса, который хочет быструю загрузку, отличный SEO и свободу в дизайне. Стек Vite + React + TypeScript + Tailwind + SSG проверен сотнями проектов. Структура из 7 блоков покрывает все задачи визитки. Деплой бесплатный или за копейки. Главное — не забыть про пререндер, метатеги и схему, иначе все преимущества теряются.

Если делать самостоятельно, заложите 30–40 часов и неделю-две вечерами. Если поручать студии вроде Like Sites — мы запускаем визитки за 3–5 недель под ключ, с SEO и формами. Посмотреть наши работы можно на странице технологий, а узнать стоимость — на странице цен.

Сравнение React-визитки с альтернативами в 2026

Прежде чем выбрать стек, полезно видеть, чем React-визитка отличается от типовых решений по ключевым параметрам. Ниже сводная таблица с реальными показателями, которые мы замерили на собственных и клиентских проектах.

React-визитка выигрывает по всем колонкам. Номинально в список входит и «HTML вручную», но без реактивности и компонентной модели развивать сайт сложнее. Tilda и Wix — быстрый старт, но плата за это — низкий PageSpeed и зависимость от платформы. WordPress хорош для блогов, но для визитки избыточен и медленен без серьёзной оптимизации. Подробное сравнение React и WordPress в SEO — в статье React vs WordPress SEO 2026, а связь со статической архитектурой — в «Статика vs динамика». Для бизнеса, который серьёзно работает с SEO и AI-выдачей в 2026, React с SSG — практически безальтернативный выбор для визитки.