Ako ste namjeravali učiti React, ali niste sigurni odakle započeti, potpuno novi Scrimbin tečaj Build a Movie Search App savršen je za vas!

Na ovom tečaju vodit ćete se kroz stvaranje aplikacije od početka do kraja za samo jedan sat. I usput ćete rješavati interaktivne izazove koji će vam pomoći da steknete mišićnu memoriju koja vam je potrebna da biste postali učinkoviti React programer.

Zašto učiti React?

React je najpopularniji front-end okvir na svijetu. Kao što navode dokumenti, React čini bezbolnim stvaranje interaktivnog korisničkog sučelja i predvidljivijeg koda koji je lakši za otklanjanje pogrešaka. React omogućuje izradu složenih korisničkih sučelja konstrukcijom komponenata za višekratnu upotrebu koje upravljaju vlastitim stanjem.

Što ovaj tečaj radi?

Ovo putovanje kroz učenje vodi vas kroz 11 interaktivnih ekranizacija, pokazujući vam sljedeće temeljne koncepte modernog React-a:

• Kako dobiti API ključ
• Dodavanje osnovnih stilova
• Izrada i oblikovanje komponenata
• Stvaranje funkcija
• Upravljanje stanjem pomoću kuka
• Prikazivanje informacija
• Izrada i oblikovanje karata

Uvod u učitelja

Ovaj tutorial vodi James Q. Quick, web programer s punim slogovima koji redovito govori na događanjima u zajednici i sudjeluje u Hackathonsima. Također vodi YouTube kanal koji podučava razvoj web stranica. Njegov moto 'Uči. Izgraditi. Uči. ' čini ga savršenim učiteljem za ovaj praktični tečaj.

Preduvjeti

Da biste učinkovito proučavali ovaj tečaj, trebali biste imati osnovno znanje HTML-a, CSS-a i JavaScript-a. Također će vam biti korisno da ste već vidjeli neki React kôd, ali to nije nužno.

Ako vam treba malo više pozadinskog znanja, pogledajte ove fantastične besplatne Scrimba tečajeve:

• HTML i CSS
• Javascript

Ako ste spremni udariti zemlju Reactom, krenimo!

Uvod u tečaj

U prvom prikazu, James nas vodi kroz nekoliko ključnih značajki aplikacije koju ćemo graditi i daje nam kratki pregled rada aplikacije. Na kraju, James nas upoznaje s API-jem koji ćemo koristiti - themoviedb.org.

Kako dobiti svoj ključ API API-ja za film

U ovoj kratkoj ulozi, James nam daje upute o tome kako dobiti Movie DB API ključ prijavom s besplatnim računom. Ovo je vrlo jednostavno i traje samo nekoliko minuta. Kliknite gornju sliku da biste pristupili tečaju.

Dodajte osnovni stilovi u svoju aplikaciju

Dalje, James nam pokazuje osnovnu React aplikaciju koju je za nas izradio:

import React from "react"; import ReactDOM from "react-dom"; class Main extends React.Component { render() { return 
Hello world!
; } } ReactDOM.render(, document.getElementById("root")); 

Zatim u našu style.cssdatoteku dodajemo neke osnovne stilove, uključujući margine i dopune, stilove naslova i Sveti gral CSS-a - centriranje sadržaja aplikacije. Kliknite ovdje da biste sami provjerili stilove.

Stvorite svoju prvu komponentu

U ovom prikazu imamo prvi izazov - stvoriti React komponentu. James koristi test.jsdatoteku kako bi nam dao kratki pregled onoga što je potrebno prije nego što zadatak podijeli na upravljačke dijelove:

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

Kliknite gornju vezu ili sliku da biste zaprljali ruke i pokušali izazov.

Stil komponente za pretraživanje filmova

Dalje, vrijeme je za oblikovanje naše nove aplikacije. James sugerira neke stilove za naše , , a i dodaje upit medija za podešavanje stilova na većim ekranima:

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

Ne zaboravite da je Scrimba potpuno interaktivna, tako da sa stilovima možete biti kreativni koliko želite - ove su ideje samo neke mogućnosti.

Stvorite funkciju pretraživanja filmova

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

U ovom screencast-u stvaramo funkciju asinkronizacije koja će koristiti API Fetch za dohvaćanje podataka o filmu iz Movie DB API-ja. Pritisnite vezu da biste vidjeli kako se to radi.

Upravljanje državom pomoću React useState Hook

U ovom prikazu James nam pokazuje kako koristiti stanje za praćenje korisnikova upita pomoću useStatekuke:

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

Dalje, mi smo postavili onChangena naše da ga vežu u to stanje:

 setQuery(e.target.value)} />

Tada je vrijeme za naš drugi izazov - stvoriti državu za informacije o filmovima i ažurirati to stanje prema potrebi. Idite na tutorial da biste ga isprobali.

Prikaz podataka o filmu

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.

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