Lær reagere på 1 time ved at oprette en app til filmsøgning

Hvis du har tænkt dig at lære at reagere, men er usikker på, hvor du skal starte, er Scrimbas helt nye kursus Build a Movie Search App perfekt til dig!

I dette kursus bliver du guidet gennem appens oprettelse fra start til slut på kun en time. Og du arbejder igennem interaktive udfordringer undervejs, der hjælper dig med at få den muskelhukommelse, du har brug for, for at blive en effektiv React-udvikler.

Hvorfor lære at reagere?

React er verdens mest populære front-end-ramme. Som det fremgår af docs, gør React det smertefrit at oprette interaktive brugergrænseflader og mere forudsigelig kode, som er lettere at debugge. Med React kan du producere komplekse brugergrænseflader ved at konstruere genanvendelige komponenter, der styrer deres egen tilstand.

Hvad gør dette kursus?

Stylede filmkort

Denne læringsrejse fører dig gennem 11 interaktive screencasts, der viser dig følgende kernekoncepter i moderne React:

  • Sådan får du en API-nøgle
  • Tilføjelse af basisformater
  • Oprettelse og styling af komponenter
  • Oprettelse af funktioner
  • Administrerende tilstand ved hjælp af kroge
  • Visning af oplysninger
  • Oprettelse og styling af kort

Introduktion til læreren

Denne vejledning ledes af James Q. Quick, en fuld-stack webudvikler, der regelmæssigt taler ved community events og deltager i Hackathons. Han driver også en YouTube-kanal, der underviser i webudvikling. Hans motto 'Lær. Byg. Underviser.' gør ham til den perfekte lærer til dette praktiske kursus.

Forudsætninger

For at studere dette kursus effektivt skal du have grundlæggende viden om HTML, CSS og JavaScript. Du finder det også nyttigt at have set noget React-kode før, men det er ikke et must-have.

Hvis du har brug for lidt mere baggrundsviden, skal du kigge på disse fantastiske gratis Scrimba-kurser:

  • HTML og CSS
  • Javascript

Hvis du er klar til at komme i gang med React, lad os komme i gang!

Kursus introduktion

Byg en film-søgning App Kursus foran titel dias

I den første scrim kører James os gennem et par af de vigtigste funktioner i den app, vi skal opbygge, og giver os en hurtig gennemgang af, hvordan appen fungerer. Endelig introducerer James os til den API, vi bruger - themoviedb.org.

Sådan får du din DB DB API-nøgle

Generering af en MovieDB API-nøgle

I denne korte rollebesætning giver James os nedturen om, hvordan vi får en Movie DB API-nøgle ved at tilmelde dig en gratis konto. Dette er super ligetil og tager kun et par minutter. Klik på billedet ovenfor for at få adgang til kurset.

Føj basisstilarter til din app

Derefter viser James os den grundlæggende React-applikation, som han har iværksat for os:

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

Hello world!

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

Vi tilføjer derefter nogle basisstile til vores style.cssfil inklusive margener og polstring, titelstile og CSRs hellige gral - centrering af appens indhold. Klik her for at se stilene for dig selv.

Opret din første komponent

Vores første React-app i aktion

I denne scrim har vi vores første udfordring - at oprette en React-komponent. James bruger en test.jsfil til at give os en kort forhåndsvisning af, hvad der er nødvendigt, før opgaven opdeles i håndterbare bidder:

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

Klik igennem til linket eller billedet ovenfor for at gøre dine hænder beskidte og prøve udfordringen.

Stil søgefilmkomponenten

Vores første React-app med tilføjede stilarter

Derefter er det tid til at style vores nye app. James foreslår nogle stilarter for vores , , og og tilføjer et medie forespørgsel at justere stilarter på større skærme:

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

Don't forget that Scrimba is fully interactive, so you can be as creative as you like with the styles - these ideas are just some possibilities.

Create the Search Movies Function

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 this screencast, we create an async function that will use the Fetch API to retrieve the movie information from the Movie DB API. Hit the link to see how it's done.

Manage State with React useState Hook

In this scrim, James shows us how to use state to track the user's query with the useState hook:

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

Next, we set the onChange on our to bind it to that state:

 setQuery(e.target.value)} />

Then it's time for our second challenge - to create the state for movie information and update that state as appropriate. Hop on over to the tutorial to try it out.

Display Movie Information

App, der viser filminfo

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

Stylede filmkort

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.

I ægte Scrimba-stil præsenterer James denne udfordring og leder os derefter gennem sin løsning. Gå over til rollebesætningen nu for at prøve selv. Bemærk: Rekvisitter er nødvendige til dette, men James giver en hurtig vejledning i opgaveforklaringen.

Pak ind

Tillykke med færdiggørelsen af ​​Movie Search-appen! Du ved nu, hvordan man bygger en fuldt funktionel app ved hjælp af centrale React-koncepter, herunder funktionelle komponenter, kroge, henteanmodninger, styling og genanvendelige komponenter.

Jeg håber, at du har tjent meget på dette kursus og føler dig inspireret til at fortsætte din læringsrejse. For at finde ud af mere om React, gå over til Scrimbas gratis, seks-timers Learn React for Free-kursus.

Derefter, hvorfor ikke tjekke alle de andre gode kurser på Scrimba for at se, hvor du skal hen næste gang?

Uanset hvor din rejse tager dig, glad kodning :)