Share
React è una libreria JavaScript per costruire interfacce utente (UI). È gestito e sviluppato da Facebook ed è uno degli strumenti più popolari per la creazione di app web oggi.
Tuttavia, ha avuto un po 'di reputazione per non essere molto facile da usare per configurare un'applicazione React, in particolare per i principianti. Il problema deriva dal momento in cui React è diventato popolare e il metodo standard per creare un'app React implicava una complessa configurazione manuale di un intero host di file di installazione.
Un sacco di tutorial pensati per aiutare i principianti a iniziare con React ha introdotto diversi approcci e strumenti per creare un'app funzionante. Anche con sottili differenze tra i metodi di costruzione suggeriti, la confusione era inevitabile.
Per essere in grado di configurare con successo un'app React tramite la configurazione manuale è necessaria una buona conoscenza di più tecnologie diverse.
Questa flessibilità nella configurazione è in realtà una grande cosa. Hai la completa libertà di scegliere gli strumenti specifici per costruire la tua app React e configurarli esattamente come richiesto.
Una volta a proprio agio con questi strumenti, avrai la certezza di utilizzarli al massimo delle loro potenzialità e creare app complesse e approfondite. Fino ad allora, rimane ancora una barriera di accesso a molti sviluppatori che non hanno necessariamente esperienza con gli strumenti da riga di comando necessari per creare app React.
Per aiutare ad alleviare questa frustrazione, questa serie di tutorial si concentra su vari metodi per la configurazione di app React. Inizieremo con l'approccio più basilare e quindi costruiremo configurazioni più complesse. Diamo comunque un calcio d'inizio, chiarendo più dettagliatamente i tipi di setup di React che copriremo.
Alla fine di questa serie di tutorial, sarai in grado di configurare le app React in quattro modi principali:
Il primo metodo dimostra come utilizzare un editor di codice online come CodePen per configurare un'app React molto rapidamente. Utilizzando questo metodo, codifichi la tua prima app letteralmente in pochi secondi!
Quindi, passeremo all'impostazione di React in un ambiente di sviluppo locale, iniziando con l'aggiunta diretta di script a un file HTML senza alcun tool di compilazione. I prossimi due metodi di installazione si concentrano su come impostare una tipica app React nello sviluppo quotidiano.
Come vedrai, l'uso dello strumento crea-react-app rende estremamente semplice ruotare le app React con un solo comando! Infine, illustriamo come impostare un'app React tramite la riga di comando completamente da zero, come nel vecchio stile.
Ogni metodo di installazione ha il suo posto e non esiste un unico approccio "migliore", solo alternative a seconda delle esigenze.
React è una fantastica libreria con cui costruire app web ed è anche molto divertente! Diamo ora uno sguardo ai prerequisiti del tutorial per assicurarci di essere al passo coi tempi.
Il metodo più semplice per configurare un'app React non richiede nient'altro che una connessione Internet. Tuttavia, mentre passiamo a configurazioni più complesse, ci sposteremo verso la creazione di un'app React completamente da zero. Pertanto, è consigliata una certa conoscenza dei seguenti argomenti.
Windows, macOS e Linux forniscono tutti accesso agli strumenti da riga di comando. Questi sono usati pesantemente nel moderno sviluppo web per completare compiti complessi in modo rapido ed efficiente. Se non hai esperienza di lavoro con la riga di comando per eseguire operazioni come la gestione di file / cartelle, l'installazione di strumenti, l'esecuzione di script e così via, allora varrebbe il tuo tempo almeno per imparare le basi.
Se hai fatto sviluppo web per un qualsiasi periodo di tempo, è probabile che tu abbia almeno sentito parlare di Node.js e npm. Node.js è stato originariamente creato per eseguire JavaScript sul server, ma ora è anche ampiamente utilizzato per lo sviluppo di applicazioni Web, semplificando e automatizzando attività comuni, tutto in un unico ambiente.
Sono disponibili letteralmente centinaia di migliaia di moduli Node.js e npm è stato introdotto come gestore di pacchetti dedicato per l'installazione, l'organizzazione e la gestione di tutti i vari moduli nella tua app Web. Poiché npm è associato a Node.js, è sufficiente installare la versione più recente di Node.js sul tuo sistema per renderla disponibile tramite la tua riga di comando.
È necessario un livello ragionevole di JavaScript per configurare e sviluppare app React. Altrimenti, a un certo punto, sicuramente ti sforzerai di creare app di React di qualsiasi spessore o complessità. Questo include alcune funzionalità di ES6 come funzioni di freccia, classi e moduli. Ti consiglio di ripassare le tue abilità JavaScript, se necessario, prima di provare a sviluppare un'applicazione React.
Questa serie di tutorial si concentra sull'impostazione di app React piuttosto che sul loro sviluppo e quindi non approfondiremo troppo in argomenti specifici di React come componenti, oggetti di scena e stato. È comunque una buona idea avere una conoscenza di base di ciò che sono, quindi nella prossima sezione tratteremo le funzionalità di base di React ed esploreremo come tutte le parti si incastrano per formare un'app funzionante.
Prima di immergerci nel nostro primo metodo di configurazione, facciamo un rapido tour di React stesso.
Al suo interno ci sono tre caratteristiche fondamentali di React che comprendono la maggior parte delle app. Questi sono:
Queste sono le caratteristiche chiave che devi padroneggiare per scrivere applicazioni React efficaci. Una volta raggiunto quel livello, sarai molto preparato a immergerti più a fondo in React e sviluppare app più complesse.
Potresti essere piacevolmente sorpreso di scoprire che i componenti, gli oggetti di scena e lo stato di React non sono così difficili da capire. La mia esperienza personale era che il processo di configurazione di React era più difficile dell'apprendimento di React stesso!
I componenti costitutivi di qualsiasi app React sono componenti. Pensali come blocchi di codice riutilizzabili che racchiudono markup, comportamento e stili. Possono anche essere annidati l'uno dentro l'altro, il che li rende altamente riutilizzabili. Ad esempio, potresti avere un
Per semplificare la costruzione di componenti, JSX è stato creato per fornire ai componenti una struttura simile a HTML. Se hai familiarità con HTML o XML, allora sarai a casa usando JSX per creare componenti. Vale la pena notare che non è necessario utilizzare JSX affatto in React, ma ora è diventato il metodo standard accettato per definire i componenti.
I puntelli consentono di passare le informazioni tra i componenti. E in React, le informazioni possono essere passate solo tramite oggetti di scena dai componenti principali ai componenti figlio.
Se scegli di utilizzare JSX nelle definizioni dei componenti (e ti consiglio vivamente di farlo), la definizione di oggetti di scena su un componente è notevolmente simile all'aggiunta di attributi HTML. Questo è uno dei motivi per cui JSX è così popolare! Essere in grado di utilizzare la sintassi simile a HTML per i componenti e gli oggetti di React rende molto facile impalcare rapidamente la tua app.
Diamo un'occhiata più da vicino al nostro
Primo, ecco il
la classe BookIndex estende React.Component render () return ()Elenco di tutti i libri
Quindi, all'interno di ciascuno
class Book estende React.Component render () return ()This.props.title
Autore: this.props.author
Pubblicato: this.props.published
Se la sintassi precedente per la creazione di componenti React sembra strana, non ti preoccupare, è piuttosto semplice. Una classe ES6 estende la classe del componente di base, quindi un metodo di rendering (obbligatorio) gestisce l'output del componente.
Stato ci consente di tenere traccia di tutti i dati in un'app React. Dobbiamo essere in grado di aggiornare l'interfaccia utente ogni volta che qualcosa cambia e lo stato lo gestisce per noi. Ogni volta che lo stato viene modificato, React è abbastanza intelligente da sapere quali parti della tua app devono essere aggiornate. Questo rende React molto veloce in quanto aggiornerà solo le parti che sono cambiate.
Lo stato viene in genere applicato al componente di livello superiore nell'app React, in modo che sia disponibile per ogni componente figlio a utilizzare i dati di stato come necessario.
Questo è tutto per il nostro tour vorticoso di React. Non è affatto esauriente, e c'è ancora molto da imparare prima di poter creare app complesse a pieno titolo, ma la comprensione di componenti, oggetti di scena e stato ti darà un solido vantaggio.
In questo tutorial, abbiamo gettato le basi per imparare come impostare un ambiente React. Il resto di questa serie di tutorial si concentra sui metodi specifici necessari per farlo. Tratteremo i metodi di configurazione che vanno da metodi molto semplici a metodi più complessi che richiedono la configurazione manuale.
Nel prossimo tutorial, inizieremo dando un'occhiata all'uso di CodePen, un editor di codice online, per configurare un'applicazione React in pochi clic del mouse. Questo è di gran lunga il modo più semplice e veloce per ottenere la codifica in React!
Accentsconagua