Ora, in questo corso di aggiornamento, Module Yeater non scriverà un'app di reazione complessa perché semplicemente non è
l'idea di questo modulo.
Scriveremo un'app realistica nel modulo principale più avanti in questo corso dopo questo modulo qui dove lavoreremo al
progetto del corso.
Quindi è solo un aggiornamento qui.
E mi concentro sugli elementi di reazione principali, Stael, per e non sulla creazione di un'applicazione straordinaria.
Quindi REACT riguarda i componenti e quindi in genere dividiamo la nostra app in componenti.
Ora iniziamo senza dividerlo, però.
E invece di presentare una tecnologia H qui, un'app, userò un div, diciamo in quel div.
Aggiungiamo altro codice html.
Sto dicendo che h html qui ovviamente è J is X ma è ancora tradotto in due note HCM Altidore.
Giusto.
Ma è J è X.
Quindi qui potremmo avere H per taggare dove diciamo obiettivi di causa e sotto che vogliamo avere un elenco o aggiungere un elenco
dei nostri obiettivi del corso.
E sono un obiettivo.
Potrebbe essere.
Papà, vogliamo finire il corso.
Che vogliamo imparare tutto sul corso.
Argomento principale e che vogliamo, diciamo, aiutare.
I nostri studenti nel corso, CU e.
Una sezione, e potrebbe essere dell'oro.
Ora, un'applicazione molto banale.
Ora, non ho uno stile spettacolare speciale qui, motivo per cui lo salviamo e lo tiriamo fuori.
Ma ora aggiungerò un po 'di stile e per questo aggiungerò un'app, il file di Sears qui e importerò Deadfall
nel file JavaScript.
Questo, ovviamente, non è possibile a Manila, JavaScript, ma a causa di ciò sotto gli strumenti del cofano, che
Nien analizza i nostri file e quindi trasforma il codice.
Questo è possibile e questo viene semplicemente trasformato per iniettare questo codice CSX in H.
Anche il file temporale.
Ora qui, darò una C in classe.
E c'è una cosa speciale.
L'attributo class come questo non esiste e J è X perché class è una parola chiave in JavaScript.
Quindi è il nome della classe.
Ed è così che aggiungi le classi di siesta agli elementi e J è X.
Tutto questo, ovviamente, è una specie di prova o ti ricorda il fatto che non si tratta di H Tim.
Ma H Tim.
Sintassi dall'aspetto gufo, tutti nominati come lista degli obiettivi di classe qui e ora qui possiamo.
Definisce alcuni stili per Gollust qui, e imposterò semplicemente la lista su style su non qui, rimuoverò un margine o
gli darò un margine di due ram in alto e in basso e un'imbottitura di zero.
E su ogni voce dell'elenco degli obiettivi, aggiungerò un margine di una stanza in alto e in basso a zero due a sinistra e a destra,
e quindi semplicemente un bordo di un pixel solido.
E poi questo colore grigiastro qui e un'imbottitura di un montone.
Questo è uno stile molto, molto semplice perché non voglio passare molto tempo a scrivere visto come
stili qui.
Ora, forse una regolazione.
Diamo effettivamente all'elenco un margine di due nastri in tutte le direzioni.
Ora abbiamo questo elenco dei nostri obiettivi per adattare gli obiettivi del corso qui in alto.
Lo farò anche io.
Dai a questo d'Hiv un nome di classe, ovviamente, teschi.
E poi in D. C. come file USA.
Forse in cima, possiamo bloccare gli obiettivi del corso e la loro d. h per taggare per essere allineati al centro.
Proprio così.
Ora di nuovo obiettivi molto grandi.
Ma va bene per il discorso qui.
Stiamo solo esercitando la reazione.
Quindi abbiamo questi obiettivi del corso qui.
Eccezionale.
Questo, ovviamente, è un markup molto semplice.
Ora, ciò che reagisci spesso a ciò che fai mentre lo dividi in più
componenti, ad esempio, esternalizzi questo elenco in un componente separato per mantenere ogni componente da solo relativamente snello
e concentrato su un compito.
Per questo, possiamo aggiungere una cartella sup componenti qui nella cartella sorgente.
E lì aggiungerò un elenco di obiettivi J. S. File.
Questo conterrà il mio componente dell'elenco obiettivi.
Ora, per creare un componente così nuovo, dobbiamo prima di tutto importare, reagire da reagire.
Altrimenti non possiamo usare questo J come X Syntex.
E poi ho parlato di morto.
Un componente è una funzione.
E a proposito, puoi anche creare con la parola chiave funzione o.
Con un'espressione di funzione o.
Con la funzione Freccia presto testo che ho usato prima, era solo un somatico che userò qui,
ma non è un must.
E poi qui esporto la mia lista di obiettivi in questo modo.
E ora qui, torno.
Questo elenco non ordinato, salt, lo taglia qui e poi viene aggiunto, qui c'è un valore di ritorno e se
una riforma a questo, vedi automaticamente queste parentesi vengono aggiunte attorno ad esso in modo che questo possa essere formattato in modo
corretto su più righe.
Altrimenti, questo non sarebbe JavaScript valido.
Lo stesso vale per le parentesi.
È perché allora JavaScript sa che questo blocco appartiene insieme.
Quindi ora abbiamo l'elenco degli obiettivi qui e un'app.
Sì, ora possiamo importare il nostro componente elenco obiettivi.
Puoi nominarlo qui come vuoi.
Non deve essere lo stesso nome con cui lo esporti qui.
L'unica cosa importante è che deve iniziare con un carattere maiuscolo qui in Abcess e un'importazione dalla cartella
dei componenti e provengono dall'elenco degli obiettivi.
E come ho detto prima, puoi omettere D. estensione del file qui.
Non è richiesto
E poi qui usi go list come un normale J. S. L'elemento X, come un normale elemento H tim L, si potrebbe
dire.
Ma poiché non abbiamo contenuti tra il tag di apertura e di chiusura, possiamo e dobbiamo scrivere qui un tag di
chiusura automatica.
Questo non sarebbe permesso.
Devi sempre chiudere tax e jazz x.
Quindi questo sarebbe ora il mio componente dell'elenco obiettivi.
E quindi, se siamo sicuri, vediamo lo stesso risultato di prima.
Otteniamo anche lo stesso stile perché gli stili qui vengono sempre applicati a livello globale, anche se li importi in
un file componente specifico.
Tuttavia, è buona norma impostare gli stili nel file CSX accanto al componente a cui appartengono.
Quindi, aggiungerò un elenco di obiettivi C come file s.
Aggiungi il mio elenco di obiettivi Stollsteimer e importa tale elenco di obiettivi.
CSX rientra nel file JavaScript dell'elenco obiettivi.
Questo non è un must, ma rende facile trovare gli stili che appartengono a questo componente.
Tieni presente che gli stili non vengono automaticamente applicati a un componente, anche se vengono applicate
le normali regole s poiché tutte queste C sono le seguenti, indipendentemente da dove le importi, vengono applicate
globalmente all'intera pagina.
Con ciò, però, torniamo allo stesso risultato di prima.
Allora perché l'abbiamo fatto?
E perché lo dividiamo se abbiamo lo stesso risultato di prima?