No history yet

Инструменты и старт

Подготовка рабочего места

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

Главный инструмент в нашем наборе — это Он как мощный двигатель для всех наших инструментов. Обычно JavaScript работает только в браузере, но Node.js позволяет запускать его прямо на вашем компьютере. Это открывает возможность использовать профессиональные утилиты для разработки.

Вместе с Node.js устанавливается и npm — менеджер пакетов. Думайте о нем как о гигантском онлайн-складе запчастей. Нужно добавить в проект календарь или анимацию? Скорее всего, кто-то уже создал готовое решение, и npm поможет скачать и подключить его одной командой. Установка Node.js (с официального сайта) автоматически добавит на ваш компьютер и Node.js, и npm.

Создание проекта с Vite

Раньше настройка React-проекта с нуля была сложным процессом. Сегодня у нас есть инструменты-сборщики, которые делают всю грязную работу за нас. Мы будем использовать Vite — один из самых быстрых и современных сборщиков.

Откройте терминал (командную строку) на вашем компьютере и введите следующую команду, чтобы создать новый проект:

npm create vite@latest

Vite задаст вам несколько вопросов:

  1. Project name: Назовите ваш проект. Например, my-first-react-app.
  2. Select a framework: Выберите React с помощью стрелок на клавиатуре.
  3. Select a variant: Выберите JavaScript.

После этого терминал подскажет вам следующие шаги. Сначала перейдите в папку с вашим проектом:

cd my-first-react-app

Теперь нужно установить все необходимые «запчасти» или, как их называют, зависимости. Команда npm install смотрит в специальный файл package.json (список покупок) и скачивает из интернета все пакеты, нужные для работы нашего React-приложения.

npm install

Этот процесс может занять минуту. После его завершения ваш проект готов к первому запуску.

Структура проекта и запуск

Давайте посмотрим, что Vite создал для нас. В папке проекта вы увидите несколько файлов и папок, но нас интересуют три основные:

ПапкаНазначение
node_modulesОгромная папка со всеми скачанными «запчастями» (зависимостями). Мы никогда не трогаем ее вручную.
publicМесто для статичных файлов, таких как иконки, шрифты или картинки, которые не требуют обработки.
src«Сердце» нашего приложения. Здесь мы будем писать 99% нашего кода.

Как же все это превращается в веб-страницу? Процесс начинается с двух ключевых файлов.

  1. index.html в корне проекта. Это почти пустой HTML-файл. Его единственная важная часть — это один-единственный тег div внутри <body>:
<!-- ...другой HTML-код... -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>
<!-- ... -->

Думайте об этом <div id="root"></div> как о пустой сцене или холсте. Сам по себе он ничего не делает.

  1. main.jsx в папке src. Это главный управляющий скрипт. Его задача — найти этот «холст» (div с id="root") и сказать React: «Начинай рисовать всё приложение вот здесь». Он 'оживляет' пустую HTML-страницу.

Чтобы увидеть результат, запустим сервер для разработки. В терминале, находясь в папке проекта, введите:

npm run dev

Терминал выдаст вам локальный адрес, обычно http://localhost:5173/. Откройте его в браузере, и вы увидите стартовую страницу вашего первого React-приложения. Сервер Vite будет автоматически перезагружать страницу каждый раз, когда вы вносите изменения в код в папке src.

Quiz Questions 1/5

Какова основная роль Node.js в современной веб-разработке, согласно тексту?

Quiz Questions 2/5

Что делает команда npm install после создания проекта с помощью Vite?

Отлично! Вы подготовили рабочее место, создали и запустили свой первый проект. Теперь вы готовы погружаться в мир компонентов React.