Актуализирано: 7 септември 2019 г. — корекции на правописни грешки, npm run =› npm run-script, примери за основен код

Актуализирано: 3 ноември 2020 г. — Създавам продукт за самоусъвършенстване и за тези, които се интересуват от възможността да спечелят $100 карта за подарък на Amazon, моля, попълнете тази анкета: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. react е необходим за дефиниране на React компоненти и пакетът react-dom се използва като входна точка към DOM (Document Object Model) за уеб, докато пакетът react-native се използва за естествени среди (мобилни).

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

typescript е инсталиран за достъп до неговите страхотни свойства за проверка на типа.

npm install typescript --save-dev
  • babel

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

tslint се използва във вашата IDE и ще ви даде да подчертаете кода си в червено, ако не се придържа към правилата, които сте задали в tslint.json.

npm install tslint tslint-immutable --save-dev
  • типове реагиране и реагиране

типовете react и react-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 е само TypeScript версията на .jsx файл, ако сте запознати с 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 файл и инжектирате проекта react с ReactDOM.render в root.

Също така трябва да добавим всички конфигурационни файлове, които ще ни позволят да компилираме файловете, да обединим файловете и да разработим с TypeScript:

  • package.json

Уверете се, че сте задали това свойство във вашия package.json, то ще ви позволи да използвате npm за групиране, тестване, стартиране, изграждане и проверка на типове. Опитайте да използвате npm run-script, за да извикате всяко едно от свойствата на скриптовете (напр. npm run-script bundle).

Следните файлове трябва да бъдат създадени в родителската папка /react-typescript-boilerplate:

  • .babelrc

.babelrc ще каже на babel кои предварителни настройки да използва за транспилиране на кода. Можете да разгледате какво прави всяко от тези неща, но всяко от тях по същество прави едно и също нещо, което е транспилиране на кода в ES5.

  • webpack.config.js
  • tsconfig.json

Файлът tsconfig ни позволява да конфигурираме към кои правила на TypeScript бихме искали да се придържаме. Вижте тук за повече информация по този въпрос.

  • tslint.json

Не на последно място, файлът tslint.json дефинира правилата, които нашата IDE ще използва, за да предостави незабавна обратна връзка дали кодът ни се придържа към посочените правила или не.

Накрая изпълнете командата в терминала:

npm start

Трябва да се е отворил нов прозорец във вашия браузър по подразбиране и това е всичко, което трябва да настроите проект на TypeScript React от нулата. Сега, след като имате свой собствен TypeScript react шаблон, можете да започнете да създавате React проекти! Ако желаете, можете също да клонирате тази настройка на реакция от моя Github. Не забравяйте да маркирате със звезда

Ако сте намерили тази статия за полезна, моля, натиснете бутона 👏. Ако имате някакви въпроси/заявки или ако срещнете затруднения, уведомете ме по-долу. Ще се радвам да помогна.