ReactJS - Guida rapida

ReactJS è una libreria JavaScript utilizzata per la creazione di componenti dell'interfaccia utente riutilizzabili. Secondo la documentazione ufficiale di React, la seguente è la definizione:

React è una libreria per la creazione di interfacce utente componibili. Incoraggia la creazione di componenti dell'interfaccia utente riutilizzabili, che presentano dati che cambiano nel tempo. Molte persone usano React come V in MVC. React astrae il DOM da te, offrendo un modello di programmazione più semplice e prestazioni migliori. React può anche eseguire il rendering sul server utilizzando Node e può alimentare app native utilizzando React Native. React implementa un flusso di dati reattivo unidirezionale, che riduce il boilerplate ed è più facile ragionare rispetto al tradizionale data binding.

React Features

  • JSX- JSX è l'estensione della sintassi JavaScript. Non è necessario utilizzare JSX nello sviluppo di React, ma è consigliato.

  • Components- React è tutto sui componenti. Devi pensare a tutto come a un componente. Questo ti aiuterà a mantenere il codice quando lavori su progetti su larga scala.

  • Unidirectional data flow and Flux- React implementa un flusso di dati unidirezionale che semplifica il ragionamento sulla tua app. Flux è un modello che aiuta a mantenere i dati unidirezionali.

  • License - React è concesso in licenza con la documentazione di Facebook Inc. è concesso in licenza con CC BY 4.0.

Vantaggi di reazione

  • Utilizza il DOM virtuale che è un oggetto JavaScript. Ciò migliorerà le prestazioni delle app, poiché JavaScript virtuale DOM è più veloce del normale DOM.

  • Può essere utilizzato sul lato client e server, nonché con altri framework.

  • I modelli di componenti e dati migliorano la leggibilità, il che aiuta a mantenere app più grandi.

Limitazioni di reazione

  • Copre solo il livello di visualizzazione dell'app, quindi è ancora necessario scegliere altre tecnologie per ottenere un set completo di strumenti per lo sviluppo.

  • Utilizza modelli in linea e JSX, che potrebbero sembrare scomodi per alcuni sviluppatori.

In questo capitolo, ti mostreremo come configurare un ambiente per lo sviluppo di React di successo. Si noti che sono coinvolti molti passaggi, ma ciò contribuirà ad accelerare il processo di sviluppo in un secondo momento. Avremo bisognoNodeJS, quindi se non lo hai installato, controlla il collegamento dalla seguente tabella.

Sr.No. Software e descrizione
1

NodeJS and NPM

NodeJS è la piattaforma necessaria per lo sviluppo di ReactJS. Controlla la nostra configurazione dell'ambiente NodeJS .

Dopo aver installato con successo NodeJS, possiamo iniziare a installare React su di esso usando npm. Puoi installare ReactJS in due modi

  • Utilizzando webpack e babel.

  • Usando il create-react-app comando.

Installazione di ReactJS usando webpack e babel

Webpackè un bundler di moduli (gestisce e carica moduli indipendenti). Prende i moduli dipendenti e li compila in un unico bundle (file). È possibile utilizzare questo pacchetto durante lo sviluppo di app utilizzando la riga di comando o configurandolo utilizzando il file webpack.config.

Babel è un compilatore e transpiler JavaScript. Viene utilizzato per convertire un codice sorgente in un altro. Usando questo sarai in grado di utilizzare le nuove funzionalità di ES6 nel tuo codice dove, babel lo converte in un semplice vecchio ES5 che può essere eseguito su tutti i browser.

Passaggio 1: creare la cartella principale

Crea una cartella con il nome reactApp sul desktop per installare tutti i file richiesti, utilizzando il comando mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Per creare qualsiasi modulo, è necessario generare il file package.jsonfile. Pertanto, dopo aver creato la cartella, dobbiamo creare un filepackage.jsonfile. Per fare ciò è necessario eseguire il filenpm init comando dal prompt dei comandi.

C:\Users\username\Desktop\reactApp>npm init

Questo comando richiede informazioni sul modulo come nome pacchetto, descrizione, autore, ecc. È possibile ignorarli utilizzando l'opzione –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Passaggio 2: installa React e reagisci dom

Poiché il nostro compito principale è installare ReactJS, installarlo ei suoi pacchetti dom, usando install react e react-domrispettivamente i comandi di npm. Puoi aggiungere i pacchetti che installiamo apackage.json file utilizzando l'estensione --save opzione.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Oppure puoi installarli tutti in un unico comando come:

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

Passaggio 3: installa webpack

Dato che stiamo usando webpack per generare bundler install webpack, webpack-dev-server e webpack-cli.

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

Oppure puoi installarli tutti in un unico comando come:

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

Passaggio 4: installa babel

Installa babel e i suoi plugin babel-core, babel-loader, babel-preset-env, babel-preset-react e, html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Oppure puoi installarli tutti in un unico comando come:

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

Passaggio 5: creare i file

Per completare l'installazione, dobbiamo creare alcuni file, ovvero index.html, App.js, main.js, webpack.config.js e,.babelrc. È possibile creare questi file manualmente o, utilizzandocommand prompt.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Passaggio 6: impostare compilatore, server e caricatori

Aperto webpack-config.jsfile e aggiungi il codice seguente. Stiamo impostando il punto di ingresso del webpack su main.js. Il percorso di output è il luogo in cui verrà offerta l'app in bundle. Stiamo anche impostando il server di sviluppo su8001porta. Puoi scegliere qualsiasi porta desideri.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Apri il package.json ed elimina "test" "echo \"Error: no test specified\" && exit 1" dentro "scripts"oggetto. Stiamo eliminando questa riga poiché non eseguiremo alcun test in questo tutorial. Aggiungiamo il filestart e build comandi invece.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Passaggio 7: index.html

Questo è solo HTML normale. Ci stiamo ambientandodiv id = "app" come elemento radice per la nostra app e aggiungendo index_bundle.js script, che è il nostro file app in bundle.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Passaggio 8: App.jsx e main.js

Questo è il primo componente React. Spiegheremo i componenti di React in modo approfondito in un capitolo successivo. Questo componente verrà renderizzatoHello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Dobbiamo importare questo componente e renderlo alla nostra radice App elemento, così possiamo vederlo nel browser.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Note - Ogni volta che vuoi usare qualcosa, devi importprima. Se vuoi rendere il componente utilizzabile in altre parti dell'app, devi farloexport dopo la creazione e importarlo nel file in cui si desidera utilizzarlo.

Crea un file con il nome .babelrc e copiarvi il seguente contenuto.

{
   "presets":["env", "react"]
}

Passaggio 9: esecuzione del server

La configurazione è completa e possiamo avviare il server eseguendo il seguente comando.

C:\Users\username\Desktop\reactApp>npm start

Mostrerà la porta che dobbiamo aprire nel browser. Nel nostro caso lo èhttp://localhost:8001/. Dopo averlo aperto, vedremo il seguente output.

Passaggio 10: generazione del pacchetto

Infine, per generare il bundle è necessario eseguire il comando build nel prompt dei comandi come:

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

Questo genererà il pacchetto nella cartella corrente come mostrato di seguito.

Utilizzando il comando create-react-app

Invece di usare webpack e babel puoi installare ReactJS più semplicemente installando create-react-app.

Passaggio 1: installa l'app create-react

Sfoglia il desktop e installa l'app Crea React utilizzando il prompt dei comandi come mostrato di seguito:

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

Questo creerà una cartella denominata my-app sul desktop e installerà tutti i file richiesti al suo interno.

Passaggio 2: eliminare tutti i file di origine

Sfoglia la cartella src nella cartella my-app generata e rimuovi tutti i file al suo interno come mostrato di seguito -

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Passaggio 3: aggiungi file

Aggiungi file con nomi index.css e index.js nella cartella src come -

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

Nel file index.js aggiungi il seguente codice

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Passaggio 4: eseguire il progetto

Infine, esegui il progetto utilizzando il comando di avvio.

npm start

React usa JSX per i modelli invece del normale JavaScript. Non è necessario utilizzarlo, tuttavia, di seguito sono riportati alcuni vantaggi che ne derivano.

  • È più veloce perché esegue l'ottimizzazione durante la compilazione del codice in JavaScript.

  • È anche indipendente dai tipi e la maggior parte degli errori può essere rilevata durante la compilazione.

  • Rende più facile e veloce la scrittura di modelli, se si ha familiarità con l'HTML.

Utilizzando JSX

JSX sembra un normale HTML nella maggior parte dei casi. Lo abbiamo già utilizzato nel capitolo Configurazione dell'ambiente. Guarda il codice daApp.jsx dove stiamo tornando div.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Anche se è simile all'HTML, ci sono un paio di cose che dobbiamo tenere a mente quando lavoriamo con JSX.

Elementi annidati

Se vogliamo restituire più elementi, dobbiamo racchiuderlo in un elemento contenitore. Nota come stiamo usandodiv come involucro per h1, h2 e p elementi.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Attributi

Possiamo utilizzare i nostri attributi personalizzati oltre alle normali proprietà e attributi HTML. Quando vogliamo aggiungere un attributo personalizzato, dobbiamo usaredata-prefisso. Nell'esempio seguente, abbiamo aggiuntodata-myattribute come attributo di p elemento.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Espressioni JavaScript

Le espressioni JavaScript possono essere utilizzate all'interno di JSX. Dobbiamo solo avvolgerlo con parentesi graffe{}. Il seguente esempio eseguirà il rendering2.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

Non possiamo usare if else istruzioni all'interno di JSX, invece possiamo usare conditional (ternary)espressioni. Nell'esempio seguente, variablei è uguale a 1 quindi il browser eseguirà il rendering true, Se lo cambiamo con un altro valore, verrà renderizzato false.

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

Messa in piega

React consiglia di utilizzare gli stili inline. Quando vogliamo impostare stili in linea, dobbiamo usarecamelCasesintassi. React verrà anche aggiunto automaticamentepxdopo il valore numerico su elementi specifici. L'esempio seguente mostra come aggiungeremyStyle in linea a h1 elemento.

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

Commenti

Quando si scrivono commenti, è necessario inserire parentesi graffe {}quando vogliamo scrivere un commento all'interno della sezione figli di un tag. È una buona pratica da usare sempre{} durante la scrittura di commenti, poiché vogliamo essere coerenti durante la scrittura dell'app.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Convenzione sulla denominazione

I tag HTML usano sempre lowercase i nomi dei tag, mentre i componenti React iniziano con Uppercase.

Note - Dovresti usare className e htmlFor come nomi di attributi XML invece di class e for.

Questo è spiegato nella pagina ufficiale di React come:

Poiché JSX è JavaScript, identificatori come class e forsono sconsigliati come nomi di attributi XML. Invece, i componenti DOM React si aspettano nomi di proprietà DOM comeclassName e htmlFor, rispettivamente.

In questo capitolo impareremo come combinare i componenti per rendere l'app più facile da mantenere. Questo approccio consente di aggiornare e modificare i componenti senza influire sul resto della pagina.

Esempio apolidi

Il nostro primo componente nell'esempio seguente è App. Questo componente è proprietario diHeader e Content. Stiamo creandoHeader e Content separatamente e semplicemente aggiungendolo all'interno dell'albero JSX nel nostro file Appcomponente. SoloApp il componente deve essere esportato.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

Per poterlo visualizzare sulla pagina, dobbiamo importarlo in main.js file e chiama reactDOM.render(). Lo abbiamo già fatto impostando l'ambiente.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Il codice sopra genererà il seguente risultato.

Stateful Esempio

In questo esempio, imposteremo lo stato per il componente proprietario (App). IlHeadercomponente viene aggiunto solo come nell'ultimo esempio poiché non necessita di alcuno stato. Invece di tag di contenuto, stiamo creandotable e tbody elementi, dove inseriremo dinamicamente TableRow per ogni oggetto dal data Vettore.

Si può vedere che stiamo usando la sintassi della freccia di EcmaScript 2015 (=>) che sembra molto più pulita della vecchia sintassi JavaScript. Questo ci aiuterà a creare i nostri elementi con meno righe di codice. È particolarmente utile quando dobbiamo creare un elenco con molti elementi.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Note - Notare che stiamo usando key = {i} inside map()funzione. Ciò aiuterà React ad aggiornare solo gli elementi necessari invece di rieseguire il rendering dell'intero elenco quando qualcosa cambia. È un enorme aumento delle prestazioni per un numero maggiore di elementi creati dinamicamente.

Stateè il luogo da cui provengono i dati. Dobbiamo sempre cercare di rendere il nostro stato il più semplice possibile e ridurre al minimo il numero di componenti stateful. Se abbiamo, ad esempio, dieci componenti che richiedono dati dallo stato, dovremmo creare un componente contenitore che manterrà lo stato per tutti loro.

Utilizzo dello stato

Il codice di esempio seguente mostra come creare un componente stateful utilizzando la sintassi EcmaScript2016.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Questo produrrà il seguente risultato.

La principale differenza tra stato e oggetti di scena è questa propssono immutabili. Questo è il motivo per cui il componente contenitore dovrebbe definire lo stato che può essere aggiornato e modificato, mentre i componenti figlio dovrebbero solo passare i dati dallo stato utilizzando props.

Utilizzo di oggetti di scena

Quando abbiamo bisogno di dati immutabili nel nostro componente, possiamo semplicemente aggiungere oggetti di scena a reactDOM.render() funzione in main.js e usalo all'interno del nostro componente.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Questo produrrà il seguente risultato.

Puntelli predefiniti

È inoltre possibile impostare i valori delle proprietà predefinite direttamente nel costruttore del componente invece di aggiungerlo al file reactDom.render() elemento.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

L'output è lo stesso di prima.

Stato e oggetti di scena

L'esempio seguente mostra come combinare statee oggetti di scena nella tua app. Stiamo impostando lo stato nel nostro componente genitore e lo trasmettiamo all'albero dei componenti usandoprops. Dentro ilrender funzione, stiamo impostando headerProp e contentProp utilizzato nei componenti figlio.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Il risultato sarà di nuovo lo stesso dei due esempi precedenti, l'unica cosa diversa è la fonte dei nostri dati, che ora proviene originariamente dal state. Quando vogliamo aggiornarlo, dobbiamo solo aggiornare lo stato e tutti i componenti figlio verranno aggiornati. Maggiori informazioni su questo nel capitolo Eventi.

La convalida delle proprietà è un modo utile per forzare il corretto utilizzo dei componenti. Ciò aiuterà durante lo sviluppo per evitare bug e problemi futuri, una volta che l'app diventa più grande. Inoltre rende il codice più leggibile, poiché possiamo vedere come dovrebbe essere utilizzato ogni componente.

Convalida degli oggetti di scena

In questo esempio, stiamo creando App componente con tutti i props di cui abbiamo bisogno. App.propTypesviene utilizzato per la convalida degli oggetti di scena. Se alcuni degli oggetti di scena non utilizzano il tipo corretto che abbiamo assegnato, riceveremo un avviso dalla console. Dopo aver specificato i modelli di convalida, imposteremoApp.defaultProps.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

In questo capitolo, spiegheremo l'API del componente React. Discuteremo tre metodi:setState(), forceUpdate e ReactDOM.findDOMNode(). Nelle nuove classi ES6, dobbiamo associarlo manualmente. Noi useremothis.method.bind(this) negli esempi.

Imposta stato

setState()viene utilizzato per aggiornare lo stato del componente. Questo metodo non sostituirà lo stato, ma aggiungerà solo modifiche allo stato originale.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: []
      }
	
      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
	  myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

Abbiamo iniziato con un array vuoto. Ogni volta che si fa clic sul pulsante, lo stato verrà aggiornato. Se facciamo clic cinque volte, otterremo il seguente output.

Aggiornamento forzato

A volte potremmo voler aggiornare il componente manualmente. Ciò può essere ottenuto utilizzando ilforceUpdate() metodo.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

Stiamo impostando un numero casuale che verrà aggiornato ogni volta che si fa clic sul pulsante.

Trova Dom Node

Per la manipolazione DOM, possiamo usare ReactDOM.findDOMNode()metodo. Per prima cosa dobbiamo importarereact-dom.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

Il colore di myDiv l'elemento diventa verde, una volta cliccato il pulsante.

Note - A partire dall'aggiornamento 0.14, la maggior parte dei metodi API dei componenti precedenti sono obsoleti o rimossi per supportare ES6.

In questo capitolo, discuteremo i metodi del ciclo di vita dei componenti.

Metodi del ciclo di vita

  • componentWillMount viene eseguito prima del rendering, sia sul lato server che su quello client.

  • componentDidMountviene eseguito dopo il primo rendering solo sul lato client. È qui che dovrebbero verificarsi le richieste AJAX e gli aggiornamenti DOM o di stato. Questo metodo viene utilizzato anche per l'integrazione con altri framework JavaScript e qualsiasi funzione con esecuzione ritardata comesetTimeout o setInterval. Lo stiamo usando per aggiornare lo stato in modo da poter attivare gli altri metodi del ciclo di vita.

  • componentWillReceivePropsviene invocato non appena gli oggetti di scena vengono aggiornati prima che venga chiamato un altro rendering. L'abbiamo attivato dasetNewNumber quando abbiamo aggiornato lo stato.

  • shouldComponentUpdate dovrebbe tornare true o falsevalore. Questo determinerà se il componente verrà aggiornato o meno. Questo è impostato sutrueper impostazione predefinita. Se sei sicuro che il componente non debba essere renderizzato dopostate o props sono aggiornati, puoi tornare false valore.

  • componentWillUpdate viene chiamato appena prima del rendering.

  • componentDidUpdate viene chiamato subito dopo il rendering.

  • componentWillUnmountviene chiamato dopo che il componente è stato smontato dal dom. Stiamo smontando il nostro componente inmain.js.

Nell'esempio seguente, imposteremo l'iniziale statenella funzione costruttore. IlsetNewnumber viene utilizzato per aggiornare il file state. Tutti i metodi del ciclo di vita sono all'interno del componente Contenuto.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Dopo il rendering iniziale, avremo la seguente schermata.

In questo capitolo impareremo come usare i form in React.

Semplice esempio

Nell'esempio seguente, imposteremo un modulo di input con value = {this.state.data}. Ciò consente di aggiornare lo stato ogni volta che il valore di ingresso cambia. Stiamo usandoonChange evento che osserverà i cambiamenti di input e aggiornerà lo stato di conseguenza.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Quando il valore del testo di input cambia, lo stato verrà aggiornato.

Esempio complesso

Nell'esempio seguente, vedremo come utilizzare i moduli dal componente figlio. onChange il metodo attiverà l'aggiornamento dello stato che verrà passato all'input figlio valuee renderizzato sullo schermo. Un esempio simile viene utilizzato nel capitolo Eventi. Ogni volta che dobbiamo aggiornare lo stato dal componente figlio, dobbiamo passare la funzione che gestirà l'aggiornamento (updateState) come sostegno (updateStateProp).

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Questo produrrà il seguente risultato.

In questo capitolo impareremo come usare gli eventi.

Semplice esempio

Questo è un semplice esempio in cui useremo solo un componente. Stiamo solo aggiungendoonClick evento che si attiverà updateState una volta cliccato il pulsante.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState() {
      this.setState({data: 'Data updated...'})
   }
   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Questo produrrà il seguente risultato.

Eventi figlio

Quando dobbiamo aggiornare il file state del componente genitore dal suo figlio, possiamo creare un gestore di eventi (updateState) nel componente genitore e passalo come prop (updateStateProp) al componente figlio dove possiamo semplicemente chiamarlo.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Questo produrrà il seguente risultato.

Il ref viene utilizzato per restituire un riferimento all'elemento. Refs dovrebbero essere evitati nella maggior parte dei casi, tuttavia, possono essere utili quando abbiamo bisogno di misurazioni DOM o per aggiungere metodi ai componenti.

Utilizzando Refs

L'esempio seguente mostra come utilizzare refs per cancellare il campo di input. ClearInput la funzione cerca l'elemento con ref = "myInput" value, reimposta lo stato e aggiunge lo stato attivo dopo aver fatto clic sul pulsante.

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         data: ''
      }
      this.updateState = this.updateState.bind(this);
      this.clearInput = this.clearInput.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   clearInput() {
      this.setState({data: ''});
      ReactDOM.findDOMNode(this.refs.myInput).focus();
   }
   render() {
      return (
         <div>
            <input value = {this.state.data} onChange = {this.updateState} 
               ref = "myInput"></input>
            <button onClick = {this.clearInput}>CLEAR</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Dopo aver fatto clic sul pulsante, il file input sarà chiarito e concentrato.

Reagire keyssono utili quando si lavora con componenti creati dinamicamente o quando gli elenchi vengono modificati dagli utenti. L'impostazione dikey value manterrà i tuoi componenti identificati in modo univoco dopo la modifica.

Utilizzo delle chiavi

Creiamo dinamicamente Contentelementi con indice univoco (i). Ilmap la funzione creerà tre elementi dal nostro dataVettore. Dal momento che ilkey value deve essere unico per ogni elemento, assegneremo i come chiave per ogni elemento creato.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Otterremo il seguente risultato per i valori chiave di ogni elemento.

Se in futuro aggiungiamo o rimuoviamo alcuni elementi o cambiamo l'ordine degli elementi creati dinamicamente, React utilizzerà il key valori per tenere traccia di ogni elemento.

In questo capitolo impareremo come impostare il routing per un'app.

Passaggio 1: installa un router React

Un modo semplice per installare react-router è eseguire il seguente frammento di codice nel file command prompt finestra.

C:\Users\username\Desktop\reactApp>npm install react-router

Passaggio 2: creazione di componenti

In questo passaggio creeremo quattro componenti. IlAppcomponente verrà utilizzato come un menu a schede. Gli altri tre componenti(Home), (About) e (Contact) vengono renderizzati una volta che il percorso è cambiato.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}
export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}
export default Contact;

Passaggio 3: aggiungere un router

Ora aggiungeremo percorsi all'app. Invece di eseguire il renderingApp elemento come nell'esempio precedente, questa volta il Routersarà reso. Imposteremo anche componenti per ogni percorso.

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
), document.getElementById('app'))

Quando l'app viene avviata, vedremo tre collegamenti cliccabili che possono essere utilizzati per modificare il percorso.

Flux è un concetto di programmazione, dove si trovano i dati uni-directional. Questi dati entrano nell'app e fluiscono attraverso di essa in una direzione finché non vengono visualizzati sullo schermo.

Flux Elements

Di seguito è riportata una semplice spiegazione del fluxconcetto. Nel prossimo capitolo impareremo come implementarlo nell'app.

  • Actions - Le azioni vengono inviate al dispatcher per attivare il flusso di dati.

  • Dispatcher- Questo è un hub centrale dell'app. Tutti i dati vengono inviati e inviati ai negozi.

  • Store- Store è il luogo in cui si trovano lo stato e la logica dell'applicazione. Ogni negozio mantiene uno stato particolare e si aggiornerà quando necessario.

  • View - Il view riceverà i dati dallo store e rieseguirà il rendering dell'app.

Il flusso di dati è illustrato nell'immagine seguente.

Flux Pro

  • Il flusso di dati unidirezionale è facile da capire.
  • L'app è più facile da mantenere.
  • Le parti dell'app sono disaccoppiate.

In questo capitolo impareremo come implementare il pattern di flusso nelle applicazioni React. Noi useremoReduxstruttura. L'obiettivo di questo capitolo è presentare l'esempio più semplice di ogni elemento necessario per il collegamentoRedux e React.

Passaggio 1: installa Redux

Installeremo Redux tramite command prompt finestra.

C:\Users\username\Desktop\reactApp>npm install --save react-redux

Passaggio 2: creare file e cartelle

In questo passaggio creeremo cartelle e file per il nostro actions, reducers, e components. Dopo aver finito, ecco come apparirà la struttura delle cartelle.

C:\Users\Tutorialspoint\Desktop\reactApp>mkdir actions
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir components
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir reducers
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > actions/actions.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/Todo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/TodoList.js

Passaggio 3: azioni

Le azioni sono oggetti JavaScript che utilizzano typeproprietà per informare sui dati che dovrebbero essere inviati al negozio. Stiamo definendoADD_TODOazione che verrà utilizzata per aggiungere un nuovo elemento alla nostra lista. IladdTodo funzione è un creatore di azioni che restituisce la nostra azione e imposta un file id per ogni articolo creato.

azioni / azioni.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

export function addTodo(text) {
   return {
      type: ADD_TODO,
      id: nextTodoId++,
      text
   };
}

Passaggio 4: riduttori

Sebbene le azioni attivino solo modifiche nell'app, il file reducersspecificare tali modifiche. Stiamo usandoswitch dichiarazione per cercare un file ADD_TODOazione. Il riduttore è una funzione che accetta due parametri (state e action) per calcolare e restituire uno stato aggiornato.

La prima funzione verrà utilizzata per creare un nuovo elemento, mentre la seconda inserirà quell'elemento nell'elenco. Verso la fine, stiamo usandocombineReducers funzione di supporto in cui possiamo aggiungere nuovi riduttori che potremmo utilizzare in futuro.

riduttori / riduttori.js

import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'

function todo(state, action) {
   switch (action.type) {
      case ADD_TODO:
         return {
            id: action.id,
            text: action.text,
         }
      default:
         return state
   }
}
function todos(state = [], action) {
   switch (action.type) {
      case ADD_TODO:
         return [
            ...state,
            todo(undefined, action)
         ]
      default:
         return state
   }
}
const todoApp = combineReducers({
   todos
})
export default todoApp

Passaggio 5: Store

Il negozio è un luogo che detiene lo stato dell'app. È molto facile creare un negozio una volta che hai i riduttori. Stiamo passando la proprietà del negozio aprovider elemento, che avvolge il nostro componente di percorso.

main.js

import React from 'react'

import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import App from './App.jsx'
import todoApp from './reducers/reducers'

let store = createStore(todoApp)
let rootElement = document.getElementById('app')

render(
   <Provider store = {store}>
      <App />
   </Provider>,
	
   rootElement
)

Passaggio 6: componente radice

Il Appcomponent è il componente radice dell'app. Solo il componente root dovrebbe essere a conoscenza di un redux. La parte importante da notare è il fileconnect funzione che viene utilizzata per connettere il nostro componente root App al store.

Questa funzione richiede selectfunziona come un argomento. La funzione Select prende lo stato dal negozio e restituisce gli oggetti di scena (visibleTodos) che possiamo utilizzare nei nostri componenti.

App.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'

import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'

class App extends Component {
   render() {
      const { dispatch, visibleTodos } = this.props
      
      return (
         <div>
            <AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
            <TodoList todos = {visibleTodos}/>
         </div>
      )
   }
}
function select(state) {
   return {
      visibleTodos: state.todos
   }
}
export default connect(select)(App);

Passaggio 7 - Altri componenti

Questi componenti non dovrebbero essere consapevoli del redux.

componenti / AddTodo.js

import React, { Component, PropTypes } from 'react'

export default class AddTodo extends Component {
   render() {
      return (
         <div>
            <input type = 'text' ref = 'input' />
				
            <button onClick = {(e) => this.handleClick(e)}>
               Add
            </button>
         </div>
      )
   }
   handleClick(e) {
      const node = this.refs.input
      const text = node.value.trim()
      this.props.onAddClick(text)
      node.value = ''
   }
}

componenti / Todo.js

import React, { Component, PropTypes } from 'react'

export default class Todo extends Component {
   render() {
      return (
         <li>
            {this.props.text}
         </li>
      )
   }
}

componenti / TodoList.js

import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'

export default class TodoList extends Component {
   render() {
      return (
         <ul>
            {this.props.todos.map(todo =>
               <Todo
                  key = {todo.id}
                  {...todo}
               />
            )}
         </ul>
      )
   }
}

Quando avvieremo l'app, saremo in grado di aggiungere elementi alla nostra lista.

In questo capitolo impareremo come animare gli elementi usando React.

Passaggio 1: installa React CSS Transitions Group

Questo è il componente aggiuntivo React utilizzato per creare transizioni e animazioni CSS di base. Lo installeremo dacommand prompt finestra -

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

Passaggio 2: aggiungi un file CSS

Creiamo un nuovo file style.css.

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > css/style.css

Per poterlo utilizzare nell'app, dobbiamo collegarlo all'elemento head in index.html.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <link rel = "stylesheet" type = "text/css" href = "./style.css">
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Passaggio 3: visualizzare l'animazione

Creeremo un componente React di base. IlReactCSSTransitionGroupelemento verrà utilizzato come wrapper del componente che vogliamo animare. UseràtransitionAppear e transitionAppearTimeout, mentre transitionEnter e transitionLeave sono false.

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   render() {
      return (
         <div>
            <ReactCSSTransitionGroup transitionName = "example"
               transitionAppear = {true} transitionAppearTimeout = {500}
               transitionEnter = {false} transitionLeave = {false}>
					
               <h1>My Element...</h1>
            </ReactCSSTransitionGroup>
         </div>      
      );
   }
}
export default App;

main.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

L'animazione CSS è molto semplice.

css / style.css

.example-appear {
   opacity: 0.04;
}
.example-appear.example-appear-active {
   opacity: 2;
   transition: opacity 50s ease-in;
}

Una volta avviata l'app, l'elemento verrà visualizzato in dissolvenza.

Passaggio 4: entrare e uscire dalle animazioni

Le animazioni in entrata e in uscita possono essere utilizzate quando si desidera aggiungere o rimuovere elementi dall'elenco.

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
      }
      this.handleAdd = this.handleAdd.bind(this);
   };
   handleAdd() {
      var newItems = this.state.items.concat([prompt('Create New Item')]);
      this.setState({items: newItems});
   }
   handleRemove(i) {
      var newItems = this.state.items.slice();
      newItems.splice(i, 1);
      this.setState({items: newItems});
   }
   render() {
      var items = this.state.items.map(function(item, i) {
         return (
            <div key = {item} onClick = {this.handleRemove.bind(this, i)}>
               {item}
            </div>
         );
      }.bind(this));
      
      return (
         <div>      
            <button onClick = {this.handleAdd}>Add Item</button>
				
            <ReactCSSTransitionGroup transitionName = "example" 
               transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
               {items}
            </ReactCSSTransitionGroup>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

css / style.css

.example-enter {
   opacity: 0.04;
}
.example-enter.example-enter-active {
   opacity: 5;
   transition: opacity 50s ease-in;
}
.example-leave {
   opacity: 1;
}
.example-leave.example-leave-active {
   opacity: 0.04;
   transition: opacity 50s ease-in;
}

Quando avviamo l'app e facciamo clic su Add Item pulsante, verrà visualizzata la richiesta.

Una volta inserito il nome e premuto OK, il nuovo elemento verrà visualizzato in dissolvenza.

Ora possiamo eliminare alcuni degli elementi (Item 3...) facendo clic su di esso. Questo elemento scomparirà dall'elenco.

I componenti di ordine superiore sono funzioni JavaScript utilizzate per aggiungere funzionalità aggiuntive al componente esistente. Queste funzioni sonopure, il che significa che stanno ricevendo dati e restituendo valori in base a tali dati. Se i dati cambiano, le funzioni di ordine superiore vengono rieseguite con input di dati diversi. Se vogliamo aggiornare il nostro componente di ritorno, non dobbiamo cambiare l'HOC. Tutto quello che dobbiamo fare è modificare i dati che la nostra funzione sta utilizzando.

Higher Order Component(HOC) avvolge il componente "normale" e fornisce input di dati aggiuntivi. In realtà è una funzione che accetta un componente e restituisce un altro componente che avvolge quello originale.

Diamo un'occhiata a un semplice esempio per capire facilmente come funziona questo concetto. IlMyHOC è una funzione di ordine superiore che viene utilizzata solo per passare i dati a MyComponent. Questa funzione richiedeMyComponent, lo valorizza con newData e restituisce il componente avanzato che verrà renderizzato sullo schermo.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Se eseguiamo l'app, vedremo che i dati vengono passati a MyComponent.

Note- I componenti di ordine superiore possono essere utilizzati per diverse funzionalità. Queste funzioni pure sono l'essenza della programmazione funzionale. Una volta che ci sarai abituato, noterai come la tua app stia diventando più facile da mantenere o aggiornare.

In questo capitolo, elencheremo le migliori pratiche, i metodi e le tecniche di React che ci aiuteranno a rimanere coerenti durante lo sviluppo dell'app.

  • State- Lo stato dovrebbe essere evitato il più possibile. È una buona pratica centralizzare lo stato e trasmetterlo all'albero dei componenti come oggetti di scena. Ogni volta che abbiamo un gruppo di componenti che richiedono gli stessi dati, dovremmo impostare un elemento contenitore attorno a loro che manterrà lo stato. Il pattern di flusso è un bel modo di gestire lo stato nelle app React.

  • PropTypes- I PropTypes dovrebbero essere sempre definiti. Questo aiuterà a tenere traccia di tutti gli oggetti di scena nell'app e sarà anche utile per qualsiasi sviluppatore che lavora allo stesso progetto.

  • Render- La maggior parte della logica dell'app deve essere spostata all'interno del metodo di rendering. Dovremmo cercare di ridurre al minimo la logica nei metodi del ciclo di vita dei componenti e spostare tale logica nel metodo di rendering. Meno stato e oggetti di scena utilizziamo, più pulito sarà il codice. Dovremmo sempre rendere lo stato il più semplice possibile. Se dobbiamo calcolare qualcosa dallo stato o dagli oggetti di scena, possiamo farlo all'interno del metodo render.

  • Composition- Il team React suggerisce di utilizzare un unico principio di responsabilità. Ciò significa che un componente dovrebbe essere responsabile di una sola funzionalità. Se alcuni dei componenti hanno più di una funzionalità, dovremmo eseguire il refactoring e creare un nuovo componente per ogni funzionalità.

  • Higher Order Components (HOC)- Le versioni precedenti di React offrivano mixin per la gestione delle funzionalità riutilizzabili. Poiché i mixin sono ora deprecati, una delle soluzioni è utilizzare HOC.