Share
De beste manier om een nieuwe vaardigheid te leren, is door het in de praktijk te brengen. Dus dit is een uitdaging voor jou.
In deze video van mijn cursus, Modern Web Apps With React en Redux, word je uitgedaagd om een React Component te maken voor het weergeven van een Twitter-avatar. Je kunt het zelf proberen (met een hint), of je kunt me door de oplossing laten lopen.
In deze uitdaging moet je een React-component bouwen voor het weergeven van een Twitter-avatar. Zoals je kunt zien aan de hand van de CodePen hieronder, duurt het gewoon props.handle en drukt een kleine URL af in een afbeeldingstag. Erg makkelijk.
Wat we moeten doen is een profielcomponent schrijven die een Twitter avatar-component gebruikt om de afbeelding en de naam te tonen. Je kan de ... zien ReactDOM.render bel voor enkele hints.
Als je deze uitdaging alleen wilt proberen, ga je gang! Lees anders verder terwijl ik u door de oplossing laat lopen.
Begin met het schrijven van de pen, zodat u onze eigen component kunt bouwen en deze vervolgens kunt hernoemen door "MIJN OPLOSSING" toe te voegen.
In onze ReactDOM bel, we hebben een Profiel component die we bellen, en we geven het een naam en een handvat.
Dit zou dus vrij eenvoudig moeten zijn. Laten we doorgaan en een profiel maken. Ik ga dit doen als een staatloze component, gewoon met behulp van een JavaScript-functie. Als u wilt, kunt u React.createClass of de klassenyntax zelf gebruiken. Doe wat jij wilt. Maar ik vind het leuk stateloze functies zo veel mogelijk te gebruiken.
Dit gaat één parameter nemen, wat ons props-object is, maar het zal gaan naam en handvat eigenschappen. Dus laten we doorgaan en dat vernietigen.
const Profiel = (naam, handle) =>
Laten we dan een div teruggeven. En binnen deze div, laten we een h1 retourneren met de naam voor dit specifieke account. En daaronder zullen we een hebben TwitterAvatar, waarvoor een handvat eigendom. Dus we zullen er een handvat doorgeven, die gelijk zal zijn aan het handvat dat we hebben.
const Profiel = (naam, handle) =>;naam
Daar gaan we. Het zou zo simpel moeten zijn. Dus bewaar dit in CodePen, en je kunt zien dat we ReactJS krijgen en we krijgen de Twitter-avatar.
Laten we doorgaan en de naam wijzigen in Tuts+ en de Twitter-greep naar tutsplus, en je kunt zien dat het wordt bijgewerkt.
Dus zoals je kunt zien, kunnen we dit veranderen naar andere namen en Twitter avatars, en we kunnen dit in actie zien. Goed gedaan! U hebt een zeer basaal React-onderdeel gebouwd. Het is een goede start om te zien hoe u componenten kunt maken en hun eigenschappen kunt gebruiken, en ook hoe u die eigenschappen kunt doorgeven aan andere componenten om een deel van het werk voor u te doen..
Dit is de laatste pen die de oplossing volledig laat zien:
React is een JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces die de webontwikkelingswereld stormenderhand heeft veroverd, en Redux is een geweldige manier om de applicatiestatus te beheren. In de volledige cursus, Modern Web Apps With React en Redux, leert u alles over hoe React, Redux en andere toonaangevende modules bij elkaar passen voor een compleet beeld van de ontwikkeling van apps.
Het is een uitgebreide cursus van vier uur met 35 videolessen, en ik zal je meenemen in het gebruik van deze twee bibliotheken om vanaf het begin een complete webtoepassing te bouwen. U begint met de eenvoudigst mogelijke architectuur en bouwt langzaam de app op, functie voor functie. Tegen het einde heb je een complete flashcards-app gemaakt om te leren door gespreide herhaling.
Je kunt deze cursus meteen volgen met een abonnement op Envato Elements. Voor een enkel laag maandelijks bedrag krijg je niet alleen toegang tot deze cursus, maar ook tot onze groeiende bibliotheek met meer dan 1000 videocursussen en toonaangevende e-boeken over Envato Tuts+.
Bovendien krijgt u nu onbeperkte downloads van de enorme Envato Elements-bibliotheek met meer dan 440.000 creatieve items. Creëer met unieke lettertypen, foto's, afbeeldingen en sjablonen en lever sneller betere projecten.
Accentsconagua