Создание React-проекта с TypeScript — настройка окружения с create-react-app

Почему стоит начать с create-react-app (CRA)?

Добро пожаловать на третью лекцию! Сегодня у нас на повестке создание первого React-проекта с использованием TypeScript. Если вы когда-нибудь варили борщ, то знаете, что без базовой подготовки кухни и ингредиентов ничего не получится. Вот и создание React-приложения — это как раз про подготовку: нужно все настроить, чтобы готовить дальше было легко и приятно.

Утилита create-react-app — это мощный инструмент, который позволяет почти без усилий настроить окружение для разработки React-приложения. Вы только представьте: вы не тратите часы на ручную настройку Webpack, Babel и ESLint, а просто создаете проект одной командой. В наше время такое удобство сродни готовому завтраку: просто добавь воды.

Преимущества CRA:

• Готовое окружение: под капотом уже настроены Webpack, Babel и другие инструменты.
• Поддержка TypeScript из коробки: просто укажите правильный флаг — и все готово.
• Начало разработки за 5 минут: никакой головной боли с инструментами.
• Стабильные обновления: вы всегда получаете последние версии библиотек без лишних хлопот.## Генерация нового проекта

Ну что, хватит теории — пора работать руками! Давайте создадим новое React-приложение с поддержкой TypeScript.

Шаг 1: Убедитесь, что Node.js установлен

Для начала убедитесь, что у вас установлен Node.js. Если нет, скачайте его с официального сайта Node.js. Желательно установить версию LTS (она стабильнее). Чтобы проверить, установлены ли Node.js и npm (менеджер пакетов), выполните команды:

node -v
npm -v

Шаг 2: Установка create-react-app

В версии npm 5.2.0+ и выше доступна команда npx, которая позволяет запускать пакеты без глобальной установки. Используем ее, чтобы создать приложение:

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

Вот что здесь происходит:

• npx автоматически загружает и выполняет последнюю версию пакета.
• create-react-app — это инструмент, который генерирует каркас приложения.
• my-first-react-app — имя вашего нового проекта.
• --template typescript — флаг, который сообщает CRA, что мы хотим использовать TypeScript.

Спустя несколько минут (да, иногда npm любит подумать), вы получите готовый проект.

Если вдруг с npx что-то пошло не так, можно установить CRA глобально:

npm install -g create-react-app
create-react-app my-first-react-app --template typescript

Шаг 3: Открываем проект

Переходим в созданную папку проекта и запускаем сервер разработки:

cd my-first-react-app
npm start

После выполнения команды npm start в браузере автоматически откроется вкладка по адресу http://localhost:3000/. Вы должны увидеть приветственный экран React. Если вы это видите — поздравляю, у вас все получилось 🎉!

Обзор структуры проекта

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

my-first-react-app/
├── node_modules/       // Папка с установленными зависимостями
├── public/             // Статические файлы, например, index.html
├── src/                // Весь ваш React-код
│   ├── App.css         // Стили для компонента App
│   ├── App.tsx         // Главный компонент приложения
│   ├── index.css       // Глобальные стили
│   ├── index.tsx       // Точка входа в приложение
│   ├── react-app-env.d.ts // Настройки TypeScript для CRA
│   └── logo.svg        // Логотип React (можно удалить)
├── package.json        // Список зависимостей и скриптов
├── tsconfig.json       // Конфигурация TypeScript
└── README.md           // Руководство по проекту

Основное внимание будем уделять папке src/, так как именно там находится весь код приложения.

Первое приложение: редактируем App.tsx

Теперь давайте внесем первые изменения в приложение.

Откройте файл App.tsx. Код в нем выглядит примерно так:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Удалим все лишнее и напишем собственный компонент:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Привет, React с TypeScript!</h1>
      <p>Наше первое приложение теперь готово!</p>
    </div>
  );
}

export default App;

Сохраните изменения, и браузер автоматически обновит вкладку. Вы увидите сообщение: "Привет, React с TypeScript!".

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

Приложение может состоять из множества компонентов. Создадим новый компонент и научимся использовать его в App.tsx.

1. Создайте файл src/components/Hello.tsx:

   import React from 'react';
   
   interface HelloProps {
     name: string;
   }
   
   const Hello: React.FC<HelloProps> = ({ name }) => {
     return <h2>Добро пожаловать, {name}!</h2>;
   };
   
   export default Hello;

2. Теперь подключите и используйте этот компонент в App.tsx:

   import React from 'react';
   import Hello from './components/Hello';
   
   function App() {
     return (
       <div>
         <h1>Привет, React с TypeScript!</h1>
         <Hello name="Пользователь" />
       </div>
     );
   }
   
   export default App;

Обратите внимание на интерфейс HelloProps, который описывает структуру пропсов. Благодаря этому при вызове <Hello /> TypeScript подскажет, что вы забыли передать обязательное поле name. Это первая демонстрация силы TypeScript.

Типичные ошибки и их решение

Если у вас что-то не получилось, не переживайте — это нормально. Вот несколько типичных проблем:

• Ошибка "npx: command not found". Убедитесь, что Node.js установлен и команда npm доступна.
• "Unexpected token" в файлах TypeScript. Возможно, не установлены правильные зависимости. Попробуйте удалить папку node_modules и переустановить зависимости с помощью npm install.
• Браузер не обновляет вкладку. Убедитесь, что запущен сервер разработки npm start.

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

Вот что мы сейчас сделали:

• Создали новый проект с TypeScript.
• Разобрались в структуре проекта.
• Написали первый компонент, используя интерфейсы для пропсов.

С такими знаниями вы можете легко создавать новые React-приложения для личных или для коммерческих проектов. На собеседованиях это тоже может быть отличным плюсом, особенно если вы покажете свое понимание TypeScript и интерфейсов.

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