Μάθετε το React σε 1 ώρα δημιουργώντας μια εφαρμογή αναζήτησης ταινιών

Εάν θέλετε να μάθετε το React, αλλά δεν είστε σίγουροι για το πού να ξεκινήσετε, το ολοκαίνουργιο μάθημα της εφαρμογής Scrimba Build a Movie Search είναι ιδανικό για εσάς!

Σε αυτό το μάθημα, θα καθοδηγήσετε τη δημιουργία της εφαρμογής από την αρχή έως το τέλος σε μία μόνο ώρα. Και θα αντιμετωπίσετε διαδραστικές προκλήσεις που θα σας βοηθήσουν να αποκτήσετε τη μυϊκή μνήμη που χρειάζεστε για να γίνετε ένας αποτελεσματικός προγραμματιστής React.

Γιατί να μάθετε το React;

Το React είναι το πιο δημοφιλές πλαίσιο front-end στον κόσμο. Όπως αναφέρεται στην κατάσταση των εγγράφων, το React καθιστά ανώδυνο τη δημιουργία διαδραστικών διεπαφών χρήστη και πιο προβλέψιμου κώδικα που είναι πιο εύκολο να εντοπιστεί ο εντοπισμός σφαλμάτων. Με το React, μπορείτε να δημιουργήσετε πολύπλοκα περιβάλλοντα χρήστη δημιουργώντας επαναχρησιμοποιήσιμα στοιχεία που διαχειρίζονται τη δική τους κατάσταση.

Τι κάνει αυτό το μάθημα;

Κάρτες ταινίας με στυλ

Αυτό το εκπαιδευτικό ταξίδι σάς οδηγεί σε 11 διαδραστικές προβολές προβολής, δείχνοντας σας τις ακόλουθες βασικές έννοιες του σύγχρονου React:

  • Πώς να αποκτήσετε ένα κλειδί API
  • Προσθήκη βασικών στυλ
  • Δημιουργία και σχεδιασμός στοιχείων
  • Δημιουργία λειτουργιών
  • Διαχείριση κατάστασης χρησιμοποιώντας άγκιστρα
  • Εμφάνιση πληροφοριών
  • Δημιουργία και στυλ καρτών

Εισαγωγή στον καθηγητή

Αυτό το σεμινάριο καθοδηγείται από τον James Q. Quick, έναν πλήρη προγραμματιστή ιστού που μιλά τακτικά σε εκδηλώσεις κοινότητας και συμμετέχει στο Hackathons. Διαχειρίζεται επίσης ένα κανάλι YouTube που διδάσκει την ανάπτυξη ιστού. Το σύνθημά του «Μάθετε. Χτίζω. Διδάσκω.' τον κάνει τον τέλειο δάσκαλο για αυτό το πρακτικό μάθημα.

Προαπαιτούμενα

Για να μελετήσετε αποτελεσματικά αυτό το μάθημα, θα πρέπει να έχετε βασικές γνώσεις HTML, CSS και JavaScript. Θα σας φανεί επίσης χρήσιμο να έχετε δει κάποιο κωδικό React στο παρελθόν, αλλά δεν είναι απαραίτητο.

Εάν χρειάζεστε λίγο περισσότερη γνώση ιστορικού, ρίξτε μια ματιά σε αυτά τα φανταστικά δωρεάν μαθήματα Scrimba:

  • HTML και CSS
  • Javascript

Εάν είστε έτοιμοι να φτάσετε στο έδαφος τρέχοντας με το React, ας ξεκινήσουμε!

Εισαγωγή μαθήματος

Δημιουργήστε μια διαφάνεια για τον μπροστινό τίτλο του προγράμματος αναζήτησης ταινιών

Στην πρώτη απάτη, ο Τζέιμς μας τρέχει μερικά από τα βασικά χαρακτηριστικά της εφαρμογής που θα κατασκευάσουμε και θα μας δώσει μια γρήγορη αναδρομή για το πώς λειτουργεί η εφαρμογή. Τέλος, ο James μας παρουσιάζει στο API που θα χρησιμοποιήσουμε - themoviedb.org.

Πώς να αποκτήσετε το κλειδί API της ταινίας DB

Δημιουργία κλειδιού MovieDB API

Σε αυτό το σύντομο καστ, ο Τζέιμς μας δίνει το χαμηλότερο σημείο για το πώς να αποκτήσουμε ένα Movie DB API Key κάνοντας εγγραφή με έναν δωρεάν λογαριασμό. Αυτό είναι εξαιρετικά απλό και διαρκεί λίγα λεπτά. Κάντε κλικ στην παραπάνω εικόνα για πρόσβαση στο μάθημα.

Προσθέστε βασικά στυλ στην εφαρμογή σας

Στη συνέχεια, ο James μας δείχνει τη βασική εφαρμογή React που έχει δημιουργήσει για εμάς:

import React from "react"; import ReactDOM from "react-dom"; class Main extends React.Component { render() { return 

Hello world!

; } } ReactDOM.render(, document.getElementById("root"));

Στη συνέχεια, προσθέτουμε ορισμένα βασικά στυλ στο style.cssαρχείο μας , συμπεριλαμβανομένων περιθωρίων και padding, στυλ τίτλου και, το Holy Grail του CSS - στο κέντρο των περιεχομένων της εφαρμογής. Κάντε κλικ εδώ για να δείτε τα στυλ για εσάς.

Δημιουργήστε το πρώτο σας στοιχείο

Η πρώτη μας εφαρμογή React σε δράση

Σε αυτήν την απάτη, έχουμε την πρώτη μας πρόκληση - να δημιουργήσουμε ένα στοιχείο React. Ο Τζέιμς χρησιμοποιεί ένα test.jsαρχείο για να μας δώσει μια σύντομη προεπισκόπηση του τι χρειάζεται πριν διασπάσει την εργασία σε διαχειρίσιμα κομμάτια:

//to create the SearchMovies component //form with a class of form //label with htmlFor="query" and a class of Label //input of type text with a name of "query" and a placeholder //button class of button and a type of submit 

Κάντε κλικ στον σύνδεσμο ή στην παραπάνω εικόνα για να βρώσετε τα χέρια σας βρώμικα και δοκιμάστε την πρόκληση.

Στυλ στο στοιχείο αναζήτησης ταινιών

Η πρώτη μας εφαρμογή React με προσθήκη στυλ

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

@media (min-width: 786px) { .form { grid-template-columns: auto 1fr auto; grid-gap: 1rem; align-items: center; } .input { margin-bottom: 0; } } 

Μην ξεχνάτε ότι το Scrimba είναι πλήρως διαδραστικό, ώστε να μπορείτε να είστε τόσο δημιουργικοί όσο θέλετε με τα στυλ - αυτές οι ιδέες είναι μερικές πιθανότητες.

Δημιουργήστε τη λειτουργία αναζήτησης ταινιών

export default function SearchMovies(){ const searchMovies = async (e) => { e.preventDefault(); const query = "Jurassic Park"; const url = `//api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`; try { const res = await fetch(url); const data = await res.json(); console.log(data); }catch(err){ console.error(err); } } 

Σε αυτό το screencast, δημιουργούμε μια συνάρτηση async που θα χρησιμοποιήσει το Fetch API για να ανακτήσει τις πληροφορίες ταινίας από το Movie DB API. Πατήστε τον σύνδεσμο για να δείτε πώς γίνεται.

Διαχείριση κατάστασης με React useState Hook

Σε αυτό το scrim, ο James μας δείχνει πώς να χρησιμοποιήσουμε την κατάσταση για να παρακολουθούμε το ερώτημα του χρήστη με το useStateάγκιστρο:

const [query, setQuery] = useState(""); 

Στη συνέχεια, θέτουμε το onChangeγια να το δεσμεύσουμε σε αυτήν την κατάσταση:

 setQuery(e.target.value)} />

Τότε ήρθε η ώρα για τη δεύτερη πρόκληση - να δημιουργήσουμε την κατάσταση για πληροφορίες ταινίας και να ενημερώσουμε την κατάσταση ανάλογα. Μεταβείτε στο μάθημα για να το δοκιμάσετε.

Εμφάνιση πληροφοριών ταινίας

Εφαρμογή που εμφανίζει πληροφορίες ταινίας

Now that we can search for our movies, it's time to display the information to the user. Click the link or image to see how it's done!

Style the Movie Cards

Κάρτες ταινίας με στυλ

Next up, James shows us how to style our movie cards to create an attractive, user-friendly app. We start with our card container :

.card { padding: 2rem 4rem; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,0.25); margin-bottom: 2rem; background-color: white; } 

With that done, we move onto our titles and images. Click the link or image above to get the lowdown.

Create the Movie Card Component (Challenge)

Our final task is to create a separate component to display the movie card. This ensures maintainability should our project grow, and is a good habit to get into in preparation for bigger projects.

Σε πραγματικό στυλ Scrimba, ο James παρουσιάζει αυτήν την πρόκληση και στη συνέχεια μας καθοδηγεί στη λύση του. Προχωρήστε τώρα στο cast για να δοκιμάσετε μόνοι σας. Σημείωση: Απαιτούνται στηρίγματα για αυτό, αλλά ο Τζέιμς δίνει μια γρήγορη εξήγηση στην εργασία.

Τύλιξε

Συγχαρητήρια για την ολοκλήρωση της εφαρμογής Αναζήτηση ταινιών! Τώρα ξέρετε πώς να δημιουργήσετε μια πλήρως λειτουργική εφαρμογή χρησιμοποιώντας βασικές έννοιες React, συμπεριλαμβανομένων λειτουργικών στοιχείων, αγκιστριών, αιτήσεων ανάκτησης, στυλ και επαναχρησιμοποιήσιμων στοιχείων.

Ελπίζω να έχετε κερδίσει πολλά από αυτό το μάθημα και να αισθανθείτε εμπνευσμένοι για να συνεχίσετε το μαθησιακό σας ταξίδι. Για να μάθετε περισσότερα σχετικά με το React, μεταβείτε στο δωρεάν μάθημα Scrimba, εξάωρο Μάθετε το React for Free.

Μετά από αυτό, γιατί να μην ελέγξετε όλα τα άλλα σπουδαία μαθήματα που διατίθενται στο Scrimba για να δείτε πού θα πάτε στη συνέχεια;

Όπου κι αν σας ταξιδέψει, χαρούμενη κωδικοποίηση :)