Share
In deze laatste tutorial in onze React-serie maken we een nieuwe
De code voor het laatste project is beschikbaar om te downloaden via de link aan de rechterkant van het scherm (mogelijk moet u naar beneden scrollen). Later zal ik stap-voor-stap instructies geven over hoe het project op uw systeem kan worden uitgevoerd.
De
Het formulier heeft drie tekstinvoer nodig voor titel, jaar en posterafbeelding; plus een tekstgebied voor de filmbeschrijving. In / Src / components /, maak een nieuw bestand met de naam AddMovie.js en voeg het volgende toe:
import Reageren, Component uit 'reageren'; class AddMovie breidt Component render () return (uit (); standaard AddMovie exporteren;
The React ref kenmerk slaat een verwijzing op naar elk formulierinvoerveld als een componentklasse-eigenschap. We zullen deze referenties binnenkort gebruiken als een manier om eenvoudig invoerveldwaarden te grijpen.
Voeg echter eerst de volgende stijlen toe aan App.css om de vorm een beetje meer esthetisch te maken:
/ * filmvormstijlen * / .movie-vorm width: 250px; marge: 0 auto; .film-vorminvoer, .movie-vorm tekstvlak breedte: 250px; font-size: 14px; opvulling: 5px; marge: 5px; .movie-vormknop font-size: 16px; opvulling: 4px; marge: 10px 10px 30px 10px;
In Importeer vervolgens de. Bovenaan het bestand Uw app 'Movie Mojo' zou nu een formulier moeten laten zien aan de onderkant van het browservenster. We moeten een callback-methode opgeven die wordt uitgevoerd wanneer het formulier wordt ingediend, waarmee we een nieuwe film kunnen maken. Voeg dit toe aan de Voeg vervolgens de De eerste taak is om te voorkomen dat de standaard indiening plaatsvindt, wat we doen Vervolgens maken we een nieuw filmobject door de formulierinvoerveldwaarden te pakken die we eerder eerder als bestandstype-eigenschappen hebben opgeslagen. EEN Zodra u tevreden bent met het Om de nieuwe film in onze galerij te kunnen weergeven, moeten we deze toevoegen aan de Om dit te bereiken, maakt u een nieuwe methode in Vergeet niet om de nieuwe methode te binden aan de Overigens vraag je je misschien af waarom we dit hier moesten doen, maar niet voor de Gebruiken Terug in Wanneer we nu het formulier invullen, krijgen we het filmobject als eerder uitgevoerd naar de console, maar deze keer via de Verwijder de Dit is vrij gelijkaardig aan wat we in deel drie deden voor de Dit zal resulteren in elke extra film, toegevoegd via het formulier, met unieke sleutels. … enzovoorts. Open de app 'Movie Mojo' in de browser en voeg twee nieuwe films toe aan de galerij via het formulier. Er zijn extra filmposterafbeeldingen toegevoegd aan de Telkens wanneer u het formulier verzendt, wordt een extra film toegevoegd aan de galerij! Klik op de link aan de rechterkant (ongeveer halverwege de pagina) om het voltooide 'Movie Mojo' project zipbestand te downloaden. Als het eenmaal is uitgepakt, opent u een opdrachtregelvenster en navigeert u naar de Het duurt enkele minuten om alle 'Node.js'-modules te downloaden die nodig zijn om het project uit te voeren. Typ vervolgens: Dit compileert de React-app en opent deze in een browser via een speciale miniserver. We hebben heel wat besproken in deze vierdelige tutorialserie, dus gefeliciteerd als je het helemaal hebt doorlopen en de code hebt gevolgd. Je zou je nu op je gemak moeten voelen met de basis van React, en dit zal je hopelijk het vertrouwen geven om door te gaan en meer gecompliceerde apps te bouwen. Ik raad je aan het project 'Movie Mojo' te downloaden en de broncode te bekijken om er zeker van te zijn dat je begrijpt hoe alles in elkaar steekt. Er is veel ruimte om de app uit te breiden, dus waarom zou je niet proberen een aantal nieuwe extra functies te bedenken? Dit is ook een prima manier om je leerproces te versterken door te proberen nieuwe React-elementen voor de app te implementeren. Hier zijn enkele ideeën die u zou kunnen toevoegen: Ik hoor graag alle feedback over deze tutorial via de onderstaande opmerkingen. Vond je het gemakkelijk om te volgen, of waren er onderdelen waar je mee worstelde? Ik ben altijd op zoek om mijn tutorials beter te maken, dus feedback is altijd van harte welkom. Happy React-codering!App.js, voeg het toe importeer AddMovie vanuit './AddMovie';
element:onSubmit = (e) => this.addNewMovie (e)
addNewMovie () methode naar de top van de addNewMovie (e) e.preventDefault (); var movie = title: this.title.value, year: this.year.value, description: this.description.value, poster: this.poster.value; console.log (film);
e.preventDefault (). Anders, wanneer het formulier wordt ingediend, wordt de webpagina automatisch vernieuwd, wat niet is wat we willen.console.log () opdracht geeft de film object zodat we kunnen testen of het correct wordt gemaakt na het indienen van het formulier.
film object correct wordt gegenereerd, ga je gang en verwijder de console.log () telefoontje.film state object. Zodra dit is gebeurd, zorgt React ervoor dat de DOM voor ons wordt bijgewerkt.App.js (waarbij het app-statusobject leeft) om het toevoegen van een film aan de huidige status af te handelen.addMovieToGallery (film) console.log ('mooooooovie', film); deze dus het is beschikbaar in de hele klas.this.addMovieToGallery = this.addMovieToGallery.bind (this);
addNewMovie () methode die we hebben toegevoegd aan de deze voor jou. Deze kleine truc is de moeite van het herinneren waard, omdat het de complexiteit van de code vermindert en de leesbaarheid van uw code verbetert.addMovieToGallery () in onze App.js, werk het AddMovie.js, werk het addNewMovie () methode om het filmobject door te geven aan de addMovieToGallery () methode via de AddMovie prop die we zojuist hebben gemaakt.addNewMovie (e) e.preventDefault (); var movie = title: this.title.value, year: this.year.value, description: this.description.value, poster: this.poster.value; this.props.addMovie (film);
addMovieToGallery () methode in de 
console.log () commando binnen addMovieToGallery () en vervang deze door de volgende code om de ingevoerde filmdetails toe te voegen aan de films staat object:addMovieToGallery (film) var ts = Date.now (); var newMovie = ; newMovie ['film' + ts] = film; var currentMovies = ... this.state.movies; var newMovies = Object.assign (currentMovies, newMovie); this.setState (movies: newMovies);
loadAdditionalMovies () methode. Het belangrijkste verschil is dat voor elke extra filminvoer een unieke sleutel moet worden gegenereerd. Dit wordt bereikt door de huidige tijdstempel als unieke sleutel te gebruiken en toe te voegen film.film1501686019706 movie1501686027906 movie1501686032929
./ Public / posters / map voor het gemak, zodat u gemakkelijk het toevoegen van films aan de galerij kunt testen. U kunt deze openen door het voltooide app-project te downloaden.
Installeren van Movie Mojo
movie-mojo map en voer het volgende in:npm installeren
npm start
Conclusie
Accentsconagua