Скачать книгу

функция не является обязательной и вы можете упустить её в своем приложении. Таким образом, если вы не планируете использовать reportWebVitals для отслеживания производительности, вы можете безопасно удалить соответствующие импорты и вызовы функции из index. js. Это не повлияет на основной функционал вашего приложения.

      <React.StrictMode> – это компонент, предоставляемый React, который помогает выявлять потенциальные проблемы в компонентах и их потомках. Он не влияет на продакшен-сборку12, но помогает разработчикам рано обнаруживать и исправлять проблемы.

      Он может выявить следующие виды проблем:

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

      – Побочные эффекты при рендеринге. Если код при рендеринге компонента вызывает побочные эффекты (например, изменение состояния, которое влияет на сам компонент), <React.StrictMode> поможет обнаружить такие сценарии.

      – Использование несовместимых API. Предупреждает о применении устаревших или несовместимых с версией React API в приложении.

      Запись document.getElementById (’root’) as HTMLElement означает, что мы пытаемся получить элемент с идентификатором ’root’ из DOM (Document Object Model) веб-страницы и привести его к типу HTMLElement. Этот код представляет собой так называемый «Type Assertion»13 в TypeScript, который используется для явного указания типа переменной.

      При этом:

      – document – это объект, представляющий веб-страницу в браузере.

      – getElementById (’root’) – это метод объекта document, который пытается найти элемент на веб-странице с указанным идентификатором ’root’.

      – as HTMLElement – это TypeScript-синтаксис, который используется для явного указания типа переменной. В данном случае, мы явно указываем, что результат вызова getElementById (’root’) должен быть интерпретирован как объект типа HTMLElement.

      Обычно это используется, когда TypeScript не может определить тип элемента автоматически, и мы хотим явно указать, какой тип ожидается. В данном случае, мы ожидаем, что элемент с идентификатором ’root’ является элементом типа HTMLElement.

      Пример «App. js»:

      import React from «react»

      import». /App. css»

      function App () {

        return (

          <div className=«App»>

            <header>

              <h1> Мое React-приложение </h1>

            </header>

            <main>

              {/* Здесь может быть контент вашего приложения */}

            </main>

          </div>

      );

      }

      export default App

      – Заполняем файл tsconfig. json

      Файл tsconfig. json – это конфигурационный файл для TypeScript, который используется для настройки параметров компиляции и поведения TypeScript-компилятора14 (tsc). Этот файл обычно располагается в корневой директории проекта и определяет, как TypeScript должен обрабатывать и компилировать исходный код. В целом, tsconfig. json позволяет настроить проект так, чтобы TypeScript понимал, как правильно компилировать код в JavaScript.

      В файле tsconfig. json можно определить ряд важных параметров и настроек для компиляции TypeScript. Вот некоторые из них:

      – compilerOptions: Этот раздел определяет параметры компиляции TypeScript. Некоторые распространенные опции включают:

      – target:

Скачать книгу


<p>12</p>

Продакшен-сборка (production build) – это версия вашего программного продукта, предназначенная для развертывания и использования в реальной эксплуатационной среде.

<p>13</p>

Type Assertion (также известное как Type Casting) – это способ в языке TypeScript явно указать компилятору, какой тип данных должен быть присвоен переменной или выражению. Это позволяет переопределить или уточнить тип данных, который TypeScript выводит автоматически, когда это необходимо.

<p>14</p>

TypeScript-компилятор – это инструмент, предоставляемый TypeScript, который преобразует исходный код, написанный на TypeScript, в эквивалентный JavaScript-код.