Dacă ați intenționat să învățați React, dar nu sunteți sigur de unde să începeți, noul Scrimba Construiți o aplicație de căutare film cursul este perfect pentru tine!

În acest curs, veți fi ghidat prin crearea aplicației de la început până la sfârșit în doar o oră. Și veți lucra prin provocări interactive pe parcurs, care vă vor ajuta să câștigați memoria musculară de care aveți nevoie pentru a deveni un dezvoltator React eficient.

De ce să înveți să reacționezi?

React este cel mai popular cadru front-end din lume. La fel de documentele stare, React face nedureroasă crearea de UI interactive și cod mai previzibil, care este mai ușor de depanat. Cu React, puteți produce IU complexe prin construirea de componente reutilizabile care își gestionează propria stare.

Ce face acest curs?

Cartele de film cu stil

Această călătorie de învățare vă duce prin 11 ecrane interactive, care vă arată următoarele concepte de bază ale Reactului modern:

  • Cum se obține o cheie API
  • Adăugarea stilurilor de bază
  • Crearea și stilizarea componentelor
  • Crearea funcțiilor
  • Gestionarea stării folosind cârlige
  • Afișarea informațiilor
  • Crearea și coafarea cărților

Introducere pentru profesor

Acest tutorial este condus de James Q. Quick, un dezvoltator web complet care vorbește regulat la evenimente din comunitate și participă la Hackathons. De asemenea, conduce un canal YouTube care predă dezvoltarea web. Motto-ul său „Învață. Construi. A preda.’ îl face profesorul perfect pentru acest curs practic.

Condiții prealabile

Pentru a studia acest curs în mod eficient, ar trebui să aveți cunoștințe de bază despre HTML, CSS și JavaScript. Veți găsi, de asemenea, util să fi văzut vreun cod React înainte, dar nu este un lucru obligatoriu.

Dacă aveți nevoie de mai multe cunoștințe de bază, aruncați o privire la aceste cursuri fantastice gratuite Scrimba:

Dacă sunteți gata să loviți pământul cu React, să începem!

Introducere curs

Construiți un diapozitiv de titlu frontal al aplicației Căutare film

În primul scrim, James ne trece prin câteva dintre caracteristicile cheie ale aplicației pe care o vom construi și ne oferă o scurtă descriere a modului în care funcționează aplicația. În cele din urmă, James ne introduce API-ul pe care îl vom folosi – themoviedb.org.

Cum să obțineți cheia API a filmului DB

Generarea unei chei API MovieDB

În această distribuție scurtă, James ne oferă scăderea modului de a obține o cheie API Movie DB prin înscrierea cu un cont gratuit. Acest lucru este foarte simplu și durează doar câteva minute. Faceți clic pe imaginea de mai sus pentru a accesa cursul.

Adăugați stiluri de bază în aplicația dvs.

Urmatorul, James ne arată aplicația de bază React pe care a instanțiat-o pentru noi:

import React from "react";
import ReactDOM from "react-dom";

class Main extends React.Component {
	render() {
		return <h1>Hello world!</h1>;
	}
}

ReactDOM.render(<Main />, document.getElementById("root"));

Apoi adăugăm câteva stiluri de bază la style.css fișier, inclusiv margini și umplutură, stiluri de titlu și, Sfântul Graal al CSS – centrarea conținutului aplicației. Click aici pentru a verifica stilurile pentru tine.

Creați-vă prima componentă

Prima noastră aplicație React în acțiune

În acest scrim, avem prima noastră provocare – să creăm o componentă React. James folosește un test.js pentru a ne oferi o scurtă previzualizare a ceea ce este necesar înainte de a împărți sarcina în bucăți gestionabile:

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

Faceți clic pe linkul sau imaginea de mai sus pentru a vă murdări mâinile și a încerca provocarea.

Stilizați componenta Căutare filme

Prima noastră aplicație React cu stiluri adăugate

Urmatorul, este timpul să ne modelăm noua aplicație. James sugerează câteva stiluri pentru noi <form>, <label>, <input> și <button> și adaugă o interogare media pentru a ajusta stilurile pe ecrane mai mari:

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

	.input {
		margin-bottom: 0;
	}
}

Nu uitați că Scrimba este complet interactiv, astfel încât să puteți fi la fel de creativi pe cât doriți cu stilurile – aceste idei sunt doar câteva posibilități.

Creați funcția Căutare filme

export default function SearchMovies(){

    const searchMovies = async (e) => {
        e.preventDefault();

        const query = "Jurassic Park";

        const url = `https://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);
        }
    }

În acest screencast, creăm o funcție asincronizată care va utiliza API-ul Fetch pentru a prelua informațiile despre film din API-ul Movie DB. Apăsați linkul pentru a vedea cum se face.

Gestionați starea cu React useState Hook

În acest scrim, James ne arată cum să folosim starea pentru a urmări interogarea utilizatorului cu useState cârlig:

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

Apoi, setăm onChange pe al nostru <input> pentru a-l lega de acea stare:

<input
	className="input"
	type="text"
	name="query"
	placeholder="i.e. Jurassic Park"
	value={query}
	onChange={(e) => setQuery(e.target.value)}
/>

Apoi este timpul pentru a doua noastră provocare – să creăm starea pentru informațiile despre filme și să actualizăm starea respectivă după caz. Treceți la tutorial pentru a încerca.

Afișați informații despre film

Aplicație care afișează informații despre film

Acum, că ne putem căuta filmele, este timpul afișați informațiile către utilizator. Faceți clic pe link sau imagine pentru a vedea cum se face!

Stilizați cărțile de film

Cartele de film cu stil

Urmatorul, James ne arată cum să ne aranjăm cardurile de film pentru a crea o aplicație atractivă, ușor de utilizat. Începem cu containerul nostru pentru carduri <div> :

.card {
    padding: 2rem 4rem;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    margin-bottom: 2rem;
    background-color: white;
}

Cu acest lucru, trecem la titlurile și imaginile noastre. Faceți clic pe linkul sau imaginea de mai sus pentru a obține reducerea.

Creați componenta cardului de film (Provocare)

Al nostru sarcina finală este să creați o componentă separată pentru a afișa cardul de film. Acest lucru asigură mentenabilitatea în cazul în care proiectul nostru crește și este un obicei bun de a te pregăti pentru proiecte mai mari.

În adevăratul stil Scrimba, James prezintă această provocare și apoi ne conduce prin soluția sa. Mergeți la distribuție acum pentru a încerca singur. Notă: Sunt necesare accesorii pentru aceasta, dar James oferă o instrucțiune rapidă în explicația sarcinii.

Învelire

Felicitări pentru finalizarea aplicației Movie Search! Acum știți cum să creați o aplicație complet funcțională utilizând concepte de bază React, inclusiv componente funcționale, cârlige, cereri de preluare, stilare și componente reutilizabile.

Sper că ați câștigat multe din acest curs și vă simțiți inspirați să vă continuați călătoria de învățare. Pentru a afla mai multe despre React, mergeți la Scrimba gratuit, timp de șase ore Aflați reacționează gratuit curs.

După aceea, de ce să nu verificați toate celelalte cursuri excelente disponibile peste tot Scrimba să vezi unde vei merge mai departe?

Oriunde te duce călătoria ta, codificare fericită 🙂