Установка и настройка React инструкция для вашего первого приложения

Введение

React — это популярная библиотека для создания пользовательских интерфейсов, которую поддерживает компания Meta (ранее Facebook). Она позволяет вам строить масштабируемые веб-приложения с использованием компонентного подхода. Если вы только начинаете свой путь в мире frontend-разработки или хотите понять, как правильно развернуть рабочее окружение для React, эта статья поможет вам пройти все этапы: от подготовки компьютера до создания первого приложения и настройки проекта под свои задачи.

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

Проверка и установка Node.js и npm

Прежде чем приступать к работе с React, нужно убедиться, что у вас установлены Node.js и npm (Node Package Manager). Node.js необходим для запуска JavaScript вне браузера, а npm — для управления зависимостями (библиотеками и утилитами).

Правильная установка и настройка окружения - первый шаг к успешной разработке на React. От этого зависит, насколько гладко пойдет процесс разработки и как быстро вы сможете начать создавать свои приложения. Если вы хотите получить пошаговую инструкцию по установке и настройке React, а также узнать о лучших практиках — приходите на наш большой курс Основы React, React Router и Redux Toolkit. На курсе 177 уроков и 17 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Как проверить наличие Node.js и npm

Откройте терминал (или командную строку в Windows) и выполните команды:

node -v     // Выведет установленную версию Node.js, если она есть
npm -v      // Покажет версию npm

Если вы видите версии, можно переходить дальше. Если нет — вот краткая инструкция по установке.

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

Перейдите на официальный сайт Node.js https://nodejs.org/. Там выберите LTS-версию (она более стабильна) для вашей операционной системы.

Скачайте и запустите установщик. Он автоматически установит вам и Node.js, и npm.

Давайте убедимся, что всё установилось корректно:

node -v
npm -v

Теперь вы готовы к следующему шагу — созданию проекта.

Создание нового проекта React с помощью Create React App

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

Что такое Create React App

Create React App — это официальный набор скриптов для быстрого и простого создания типового React-приложения. Он автоматически настраивает webpack, Babel и другие важные инструменты, избавляя вас от сложной конфигурации на старте.

Как создать новый проект

В терминале выполните следующую команду (замените my-react-app на любое название вашего будущего проекта):

npx create-react-app my-react-app

• Команда npx позволяет запускать пакеты npm без их предварительной установки глобально.
• Папка my-react-app будет создана автоматически. В ней окажется вся структура нового проекта.

Объяснение структуры проекта

После окончания установки перейдите в созданную директорию:

cd my-react-app

Смотрите, что находится внутри директории:

• node_modules/ — каталог с установленными зависимостями;
• public/ — статические файлы (например, index.html);
• src/ — папка с исходным кодом приложения (App.js, index.js и т.д.);
• package.json — информация о проекте и его зависимостях;
• другие конфигурационные файлы.

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

my-react-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── index.js
├── package.json
└── README.md

Как видите, всё уже подготовлено для старта разработки.

Запуск приложения на React

Самое время увидеть приложение в работе.

Запуск development-сервера

Оставаясь в директории вашего проекта, выполните:

npm start

• Эта команда запускает сервер для разработки.
• По умолчанию приложение откроется в браузере по адресу http://localhost:3000/.
• Каждый раз при сохранении изменений в коде браузер будет автоматически обновляться.

Что показывает стартовая страница React

На стартовой странице вы увидите логотип React и приветственный экран. Позже вы сможете полностью заменить этот шаблон своим собственным кодом.

Настройка редактора кода

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

Рекомендуемые редакторы:

• Visual Studio Code (VSCode) — очень популярен среди React-разработчиков.
• Sublime Text или Atom — хорошие альтернативы, если вам важен минимализм.

Установка VSCode

Перейдите на https://code.visualstudio.com/, скачайте и установите редактор под вашу ОС.

Установите рекомендованные расширения:

• ESLint (подсказки по стилю кода и автоматическое исправление ошибок)
• Prettier (автоматическое форматирование)
• Simple React Snippets (шаблоны React-компонентов)

Основные файлы во фреймворке React

Давайте рассмотрим ключевые исходные файлы, с которых всё начинается.

index.js — точка входа

Файл src/index.js — именно здесь React-компонент загружается в корневой элемент HTML-страницы:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // Главный компонент приложения

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• ReactDOM.createRoot связывает React-приложение с элементом div в public/index.html, у которого id равен "root".

App.js — главный компонент

В файле src/App.js находится основной компонент, который вы можете редактировать для создания своего интерфейса.

function App() {
  return (
    <div>
      <h1>Добро пожаловать в ваше первое React-приложение!</h1>
    </div>
  );
}

export default App;

Вы можете изменять содержимое return, чтобы управлять тем, что появится на вашей странице.

Управление зависимостями в React-проекте

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

Установка новых зависимостей

Например, если вы хотите добавить библиотеку React Router для организации навигации:

npm install react-router-dom

• Команда install скачивает новую библиотеку и добавляет её в список зависимостей package.json.

Импортировать библиотеку в коде:

import { BrowserRouter } from 'react-router-dom';

Удаление зависимостей

Если библиотека больше не нужна, удалите её командой:

npm uninstall имя_библиотеки

Настройка среды для разработки

Давайте рассмотрим несколько рекомендаций по удобной работе с React-проектами.

Использование git

Гораздо удобнее вести разработку, если проект хранится в системе контроля версий git.

git init                 // Инициализация репозитория git
git add .                // Добавить все файлы
git commit -m "Первый коммит"

Не забудьте добавить файл .gitignore с примерно таким содержимым:

node_modules/
build/
.env

• Это поможет не засорять репозиторий лишними файлами.

Работа с переменными среды

Для хранения конфиденциальных или специфичных для окружения настроек используйте файл .env в корне проекта.

Пример переменной:

REACT_APP_API_URL=https://api.example.com

• Все переменные должны начинаться с REACT_APP_ — иначе они не будут видны внутри кода.

В коде получите значение так:

const apiUrl = process.env.REACT_APP_API_URL;

Работа со сборщиками и оптимизация под production

Create React App автоматизирует процесс сборки, минификации и оптимизации вашего приложения.

Сборка для продакшна

Когда приложение готово к публикации, выполните команду:

npm run build

• В папке build/ появится оптимизированная версия вашего приложения — её и надо загружать на сервер.

Просмотр production-сборки локально

Вы можете проверить, как будет выглядеть приложение после сборки, с помощью любого статического сервера. Например, установите пакет serve:

npm install -g serve
serve -s build

Теперь приложение откроется на порту по умолчанию (обычно 5000).

Альтернативные способы установки и расширенные шаблоны

Использование yarn

Вместо npm можно применять альтернативный пакетный менеджер yarn:

npm install -g yarn
yarn create react-app my-app

• Некоторые разработчики предпочитают yarn, потому что он быстрее устанавливает зависимости и по-другому кеширует пакеты.

Использование Vite или Next.js

Для более сложных или быстрых приложений можно использовать альтернативные инструменты:

• Vite — облегчённая и очень быстрая сборка, минимальная конфигурация.
• Next.js — готовое решение для серверного рендеринга и маршрутизации.

Пример создания проекта с Vite

npm create vite@latest

Затем выберите шаблон react и следуйте инструкциям на экране.

Краткий гид по обновлению React и зависимостей

Со временем версии библиотек устаревают. Для обновления React выполните:

npm update react react-dom

• Убедитесь, что после апдейта всё работает как раньше.

Периодически просматривайте и другие зависимости:

npm outdated     // Покажет устаревшие пакеты
npm update       // Обновит пакеты

Использование TypeScript с React

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

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

npx create-react-app my-app --template typescript

• Теперь все файлы в src будут с расширением .tsx (JSX + TypeScript).

Добавление TypeScript в существующий проект

npm install --save typescript @types/node @types/react @types/react-dom

Создайте в src пару файлов с расширением .tsx и настройте типы согласно документации.

Полезные команды для управления React-проектом

Ниже — краткий список ключевых команд управления проектом:

• npm start — запуск сервера разработки;
• npm run build — сделать production-сборку;
• npm test — запуск тестов (если вы добавите их самостоятельно);
• npm run eject — сделать все скрытые настройки явными (используйте только если точно знаете, зачем это нужно).

Обратите внимание! После выполнения eject обратного пути нет.

Советы по первым шагам разработки на React

• Изучите структуру файлов в созданном проекте.
• Начните редактировать компонент App.js, смотрите, как меняется страница в браузере.
• Не торопитесь менять сразу всё — попробуйте добавить свой заголовок, кнопку или простой счетчик.
• Активно пользуйтесь документацией на https://react.dev/ — это отличный источник примеров и объяснений.

Заключение

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

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

Настройка React - это лишь начало. Для создания полноценного приложения необходимо уметь управлять состоянием и роутингом. Курс Основы React, React Router и Redux Toolkit предлагает комплексный подход. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в основы React уже сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как изменить порт, на котором запускается приложение React?

Создайте в корне проекта файл .env (если его нет) и пропишите строку:

PORT=4000

Замените 4000 на нужное вам значение. Теперь при npm start приложение будет запускаться на этом порте.

Как подключить SASS/SCSS стили к проекту, созданному через Create React App?

Выполните команду:

npm install sass

Теперь импортируйте .scss файлы по аналогии с обычными CSS:

import './App.scss';

Почему не обновляются версии библиотек после их установки?

Иногда новые библиотеки не отображаются сразу из-за кеша. Решите это так:

• Удалите каталог node_modules:
  bash rm -rf node_modules
• Переустановите зависимости: bash npm install Теперь все зависимости подтянутся заново.

Как добавить изображения и другие ресурсы в приложение?

В папку public/ поместите ваши картинки. Доступ к ним можно получить как /имя_картинки.jpg. В импортируемых модулях лучше поместить изображения в папку src/assets и импортировать:

import myImage from './assets/logo.png';
<img src={myImage} alt="Logo" />

Что делать, если появляется ошибка "You are using React in development mode"?

Эта ошибка не критична — она предупреждает, что приложение работает в режиме разработки. Для production-сборки используйте:

npm run build

и развёртывайте содержимое папки build/ на сервере.