Share
Cea mai bună modalitate de a învăța o nouă abilitate este punerea ei în practică. Deci aici este o provocare pentru tine.
În acest videoclip din cursul meu, Modern Web Apps Cu React și Redux, veți fi provocat să creați o Componentă React pentru afișarea unui avatar Twitter. Puteți încerca să o rezolvați singură (cu un indiciu) sau puteți să-mi permiteți să vă conduc prin soluție.
În această provocare, trebuie să construiți o componentă React pentru afișarea unui avatar Twitter. După cum puteți vedea din Codul de mai jos, este nevoie doar de props.handle și imprimă o mică adresă URL într-o etichetă de imagine. Foarte simplu.
Ceea ce trebuie să facem este să scriem o componentă de profil care folosește o componentă avatar avatar pentru a afișa imaginea și numele. Poti vedea ReactDOM.render cereți niște sugestii.
Dacă doriți să încercați această provocare pe cont propriu, continuați! În caz contrar, citiți mai departe pe măsură ce vă conduc prin soluție.
Începeți prin a rupe stiloul pentru a vă putea construi o componentă proprie și apoi o redenumiți adăugând "SOLUȚIA MEA".
În a noastră ReactDOM sunați, avem un a Profil componentă pe care o chemăm și o dăm a Nume și a mâner.
Deci, acest lucru ar trebui să fie destul de simplu. Să mergem mai departe și să creăm un profil. Am de gând să fac acest lucru ca o componentă apatridă, folosind doar o funcție JavaScript. Dacă doriți, puteți utiliza React.createClass sau sintaxa de clasă în sine. Fă ce vrei. Dar îmi place să folosesc cât mai mult posibil funcțiile fără stat.
Acest lucru va avea nevoie de un parametru, care este obiectul de recuzită, dar va avea Nume și mâner proprietăți. Deci, să mergem mai departe și să distrugem asta.
const Profil = (nume, mâner) =>
Atunci să întoarcem un div. Și în interiorul acestui div, să întoarcem un h1 cu numele pentru acest cont specific. Și sub acest lucru, vom avea un a TwitterAvatar, care necesită a mâner proprietate. Așa că îi vom transmite un mâner, care va fi egal cu mânerul pe care îl avem.
const Profil = (nume, mâner) =>;Nume
Vom merge acolo. Ar trebui să fie atât de simplu. Deci, salvați acest lucru în CodePen și puteți vedea că primim ReactJS și primim avatarul Twitter.
Să mergem mai departe și să schimbăm numele tuts+ și Twitter mâner să tutsplus, și puteți vedea că actualizează.
Deci, după cum puteți vedea, putem schimba acest lucru la nume diferite și avatare Twitter, și putem vedea acest lucru în acțiune. Bună treabă! Ați construit o componentă de bază React. Este un loc bun pentru a începe să vedeți cum puteți crea componente și să le utilizați proprietățile și, de asemenea, cum puteți să le transmiteți aceste proprietăți altor componente, să faceți o parte din lucrul pentru dvs..
Iată stiloul final care arată soluția în întregime:
React este o bibliotecă JavaScript pentru construirea de interfețe de utilizator care au luat lumea dezvoltării web prin furtună, iar Redux este o modalitate excelentă de a gestiona starea aplicației. În cursul complet, Modern Web Apps Cu React și Redux, veți afla totul despre modul în care React, Redux și alte module de vârf se potrivesc împreună pentru o imagine completă a dezvoltării aplicațiilor.
Este un curs cuprinzător, de patru ore, cu 35 de ore video și te voi duce în procesul de utilizare a acestor două biblioteci pentru a construi o aplicație web complet de la zero. Veți începe cu cea mai simplă arhitectură posibilă și veți construi încet aplicația, caracteristică după caracteristică. Până la urmă, ați creat o aplicație completă de cărți flash pentru învățarea prin repetări distanțate.
Puteți lua acest curs imediat cu un abonament la Envato Elements. Pentru o singură taxă lunară redusă, veți avea acces nu numai la acest curs, ci și la biblioteca noastră în creștere de peste 1.000 de cursuri video și cărți electronice de vârf din industria Envato Tuts+.
În plus, acum beneficiați de descărcări nelimitate de la biblioteca imensă Envato Elements de 440.000 de active creative. Creează cu fonturi, fotografii, grafică și șabloane unice și oferă proiecte mai bune mai rapid.
Accentsconagua