Как я создал приложение погоды в freeCodeCamp с помощью React и Typescript

1656648615 kak ya sozdal prilozhenie pogody v freecodecamp s pomoshhyu react

Келвин Мэй

1*c_otGxMhQQYeAODaylsf5A
React и Typescript

Поэтому я наконец-то решил вернуться к freeCodeCamp и попытаться закончить свой сертификат разработки Front End. В прошлом году я уже закончил все алгоритмы и учебные пособия, и единственное, чего не хватало, это проекты.

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

1*BFO5FsRp7JPwc0vc1nJlUA
Очень близко…

Но давайте сделаем это тремя птицами – потому что я давно хотел написать учебник/пособие. Сегодня мы рассмотрим проект «Покажи местную погоду». Но в этот раз он соединит React и Typescript! Вы можете посмотреть на готовый код в этом хранилище GitHub, а также на живую демонстрацию здесь.

Фон

Итак, во-первых: почему я хочу это делать? Вот в чем дело: я уже некоторое время прыгаю туда-сюда из Angular 5 и React. И мне больше нравится React как фреймворк. Он невелик и сжат, но имеет все функции, необходимые для создания полнофункциональной одностраничной программы. Что касается Angular, то он слишком велик для меня, чтобы наслаждаться таким маленьким приложением, как этот… но он использует Typescript!

TypeScript – это супернабор JavaScript, который добавляет много функций, которых просто нет в JavaScript, даже с усовершенствованиями ES6/7. В большинстве своем он известен статическим типом. Поэтому я подумал, смогу ли я получить лучшее из обоих миров. Ответ был однозначным ДА!… Redux не включен. (Я имею в виду вас может включить Redux, но это было трудно настроить, поэтому я не буду этого делать для этого руководства.)

1*D1a6zvkRnvj7okzDiGMQeA
Истории пользователей

В этом проекте мы собираемся сосредоточиться на минимуме историй пользователей, потому что я сосредотачиваюсь на технологии, а не на дополнительных функциях. Таким образом, API, который мы будем использовать для этой программы, будет Wunderround. Это идеально подходит для того, что мы строим, потому что они предлагают температуры как по Фаренгейту, так и по Цельсию, а также предоставляют значки для разных погодных условий. Это означает меньшее программное обеспечение с нашей стороны.

Шаг 0: Настройка

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

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

create-react-app weather --scripts-version=react-scripts-tsnpm install --save core-decorators

К декораторам подойду чуть позже. Просто знайте, что это хорошая маленькая функция, которую я очень рад попробовать. Но чтобы иметь возможность использовать его, нам придется отредактировать наш tsconfig.json файл для включения экспериментальных декораторов Для этого просто добавьте жирную строчку кода.

{   "compilerOptions": {// ...code hidden...    "noUnusedLocals": true,    "experimentalDecorators": true   } // ...more code hidden...}

И поскольку в моей среде разработки установлено Prettier, мне пришлось изменить свое tslint.json файл, поскольку линз конфликтовал с форматировщиком. Если у вас настроена подобная разработка, я предлагаю удалить все правила tslint, чтобы вам не пришлось запутаться в настройках. После того, как вы закончите файл должен выглядеть так.

Структура папок, которую я буду использовать, будет выглядеть следующим образом. Можно создавать, удалять и перемещать файлы соответственно.

weather-app/├─ .gitignore├─ node_modules/├─ public/├─ src/   └─ assets/     | - - loader.svg     | - - logo.svg   └─ components/     | - - Weather.tsx     | - - WeatherDisplay.tsx  └─ styles/     | - - App.css     | - - WeatherDisplay.css  | — — index.tsx   | — — registerServiceWorker.ts  | — — App.tsx  | — — index.css   | - - config.ts   | - - types.ts├─ package.json├─ tsconfig.json├─ tsconfig.test.json└─ tslint.json

Ладно, худшее позади! Наконец-то мы настроили наше приложение. Давайте погрузимся в код.

Шаг 1: Заключение

Я хочу сначала избавиться от стиля. Я не очень дизайнер, поэтому все, что я действительно сделал, это перебросил кожу create-react-app стили по умолчанию для зеленой темы freeCodeCamp. Кроме того, я сделал кнопку более похожей на кнопку и, конечно, более зеленой. Если вы владеете CSS, вы можете разобраться в этом. Вы также можете скачать файлы изображений здесь и разместить их в своем assets/ папку.

Шаг 2: Ладно, я солгал… Больше Настроить

Но не беспокойтесь, на этот раз это настоящий код. Сначала давайте начнем с легкой части: добавление API и ключей API. Здесь нет ничего нового – пока он выглядит точно как обычный JavaScript.

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

Как видите, это не так уж страшно. Просто добавьте тип после двоеточия. Примитивные типы (string, number, boolean) поддерживаются вне ворот. Для объектов хорошей идеей является создание нового типа, специфического для этого конкретного объекта, как показано в WeatherData с DisplayLocation .

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

Шаг 3: реагируйте – веселая часть

Я собираюсь пропустить index.tsx и App.tsx файлов, потому что на самом деле там нет ничего нового. Просто знайте, что импорт отличается из-за строгости TypeScript в отношении модулей. Сначала мы рассмотрим презентационный компонент.

Я все-таки предпочитаю деструктуризацию Component и Fragment от React, вместо вызова React.Component , поскольку это уменьшает избыточность. А для фрагментов, если вы никогда раньше не играли с ними, это в основном div, не отображающийся в разметке HTML.

Вы также заметите, что я добавил интерфейсы вверху. Интерфейс определяет, как должны выглядеть наши свойства и состояние. И если вы не заметили, трюк TypeScript добавляет типы ко всему, поэтому это то, что происходит выше в угловых скобках <Props, State>. Если вы знакомы с типами пропов, он делает то же самое, но мне кажется, что это гораздо чище.

Следующее, что удивительно @ символ. Ну, вот и декоратор! Сначала я хотел подключить Redux и подключиться, чтобы показать гораздо более сложную версию, но autobind сделаю пока.

Декоратор — это в основном функция, вращающаяся вокруг класса и применяющая необходимые атрибуты. Это также позволяет нам использовать export default наверху, что есть только мое личное предпочтение.

@decorateexport default Class {}
// is the same as
export default decorate(Class)

В этом случае autobind, как следует из названия, будет автоматически привязываться this ко всему, поэтому нам не нужно беспокоиться об обязательных проблемах. И исходя из более объектно-ориентированного языка, эти методы класса будут выглядеть гораздо чище, чем обходной путь JavaScript с функциями стрелок.

classMethod = () => {   console.log('when you use arrows, you don't have to worry about   the keyword "this"');}
classMethod () {   console.log('because of javascript, you have to   worry about the keyword "this" here');}

И теперь, наконец, мы переходим к основной части нашей логики, которая будет жить в Weather.tsx компонент.

Первое, что вы заметите, это ? в интерфейсе. Я вспомнил, что мы должны определить типы для наших пропсов, но что произойдет, если вы точно знаете, что это будет определено только после вызова API? Мы можем определить необязательные типы с помощью вопросительного знака.

На заднем плане происходит переменная weatherData разрешено быть только a WeatherData тип или неопределенный. Кроме того, помните, что наш WeatherData type является лишь подразделением того, что предлагает wunderground. Раньше я упоминал, что мы будем брать только те данные, которые нам нужны с API — ну вот что делает эта огромная деструктуризация в строке 55.

Я упоминал, что можно указать ожидаемые типы возврата функций? Вот что здесь происходит с getCurrentPosition потому что я хотел убедиться, что он возвращает обещание.

Причина в том, что я не хотел звонить getCurrentWeather Пока мы не получим правильную геолокацию, что означает, что мы имеем дело с асинхронными событиями. Async всегда означает Promises, следовательно, это то, что произойдет.

Слово предупреждения: родной геолокации API требуется много времени, чтобы получить результат без передачи никаких параметров. Я решил не прибавлять к нему параметры, поскольку в то время он давал мне ошибки.

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

Шаг 4: завершен!

1*W_edOJ7mRloyIKi6WBJfBQ
Готовый продукт

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

Конечно, это точно можно улучшить, например возможность поиска и показа других мест. И над пользовательским интерфейсом точно можно поработать. Но если вы еще не завершили программу прогноза погоды на freeCodeCamp, вы уже справились с этой задачей.

Добавить комментарий

Ваш адрес email не будет опубликован.