Πώς έφτιαξα την εφαρμογή καιρού στο freeCodeCamp χρησιμοποιώντας το React και το Typescript

Έτσι αποφάσισα τελικά να επιστρέψω στο freeCodeCamp και να προσπαθήσω να ολοκληρώσω το Πιστοποιητικό Ανάπτυξης Front End. Είχα ήδη ολοκληρώσει όλους τους αλγορίθμους και τα σεμινάρια νωρίτερα πέρυσι, και το μόνο πράγμα που έλειπε ήταν τα έργα.

Αλλά τώρα που έχω περισσότερη εμπειρία ως Full Stack Developer, τα περισσότερα από τα έργα είναι λίγο εύκολο για το τρέχον επίπεδο. Είχα λοιπόν δύο επιλογές. Θα μπορούσα είτε να επιστρέψω στα βασικά και να τα τελειώσω όλα σε μια μέρα, ή θα μπορούσα να σκοτώσω δύο πουλιά με μία πέτρα: να διασκεδάσω και να πειραματιστώ με την τεχνολογία ενώ εργαζόμουν σε αυτά τα έργα. Επέλεξα το τελευταίο.

Αλλά ας φτιάξουμε αυτά τα τρία πουλιά - επειδή ήθελα να γράψω ένα σεμινάριο / οδηγό πράγμα για λίγο. Σήμερα, αυτό που πρόκειται να αντιμετωπίσουμε είναι το πρόγραμμα Show The Local Weather. Αλλά αυτή τη φορά, πρόκειται να συνδυάσει React και Typescript! Μπορείτε να ρίξετε μια ματιά στον τελικό κώδικα σε αυτό το repo GitHub, καθώς και σε μια ζωντανή επίδειξη εδώ.

Ιστορικό

Το πρώτο είναι λοιπόν το πρώτο πράγμα: γιατί θα ήθελα να το κάνω αυτό; Λοιπόν, εδώ είναι το πράγμα: Πήρα πίσω και πίσω με το Angular 5 και το React για λίγο τώρα. Και μου αρέσει περισσότερο το React ως πλαίσιο. Είναι μικρό και συνοπτικό, αλλά διαθέτει όλες τις δυνατότητες που χρειάζεστε για να δημιουργήσετε μια πλήρως λειτουργική εφαρμογή μίας σελίδας. Όσο για το Angular, είναι πολύ μεγάλο για μένα να απολαύσω μια εφαρμογή τόσο μικρή όσο αυτή… αλλά χρησιμοποιεί Typescript!

Το TypeScript είναι ένα σούπερ σετ JavaScript που προσθέτει πολλές δυνατότητες που λείπουν από τη JavaScript, ακόμη και με τις βελτιώσεις από το ES6 / 7. Είναι κυρίως γνωστό για τη στατική πληκτρολόγηση. Έτσι αναρωτήθηκα αν μπορούσα να βρω το καλύτερο και των δύο κόσμων. Η απάντηση ήταν μια ηχηρή ΝΑΙ!… Δεν περιλαμβανόταν ο Redux. (Θέλω να πω ότι μπορείτε να συμπεριλάβετε το Redux, αλλά μέχρι στιγμής ήταν πολύς πόνος για τη ρύθμιση, οπότε δεν θα το κάνω για αυτόν τον οδηγό.)

Για αυτό το έργο, θα επικεντρωθούμε στο ελάχιστο των Ιστοριών χρηστών, επειδή η εστίασή μου είναι η τεχνολογία και όχι οποιαδήποτε επιπλέον χαρακτηριστικά. Ως εκ τούτου, το API που θα χρησιμοποιούμε για αυτήν την εφαρμογή θα είναι το Wunderround. Είναι ιδανικό για αυτό που χτίζουμε, επειδή προσφέρουν θερμοκρασίες τόσο σε Φαρενάιτ όσο και σε Κελσίου και παρέχουν επίσης εικονίδια για τις διαφορετικές καιρικές συνθήκες. Αυτό σημαίνει λιγότερη δουλειά μέσω προγραμματισμού.

Βήμα 0: Ρύθμιση

Θα χρησιμοποιώ create-react-appγια αυτό το έργο, με το προσαρμοσμένο σενάριο React για Typescript, έτσι ώστε να διατηρούμε τη διαμόρφωση μηδέν και την ευκολία χρήσης. Ένα καλό άρθρο σχετικά με τη δημιουργία μιας εφαρμογής React με TypeScript γράφτηκε από τον Trey Huffine και μπορείτε να το βρείτε εδώ.

Σίγουρα προτείνω να κοιτάξω αυτήν την ανάρτηση για λίγο πιο λεπτομερή ρύθμιση. Αλλά χωρίς άλλη καθυστέρηση, θα τρέξουμε την ακόλουθη γραμμή στο τερματικό.

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 μέχρι στιγμής.

Τώρα για το συγκεκριμένο είδος κειμένου, πρέπει να καθορίσουμε τύπους. Λοιπόν, δεν χρειάζεται, αλλά σίγουρα πρέπει. Ο λόγος πίσω από τη στατική πληκτρολόγηση είναι ότι μας παρέχει ασφάλεια. Σε αντίθεση με την κανονική JavaScript, ο κώδικάς μας δεν θα εκτελείται εάν τα πράγματα είναι λάθος τύπου. Ουσιαστικά αυτό σημαίνει ότι ο μεταγλωττιστής δεν θα μας αφήσει να γράψουμε κακό κώδικα.

Όπως μπορείτε να δείτε, δεν είναι πολύ τρομακτικό. Απλώς προσθέστε τον τύπο μετά από άνω και κάτω τελεία. Οι πρωτόγονοι τύποι (string, number, boolean) υποστηρίζονται έξω από την πύλη. Με αντικείμενα, είναι μια καλή ιδέα για τη δημιουργία ενός νέου τύπου ειδικά για το συγκεκριμένο αντικείμενο, όπως φαίνεται σε WeatherDataμε DisplayLocation.

Τώρα, ήμουν λίγο τεμπέλης, επειδή το σχήμα των δεδομένων που προέρχονται από το API μας είναι πολύ μεγαλύτερο και θα μπορούσα να δημιουργήσω ολόκληρο το αντικείμενο. Αλλά επέλεξα να πάρω απλώς ό, τι χρειαζόμουν και να απορρίψω τα υπόλοιπα, γι 'αυτό το types.tsαρχείο είναι τόσο μικρό όσο είναι.

Βήμα 3: Αντιδρά - Το διασκεδαστικό μέρος

Θα παραλείψω τα αρχεία index.tsxκαι App.tsxγιατί δεν υπάρχει τίποτα πολύ νέο εκεί. Απλώς ξέρετε ότι οι εισαγωγές είναι διαφορετικές λόγω του πόσο αυστηρού είναι το TypeScript σχετικά με τις ενότητες. Αντ 'αυτού, θα εξετάσουμε πρώτα το στοιχείο παρουσίασης.

Προτιμώ ακόμη να καταστρέφω Componentκαι Fragmentαπό το React, αντί να καλεί React.Component, καθώς μειώνει τον πλεονασμό. Και για Fragments, αν δεν έχετε παίξει ποτέ μαζί τους, είναι βασικά ένα div που δεν εμφανίζεται στη σήμανση HTML.

Θα παρατηρήσετε επίσης ότι έχω προσθέσει διεπαφές στην κορυφή. Μια διεπαφή καθορίζει πώς θα πρέπει να μοιάζουν τα στηρίγματα και η πολιτεία μας. Και αν δεν το έχετε παρατηρήσει, το τέχνασμα του TypeScript προσθέτει τύπους σε όλα, έτσι αυτό συμβαίνει παραπάνω εντός των γωνιακών αγκυλών 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.