Tanuljon meg Reagálni 1 óra alatt egy filmkereső alkalmazás létrehozásával

Ha a React megtanulására vágyott, de nem biztos abban, hogy hol kezdje, a Scrimba vadonatúj Build a Movie Search App tanfolyama tökéletes Önnek!

Ezen a tanfolyamon egy óra alatt végigvezeti az alkalmazás létrehozását az elejétől a végéig. És interaktív kihívásokon fog dolgozni, amelyek elősegítik az izom memória megszerzését, amelyre szükséged van ahhoz, hogy hatékony React fejlesztővé válj.

Miért kell megtanulni a React-et?

A React a világ legnépszerűbb front-end keretrendszere. Amint a docs állítja, a React megkönnyíti az interaktív felhasználói kezelőfelületek és a kiszámíthatóbb kódok létrehozását, amelyeket könnyebb hibakeresni. A React segítségével összetett felhasználói felületeket hozhat létre újrafelhasználható komponensek létrehozásával, amelyek kezelik a saját állapotukat.

Mit csinál ez a tanfolyam?

Stílusos filmkártyák

Ez a tanulási út 11 interaktív képernyőn végigvezeti Önt, bemutatva a modern React következő alapfogalmait:

  • Hogyan szerezzünk API kulcsot
  • Alapstílusok hozzáadása
  • Komponensek létrehozása és formázása
  • Funkciók létrehozása
  • Az állam kezelése horgokkal
  • Információk megjelenítése
  • Kártyák készítése és formázása

Bevezetés a tanárhoz

Ezt az oktatást James Q. Quick, egy teljes veremű webfejlesztő vezeti, aki rendszeresen beszél közösségi eseményeken és részt vesz a Hackathonson. Futtat egy YouTube-csatornát is, amely webfejlesztést tanít. Mottója: „Tanulj. Épít. Tanít.' tökéletes oktatóvá teszi ezt a gyakorlati tanfolyamot.

Előfeltételek

A tanfolyam hatékony tanulmányozásához alapismeretekkel kell rendelkeznie a HTML, CSS és JavaScript használatáról. Hasznosnak találja, ha korábban látott néhány React-kódot, de ez nem kötelező.

Ha egy kicsit több háttérismeretre van szüksége, nézze meg ezeket a fantasztikus ingyenes Scrimba tanfolyamokat:

  • HTML és CSS
  • Javascript

Ha készen állsz arra, hogy a React-tal futni kezdj, kezdjük!

Tanfolyam Bevezetés

Hozzon létre egy Movie Search App Course elülső címet

Az első áttekintés során James végigvezet bennünket az építeni kívánt alkalmazás néhány főbb jellemzőjén, és gyorsan áttekintést ad az alkalmazás működéséről. Végül James bemutatja nekünk az általunk használt API-t - themoviedb.org.

Hogyan szerezzük meg a Movie DB API kulcsot

MovieDB API kulcs generálása

Ebben a rövid szereposztásban James megadja nekünk a legalacsonyabb szintet a Movie DB API kulcs megszerzéséhez egy ingyenes fiókkal történő regisztrációval. Ez nagyon egyszerű és csak néhány percet vesz igénybe. A tanfolyam eléréséhez kattintson a fenti képre.

Adjon hozzá alapstílusokat az alkalmazásához

Ezután James megmutatja az alapvető React alkalmazást, amelyet ő számunkra példázott:

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

Hello world!

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

Ezután hozzáadunk néhány alapstílust a style.cssfájlunkhoz, beleértve a margókat és a kitöltést, a címstílusokat és a CSS Szent Grálját - az alkalmazás tartalmának központosítását. Ide kattintva megnézheti a stílusokat.

Készítse el az első alkatrészt

Első React alkalmazásunk

Ebben az áttekintésben megvan az első kihívás - egy React komponens létrehozása. James egy test.jsfájl segítségével rövid áttekintést nyújt a szükségletekről, mielőtt a feladatot kezelhető darabokra bontaná:

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

Kattintson a fenti linkre vagy képre, hogy bepiszkolja a kezét, és kipróbálja a kihívást.

Stílusolja a Filmek keresése komponenst

Első React alkalmazásunk stílusokkal

Ezután itt az ideje, hogy megformázzuk új alkalmazásunkat. James szerint néhány stílus a mi , , és , és egy média lekérdezést állítsa be a stílusokat nagyobb képernyők:

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

Ne felejtsük el, hogy a Scrimba teljes mértékben interaktív, így a stílusokhoz hasonlóan kreatív tud lenni - ezek az ötletek csak néhány lehetőség.

Hozza létre a Filmek keresése funkciót

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

Ebben a screencast-ban létrehozunk egy aszinkron függvényt, amely a Fetch API-t használja a filminformációk lekérésére a Movie DB API-ból. Kattintson a linkre, hogy megnézze, hogyan történik.

Az állapot kezelése a React useState Hook segítségével

Ebben az áttekintésben James megmutatja, hogyan használjuk az állapotot a felhasználó lekérdezésének a useStatehoroggal történő nyomon követésére :

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

Ezután állítsuk be az onChangeon-t , hogy az ehhez az állapothoz kötődjön:

 setQuery(e.target.value)} />

Itt az ideje a második kihívásunknak - a filminformációk állapotának létrehozása és az állapot megfelelő frissítése. Ugorjon át az oktatóanyagra, hogy kipróbálja.

A filminformációk megjelenítése

A filmadatokat megjelenítő alkalmazás

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

Stílusos filmkártyák

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