Iniziare con React.js

React.js è un flessibile e basato sui componenti Libreria JavaScript per costruire interfacce utente interattive. Era creato e open-source da Facebook ed è utilizzato da molte aziende tecnologiche leader come Dropbox, AirBnB, PayPal e Netflix. React consente agli sviluppatori di crea app pesanti per i dati che può essere aggiornato senza dolore da ri-rendering solo i componenti necessari.

Reagire è il Visualizza livello dal MVC modello di progettazione del software, e soprattutto si concentra sulla manipolazione DOM. Come in questi giorni tutti parlano di React, in questo post stiamo dando un'occhiata a come è possibile iniziare con esso.

Installa Reagire

Puoi anche installare React con il gestore di pacchetti npm o da aggiungendo manualmente le librerie necessarie alla tua pagina HTML. È raccomandato usando Reagire con Babele che ti permette di utilizzare la sintassi ECMAScript6 e JSX nel tuo codice React.

Se lo desidera installa Reagisci manualmente, i documenti ufficiali raccomandano di usa questo file HTML. È possibile scaricare la pagina facendo clic sul File> Salva pagina come ... menu nel tuo browser. Anche gli script di cui avrai bisogno (React, React DOM, Babel) verranno scaricati nel reagire-example_files / cartella. Quindi aggiungere i seguenti tag di script al file sezione del tuo documento HTML:

Invece di scaricarli, puoi aggiungere gli script React da CDN anche.

Puoi anche usare il versioni minificate dei precedenti file JavaScript:

Se preferisci installa React con npm, il modo migliore è usare il Crea App di Reazione Github repo creato da Facebook Incubator - questa è anche la soluzione consigliata dai documenti di React. Oltre a React, anche questo contiene Webpack, Babel, Autoprefixer, ESLint e altri strumenti di sviluppo. Per iniziare, utilizzare i seguenti comandi CLI:

 npm install -g create-react-app create-react-app my-app cd my-app npm start

Quando sei pronto, puoi accedi alla tua nuova app React sul localhost: 3000 URL:

Se vuoi saperne di più come installare React, controlla il linea guida per l'installazione dei documenti.

React e JSX

Sebbene non sia obbligatorio, puoi farlo usa la sintassi JSX nelle tue app React. JSX è sinonimo di XML JavaScript, ed esso traspone in JavaScript regolare. Il grande vantaggio di JSX è proprio questo ti consente di includere l'HTML nei tuoi file JavaScript, pertanto rende più semplice la definizione degli elementi di React.

Ecco le cose più importanti da sapere su JSX:

Tag quello iniziare con lettere minuscole (cassa del cammello inferiore) sono resi come normali elementi HTML.
Tag quello iniziare con lettere maiuscole (caso cammello superiore) sono resi come componenti React.
Qualsiasi codice scritto all'interno di parentesi graffe ... sono interpretati come JavaScript letterale.

Se vuoi saperne di più come usare JSX con React dai un'occhiata a questa pagina dai documenti e per il documentazione JSX predefinita puoi dare un'occhiata al wiki JSX.

Crea elementi di reazione

Reagire ha un architettura basata su componenti in cui gli sviluppatori creano componenti riutilizzabili per risolvere diversi problemi. Un componente React è composto da alcuni o molti Reagire elementi che sono le unità più piccole di app React.

Sotto, puoi vedere un semplice esempio di un elemento React che aggiunge un pulsante Fai clic su una pagina HTML. Nell'HTML, aggiungiamo a

contenitore con il "MyDiv" ID che sarà popolato con l'elemento React. Creiamo il nostro elemento React all'interno di a

   Rendiamo il nostro elemento React con ReactDOM.render () metodo quale prende due parametri obbligatori, il Reagire elemento () e il suo contenitore (document.getElementById ( 'myDiv')). Puoi leggere di più su come funzionano gli elementi di Reagire nel “Elementi di rendering” sezione dei documenti.
 Creare componenti
 Reagire componenti siamo unità dell'interfaccia utente indipendenti riutilizzabili in cui è possibile aggiornare facilmente i dati. Un componente può essere costituito da uno o più elementi React. puntelli siamo input arbitrari puoi usare per passare dati a un componente. Un componente React funziona in modo simile alle funzioni JavaScript, ogni volta che viene richiamato genera un qualche tipo di output.
 Puoi usare il sintassi della funzione classica o il nuovo Sintassi della classe ES6 a definire un componente React. In questo articolo, userò quest'ultimo, dato che Babel ci permette di usare ECMAScript 6. Se sei interessato a come creare un componente senza ES6, dai un'occhiata alla pagina Componenti e puntelli dei documenti.
 Sotto, puoi vedere il semplice componente React creeremo come esempio. È una notifica di base che l'utente vede dopo l'accesso a un sito. Ci sono tre pezzi di dati che lo faranno passare da caso a caso: il nome dell'utente, il numero di messaggi e il numero di notifiche, li passeremo come oggetti di scena.
  
Ogni componente React è una classe JavaScript che estende il React.Component classe base. Il nostro componente sarà chiamato Statistiche in quanto fornisce all'utente una statistica di base. Innanzitutto, noi creare il Statistiche classe con il class Stats estende React.Component ... sintassi, poi noi renderlo sullo schermo chiamando il ReactDOM.render () metodo (abbiamo già usato quest'ultimo nella sezione precedente).
  class Stats estende React.Component render () return (  Salve this.props.name, hai this.props.notifications nuove notifiche e this.props.messages nuovi messaggi. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Il primo argomento del ReactDOM.render () metodo consiste di il nome del nostro componente React (), e i suoi oggetti di scena (nome, notifiche, e messaggi) con i loro valori. Quando dichiariamo i valori dei puntelli, le stringhe devono essere racchiuso tra virgolette (piace "John Doe") e valori numerici tra parentesi graffe (piace 3).
 Si noti che a causa di JavaScript, noi Usato nome della classe invece di classe per passare un attributo di classe a un tag HTML (className = "Riepilogo").
 La pagina HTML corrispondente è la seguente:
          
    
 Nei documenti di React, ci sono molti altri fantastici esempi su come costruire e gestire i componenti di React, e cos'altro sapere su oggetti di scena.
 Ulteriori letture
 Con React, Facebook ha introdotto un nuovo tipo di struttura nello sviluppo front-end che sfida il modello di progettazione MV *. Se vuoi capire meglio come funziona e cosa puoi o non puoi ottenere con esso, ecco alcuni articoli interessanti che possono aiutarti:
 Post del blog di Facebook su perché hanno costruito React.
 Il brillante post sul blog di Andrew Ray sul buono e sul cattivo di React.
 Codementor su come confrontare React e AngularJS.
 Il pezzo di riflessione di FreeCodeCamp sul fatto se MVC è morto sul front-end.
 L'articolo di HackerNoon su come ottimizzare le prestazioni relative a React.