Impostare un ambiente reattivo, parte 3

Notare come in componente possiamo creare tutti gli elementi che vogliamo aggiungendo più chiamate a React.createElement (). Inoltre, gli oggetti di scena sono passati in componenti figlio tramite a oggetti di scena Oggetto JavaScript, a cui è possibile accedere all'interno dei componenti tramite il parametro della funzione oggetti di scena.

Aperto index.html in un browser per vedere l'output React.

Non parlerò qui di ulteriori dettagli React.createElement (), e altri argomenti non JSX, poiché la maggior parte degli utenti di React sceglie di scrivere i propri componenti usando JSX. Useremo JSX per i nostri componenti React per il resto di questa serie di tutorial.

Chiaramente, la mancanza di strumenti come Babel limita la facilità di scrivere codice React completamente da zero. Ci sono molti altri strumenti di cui possiamo trarre vantaggio, come un bundler che crea un singolo file JavaScript da tutte le librerie React richieste più il nostro codice app. Scopriremo un approccio migliore nella prossima sezione che è altrettanto facile da configurare.

Crea App di Reazione

Per risolvere il problema delle complesse configurazioni manuali di React, Facebook ha introdotto l'app crea-react, che è un modo semplice per iniziare a sviluppare con React. Fornisce la configurazione completa della build, ma non richiede alcuna configurazione manuale.

Andiamo avanti e installiamo l'app create-react. Digitare il seguente codice in una finestra della riga di comando.

npm install -g create-react-app

Ciò installerà l'applicazione create-react a livello globale in modo che tu possa accedervi da qualsiasi directory.

Avrai bisogno di npm installato per eseguire questo comando e Node.js per eseguire crea-react-app. Poiché npm viene fornito in bundle con Node.js, è sufficiente scaricare e installare l'ultima versione di Node.js dal sito Web ufficiale.

Creeremo ora una nuova app React chiamata my-prime-componenti. Tieni presente che create-react-app crea automaticamente la cartella contenente la tua app, quindi devi solo assicurarti di essere nella directory in cui desideri creare la cartella dell'app..

Esegui questi comandi per creare la tua app ed eseguire lo script di avvio.

start-my-first-component cd my-first-components / npm start crea-react-app

Potrebbe volerci un minuto o due per creare-react-app per completare l'installazione di tutto. Una volta fatto, inserisci il inizio di npm comando e si aprirà una nuova finestra del browser e, dopo alcuni secondi, verrà visualizzata l'app React.

La cosa bella di create-react-app è che include un mini server web e guarda i file nella tua app per le modifiche. Ogni volta che viene apportata una modifica, l'app viene ricostruita e la finestra del browser viene ricaricata automaticamente per visualizzare l'app aggiornata.

Durante il processo di installazione automatica, create-react-app genera diversi file e le seguenti tre cartelle:

• node_modules
• pubblico
• src

Per avere un'idea di come creiamo i componenti e collegarli insieme in un'app generata per creare creazioni, creeremo gli stessi componenti con cui abbiamo lavorato finora.

L'output predefinito dell'app suggerisce la modifica App.js come punto di partenza, quindi apri questo file e rimuovi le chiamate di importazione per il logo e i file CSS poiché non ne avremo bisogno. Possiamo anche semplificare il componente, e aggiungere nei nostri due componenti figlio di prima.

Il tuo App.js il file dovrebbe ora assomigliare a questo:

import React, Component da 'react'; la classe App estende Component render () return ( 
 
I miei primi componenti di reazione!
   
 ) classe MyFirstComponent estende Component render () return ( 
this.props.number: Ciao da React!
 ) classe MySecondComponent estende Component render () return ( 
this.props.number: My Second React Component.
 ) Esporta l'app predefinita;

Salva le tue modifiche e l'app create-react aggiornerà automaticamente la tua app nel browser. Ciò si traduce nello stesso risultato di prima. (Si noti che questa volta è caricato nel browser tramite il server web locale).

Rendiamo questo più modulare, però, per essere in linea con le migliori pratiche moderne per la creazione di app React. Crea due nuovi file all'interno del src cartella denominata MyFirstComponent.js e MySecondComponent.js.

Dentro MyFirstComponent.js, aggiungi il seguente codice:

import React, Component da 'react'; classe MyFirstComponent estende Component render () return ( 
this.props.number: Ciao da React!
 ) export default MyFirstComponent;

E dentro MySecondComponent.js, aggiungi un codice simile:

import React, Component da 'react'; class MySecondComponent estende Component render () return ( 
this.props.number: My Second React Component.
 ) esporta MySecondComponent predefinito;

Infine, dobbiamo aggiornare App.js per importare entrambi i componenti figlio poiché ora si trovano in file separati:

import React, Component da 'react'; importare MyFirstComponent da './MyFirstComponent'; importare MySecondComponent da './MySecondComponent'; la classe App estende Component render () return ( 
 
I miei primi componenti di reazione!
   
 ) Esporta l'app predefinita;

Questo approccio alla strutturazione dell'app React è molto più modulare e portatile. Permette inoltre un debug più semplice in quanto ciascun componente è autonomo all'interno del proprio modulo.

Conclusione

In questo tutorial, abbiamo coperto due metodi per configurare React localmente: l'approccio manuale e l'utilizzo dello strumento crea-react-app da Facebook.

Creare manualmente un'app React da zero e inserire le dipendenze dello script direttamente all'interno di index.html il file è piuttosto inefficiente. Man mano che la tua app si ridimensiona e quando vengono rilasciate versioni diverse dei tuoi script, l'aggiornamento manuale degli script diventerà rapidamente ingestibile. Inoltre, non possiamo utilizzare le funzionalità di ES6 o scrivere i nostri componenti in JSX!

L'utilizzo di create-react-app, d'altra parte, è un processo molto semplice. È installato e inizializzato con un paio di comandi. Una volta eseguito, create-react-app ricostruisce la tua app e aggiorna la finestra del browser ogni volta che modifichi i file di progetto. Si tratta di un flusso di lavoro davvero piacevole quando si apportano molte modifiche minori, in quanto contribuisce a velocizzare lo sviluppo delle app.

Nel prossimo tutorial creeremo da zero un'applicazione React che utilizza Webpack e Babel per raggruppare ed elaborare la nostra app in un singolo file JavaScript. A differenza di create-react-app, dove tutto è fatto per te, configureremo manualmente tutti i file di installazione e discuteremo sul motivo per cui sceglieresti questo approccio.