Share
In questa serie di tutorial ci tufferemo proprio nell'usare React mentre costruiamo un'app completamente funzionante per visualizzare una galleria di film.
Imparare a costruire un'app da zero è una grande opportunità per esercitarsi nell'uso di tutte le funzionalità chiave di React mentre si aumentano le capacità di sviluppo. Vengono seguiti tutti i metodi raccomandati e le migliori pratiche, il che è essenziale per la creazione di moderne app React.
Creeremo una nuovissima app React usando il Create-reagiscono-app strumento, sviluppato da Facebook, oltre a trattare in dettaglio i seguenti argomenti di React:
Per rendere più divertente l'apprendimento dello sviluppo di React, creeremo un'applicazione completamente funzionante, piuttosto che presentare snippet di codice generico quando vengono trattati nuovi aspetti di React.
Insieme costruiremo "Movie Mojo", un'app per mostrare una galleria di film di benessere. Al termine, l'app caricherà alcuni filmati al caricamento della pagina e quindi caricherà di più quando si fa clic su un pulsante. Infine, potrai inserire i tuoi titoli dei film tramite un modulo personalizzato che, una volta inviato, inserirà dinamicamente un nuovo film nella galleria.
Questo è un tutorial di livello intermedio, quindi trarrai grandi benefici se hai una conoscenza preliminare dei seguenti argomenti:
La maggior parte di questi sono trattati in dettaglio mentre procediamo, ma consiglierei di spazzolare le aree particolari se necessario.
Useremo il Create-reagiscono-app strumento per configurare la nostra app React. È estremamente facile da utilizzare e ci consentirà di concentrarci subito sulla codifica della nostra app, senza dover passare da una complicata procedura di configurazione.
Usare Create-reagiscono-app, avrai bisogno di avere Node.js e npm installato. Puoi verificare se sono entrambi disponibili digitando quanto segue in una finestra della riga di comando:
nodo -v
E poi:
npm -v
Se sono entrambi installati, vedrai il numero di versione corrente per ciascuno.
MacBook-Pro: ~ davidgwyer $ node -v v6.11.1 MacBook-Pro: ~ davidgwyer $ npm -v 5.3.0 MacBook-Pro: ~ davidgwyer $
Se è necessario installare o aggiornare Node.js e npm allora il modo più semplice è scaricare Node.js dalla pagina web ufficiale. Node.js è in bundle con npm quindi non è necessario eseguire un'installazione separata.
Installare Create-reagiscono-app globalmente, digitalo in qualsiasi finestra della riga di comando:
npm install -g create-react-app
Ora possiamo andare avanti e usare Create-reagiscono-app per impalcare la nostra nuova app React. Creerà anche una cartella di livello superiore per contenere i nostri file di progetto. Apri una finestra della riga di comando e accedi alla cartella in cui si trova la tua app (ad es. / Desktop) e digita quanto segue:
create-react-app movie-mojo
Ci vorrà circa un minuto per completarlo, ma quando lo fa, dovresti vedere un messaggio simile a questo:
Successo! Creato film-mojo in / Users / davidgwyer / Desktop / movie-mojo All'interno di tale directory, puoi eseguire diversi comandi: inizio filato Avvia il server di sviluppo. build di filati Raggruppa l'app in file statici per la produzione. test del filo Inizia il test runner. espulsione del filo Rimuove questo strumento e copia dipendenze di build, file di configurazione e script nella directory dell'app. Se lo fai, non puoi tornare indietro! Ti suggeriamo di iniziare digitando: cd movie-mojo yarn start Happy hacking!
Una nuova film-mojo la cartella sarà stata creata con la seguente struttura di file:
Il src la cartella è dove modificherai i tuoi file di progetto e quando arriverai a distribuire la tua app saranno raggruppati e aggiunti al pubblico cartella, pronto per la distribuzione.
Per visualizzare l'app di esempio nel tuo browser, sfruttiamo il mini server web incluso con Create-reagiscono-app. Dobbiamo trovarci nella cartella del progetto che abbiamo appena creato, quindi nella finestra della riga di comando, digitare:
cd film-mojo
E poi:
inizio di npm
Questo semplice comando fa tre cose principali. Lo farà:
Una volta compilato, vedrai il seguente output:
Compilato con successo! È ora possibile visualizzare film-mojo nel browser. Locale: http: // localhost: 3000 / Sulla tua rete: http://192.168.0.15:3000/ Si noti che la build di sviluppo non è ottimizzata. Per creare una build di produzione, utilizza la generazione del filato.
Ed ecco l'app di esempio in esecuzione nel browser.
Quando vengono apportate modifiche alla tua app, queste verranno automaticamente ricompilate e ricaricate nella finestra del browser. Questa è una caratteristica davvero interessante di Create-reagiscono-app e ti farà risparmiare molto tempo durante lo sviluppo!
Ti consente inoltre di concentrarti sulla codifica della tua app senza essere distratta da dover ricompilare manualmente e aggiornare continuamente la finestra del browser per vedere le ultime modifiche.
Forse il miglior flusso di lavoro, se hai lo spazio disponibile sullo schermo, è quello di avere il browser e il text editor aperti uno accanto all'altro. In questo modo, ogni volta che apporti una modifica a uno dei tuoi file di progetto, vedrai le modifiche visualizzate quasi istantaneamente nella finestra del browser.
Proviamo a fare una modifica al nostro progetto di esempio.
Dentro il src cartella, aperta App.js nel tuo editor di testo. Prova a cambiare linea:
Per iniziare, modifica src / App.js e salvare per ricaricare.
a:
Benvenuti nell'app React "Movie Mojo"!
Non appena si salvano le modifiche, l'app React ricompila automaticamente e la finestra del browser si aggiorna. Se hai riorganizzato lo spazio di lavoro come suggerito sopra, vedrai quanto è istantaneo.
Impostiamo la struttura della nostra app che useremo per il resto di questo tutorial.
Il Create-reagiscono-app strumento fa un ottimo lavoro di impalcatura la nostra app, ma abbiamo ancora la flessibilità per modificarlo in base alle nostre esigenze.
Innanzitutto, sbarazzati dei file che non abbiamo più bisogno dal nostro src cartella. Non abbiamo bisogno di operatori di servizio nella nostra app, quindi elimina il registerServiceWorker.js file. Questo è referenziato in index.js, quindi aprilo in un editor e cancella tutti i riferimenti in modo che assomigli a questo:
import Reagire da "reagire"; importare ReactDOM da 'react-dom'; importare './index.css'; importare App da './App'; ReactDOM.render (, document.getElementById ( 'radice'));
Quindi, eliminare il logo.svg file e modifica App.js per rimuovere riferimenti ad esso. Il tuo file aggiornato dovrebbe ora assomigliare a questo:
import React, Component da 'react'; importare './App.css'; la classe App estende Component render () return (); Esporta l'app predefinita;Benvenuto in React
Benvenuti nell'app React "Movie Mojo"!
Possiamo anche sbarazzarci di App.test.js file. Questo ci lascerà con i seguenti file in src:
Creeremo più componenti, quindi creiamo una cartella dedicata per archiviarli tutti all'interno src, crea un nuovo componenti cartella e aggiungere il App.js file ad esso. La nostra app non verrà compilata correttamente fino all'aggiornamento di un paio di riferimenti.
Nel index.js, aggiornare il percorso per importare il file
importare l'app da './components/App';
E in App.js, aggiorna il percorso a App.css:
import '... /App.css';
Salva le modifiche e assicurati che l'app venga ricompilata correttamente.
Siamo quasi pronti per iniziare a programmare la nostra app "Movie Mojo". Prima, però, acquisiamo familiarità con il modo in cui viene resa la nostra app.
Dare un'occhiata al index.js. Questo è il file che rende effettivamente la nostra app sul DOM. Lo fa tramite il ReactDom.render () metodo, che accetta due argomenti. Il primo argomento è il componente che vogliamo rendere. Nel nostro caso, questo è il
Il secondo argomento specifica l'elemento target DOM su cui vogliamo montare la nostra app React. Per impostazione predefinita, 'create-react-app' crea automaticamente questo elemento. Se dai uno sguardo dentro il Puoi cambiarlo per essere quello che preferisci, ma è meglio lasciarlo come predefinito per questo tutorial. Questo tutorial conteneva tutte le basi necessarie per configurare la nostra app React. utilizzando Restate sintonizzati per la parte 2, dove inizieremo a creare componenti per la nostra app "Movie Mojo" e daremo un'occhiata all'aggiunta di oggetti di scena per rendere dinamici i nostri componenti!pubblico cartella, c'è un index.html che contiene a id di radice.index.js carichi nel nostro App.js, e seguiremo questo schema progettuale separando ogni componente contenuto nella nostra app in un proprio file.App.js sarà il nostro componente di primo livello che conterrà altri componenti, che a loro volta potrebbero contenere riferimenti ad altri componenti. Pensa che i componenti sono simili ai tag HTML in cui hai il livello più alto elemento che può contenere uno o più elemento del menu e così via.Conclusione
Create-reagiscono-app ha reso incredibilmente facile creare un'app di esempio funzionante con tutte le configurazioni gestite per noi. Abbiamo quindi ottimizzato l'impostazione predefinita per soddisfare le nostre esigenze particolari.
Accentsconagua