Utilizzando l'app Create React

Cosa starai creando

React è diventato rapidamente un framework popolare per la creazione di viste lato client e lato server. C'era una barriera di accesso più alta con gli strumenti e qualche frustrazione per l'affaticamento di JavaScript da parte della comunità. L'app create-react è stata creata per affrontare queste frustrazioni.

Iniziare

Prima di tutto, assicurati di avere il Nodo installato sul tuo sistema. È necessario aver installato almeno Node versione 4, ma raccomandano di avere la versione 6 per download più veloci e un migliore utilizzo del disco. Puoi anche usare nvm per passare facilmente tra le versioni di Node. 

Dopo aver installato il nodo, ti consigliamo di aprire il tuo strumento da riga di comando preferito e installare l'app create-react a livello globale in modo da poterlo eseguire ovunque sul tuo sistema. 

npm install -g create-react-app

Come creare la tua prima app

Dovrai prima aprire la riga di comando e navigare o creare una directory in cui farai il tuo sviluppo. Successivamente creeremo l'app eseguendo create-react-app tuts-plus-react-app. Questo eseguirà lo strumento cli per creare la nostra app tuts-plus-react. 

Una volta completato lo strumento CLI, verrà visualizzata una schermata di riepilogo che ti consentirà di sapere dove è stata creata l'app e mostrarti un elenco di comandi che puoi utilizzare.

Successivamente, vorrai navigare verso la nostra nuova app eseguendo cd tuts-plus-react-app.

Avvio dell'app

Puoi eseguire l'app localmente eseguendo inizio di npm. Una volta avviata l'applicazione, sarai automaticamente navigato su http: // localhost: 3000 / nel tuo browser e vedrai la tua nuova applicazione React. 

L'app utilizza webpack per eseguire un server di sviluppo locale. C'è una funzione di orologio, quindi quando apporti modifiche al tuo codice React e salvi, vedrai le modifiche apparire automaticamente nel browser. 

Se fai errori con il tuo codice, vedrai quegli errori o avvisi visualizzati nel browser.

Stili di codice e test

ESLint è incluso per garantire che il codice segua gli stili di codice comuni. Ciò ti aiuterà ad assicurarti che il tuo codice sia coerente, il che è particolarmente utile quando ci sono più contributori a un progetto. Ti suggerirei di usarlo se sei nuovo in React per imparare anche gli stili di codifica React e JavaScript. 

Se hai familiarità con la scrittura di test per il tuo codice, Jest è incluso per eseguire i test. Jest è un framework di test che viene creato e gestito da Facebook, i creatori di React. Per eseguire i test, eseguire test npm nel tuo strumento da riga di comando. Questo eseguirà i test e quindi avvia un watcher per eseguire i test quando il codice di produzione cambia. È disponibile un file di test che è possibile aggiungere src / App.test.js.

Distribuzione dell'app

Quando hai finito di apportare tutte le tue modifiche, è ora di implementare la tua app. Tutto ciò che devi fare è eseguire npm esegue build nella directory delle app. Questo userà Babel per traspolare il tuo codice React in codice che il browser capisca. Inoltre, ridurrà anche il tuo codice per assicurarti di avere le migliori prestazioni nel browser.

Guida utente

Se decidi di continuare a utilizzare l'app create-react, ti suggerisco di dedicare del tempo a leggere la guida dell'utente. Offre molte informazioni utili su altri argomenti relativi alla vista, come l'aggiunta di fogli di stile CSS, l'importazione di altri componenti, l'importazione di immagini e caratteri e altro. Dispone inoltre di informazioni sulle pratiche di sviluppo Web come l'utilizzo di HTTPS, la connessione a un back-end Node, la creazione di applicazioni Web progressive e altro ancora. 

C'è anche una vasta documentazione su test e distribuzione della tua applicazione.

Felice hacking

Spero che ora siate in grado di vedere quanto sia facile creare un'applicazione React utilizzando il progetto create-react-app. Spero che questo aiuti a ridurre la barriera di ingresso e ti aiuti a iniziare con React. So che ti piacerà!