Како сам направио апликацију за временске прилике у фрееЦодеЦамп-у користећи Реацт и Типесцрипт

Тако сам коначно одлучио да се вратим на фрееЦодеЦамп и покушам да завршим свој Фронт Енд развојни сертификат. Већ сам био завршио све алгоритме и водиче почетком прошле године, а недостајали су само пројекти.

Али сада када имам више искуства као програмер Фулл Стацк-а, већина пројеката је мало лака за мој тренутни ниво. Тако да сам имао два избора. Могао бих или да се вратим основама и да их све завршим за дан, или да убијем две птице једним каменом: забавите се и експериментишите са технологијом док радите на овим пројектима. Одлучио сам се за ово друго.

Али хајде да направимо то три птице - јер већ неко време желим да напишем ствар са водичем / упутством. Данас ћемо се позабавити пројектом Покажи локално време. Али овај пут ће комбиновати Реацт и Типесцрипт! Можете погледати готов код у овом ГитХуб репо-у, као и демонстрацију уживо овде.

Позадина

Прво је прво: зашто бих желео да ово радим? Па ево у чему је ствар: већ неко време скачем напред-назад са Ангулар 5 и Реацт. И више ми се свиђа Реацт као оквир. Мали је и језгровит, али има све карактеристике које су вам потребне за стварање потпуно функционалне апликације за једну страницу. Што се тиче Ангулар-а, он је превелик за мене да бих уживао у овако малој апликацији ... али користи Типесцрипт!

ТипеСцрипт је супер скуп ЈаваСцрипт-а који додаје пуно функција које недостају ЈаваСцрипт-у, чак и са побољшањима из ЕС6 / 7. Највише је познато по статичном куцању. Па сам се питао могу ли добити најбоље од оба света. Одговор је био одлучан ДА! ... Редук није укључен. (Мислим да можете да укључите Редук, али до сада је било мучно постављати га, па то нећу радити за овај водич.)

За овај пројекат фокусираћемо се на минимум минимума корисничких прича, јер је мој фокус технологија, а не било какве додатне функције. Као такав, АПИ који ћемо користити за ову апликацију биће Вундерроунд. Савршено је за оно што градимо, јер нуде температуре и у Фахренхеит-у и у Целзијусу, а такође нуде и иконе за различите временске услове. То значи мање програмског рада на нашем крају.

Корак 0: Подесите

Користићу create-react-appза овај пројекат, прилагођену Реацт скрипту за Типесцрипт, тако да можемо задржати нулту конфигурацију и једноставност употребе. Добар чланак о постављању апликације Реацт са ТипеСцрипт-ом написао је Треи Хуффине и може се наћи овде.

Дефинитивно предлажем да погледате тај пост за још детаљнијих подешавања. Али без даљег одлагања, покренућемо следећу линију у терминалу.

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...}

А пошто сам у своје развојно окружење инсталирао Преттиер, морао сам да променим tslint.jsonдатотеку јер се линт сукобио са програмом за форматирање. Ако имате сличан развој постављен, предлажем да само избришете сва правила тслинт-а, тако да не морате заглавити у конфигурацији. Датотека би требало да изгледа овако након што завршите.

Структура директоријума коју ћу користити изгледаће овако. Можете да креирате, бришете и премештате датотеке у складу с тим.

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скинем задане стилове да бих имао зелену тему фрееЦодеЦамп. Поред тога, дугме сам учинио више сличним дугмету и, наравно, зеленијим. Слободно можете подивљати с тим ако сте случајно ЦСС мајстор. Датотеке слика такође можете преузети овде и сместити их у своју assets/фасциклу.

Корак 2: Добро, лагао сам ... Још подешавања

Али не брините, ово је стварни код овог пута. Прво кренимо са једноставним делом: додавањем АПИ-ја и АПИ кључева. Овде нема ништа ново - до сада изгледа потпуно слично уобичајеном ЈаваСцрипт-у.

Сада за специфичну ствар ТипеСцрипт-а морамо навести типове. Па, не морамо, али свакако би требало. Разлог за статично куцање је тај што нам пружа сигурност. За разлику од уобичајеног ЈаваСцрипт-а, наш код се неће покретати ако су ствари погрешног типа. У суштини то значи да компајлер који се једноставно изјашњава неће нам дозволити да напишемо лош код.

Као што видите, није превише застрашујуће. Само додајте тип након двотачке. Примитивни типови (стринг, нумбер, боолеан) подржани су изван капије. Са објектима је добра идеја створити нови тип специфичан за тај одређени објекат као што се види у WeatherDataпомоћу DisplayLocation.

Сад сам био мало лењ, јер је облик података који долазе из нашег АПИ-ја много већи, и могао сам да створим цео објекат. Али одлучио сам да узмем само оно што ми је требало, а остатак одбацим, због чега је ова types.tsдатотека толико мала.

Корак 3: Реагујте - забавни део

Ја ћу прескочити index.tsxи App.tsxфајлове, јер заиста нема ништа заиста ново тамо. Само знајте да се увоз разликује због тога колико је ТипеСцрипт строг према модулима. Уместо тога, прво ћемо размотрити презентациону компоненту.

И даље више волим да деструктурирам Componentи Fragmentиз Реацт-а, уместо да зовем React.Component, јер то смањује сувишност. А за Фрагменте, ако се никада раније нисте играли са њима, то је у основи див који се не појављује у ХТМЛ ознаци.

Такође ћете приметити да сам на врх додао интерфејсе. Интерфејс одређује како би требало да изгледају наши реквизити и стање. А ако нисте приметили, трик ТипеСцрипт-а додаје типове свему, па се то дешава горе у углатим заградама te>. If you are familiar with prop types, it does the same thing, but I feel like this is much cleaner.

The next thing is the weird @ symbol. Well, that’s a decorator! I originally wanted to hook up Redux and connect so that I can show a much more complicated version, but the autobind will do for now.

A decorator is basically a function that wraps around the class and applies necessary attributes. It also allows us to use export default at the top, which is just a personal preference of mine.

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

In this case autobind will, as the name entails, automatically bind this to everything so we don’t have to worry about binding issues. And coming from a more Object Oriented language, these class methods will look a lot cleaner than the JavaScript work-around with the arrow functions.

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');}

And now finally we move to the bulk of our logic, which is going to be living in the Weather.tsx component.

The first thing you’ll notice is the ? in the interface. I mentioned that we definitely should define types for our props, but what happens when you know for certain it won’t be defined until after the API call? Well we can define optional types with a question mark.

What is happening in the background is that the variable weatherData is only allowed to be a WeatherData type or undefined. Also, remember that our WeatherData type is only a subsection of what wunderground offers. Earlier I mentioned that we are only going to take the data that we needed from the API — well, that’s what that huge destructuring on line 55 is doing.

Did I mention you can specify expected return types of functions? That’s what is happening here with getCurrentPosition , because I wanted to make sure that it returns a promise.

The reasoning here is that I didn’t want to call getCurrentWeather until after we had the correct geolocation, which means we’re dealing with asynchronous events. Async always means Promises, so that’s what’s going to happen.

A word of warning: the native geolocation API does take a long time to get a result without passing in any options. I opted to not add options to it as it was giving me errors at the time.

And I believe that is all the new things happening in this app because of TypeScript. Everything else should be familiar if you know React. But hopefully you can see the benefits of this superset, as it adds both security to our code as well as some nice super powers.

Step 4: Complete!

You did it! You finished an app that shows the weather at your current position. And in doing so, you’ve covered a good chunk of TypeScript as well as incorporating it into React.

Of course, there can definitely be improvements on this, like an option to search and show other locations. And the UI can definitely be worked on. But if you haven’t already finished the weather app on freeCodeCamp, you have already gone above and beyond on this assignment.