Impara a reagire in 1 ora costruendo un'app per la ricerca di film

Se intendevi imparare React ma non sei sicuro di dove iniziare, il nuovissimo corso di Scrimba Build a Movie Search App è perfetto per te!

In questo corso verrai guidato nella creazione dell'app dall'inizio alla fine in una sola ora. E lavorerai attraverso sfide interattive lungo il percorso che ti aiuteranno a ottenere la memoria muscolare di cui hai bisogno per diventare uno sviluppatore React efficace.

Perché imparare React?

React è il framework di front-end più popolare al mondo. Come affermano i documenti, React semplifica la creazione di interfacce utente interattive e codice più prevedibile di cui è più facile eseguire il debug. Con React, puoi produrre interfacce utente complesse costruendo componenti riutilizzabili che gestiscono il proprio stato.

Cosa fa questo corso?

Schede di film in stile

Questo viaggio di apprendimento ti porta attraverso 11 screencast interattivi, mostrandoti i seguenti concetti fondamentali del moderno React:

  • Come ottenere una chiave API
  • Aggiunta di stili di base
  • Creazione e styling dei componenti
  • Creazione di funzioni
  • Gestire lo stato usando gli hook
  • Visualizzazione delle informazioni
  • Creazione e styling delle carte

Introduzione all'insegnante

Questo tutorial è condotto da James Q. Quick, uno sviluppatore web completo che parla regolarmente a eventi della comunità e partecipa ad Hackathon. Gestisce anche un canale YouTube che insegna sviluppo web. Il suo motto 'Learn. Costruire. Insegnare.' lo rende l'insegnante perfetto per questo corso pratico.

Prerequisiti

Per studiare in modo efficace questo corso, dovresti avere una conoscenza di base di HTML, CSS e JavaScript. Troverai anche utile aver già visto del codice React, ma non è un must.

Se hai bisogno di un po 'più di conoscenza di base, dai un'occhiata a questi fantastici corsi Scrimba gratuiti:

  • HTML e CSS
  • Javascript

Se sei pronto a partire di corsa con React, cominciamo!

Introduzione al corso

Crea una diapositiva del titolo anteriore del corso dell'app per la ricerca di film

Nel primo scrim, James ci illustra alcune delle funzionalità chiave dell'app che creeremo e ci fornisce una rapida carrellata di come funziona l'app. Infine, James ci introduce all'API che useremo: themoviedb.org.

Come ottenere la chiave API del database dei film

Generazione di una chiave API MovieDB

In questo breve cast, James ci fornisce le informazioni su come ottenere una chiave API Movie DB registrandoci con un account gratuito. Questo è semplicissimo e richiede solo pochi minuti. Clicca sull'immagine sopra per accedere al corso.

Aggiungi stili di base alla tua app

Successivamente, James ci mostra l'applicazione di base React che ha istanziato per noi:

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

Hello world!

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

Aggiungiamo quindi alcuni stili di base al nostro style.cssfile, inclusi margini e spaziatura interna, stili di titolo e, il Sacro Graal dei CSS, centrando i contenuti dell'app. Fare clic qui per verificare personalmente gli stili.

Crea il tuo primo componente

La nostra prima app React in azione

In questo scrim, abbiamo la nostra prima sfida: creare un componente React. James usa un test.jsfile per darci una breve anteprima di ciò che è necessario prima di suddividere l'attività in blocchi gestibili:

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

Fai clic sul link o sull'immagine sopra per sporcarti le mani e provare la sfida.

Definire lo stile del componente Cerca filmati

La nostra prima app React con stili aggiunti

Successivamente, è il momento di modellare la nostra nuova app. James suggerisce alcuni stili per la nostra , , ed e aggiunge una media query per regolare gli stili su schermi più grandi:

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

Non dimenticare che Scrimba è completamente interattivo, quindi puoi essere creativo quanto vuoi con gli stili: queste idee sono solo alcune possibilità.

Crea la funzione Cerca film

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 questo screencast, creiamo una funzione asincrona che utilizzerà l'API Fetch per recuperare le informazioni sul film dall'API Movie DB. Clicca sul link per vedere come è fatto.

Gestisci lo stato con React useState Hook

In questo scrim, James ci mostra come utilizzare lo stato per tenere traccia della query dell'utente con l' useStatehook:

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

Successivamente, impostiamo onChangeon our per legarlo a quello stato:

 setQuery(e.target.value)} />

Quindi è il momento della nostra seconda sfida: creare lo stato per le informazioni sul film e aggiornare lo stato come appropriato. Vai al tutorial per provarlo.

Visualizza le informazioni sul film

App che mostra le informazioni sui film

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

Schede di film in stile

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 :)