Share
Il modo migliore per imparare una nuova abilità è metterlo in pratica. Quindi, ecco una sfida per te.
In questo video del mio corso, Modern Web App con React e Redux, sarai sfidato a creare un componente React per la visualizzazione di un avatar Twitter. Puoi provare a risolverlo da solo (con un suggerimento), oppure puoi lasciarti guidare attraverso la soluzione.
In questa sfida, è necessario creare un componente React per visualizzare un avatar Twitter. Come puoi vedere dal CodePen qui sotto, basta props.handle e stampa un piccolo URL in un tag immagine. Molto semplice.
Quello che dobbiamo fare è scrivere un componente profilo che usi un componente avatar di Twitter per mostrare l'immagine e il nome. Puoi vedere il ReactDOM.render chiedi qualche suggerimento.
Se vuoi provare questa sfida da solo, vai avanti! Altrimenti, continua a leggere mentre ti guido attraverso la soluzione.
Iniziare a forgiare la penna in modo da poter creare il nostro componente, quindi rinominarlo aggiungendo "LA MIA SOLUZIONE".
Nel nostro ReactDOM chiama, abbiamo un Profilo componente che chiamiamo e noi lo diamo a nome e a maniglia.
Quindi questo dovrebbe essere abbastanza semplice. Andiamo avanti e creare un profilo. Ho intenzione di farlo come un componente stateless, usando solo una funzione JavaScript. Se lo desideri, puoi effettivamente utilizzare React.createClass o la stessa sintassi della classe. Fare quello che ti piace. Ma mi piace usare le funzioni senza stato il più possibile.
Questo prenderà un parametro, che è il nostro oggetto di scena, ma lo sarà nome e maniglia proprietà. Andiamo avanti e distruggiamo questo.
const Profile = (name, handle) =>
Quindi restituiamo un div. E all'interno di questo div, restituiamo un h1 con il nome per questo account specifico. E al di sotto di questo, avremo un TwitterAvatar, che richiede un maniglia proprietà. Quindi gli passeremo un handle, che sarà uguale alla maniglia che abbiamo.
const Profile = (name, handle) =>;nome
Eccoci. Dovrebbe essere così semplice. Quindi salvalo in CodePen e puoi vedere che riceviamo ReactJS e riceviamo l'avatar di Twitter.
Andiamo avanti e cambia il nome in Tuts+ e il gestore di Twitter a tutsplus, e puoi vedere che si aggiorna.
Quindi, come puoi vedere, possiamo cambiarlo con nomi diversi e avatar su Twitter, e possiamo vederlo in azione. Buon lavoro! Hai costruito un componente React molto semplice. È un buon punto di partenza per vedere come è possibile creare componenti e utilizzare le loro proprietà, e anche come è possibile passare tali proprietà ad altri componenti, per fare un po 'del lavoro per voi.
Ecco la penna finale che mostra la soluzione per intero:
React è una libreria JavaScript per la creazione di interfacce utente che ha preso d'assalto il mondo dello sviluppo web e Redux è un ottimo modo per gestire lo stato dell'applicazione. Nel corso completo, Modern Web Apps con React e Redux, imparerai tutto su come React, Redux e altri moduli principali si incastrano per un quadro completo dello sviluppo di app.
È un corso completo di quattro ore con 35 lezioni video e ti guiderò attraverso il processo di utilizzo di queste due librerie per creare un'applicazione web completa da zero. Inizierai con l'architettura più semplice possibile e creerai lentamente l'app, funzione per caratteristica. Alla fine, avrai creato un'app completa per le flashcard per l'apprendimento tramite ripetizione spaziale.
Puoi seguire questo corso subito con un abbonamento a Envato Elements. Con una sola tariffa mensile bassa, puoi accedere non solo a questo corso, ma anche alla nostra libreria in crescita di oltre 1.000 corsi video e eBook leader del settore su Envato Tuts+.
Inoltre ora ottieni download illimitati dall'enorme libreria Envato Elements di oltre 440.000 asset creativi. Crea con caratteri, foto, grafica e modelli univoci e realizza progetti migliori più velocemente.
Accentsconagua