Componenti ReactJS (Components)

In questa sezione, impareremo come combinare i componenti per rendere l'applicazione più facile da mantenere. Questo metodo permette di aggiornare e modificare i componenti senza influenzare il resto della pagina.

Esempio di componente senza stato

Nel primo componente dell'esempio seguente è App. Questo componente è il proprietario di Header e Content. Stiamo creando Header e Content separatamente e aggiungendoli all'albero JSX del nostro componente App. Solo il componente App 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;

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 produrrà il seguente risultato.

Esempio di componente con stato

In questo esempio, imposteremo lo stato del componente proprietario (App). Header Il componente è aggiunto come nell'esempio precedente perché non richiede alcun stato. Creeremo gli elementi table e tbody invece di content Etichetta, tra questi elementi, inseriremo dinamicamente TableRow per ogni oggetto nell'array di dati.

Si può notare che la sintassi di funzione arrow di EcmaScript 2015 (=>) sembra molto più pulita rispetto alla vecchia sintassi JavaScript. Questo ci aiuta a scrivere meno righe di codice per creare elementi. È particolarmente utile quando dobbiamo creare elenchi che contengono 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'));

Nota: abbiamo utilizzato key = { i } all'interno della funzione map(). Questo aiuta React a aggiornare solo gli elementi necessari, piuttosto che ripresentare l'intera lista quando si verificano cambiamenti. Questo rappresenta una notevole mejora di prestazioni per un gran numero di elementi dinamici creati.