ReactJS - Componenti

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 essere in grado di renderlo 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.