Lernen Sie, in 1 Stunde zu reagieren, indem Sie eine App für die Filmsuche erstellen

Wenn Sie React lernen wollten, sich aber nicht sicher sind, wo Sie anfangen sollen, ist Scrimbas brandneuer Kurs zum Erstellen einer Filmsuche-App genau das Richtige für Sie!

In diesem Kurs werden Sie in nur einer Stunde von Anfang bis Ende durch die Erstellung der App geführt. Und Sie werden interaktive Herausforderungen bewältigen, die Ihnen helfen, das Muskelgedächtnis zu gewinnen, das Sie benötigen, um ein effektiver React-Entwickler zu werden.

Warum Reagieren lernen?

React ist das weltweit beliebteste Front-End-Framework. Wie in den Dokumenten angegeben, macht es React schmerzlos, interaktive Benutzeroberflächen und besser vorhersehbaren Code zu erstellen, der einfacher zu debuggen ist. Mit React können Sie komplexe Benutzeroberflächen erstellen, indem Sie wiederverwendbare Komponenten erstellen, die ihren eigenen Status verwalten.

Was macht dieser Kurs?

Gestaltete Filmkarten

Diese Lernreise führt Sie durch 11 interaktive Screencasts, die Ihnen die folgenden Kernkonzepte des modernen React zeigen:

  • So erhalten Sie einen API-Schlüssel
  • Hinzufügen von Basisstilen
  • Komponenten erstellen und gestalten
  • Funktionen erstellen
  • Verwalten des Status mithilfe von Hooks
  • Informationen anzeigen
  • Karten erstellen und gestalten

Einführung in den Lehrer

Dieses Tutorial wird von James Q. Quick geleitet, einem Full-Stack-Webentwickler, der regelmäßig bei Community-Veranstaltungen spricht und an Hackathons teilnimmt. Er betreibt auch einen YouTube-Kanal, der Webentwicklung lehrt. Sein Motto 'Lernen. Bauen. Lehren.' macht ihn zum perfekten Lehrer für diesen praktischen Kurs.

Voraussetzungen

Um diesen Kurs effektiv zu studieren, sollten Sie über Grundkenntnisse in HTML, CSS und JavaScript verfügen. Sie werden es auch nützlich finden, schon einmal React-Code gesehen zu haben, aber es ist kein Muss.

Wenn Sie etwas mehr Hintergrundwissen benötigen, schauen Sie sich diese fantastischen kostenlosen Scrimba-Kurse an:

  • HTML und CSS
  • Javascript

Wenn Sie bereit sind, mit React loszulegen, können Sie loslegen!

Kurseinführung

Erstellen Sie eine Titelseite für den Movie Search App Course

Im ersten Scrim führt James uns durch einige der wichtigsten Funktionen der App, die wir erstellen werden, und gibt uns einen kurzen Überblick über die Funktionsweise der App. Zuletzt stellt James uns die API vor, die wir verwenden werden - themoviedb.org.

So erhalten Sie Ihren Movie DB-API-Schlüssel

Generieren eines MovieDB-API-Schlüssels

In dieser kurzen Besetzung gibt James uns einen Überblick darüber, wie Sie einen Movie DB API-Schlüssel erhalten, indem Sie sich mit einem kostenlosen Konto anmelden. Dies ist sehr einfach und dauert nur wenige Minuten. Klicken Sie auf das Bild oben, um auf den Kurs zuzugreifen.

Fügen Sie Ihrer App Basisstile hinzu

Als nächstes zeigt uns James die grundlegende React-Anwendung, die er für uns instanziiert hat:

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

Hello world!

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

Anschließend fügen wir unserer style.cssDatei einige Basisstile hinzu, darunter Ränder und Auffüllungen, Titelstile und der Heilige Gral von CSS, wobei der Inhalt der App zentriert wird. Klicken Sie hier, um die Stile selbst zu überprüfen.

Erstellen Sie Ihre erste Komponente

Unsere erste React App in Aktion

In diesem Scrim haben wir unsere erste Herausforderung - eine React-Komponente zu erstellen. James verwendet eine test.jsDatei, um uns eine kurze Vorschau dessen zu geben, was benötigt wird, bevor die Aufgabe in überschaubare Teile zerlegt wird:

//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 

Klicken Sie sich durch den Link oder das Bild oben, um sich die Hände schmutzig zu machen und die Herausforderung auszuprobieren.

Gestalten Sie die Komponente "Suchfilme"

Unsere erste React-App mit hinzugefügten Stilen

Als nächstes ist es Zeit, unsere neue App zu gestalten. James schlägt einige Stile für unsere , , und und fügt eine Medienabfrage die Stile auf größere Bildschirme anzupassen:

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

Vergessen Sie nicht, dass Scrimba vollständig interaktiv ist, sodass Sie mit den Stilen so kreativ sein können, wie Sie möchten - diese Ideen sind nur einige Möglichkeiten.

Erstellen Sie die Funktion "Filme suchen"

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

In diesem Screencast erstellen wir eine asynchrone Funktion, die die Abruf-API verwendet, um die Filminformationen von der Movie DB-API abzurufen. Klicken Sie auf den Link, um zu sehen, wie es gemacht wird.

Verwalten Sie den Status mit React useState Hook

In diesem Scrim zeigt uns James, wie man den Status verwendet, um die Abfrage des Benutzers mit dem useStateHook zu verfolgen :

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

Als nächstes setzen wir das onChangeon our , um es an diesen Zustand zu binden:

 setQuery(e.target.value)} />

Dann ist es Zeit für unsere zweite Herausforderung - den Status für Filminformationen zu erstellen und diesen Status entsprechend zu aktualisieren. Schauen Sie sich das Tutorial an, um es auszuprobieren.

Filminformationen anzeigen

App mit Filminformationen

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

Gestaltete Filmkarten

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.

In true Scrimba style, James presents this challenge and then walks us through his solution. Head over to the cast now to try for yourself. Note: Props are needed for this, but James gives a quick how-to in the task explanation.

Wrap up

Congratulations on completing the Movie Search app! You now know how to build a fully functional app using core React concepts including functional components, hooks, fetch requests, styling, and reusable components.

I hope that you gained a lot from this course and feel inspired to continue your learning journey. To find out more about React, head over to Scrimba's free, six-hour Learn React for Free course.

After that, why not check out all the other great courses available over on Scrimba to see where you'll go next?

Wherever your journey takes you, happy coding :)