Se è la prima volta che leggi un articolo di questa guida ti ricordo che dovresti iniziare a leggere da Come creare una Web App da zero?.
Le props
Le props sono tutti quegli oggetti, funzioni, stringhe, numeri, array, ecc. che vogliamo inviare ad un componente React.
Le props devono essere read-only. Ciò sta a significare che un componente non deve mai modificare le props che riceve in input.
Più precisamente il componente deve essere puro.
Creazione del CustomInput
Per farti vedere cosa sono realmente le props ho pensato che dovremo creare un componente insieme che ha questo scopo:
- Mostrare a video un input
- Mostrare a video una label se richiesta
- Dovrà essere totalmente ignaro del tipo di input che renderizzerà, così come dello stile che avrà
- Avere la specifica funzione di non dover scrivere ogni volta label e input insieme
- Fare in modo che il comportamento di base di un input con e senza label sia uguale in tutta l’applicazione
Vai nella cartella common e crea dentro la cartella input. Dunque all’interno di input crea il file customInput.js che sarà composto dal seguente codice:
import React from "react";
import PropTypes from 'prop-types';
export default class CustomInput extends React.Component{
constructor(props){
super(props);
}
getLabelAddon(){
if(this.props.label.length > 0){
return(
<div className = "input-group-addon">
{this.props.label}
</div>
);
}else{
return (
<div></div>
);
}
}
render(){
var labelAddon = this.getLabelAddon();
return (
<div className="input-group">
{labelAddon}
<input
type = {this.props.type}
value = {this.props.value}
placeholder = {this.props.placeholder}
className = "form-control"
style = {this.props.style}
onChange = {this.props.onChange.bind(this)}/>
</div>
);
}
}
CustomInput.propTypes = {
type: PropTypes.string,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]).isRequired,
placeholder: PropTypes.string,
style: PropTypes.object,
onChange: PropTypes.func.isRequired,
label: PropTypes.string
}
CustomInput.defaultProps = {
type: "text",
label:""
}
Cosa abbiamo scritto?
In questo componente importiamo React come al solito e le PropTypes. Le PropsTypes ci servono per definire poi i tipi delle props che riceve il componente.
Dunque abbiamo dichiarato la classe CustomInput che ha un costruttore ed è senza state.
Abbiamo una funzione, getLabelAddon, che utilizza il valore di this.props.label per determinare se dovrà inserire una label o meno vicino all’input che vogliamo renderizzare.
Il metodo render chiama getLabelAddon e manda a schermo label ed input. L’input ha la classe standard form-control ed utilizza le props per dar valore alle altre proprietà.
Infine definiamo al di fuori della classe quali sono i tipi delle props utilizzate e poi quali sono i valori di default.
PropTypes e DefaultProps
I PropTypes sono i tipi di props che può ricevere un componente. Ricordarsi di inserire in fondo ad un componente la definizione delle props ci aiuterà a capire velocemente quali sono le props che utilizza il componente.
Per ogni props definiamo il suo tipo che può essere:
- Stringa (string)
- Funzione (func)
- Qualsiasi (any)
- Numero (number)
- Oggetto (object)
- Booleano (bool)
- Element (element)
- Simbolo (symbol)
- Più tipi possibili (OneOfType)
- ecc.
Per ognuno possiamo anche appendere la dicitura isRequired così da far capire subito a React che una props è obbligatoria per il funzionamento del componente. Nel caso in cui manchi una props richiesta React manderà in console un warning.
Le DefaultProps ci servono invece a definire il valore che ha una prop di default.
In CustomInput stiamo definendo la prop value come obbligatoria e può essere sia di tipo stringa che numero (OneOfType è una funzione che prende in ingresso un array di PropTypes).
Stiamo definendo anche che se non viene specificato diversamente, quindi di default, il valore del type è “text”. Quindi senza specificare nulla renderizzeremo un input di testo.
Login
A questo punto possiamo modificare il componente Login per fargli utilizzare CustomInput.
Apri il file login.js ed importa in alto CustomInput:
import CustomInput from "../../common/input/customInput";
All’interno del tag <form> ritornato dal render inserisci:
<div className = "form-group">
<CustomInput
type="text"
placeholder="username"
value = {this.state.username || ''}
onChange = {this.changeText.bind(this, "username")}
label="Username"/>
</div>
<div className = "form-group">
<CustomInput
type="password"
placeholder="password"
value = {this.state.password}
onChange = {this.changeText.bind(this, "password")}
label="Password"/>
</div>
<button
type="submit"
className = "btn btn-primary pull-right"
onClick={this.login.bind(this)}>
Invio
</button>
{successMessage}
{errorMessage}
L’unica cosa che è cambiata è che al posto di <input type=”… /> adesso trovi <CustomInput type=”.. /> che oltre a quanto già utilizzava prima l’input definisce anche la label. Al contrario non dobbiamo più specificare la classe dell’input che è già specificata nel componente CustomInput.
Label, type, value, ecc. vengono utilizzate da Login per passare dei valori in forma di props al componente CustomInput.
Conclusioni
Le props, così come lo state, rappresentano un concetto importantissimo di ReactJS. L’utilizzo delle props ci permette di creare componenti senza stato come CustomInput che ci permettono un riutilizzo del codice ai massimi livelli.
Non è escluso che ci siano componenti che utilizzino un proprio state ed anche le props, anche se affronteremo questo argomento in un altro articolo.
Se vuoi vedere il codice è disponibile a questo indirizzo. L’ho caricato su DropBox così da poter essere accessibile da chiunque.
Se vuoi continuare a seguire questa guida ti ricordo di non perdere di vista l’articolo Come creare una web app da zero. Inoltre se ti iscrivi alla newsletter non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .
Per dubbi o domande scrivimi nei commenti ? .
Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).
