In ogni caso ti ricordo che questo articolo fa parte di una guida più lunga ed approfondita che ha lo scopo di insegnarti a creare una web app con ReactJS.

Chiamare Endpoint con ReactJS

Siamo arrivati con la nostra guida ad avere una home page ed una pagina di login. Adesso quello che vogliamo fare è far finta di aver costruito tutto il backend e di voler fare il login con un utente che conosciamo e che è di nostra proprietà.

Per farlo normalmente si contatta una rest api e di preciso quello che vogliamo fare è capire come chiamare endpoint con ReactJS.

Dobbiamo eseguire alcuni passi fondamentali:

1. Installare la dipendenza ad axios
2. Trovare una API Rest online che ci possa aiutare
3. Creare un servizio per il login
4. Effettuare il login mostrando all’utente un messaggio di successo o errore

Axios

La libreria che utilizziamo per fare le chiamate, di qualsiasi tipo, è axios. Attraverso questa libreria possiamo fare delle comuni XMLHttpRequest e più in generale possiamo:

• Performare chiamate GET, POST, PUT, PATCH, DELETE
• Utilizzare le promise
• Impostare gli header a nostro piacimento
• Tanto altro, ma ti consiglio di guardare direttamente su GitHub

Installiamo axios da terminale:

1. Posizionati con il terminale all’interno della cartella del progetto
2. Esegui il comando

   npm install --save axios

Troviamo la Fake Rest API

Ci serve una Rest API che restituisca dati finti e che possa essere utilizzata come un gioco. Questo perché non è l’obiettivo di questa guida quello di insegnarti a creare degli endpoint bensì vogliamo chiamare degli endpoint.

Dunque cercando un po’ in rete ho scelto questa soluzione: https://reqres.in/ .

L’ho scelta perché, se guardi bene, ci permette di fare il login di un utente e di darci in cambio un token se tutto va a buon fine, oppure un errore contenente un messaggio se qualcosa va storto (per esempio se manca lo username o la password).

LoginService

Adesso dobbiamo creare un servizio per il login.

Entra nella cartella login e crea il file loginService.js. All’interno di questo file inserisci questo codice:

import axios from "axios";
export default class LoginService{
   login(email, password, onSuccess, onError){
      axios.post("https://reqres.in/api/login", {email:email, password:password}).then(function(result){
         console.log("Login effettuato con successo, token: ",result.data);
         onSuccess(result.data);
      }, function(error){
         console.error("Errore durante il login: ", error);
         onError(error.response.data);
      });
  }
}

Quello che facciamo è in ordine:

1. Importare axios
2. Creare la classe LoginService
3. Creare il metodo login che si aspetta in ingresso email, password e 2 callback. Una callback è una funzione che viene passata ad un metodo/funzione per essere richiamata in un determinato momento
4. Eseguiamo la chiamata axios.post che prende in ingresso 2 parametri: l’url da chiamare e l’oggetto da inviare come body della request
5. Alla chiusura della parentesi tonda riguardante il post chiamiamo la funzione then. Tale funzione prende in ingresso 2 argomenti che sono la funzione riguardante il successo della chiamata alle rest api e la funzione riguardante l’ errore
6. La funzione che elabora il successo della chiamata riceve in ingresso un parametro result
7. Mandiamo a console il risultato della richiesta alla rest api (si trova in result.data)
8. Dunque chiamiamo la funzione di onSuccess che ci è stata passata da chi utilizza il servizio (saremo noi dal componente Login!) passandole a sua volta il risultato della chiamata alla rest api
9. Nella funzione di errore invece scriviamo a console l’errore
10. Dunque chiamiamo la funzione di onError passando il contenuto dell’errore

Login

A questo punto dobbiamo utilizzare questo LoginService all’interno del componente Login (quindi file login.js).

Apri il file login.js ed importa in alto il nuovo servizio:

import LoginService from "./loginService";

Dunque va nel costruttore e scrivi dopo la dichiarazione dello state:

this.loginService = new LoginService();

Adesso trasforma il metodo login facendolo diventare così:

login(event){
   this.loginService.login(this.state.username, 
                           this.state.password, 
                           this.loginSuccess.bind(this), 
                           this.loginError.bind(this)
                           );
   console.log("Login con username: ", this.state.username);
   console.log("Login con password: ", this.state.password);
}

In questo metodo stiamo utilizzando il LoginService chiamando il metodo login e passando lo username contenuto nello state, la password, la funzione di successo del login e quella di errore.

OnSuccess e OnError

A questo punto dobbiamo creare le due funzioni che gestiscono il comportamento del componente Login al successo della chiamata ed in vista di un errore.

Sopra al metodo di login crea le 2 funzioni loginSuccess e loginError:

loginSuccess(dataResult){
   this.setState({
                  showSuccess:true, 
                  successMessage:"Complimenti per il login, il tuo token è: " + dataResult.token,
                  showError:false,
                  errorMessage:""});
}
loginError(errorData){
   this.setState({
                  showError:true, 
                  errorMessage:"Errore durante il login: " + errorData.error,
                  showSuccess:false,
                  successMessage:""});
}

Queste 2 funzioni non fanno altro che chiamare setState per impostare alcuni valori nello state del componente Login (abbiamo trattato questo argomento nell’ultimo articolo a questo indirizzo).

Nel caso della funzione relativa al successo del login impostiamo che va mostrato il messaggio di successo ed impostiamo il messaggio per far sapere all’utente che va tutto bene e che ha ricevuto un token (normalmente viene utilizzato internamente, ma questa è una guida per farti vedere e toccare con mano i dati che ricevi). Dopo di che impostiamo che il messaggio di errore non deve venir visualizzato.

Nel caso della funzione relativa all’errore del login impostiamo che va mostrato l’errore dando un congruo messaggio all’utente.

Lo state

Come vedrai ancora nel costruttore non abbiamo inserito queste nuove proprietà relative allo state. Vai quindi nel costruttore e modifica lo state in questo modo:

this.state = {
   usename: '',
   password: '',
   showSuccess:false,
   showError:false,
   errorMessage:"",
   successMessage:""
}

Di default showSuccess e showError valgono false ed i rispettivi messaggi sono vuoti.

Mostriamo il messaggio nello schermo

A questo punto entra nel metodo render ed aggiungi prima del return queste due righe di codice:

var successMessage = this.getSuccessMessage();

var errorMessage = this.getErrorMessage();

Dunque questi sono i messaggi che vorremo mostrare vicino al pulsante di Invio della form. Entra quindi nel return e, dopo il <button>, inserisci le due variabili. Ti faccio vedere un pezzo di codice comprensivo del <button>:

   <button type="submit" className = "btn btn-primary pull-right" onClick={this.login.bind(this)}>
      Invio
   </button>
   {successMessage}
   {errorMessage}
</form>

Ora devi scrivere però i metodi getSuccessMessage e getErrorMessage. Sopra al metodo render inserisci:

getSuccessMessage(){
   if(this.state.showSuccess){
      return (

         <div style={{color:"green"}}>
            {this.state.successMessage}
         </div>

      );
   }else{
     return (

         <div></div>

     );
   }
}
getErrorMessage(){
   if(this.state.showError){
       return (

         <div style={{color:"red"}}>
             {this.state.errorMessage}
         </div>

       );
   }else{
      return (

         <div></div>

      );
   }
}

Questi 2 metodi non fanno altro che controllare se showError/showSuccess è true. In caso di risposta positiva ritornano un <div> con colore del testo rosso/verde e con dentro il messaggio impostato precedentemente. In caso di risposta negativa ritornano un <div> vuoto.

Conclusioni

Complimenti per essere arrivato fin quì. Hai imparato a chiamare endpoint con ReactJS. Per aiutarti ho deciso di metterti a disposizione tutto il codice che ho scritto fino adesso a questo indirizzo. Ho scelto di condividerlo su Dropbox perché sono certo che tutti sappiano utilizzarlo 🙂 .

Una volta scaricato il progetto estrailo dallo zip, posizionati nella cartella da terminale ed esegui npm install. Finito npm install esegui npm start 🙂 .

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: le props