Share
In deel een van deze tutorialserie gebruikten we de create-reactie-app tool om een werkende voorbeeldapp te maken als startpunt voor onze 'Movie Mojo' galerij-app.
In deel twee leren we ons eerste aangepaste onderdeel toevoegen om afzonderlijke filmkaarten weer te geven. We zullen ook zien hoe we met het gebruik van rekwisieten het uiterlijk van componenten kunnen aanpassen door gegevens in te voeren in plaats van deze hard te coderen.
Dit toont de flexibiliteit en herbruikbaarheid van componenten aan en hoe ze kunnen worden gebruikt als krachtige bouwstenen in je React-apps.
OK, laten we een component maken! Om te beginnen houden we de zaken vrij eenvoudig en werken we de HTML van de header bij tot zijn eigen component.
Modern React-best practices raden aan om elk onderdeel in uw app in een afzonderlijk bestand te scheiden. We zullen dit principe dus volgen, in uw projecten / Src / components / map, maak een nieuw bestand met de naam Header.js en open het in een teksteditor.
Aan de bovenkant van componentbestanden beginnen we altijd met het importeren van vereiste bibliotheken, andere componenten (omdat we componenten kunnen nesten) en extra items die we nodig hebben (bijvoorbeeld stijlen). De importeren verklaring maakt deel uit van ES6 en stelt ons in staat om onze projecten zeer modulair te houden.
Voor onze
import Reageren, Component uit 'reageren';
Dit importeert de volledige React-bibliotheek en maakt deze beschikbaar via de Reageer variabel. Het importeert ook de bestanddeel object rechtstreeks zodat we het kunnen gebruiken zonder het specifiek te kwalificeren met een voorgaande Reageer. objectreferentie.
Met andere woorden, als we het niet expliciet importeren bestanddeel object dan zouden we het als volgt moeten openen:
React.Component
Maar omdat we hebben geïmporteerd bestanddeel direct kunnen we het alleen gebruiken zonder enige verwijzing naar de Reageer variabel. Het maakt niet uit welke je gebruikt, en het heeft gewoon de voorkeur.
Vervolgens breiden we de component uit om het onderdeel daadwerkelijk te maken bestanddeel object om een nieuwe klasse te maken die onze definieert importeren verklaring, type:
class Header breidt component export standaard App uit;
Hier gebruiken we een ES6-klasse als onze componentcontainer. Klassen zijn een geweldige manier om alle code in te kapselen die nodig is om je component te beschrijven.
Het is u misschien ook opgevallen dat het componentbestand eindigt met een exportinstructie. Dit, zoals je zou verwachten, exporteert onze component en maakt deze beschikbaar voor andere bestanden in ons project.
Op zijn minst moeten alle React-componenten een weergavemethode hebben, die enige markup retourneert. Dit kan HTML, andere React-componenten of een combinatie van beide zijn.
Voeg dit toe aan uw componentklasse:
Accentsconagua
render () return React.createElement ('div', null, 'Hallo daar, dit is een component React!'); De Als u een React-component in een andere component wilt gebruiken, moeten we deze eerst importeren, dus voeg deze toe aan de lijst met importstatements bovenaan de Merk op hoe u het niet hoeft toe te voegen Sterker nog, als je probeert te gebruiken We kunnen nu het Dus dit is niet toegestaan: Als u meerdere elementen wilt retourneren, moet u ze allemaal in één wrapper-element wikkelen: Zorg er dus voor dat u de Welkom bij de React-app 'Movie Mojo'! Dit zal resulteren in onze Om het te voltooien U hebt echter misschien gemerkt dat er een probleem is. In Het antwoord is JSX. In Dit is hoe we React-componenten moeten schrijven zonder JSX. Eigenlijk is dit onder de motorkap waaraan JSX is gecompileerd voordat het kan worden weergegeven in de browser. U hoeft helemaal geen gebruik te maken van JSX voor uw React-componenten; het is helemaal aan jou. Maar bijna alle componenten die je tegenkomt, worden in JSX geschreven omdat het zo veel gemakkelijker is om te schrijven. Het is ook zeer leesbaar voor anderen die nieuw zijn in uw code. Stel je voor dat je een React-project moet bestuderen met tientallen verschillende componenten geschreven in gewoon JavaScript! Het zou dus geen verrassing moeten zijn dat we JSX zullen gebruiken voor componentdefinities gedurende de rest van deze tutorialserie. Ga je gang en vervang de Hoewel JSX ons veel meer flexibiliteit biedt bij het schrijven van onze componenten, moet u er rekening mee houden dat het geen echte HTML is maar een abstractie ervan.. U kunt dit zien in het bovenstaande codefragment. Kennisgeving in de Laten we ook de kopstijlen aanpassen. Open Hiermee wordt de achtergrondkleur van de koptekst bijgewerkt en wordt de hoogte verkleind. Tot nu toe, onze Denk aan componentprops die lijken op HTML-tags. Bijvoorbeeld a We kunnen hetzelfde doen voor React-componenten. Stel dat we niet wilden dat onze header de vaste tekst 'Discover Your Movie Mojo!' altijd. Zou het niet beter zijn als onze header tekst zou kunnen weergeven? In tegenstelling tot HTML-kenmerken, kunnen we onze componentsteunen een naam geven die we leuk vinden. Binnen Werk vervolgens het Dit resulteert in onze koptekst die de tekst weergeeft die is toegevoegd aan de Laten we eens nader bekijken hoe we naar de De gekrulde accolades vertellen JSX dat we JavaScript hebben dat we willen evalueren. Dit onderscheidt het van tekst. Als we geen accolades hebben gebruikt, is de snaar letterlijk De Onze Dit is goed nieuws bij het ontwikkelen van toekomstige React-apps, omdat je componenten uit eerdere projecten opnieuw kunt gebruiken, zodat je niet alles vanuit het niets hoeft te schrijven. We gebruikten hierboven rekwisieten om een vaste reeks door te geven aan de Om een variabele via rekwisieten te verzenden, kunnen we zoiets doen, waar Er is een zeer nuttige tool beschikbaar voor de Chrome-browser waarmee u informatie over uw React-app kunt bekijken. Met de standaardontwikkelaarstools kunt u alleen normale HTML-elementen bekijken, maar met de React Developer Tools-extensie geïnstalleerd, kunt u door alle React-componenten in uw app navigeren.. Zodra het is geïnstalleerd, opent u uw browser inspector tools en klikt u op de nieuw beschikbare Reageer tab. U ziet dat in plaats van HTML-elementen de hiërarchie van React-componenten in uw app wordt weergegeven. Klik op de Eenmaal geselecteerd, wordt informatie over een component weergegeven in het rechter venster. De De React-ontwikkelaarstools zijn erg handig voor het opsporen van fouten, vooral als je complexe React-apps ontwikkelt, dus het is de moeite waard om eraan te wennen om ze te gebruiken voor eenvoudiger apps. Je kunt ook de React-ontwikkelaarstools gebruiken om je applicatiestatus te inspecteren, waar we in de volgende tutorial aan zullen beginnen. In deze zelfstudie leer je hoe je je app opsplitst in afzonderlijke componenten om hem modulair te maken. Met componentprops kunt u waarden doorgeven aan afzonderlijke componenten, vergelijkbaar met hoe u kenmerken aan HTML-elementen toevoegt. We hebben ook gezien hoe we nieuwe browserinspecteurs kunnen gebruiken om componenten en rekwisieten te onderzoeken. In deel 3 voegen we de staat toe aan onze app om ons te helpen onze gegevens effectiever te beheren.React.createElement () methode maakt een HTML-element (a Header.js en open App.js.App.js:importeer Header vanuit './Header';
.js bestandsextensie zoals dit wordt aangenomen. Ook omdat het import Header van './components/Header'; van binnenuit App.js, je krijgt een compilatiefout.
render () retour ( );
render () retour (
class-app breidt component render () terug (
Ontdek je filmmojo!
App.js en voeg het toe aan Header.js.Ontdek je filmmojo!
App.js de Header.js er is slechts één telefoontje naar React.createElement (). Wat gebeurd er?App.js we gebruiken JSX om een HTML-achtige syntax te schrijven om onze componentuitvoer te definiëren. Vergelijk dit met onze componentdefinitie voor Header.js.React.createElement ('div', null, 'Hallo daar, dit is een component React!');React.createElement () bellen met het JSX-equivalent waarmee we hebben gekopieerd App.js. Jouw Header.js bestand zou er nu als volgt uit moeten zien:import Reageren, Component uit 'reageren'; class Header breidt Component render () return uit (
Ontdek je filmmojo!
naam van de klasse liever dan klasse om aan te geven waar we een CSS-klasse willen declareren? Dit komt omdat alle JSX is gecompileerd tot pure JavaScript, en klasse is een gereserveerd woord in ES6 JavaScript.App.css en bewerk de .App-header CSS-klasse wordt:.App-header achtergrondkleur: staalblauw; hoogte: 70 px; opvulling: 20px; kleur wit;
Component Props
ID kaart, klasse, stijl en zo verder, waardoor we unieke waarden kunnen toewijzen voor dat specifieke App.js, werk het tekst stutten. This.props.text
tekst prop in App.js.
tekst steun binnen Header.js gebruik makend van: This.props.text
this.props.text zou worden uitgevoerd, wat niet is wat we willen.deze sleutelwoord verwijst naar de hoofd componentklasse, en rekwisieten is een object dat alle ingevoerde waarden bevat rekwisieten object bevat slechts het ene item, maar u kunt er in de praktijk zoveel toevoegen als u wilt.koptekst is een variabele:Inspecterende React-componenten
Conclusie
