Skip to main content

Hello React

Это вводная статья, в которой поэтапно рассказывается об истории React, установке необходимых инструментов, создании проекта с использованием TypeScript и Vite, а также о запуске приложения.

Краткая история React​

React был создан в 2011 году инженером компании Facebook Джорданом Уолке. Он впервые был применён в новостной ленте Facebook, а затем стал использоваться в Instagram. В 2013 году библиотека была открыта для широкой публики с открытым исходным кодом. React произвел революцию в разработке веб-интерфейсов, представив концепции компонентов и виртуального DOM. За годы React стал стандартом в индустрии для построения современных веб-приложений, благодаря своей эффективности, богатому сообществу и постоянным обновлениям.

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

Для работы с React вам понадобится Node.js и встроенный в него менеджер пакетов npm. Скачайте и установите Node.js с официального сайта:

🔗 https://nodejs.org/

Рекомендуется выбрать LTS (Long-Term Support) версию.

После установки проверьте версию в терминале:

node -v
npm -v

Создание проекта React + TypeScript с Vite​

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

Шаги:

  1. Откройте терминал и выполните команду: 
    npm create vite@latest my-react-app
  2. Введите параметры в интерактивном режиме: 
    Select a framework:
    React

    Select a variant:
    TypeScript
  3. Перейдите в созданную директорию и установите зависимости: 
    cd my-react-app
    npm install

Обзор структуры проекта my-react-app​

После установки в директории my-react-app вы увидите следующую структуру:

my-react-app/
├─ node_modules/         # Установленные зависимости
├─ public/               # Статические файлы (favicon и др.)
├─ src/                  # Исходный код приложения
│  ├─ assets/            # Медиа-файлы (изображения и т.д.)
│  ├─ App.tsx            # Главный компонент приложения
│  ├─ main.tsx           # Точка входа в приложение
│  └─ ...
├─ index.html            # HTML-шаблон
├─ package.json          # Список зависимостей и скриптов
├─ package-lock.json     # Файл блокировки, содержащий информацию о зависимостях/пакетах, которые были установлены
├─ tsconfig.json         # Общий файл конфигурации TypeScript
├─ tsconfig.app.json     # Конфигурация TypeScript для приложения
├─ tsconfig.node.json    # Конфигурация TypeScript для Node
├─ vite.config.ts        # Конфигурация сборщика Vite
├─ eslint.config.js      # Конфигурация ESLint
└─ ...

Запуск и остановка приложения​

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

npm run dev

По умолчанию приложение будет доступно по адресу:

http://localhost:5173/

Чтобы остановить сервер, нажмите Ctrl + C в терминале.

Заключение​

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