Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Ott 02
le props

ReactJS: le props

  • 02/10/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • props, react, reactjs, single web application
In questo articolo ti voglio far vedere come funzionano le props ReactJS. Costruiremo un componente senza stato che servirà solo a gestire la visualizzazione di un campo input con label.

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:

Development Category (English)728x90

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.

Deep Learning Specialization on Coursera

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!).

Prossimo articolo della guida: ReactJS: pulizia del codice

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

    Fammi sapere cosa ne pensi :) Annulla risposta

    Impara ReactJS imparare react
    I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
    Newsletter

    Seguimi su Facebook :)

    Facebook Pagelike Widget
    Impara React Native imparare react native
    10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
    Impara a Creare un Tema Wordpress imparare creare tema wordpress
    Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
    UX: Perché la User Experience è Importante UX importante e cos'è
    Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
    Libri per Imparare JavaScript Imparare JavaScript libri

    Articoli recenti

    • I principali engine utilizzati per lo sviluppo di videogiochi
    • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
    • 8 consigli per migliorare la tua SEO Locale

    Categorie

    • CSS
    • Interviste
    • Java
    • Lavoro
    • Normative
    • Personale
    • Programmazione
    • Strategia & Marketing
    • Tech
    • Web Design
    • Wordpress
    Paolo Dell'Aguzzo
    Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
    P. IVA: IT02758450429
    Mail: info@paolodellaguzzo.com
    Via Litoranea, 284/C - Marotta (PU)
    Privacy Policy
    Cookie Policy
    In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
    Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
    Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku