Nella lezione precedente abbiamo esplorato i comandi che il tool create-react-app mette a disposizione. Tra questi troviamo il comando che consente di creare il progetto ex novo di un'applicazione React, imbastendo la cartella relativa e memorizzando al suo interno i file che lo compongono.
In questa lezione parleremo nello specifico dei file che contengono i componenti React, ovvero i "mattoncini" che costituiscono l'interfaccia utente, e vedremo come modificare quelli predefiniti e aggiungerne di nuovi per migliorare ed estendere la struttura della nostra applicazione.
Il modulo App.js
La cartella src contiene tutti i file sorgenti dell'applicazione React. Tra di loro troviamo il file con nome App.js: esso contiene la dichiarazione della classe che rappresenta il componente principale dell'applicazione, e che descriveremo a breve.
Il componente principale verrà installato nella pagina definita nel file index.html, che fungerà da "guscio" fornendo il markup essenziale alla rappresentazione dei controlli che costituiscono l'interfaccia.
Qui di seguito è riportato il contenuto predefinito di esempio del file App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React!</h1>
</header>
<p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p>
</div>
);
}
}
export default App;La prima parte del file App.js è dedicata agli import. Tramite questa parola chiave, è possibile importare elementi esterni all'interno dello script corrente, quali tipi esportati da altri file JavaScript oppure risorse esterne come fogli di stile CSS o immagini.
L'importazione di risorse può apparire insolita allo sviluppatore tradizionale, tuttavia essa consente di dichiarare esplicitamente i file che costituiscono gli asset necessari al funzionamento del componente React: sarà il tool dedicato al bundling che si occuperà di analizzare le direttive di importazione e determinare come includere tali risorse nel pacchetto da distribuire per il deploy dell'applicazione.
La parte centrale del file App.js contiene invece la definizione della classe che rappresenta il componente vero e proprio. Tramite la parola chiave extends, la classe App deriva dal tipo Component (importato all'inizio del file) e implementa il metodo render(), di cui conosciamo già il ruolo: restituire gli elementi che il componente deve visualizzare attraverso l'uso della sintassi JSX.
Il metodo render() include già alcuni elementi iniziali contenenti testo di esempio: vedremo come modificare questa parte per includere altri componenti React che andremo ad aggiungere alla nostra applicazione.
Per concludere l'analisi del file App.js, la parte finale dello script utilizza la parola chiave export per rendere la variabile App visibile a moduli esterni, affinché essi possano importarla utilizzando invece la parola chiave import come già visto.
Creare un nuovo componente
Supponiamo di voler aggiungere ora un nuovo componente alla nostra applicazione. Come possiamo procedere?
Ciò che dovremo fare è innanzitutto creare un nuovo file JavaScript vuoto in cui andremo a scrivere il codice del componente, salvandolo all'interno della cartella src. Analogamente a quanto detto per il file App.js, dovremo procedere poi con l'importazione dei tipi necessari, dichiarare la classe del componente ed esportarla infine all'esterno del modulo affinché possa essere utilizzata nel resto dell'applicazione.
Ma procediamo per passi. Cominciamo con l'inserimento delle istruzioni che ci permettono di importare i tipi fondamentali di React:
import React, { Component } from 'react';In seguito, aggiungiamo la dichiarazione della classe che implementa il nuovo componente, che chiameremo AppDescription, e implementiamo il metodo render() aggiungendo un paragrafo al suo interno:
class AppDescription extends Component {
render() {
return (
Benvenuto nella mia prima applicazione React!
);
}
}Infine, esportiamo la classe AppDescription in modo che altri moduli possano importarla:
export default AppDescription;La struttura fondamentale del componente è ultimata ed esso può essere finalmente utilizzato nella nostra applicazione.
Visualizzare il nuovo componente
Per testare il suo funzionamento, possiamo importare la classe AppDescription nel file App.js e crearne una istanza dichiarandolo all'interno del metodo render() della classe App.
Torniamo quindi ad aprire il file App.js e inseriamo l'istruzione per l'importazione:
import AppDescription from './components/AppDescription.js';Aggiungiamo infine la dichiarazione del componente al metodo render(), usando la sintassi JSX come indicato qui di seguito:
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React!</h1>
</header>
<AppDescription />
</div>
);
}
}Lanciando l'applicazione con npm start o eseguendo un refresh della pagina, le modifiche apportate dovrebbero essere immediatamente visibili. Qualora sia andato storto qualcosa, è necessario rivedere la procedura o analizzare l'output del comando di run/build per accertarsi che non siano stati commessi errori.
Impostare le proprietà del componente
Il componente AppDescription appena creato mostra un testo prefissato all'interno della pagina. Tuttavia, sarebbe bello che il testo visualizzato fosse personalizzabile, magari consentendo di poterlo specificare dall'esterno. Vediamo come dotare il nostro componente di questa funzionalità.
Immaginiamo di introdurre una proprietà che chiameremo text. Apriamo quindi il file AppDescription.js e inseriamo nel metodo render() la visualizzazione della proprietà sfruttando la sintassi JSX, ad esempio così:
class AppDescription extends Component {
render() {
return (
{this.props.text}
);
}
}Ora dovremo passare un valore alla proprietà: per farlo, apriamo il file App.js e modifichiamo la dichiarazione del componente <AppDescription /> di conseguenza:
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React!</h1> </header>
<AppDescription text="Benvenuto nella mia prima applicazione React" />
</div>
);
}
}Attraverso l'introduzione di nuovi componenti e il passaggio di valori tramite proprietà, possiamo fattorizzare l'interfaccia utente suddividendola in parti sempre più piccole e configurabili, nonché riutilizzabili, anche in altri progetti.
Nelle prossime lezioni vedremo come estendere la nostra applicazione introducendo diverse viste e consentendo di navigare tra di esse attraverso un apposito menu.