Главная / Статьи / Руководство по настройке React + Vite (2026): ваш первый рабочий приложение, пошагово

ReactViteNode.jsnpmJavaScriptFrontend Development

Руководство по настройке React + Vite (2026): ваш первый рабочий приложение, пошагово

Посмотрим, как установить Node.js, npm, VS Code и Vite для создания структуры React-приложения, при этом узнав, что на самом деле делает каждый из этих инструментов.

1601 слов

«Подходящий момент для создания первого компонента React — это не сразу после просмотра множества учебных видео, а тогда, когда вы настроите подходящую среду и действительно поймёте, зачем нужен каждый элемент».

В предыдущей статье мы рассмотрели, что такое React, почему он был создан в Facebook и как изменил подход разработчиков к созданию веб-приложений.

Теперь мы переходим от теории к практическим задачам.

Прежде чем писать любой компонент, вам нужна рабочая среда, которая может запускать React, мгновенно загружать ваши изменения и поддерживать вас по мере роста приложения.

К концу этой статьи у вас будет рабочее приложение на React на собственном компьютере, и вы поймёте, зачем нужен каждый инструмент в настройках.

Почему мы не можем просто написать код React в файле HTML?

Новички почти всегда задают этот вопрос в первую очередь.

React — это «просто JavaScript», так разве не должен хватить обычного HTML-файла?

Технически это верно, но только в очень ограниченном смысле.

Однако реальные проекты на React опираются на такие элементы, как:

  • JSX
  • ES Modules
  • Hot Module Replacement
  • Управление пакетами
  • Оптимизация сборки

Браузеры не понимают ни один из этих элементов по умолчанию.

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

Это похоже на приготовление еды.

Сырые ингредиенты не едят прямо из холодильника — их сначала готовят.

Настройка проекта на React следует той же логике.

Инструменты, которые мы установим

Существует небольшой набор инструментов, от которых зависит практически каждый разработчик React, и мы установим их все в этом руководстве.

Каждый инструмент решает одну конкретную проблему в рабочем процессе.

Как только всё настроено, вы едва заметите их работу в фоновом режиме.

Понимание Node.js

Распространённое заблуждение заключается в том, что сам React работает на основе Node.js.

Это не так.

React выполняется в браузере, а не в Node.

Node.js предназначен для поддержки во время разработки приложения, а не во время его работы у конечных пользователей.

Он позволяет вам:

  • Устанавливать библиотеки
  • Запускать серверы разработки
  • Создавать оптимизированные пакеты для продакшена
  • Управлять зависимостями проекта

Без Node.js установка и запуск React были бы гораздо сложнее.

Что такое npm?

При установке Node.js автоматически включается npm, сокращение от Node Package Manager.

Представьте ситуацию, когда нужно создать новый проект с нуля и одновременно использовать несколько библиотек, таких как:

  • React
  • React Router
  • Axios
  • Tailwind CSS
  • Redux Toolkit

Вместо того чтобы вручную загружать каждую из них, npm обеспечивает установку с помощью одной команды.

Например:

npm install axios

Достаточно просто выполнить эту команду — npm загружает пакет, интегрирует его в ваш проект и отслеживает используемую версию.

Почему современный React использует Vite

В старых учебниках часто показывают подобную команду для создания структуры проекта:

npx create-react-app my-app

В течение долгого времени это был основной способ.

Однако в наши дни сообщество React в основном перешло на Vite.

Что стало причиной этого сдвига?

В основном желание получить более быстрый опыт разработки в повседневной работе.

Vite предоставляет:

  • Мгновенное запуск проекта
  • Очень быстрая замена модулей в реальном времени (HMR)
  • Меньший размер сборки для производства
  • Более простая конфигурация в целом
  • Лучшая общая производительность

Для тех, кто сейчас изучает React, начать с Vite — разумный выбор.

Шаг 1: Установка Node.js

Скачайте текущую версию LTS (Long-Term Support) Node.js с её официального сайта.

После установки откройте терминал, чтобы проверить, что всё прошло успешно.

node -v

Результат должен выглядеть примерно так:

v24.x.x

Затем проверьте также npm:

npm -v

Если оба команды вернут номера версий, ваш компьютер настроен правильно.

Шаг 2: Установка Visual Studio Code

Технически React можно писать в любом редакторе, но VS Code стал стандартным выбором благодаря своей скорости, экосистеме расширений и мощным инструментам для JavaScript.

Расширения VS Code, которые должен установить каждый разработчик React

Установка небольшого набора дополнений с самого начала значительно улучшает комфорт работы. Стоит добавить в свою настройку:

  • ESLint — для выявления проблем в коде
  • Prettier — для единообразного форматирования
  • Error Lens — для отображения ошибок прямо в коде
  • Auto Rename Tag — для синхронизации соответствующих тегов
  • Path Intellisense — для автодополнения путей к файлам
  • GitLens — для более подробной информации о Git прямо в редакторе
  • ES7+ React Snippets — для быстрого создания базовых структур кода на React

Все вместе они обеспечивают форматирование, раннее выявление ошибок, автодополнение и повышение общей производительности.

Шаг 3: Создание первого проекта React

Откройте окно терминала и запустите:

npm create vite@latest

Вас попросят ответить на несколько вопросов по настройке:

Project Name:
react-beginners

Framework:
React

Variant:
JavaScript

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

cd react-beginners

Затем установите зависимости проекта:

npm install

И наконец, запустите сервер разработки:

npm run dev

Вывод в терминале будет выглядеть примерно так:

Local: http://localhost:5173

Откройте этот адрес в своем браузере. Ваша первая приложение React теперь запущена.

Понимание структуры проекта

Новый проект React на первый взгляд может показаться сложным, но на самом деле существует всего несколько файлов, с которыми вы будете работать регулярно.

react-beginners/
│
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

src

Почти весь код, который вы пишете каждый день, находится внутри этой папки.

App.jsx

Считайте это корневым компонентом вашего приложения.

Все будущие функции, которые вы будете создавать, будут начинаться отсюда.

main.jsx

Это файл, который связывает ваше React-приложение с реальной веб-страницей.

Именно он указывает React, где именно в DOM должно отображаться ваше приложение.

package.json

Здесь находятся метаданные вашего проекта, а также его зависимости и скрипты, используемые для запуска или сборки.

node_modules

В этой папке хранятся все пакеты, от которых зависит ваш проект.

Не трогайте её — нет причин вручную что-либо изменять внутри неё.

Сделайте первую правку

Откройте App.jsx и замените шаблонный контент на следующий:

function App() {
  return (
    <div>
      <h1>Hello React 👋</h1>
      <p>My first React application is running!</p>
    </div>
  );
}

export default App;

Сохраните файл и посмотрите, что произойдёт в браузере.

Вы это заметили? Страница обновилась сама по себе, без необходимости вручную перезагружать её.

Такое поведение называется горячей заменой модулей, или HMR.

Подобные небольшие удобства в сумме экономят значительное время на протяжении всего срока жизни проекта.

Разработчики Angular: в чём разница

Если вы работали с Angular, вам покажется, что общий процесс работы знаком, только без лишних формальностей.

React ориентирован на гибкость, позволяя создавать решения по собственному усмотрению, тогда как Angular изначально предусматривает более строгую структуру.

Ни один из подходов не является объективно лучшим — они просто решают проблему по-разному.

Распространённые ошибки у новичков

При освоении React вы, скорее всего, столкнётесь с несколькими часто встречающимися проблемами.

  • Забывание выполнить команду npm install
  • Запуск команд из неверной директории, вне папки проекта
  • Внесение изменений внутри папки node_modules
  • Работа с устаревшей версией Node.js
  • Закрытие окна терминала, пока разработческий сервер все еще работает

    • Как только вы узнаете эти типичные ситуации, их будет легко избежать.

    Что вы узнали

    Прочитав эту статью, вы ознакомились с:

    • Причинами необходимости отдельной среды разработки для React
    • Тем, за что на самом деле отвечают Node.js и npm
    • Причинами того, почему Vite стал стандартным инструментом для создания проектов на React
    • Шагами по созданию структуры проекта и запуску вашего первого приложения на React
    • Назначением каждого из основных файлов проекта
    • Тем, как технология горячей замены модулей меняет процесс разработки кода

    На этом этапе у вас есть всё необходимое для начала разработки настоящих приложений с использованием React.

    Упражнение для практики

    Прежде чем перейти к следующей части, попробуйте выполнить эти задания:

    • Создайте совершенно новый проект React с помощью Vite.
    • Измените текст заголовка внутри файла App.jsx.
    • Добавьте краткое введение с указанием вашего имени.
    • Настройте цвет текста с помощью CSS.
    • Сами остановите и вручную запустите сервер разработки заново.

    Практика выполнения этих шагов — самый быстрый способ освоить инструментарий.

    Что дальше?

    Теперь, когда среда готова к работе, следующим шагом будет изучение одной из основных концепций React.

    В третьей части мы рассмотрим JSX — синтаксис, который позволяет объединять маркировку, похожую на HTML, непосредственно в код JavaScript.

    Вы изучите:

    • Что такое JSX на самом деле
  • Причины использования JSX в React
  • Правила, налагаемые JSX
  • Как работают выражения внутри JSX
  • Различия между HTML и JSX
  • Типичные ошибки, с которыми сталкиваются новички
  • Практики для поддержания чистоты и читаемости JSX

    • К моменту прочтения этой статьи вы сможете уверенно писать собственные компоненты React.

    Связанная литература

    Все статьиПрислать бриф