Карта сайта

Урок 2: Настройка окружения разработчика React

/Уроки по React/Урок 2: Настройка окружения разработчика React
Урок 2: Настройка окружения разработчика React
Автор: написал в рубрике Уроки по React. 0 Комментариев.

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

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

Мы будем двигаться шаг за шагом и я подробно объясню каждый этап.

Установка Node.js, npm и создание приложения

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

Node.js и npm

Node.js это среда выполнения JavaScript вне браузера. Раньше JavaScript работал только в окне вашего браузера, но Node.js позволил запускать его на вашем компьютере как самостоятельную программу. Зачем это нам для React, который работает в браузере? Всё просто: современная разработка на React heavily relies (сильно полагается) на инструменты, которые работают под управлением Node.js. Эти инструменты отвечают за превращение вашего удобного, разбитого на модули кода в оптимизированные файлы, которые браузер может легко понять и быстро загрузить.

Вместе с Node.js автоматически устанавливается npm (Node Package Manager), это менеджер пакетов. Представьте себе огромную библиотеку (реестр) со всеми возможными инструментами и библиотеками для JavaScript, включая сам React. Npm это ваш личный библиотекарь, который по одной вашей команде находит нужные «книги» (пакеты), скачивает их и аккуратно расставляет по полкам в вашем проекте. Позже мы познакомимся с его более современным аналогом, Yarn, но пока будем использовать npm, так как он идет в комплекте.

Установка Node.js и npm

  1. Переходим на официальный сайт. Открой браузер и перейди на nodejs.org.

  2. Выбираем версию. Ты увидишь две версии, LTS (Long-Term Support) и Current. Всегда выбирай версию LTS. Это стабильная версия, которая обеспечивает надежность и долгосрочную поддержку, что идеально подходит для обучения и продакшена.

  3. Скачиваем и устанавливаем. Скачай установщик для твоей операционной системы (Windows, macOS, Linux) и запусти его. Процесс установки стандартный: везде нажимай «Next», соглашайся с условиями лицензии. Не снимай галочки с дополнительных инструментов, они нам пригодятся.

  4. Проверяем установку. После установки нам нужно убедиться, что всё прошло успешно. Открой терминал (Command Prompt на Windows, Terminal на macOS/Linux) и введи две команды:

    bash
    node -v
npm -v

    Если в терминале появились номера версий (например, v22.21.0 и 11.6.7), значит, поздравляю! Ты только что установил мощный инструмент, который откроет тебе дорогу не только в React, но и в серверную разработку на JavaScript.

Create React App (CRA) или Vite

Теперь, когда у нас есть Node.js и npm, мы можем создать наш первый React-проект. Есть два самых популярных способа это сделать: классический Create React App и современный Vite. Давай кратко их сравним.

  • Create React App (CRA). Это официальный, проверенный временем инструмент от команды React. Его главная цель скрыть от нас всю сложность настройки сборки (Webpack, Babel) и позволить сосредоточиться на написании кода. Он предоставляет готовую, надежную конфигурацию «из коробки». Это отличный выбор для начинающих, чтобы не путаться в настройках.

  • Vite (фр. «быстрый»). Это современный инструмент сборки, который работает невероятно быстро. Он использует собственный dev-сервер и нативные ES-модули, что позволяет ему мгновенно запускать и обновлять проект. С ним приятно работать из-за его скорости. Он становится новым стандартом в экосистеме.

Для нашего курса я рекомендую начать с Create React App. Он проще для понимания на старте, а его структура до сих пор является эталонной. Однако, чтобы ты был в тренде, я покажу, как работать с обоими. Решать тебе!

Создание приложения с помощью Create React App

CRA использует один-единственную команду, которая делает всю магию.

  1. Открой терминал и перейди в папку, где ты хочешь создать свой проект. Например, на Рабочий стол или в папку Dev.

    • На Windows: cd C:\Users\Имя\Desktop

    • На macOS/Linux: cd ~/Desktop

  2. Выполни команду создания проекта. Давай назовем наш первый проект my-first-react-app:

    bash
    npx create-react-app my-first-react-app

    Что здесь происходит?

    • npx — это утилита, которая входит в состав npm. Она позволяет запускать инструменты без их глобальной установки на компьютер. Очень удобно!

    • create-react-app — это имя самого инструмента для создания приложения.

    • my-first-react-app — это имя папки вашего будущего проекта и самого приложения. Ты можешь назвать его как угодно, но используй только латиницу и дефисы.

  3. Жди. Эта команда скачает все необходимые зависимости и настроит проект. Процесс может занять от 2 до 10 минут в зависимости от скорости твоего интернета и компьютера. Не пугайся, в терминале будет много текста, это нормально.

  4. Запуск проекта. Когда процесс завершится, ты увидишь сообщение с дальнейшими инструкциями. Перейди в созданную папку и запусти проект:

    bash
    cd my-first-react-app
npm start

    Команда npm start запускает сервер для разработки. Через несколько секунд твой браузер автоматически откроется на странице http://localhost:3000 и ты увидишь вращающийся логотип React и приветственное сообщение. Поздравляю! Твой первый React-проект запущен и работает!

Создание приложения с помощью Vite

Если ты хочешь попробовать более быстрый вариант, вот инструкция для Vite.

  1. В терминале выполни команду:

    bash
    npm create vite@latest

  2. Тебе зададут несколько вопросов:

    • Project name: my-first-vite-app (введи любое имя).

    • Select a framework: Выбери React с помощью стрелок на клавиатуре и нажми Enter.

    • Select a variant: Выбери JavaScript.

  3. Далее, перейди в папку проекта, установи зависимости и запусти сервер:

    bash
    cd my-first-vite-app
npm install
npm run dev

    Vite очень быстрый и через пару секунд он покажет тебе в терминале адрес, по которому запущено приложение (обычно http://localhost:5173). Перейди по нему и увидишь стартовую страницу Vite + React.

Практическое задание 1

Теперь, когда наш проект создан и запущен, давай заглянем «под капот». Открой папку своего проекта (например, my-first-react-app) в любимом редакторе кода. Я настоятельно рекомендую использовать Visual Studio Code (VS Code). Это бесплатный, мощный и самый популярный редактор в мире фронтенда.

Давай разберем ключевые файлы и папки, которые создал для нас CRA (структура Vite будет очень похожей, с небольшими отличиями).

text
my-first-react-app/
├── node_modules/  # Папка со всеми скачанными библиотеками (НЕ ТРОГАЕМ её вручную!)
├── public/        # Статические файлы (иконка, HTML-шаблон)
│   ├── index.html # Главный HTML-файл
│   └── ...
├── src/           # ИСХОДНЫЙ КОД нашего приложения! (Работаем здесь)
│   ├── App.css    # Стили для компонента App
│   ├── App.js     # Главный компонент App
│   ├── index.css  # Глобальные стили
│   ├── index.js   # Точка входа в приложение
│   └── ...
├── package.json   # "Анкета" проекта: список зависимостей и скриптов
└── ...

Ваша задача:

  1. В редакторе кода открой файл src/App.js. Это главный компонент нашего приложения.

  2. Попробуй найти внутри него HTML-подобный код (это JSX, мы изучим его в следующем уроке!), который отвечает за вывод логотипа и текста «Edit src/App.js and save to reload».

  3. Попробуй изменить этот текст на что-нибудь свое, например, на «Привет, мир! Я изучаю React!».

  4. Волшебство Hot Reload: Сохрани файл (Ctrl+S или Cmd+S).

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

Практическое задание 2

Давай закрепим успех и сделаем что-то более осмысленное.

Задача: Преврати стартовую страницу в простую визитку, которая будет содержать:

  • Твое имя.

  • Краткое приветствие.

  • Список твоих увлечений (хобби).

Пример кода в файле src/App.js:

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

jsx
// Импортируем стили и логотип (пока не обращай на это внимания, это понадобится CRA)
import logo from './logo.svg';
import './App.css';

// Главная функция-компонент App
function App() {
  // Возвращаем JSX-разметку
  return (
    <div className="App">
      {/* Убираем стандартный заголовок и логотип */}
      {/* <header className="App-header"> ... </header> */}

      {/* Создаем свой блок */}
      <div className="my-card">
        <h1>Меня зовут Максим!</h1>
        <p>Добро пожаловать на мой первый React-сайт. Я только начинаю свой путь в веб-разработке и это невероятно увлекательно!</p>
        
        <h2>Мои увлечения:</h2>
        <ul>
          <li>Программирование</li>
          <li>Игра на гитаре</li>
          <li>Горные походы</li>
          <li>Изучение новых технологий</li>
        </ul>

        <p>Следите за моим прогрессом!</p>
      </div>
    </div>
  );
}

// Экспортируем компонент, чтобы его можно было использовать в других файлах
export default App;

Что мы сделали:

  • Мы закомментировали стандартный JSX-код, который шел «из коробки».

  • Вместо него мы создали свой собственный блок div с классом my-card.

  • Внутри мы использовали различные HTML-теги: <h1>, <p>, <h2>, <ul>, <li>.

Сохрани файл и посмотри, как изменилась твоя страница в браузере. Ты только что создал свое первое, пусть и простое, React-приложение!

Дополнительные задания для самостоятельной работы

  1. Измени стили. Попробуй отредактировать файл src/App.css. Найди селектор .App или создай новый для .my-card и попробуй изменить фон, цвет текста, шрифт. Не бойся экспериментировать!

  2. Добавь изображение. Положи любое свое изображение в папку public. Затем в JSX-коде в App.js добавь его с помощью тега <img src="/имя_твоего_файла.jpg" alt="Описание" />.

  3. Изучи package.json. Открой этот файл и посмотри на разделы dependencies (зависимости проекта, например, react и react-dom) и scripts (список команд, которые можно запускать через npm run ...).

Заключение

Сегодня ты проделал огромный путь. Ты установил среду разработки (Node.js и npm), создал свой первый React-проект с помощью Create React App (или Vite), запустил его, разобрался в базовой структуре папок и, самое главное, внес свои первые изменения.

Теперь твой компьютер полностью готов к работе и у тебя есть «песочница», твой первый проект, где ты можешь безопасно экспериментировать и учиться. В следующих уроке мы погрузимся в самую суть React. изучим JSX, компоненты и пропсы. Будет еще интереснее.

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

Поделиться статьей:
Поддержать автора блога

Поддержка автора осуществляется с помощью специальной формы ниже, предоставленной сервисом «ЮMoney». Все платёжные операции выполняются на защищённой странице сервиса, что обеспечивает их корректность и полную безопасность.

Персональные рекомендации
Оставить комментарий