Обновлено: 7 сентября 2019 г. - исправлены опечатки, npm run = ›npm run-script, основные примеры кода

Обновлено: 3 ноября 2020 г. - Я создаю продукт для самосовершенствования, и для тех, кто заинтересован в возможности выиграть подарочную карту Amazon на 100 долларов, заполните этот опрос: https: // forms .gle / xKGKWSZfq5EEk9kc9

Вступление

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

Настройка и объяснение

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

Чтобы воспроизвести это, вы можете использовать эти команды:

mkdir react-typescript-boilerplate 
cd react-typescript-boilerplate 
mkdir -p src/components src/styles

Примечание. Флаг -p обозначает родителей и позволяет создавать родительские папки вместе с их дочерними папками. Попробуйте последнюю команду без -p, чтобы увидеть.

Убедитесь, что на вашем компьютере установлены node и npm, если вы не уверены, используйте npm -v для проверки своей версии npm. Если он у вас не установлен, установите его здесь.

После того, как вы подтвердите, что у вас установлен npm или вы его установили, нам нужно инициализировать наш проект с помощью npm и создать package.json.

Введите npm init, чтобы инициализировать проект в /react-typescript-boilerplate. Это запустит серию запросов для настройки некоторых базовых свойств в package.json, вы также можете вызвать npm init -y, чтобы пропустить эти шаги.

Теперь, когда у нас настроен базовый проект, нам нужно установить несколько пакетов, я также дам краткое и упрощенное объяснение того, что делает каждый пакет:

  • webpack и webpack-cli

webpack - это просто сборщик модулей. Хотя он может объединять практически любой ресурс или актив, он чаще всего используется для объединения файлов JavaScript для использования в браузере, в этом случае он будет объединять файлы .tsx и .ts в .js, чтобы их можно было обслуживать.

npm install webpack webpack-cli --save-dev
  • реагировать и реагировать-дом

Также нам нужны пакеты react и react-dom. response необходим для определения компонентов React, а пакет response-dom используется в качестве точки входа в DOM (объектная модель документа) для Интернета, тогда как пакет response-native используется для нативных сред (мобильных).

npm install react react-dom --save
  • машинопись

typescript установлен для доступа к его потрясающим свойствам проверки типов.

npm install typescript --save-dev
  • вавилон

babel - это компилятор JavaScript, который позволяет нам писать JavaScript следующего поколения (es6, es7, esnext) и компилируется в совместимый с браузером JavaScript. Начиная с Babel 7, Microsoft и команда Babel работали вместе, чтобы вы могли использовать babel-loader для компиляции JavaScript. Два установленных плагина предназначены для того, чтобы сообщить Babel о некоторых дополнительных функциях TypeScript.

npm install @babel/core babel-loader @babel/preset-react @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread --save-dev
  • css-loader и style-loader

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

npm install css-loader style-loader --save-dev

html-webpack-плагин

npm install html-webpack-plugin --save-dev
  • webpack-dev-сервер

webpack-dev-server отслеживает наши изменения и обновляет веб-страницу всякий раз, когда в наши компоненты вносятся какие-либо изменения.

npm install webpack-dev-server --save-dev
  • Цлинт

tslint используется в вашей среде IDE и подчеркнет ваш код красным цветом, если он не соответствует правилам, установленным в tslint.json.

npm install tslint tslint-immutable --save-dev
  • типы react и react-dom

Типы response и response-dom - это файлы для ввода, которые мы устанавливаем для TypeScript.

npm install @types/react @types/react-dom

Замечание по поводу набора файлов (types.d.ts): компилятор TypeScript будет жаловаться, если вы установите пакет без его файлов для ввода. Это раздражает, потому что не все пакеты npm имеют файлы типизации, поэтому TypeScript будет жаловаться на то, что модуль не существует. Простой, хотя и хакерский способ справиться с этим - создать override.d.ts файл в /react-typescript-boilerplate/typings и ввести: declare module package-with-no-typings-file. Таким образом, вы сможете использовать пакет без жалоб IDE, но у вас не будет типов.

Теперь, когда у нас есть все необходимые зависимости и пакеты, давайте также создадим некоторые из основных файлов: index.tsx и index.html в /src. Если вы находитесь в ./src, вы можете набрать touch index.tsx index.html, чтобы создавать новые файлы из терминала.

Примечание. .Tsx - это просто версия файла .jsx на TypeScript, если вы знакомы с React.

index.html:

Создание HTML-файла, который обычно размещается на сервере, и места, куда будет вставлен код реакции (root).

Мы также добавим несколько основных стилей.

В ./src/styles создайте index.css со следующим кодом:

h1 {
    color: #292727;
    text-align: center;
}

В ./src/components создайте App.tsx:

См. Здесь, чтобы узнать о различиях между React.Component и React.PureComponent.

index.tsx:

Это довольно просто, если вы раньше использовали React, вы в основном создаете базовый файл HTML и вставляете проект реакции с ReactDOM.render в корневом каталоге.

Нам также нужно добавить все файлы конфигурации, которые позволят нам компилировать файлы, объединять файлы и разрабатывать с помощью TypeScript:

  • package.json

Убедитесь, что это свойство установлено в вашем package.json, это позволит вам использовать npm для объединения, тестирования, запуска, сборки и проверки типов. Попробуйте использовать npm run-script для вызова каждого из свойств сценариев (например, пакета npm run-script).

Следующие файлы должны быть созданы в родительской папке / response-typescript-cabinplate:

  • .babelrc

.babelrc сообщит babel, какие предустановки использовать для транспиляции кода. Вы можете посмотреть, что делает каждая из этих вещей, но каждая из них, по сути, делает одно и то же, а именно переносит код в ES5.

  • webpack.config.js
  • tsconfig.json

Файл tsconfig позволяет нам настроить, каких правил TypeScript мы хотели бы придерживаться. См. Здесь для получения дополнительной информации об этом.

  • tslint.json

И последнее, но не менее важное: файл tslint.json определяет правила, которые наша IDE будет использовать для мгновенной обратной связи о том, соответствует ли наш код указанным правилам или нет.

Наконец, запустите команду в терминале:

npm start

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

Если вы нашли эту статью полезной, нажмите кнопку 👏. Если у вас есть какие-либо вопросы / запросы или если вы столкнетесь с какими-либо трудностями, дайте мне знать ниже. Я буду рад помочь.