Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Creare una App di Blogging usando React, Parte 1: Sign-In Utenti

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 2: User Sign-Up

Italian (Italiano) translation by Mariano Serafini (you can also view the original English article)

In questa serie di tutorial, vedrai come iniziare a creare un'applicazione per il blog utilizzando React. Durante il corso di questo tutorial, ti concentrerai su come utilizzare React per sviluppare l'interfaccia utente dell'applicazione. Utilizzerai Node.js per il lato server dell'applicazione.

In questo tutorial, vedrai come implementare l'interfaccia utente e il back end per la registrazione degli utenti e il login utente.

Iniziamo

Crea una cartella del progetto chiamata ReactNodeApp. Naviga fino alla cartella del progetto e avviail progetto node.

Compila i dettagli necessari e dovrebbe essere stato creato il file package.json. Ecco come appare:

Utilizzerai il framework express per servire la tua applicazione. Installa express utilizzando il seguente comando:

Utilizzando il framework express, creiamo la nostra applicazione ascoltando su un indirizzo di porta. All'interno della cartella del progetto, creiamo un file chiamato app.js. Richiedi il modulo express all'interno dell'app.js e crea un'app. Imposta il percorso statico dell'applicazione in cui è possibile trovare i file statici. Ecco come appare:

Assegna un numero di porta per far ascoltare l'applicazione su una porta. Aggiungi il seguente codice per creare un server:

All'interno della cartella del progetto, crea una cartella chiamata html. All'interno della cartella html, crea un file chiamato index.html. Aggiungi il seguente codice a index.html:

Salva le modifiche di cui sopra e avvia il server utilizzando il seguente comando:

Punta il tuo browser su http://localhost:7777/index.html e dovresti essere in grado di visualizzare la pagina index.html.

Creazione della vista di accesso

Utilizzerai bootstrap per creare l'interfaccia utente. Scarica e includi bootstrap nella pagina index.html.

Aggiungi le librerie React richieste nella pagina index.html.

Stai creando la vista usando JSX. Se non hai familiarità con JSX, ti consiglio di leggere un tutorial introduttivo su React e JSX.

Per trasformare il codice JSX in JavaScript, avrai bisogno di babel, un compilatore di JavaScript. Includi il babel nella pagina index.html.

Crea un file chiamato main.jsx all'interno della cartella html. Questo file conterrà i componenti di React UI.

Creiamo un nuovo componente React chiamato Signin all'interno del file main.jsx.

Aggiungi un metodo render all'interno del componente Signin che visualizzerà l'interfaccia utente per il nostro componente Signin.

Nel codice qui sopra, è tutto l'HTML con una sola differenza. L'attributo class viene modificato in className quando utilizzato in JSX.

Il componente Signin, quando visualizzato, visualizzerà il codice HTML all'interno del metodo render.

Aggiungi un contenitore div nella pagina index.html in cui verrà visualizzato il ​​componente Signin.

Renderizza il componente Signin all'interno del div .container in index.html.

Salva le modifiche di cui sopra e riavvia il server node. Punta il tuo browser a http://localhost:7777/index.html e dovresti essere in grado di visualizzare la schermata di accesso.

React Blog App SignIn Screen

Implementazione dell'accesso utente

Per implementare il processo di accesso, è necessario gestire l'evento onChange del testo input e tenere i valori della casella di testo in una variabile di stato. Quando l'utente fa clic sul pulsante, si utilizzeranno le variabili di stato per leggere i valori di casella di testo dell'indirizzo e-mail e della password. Quindi, aggiungiamo l'evento onChange alle caselle di testo:

Definisci gli eventi onChange nel componente Signin:

Collega gli eventi definiti sopra e le variabili di stato nel metodo del costruttore di componenti:

Definisci un metodo onClick che verrà richiamato sul clic del pulsante.

Aggiungere l'evento OnClick al pulsante SignIn.

Salva le modifiche di cui sopra e riavvia il server node. Punta il tuo browser su http://localhost:7777/index.html. Inserisci l'indirizzo e-mail e la password e fai clic sul pulsante Accedi, e dovresti essere in grado di visualizzare l'e-mail e la password.

Invio di dati da React al servizio Node

Una volta che hai i dati dal lato client, devi inviare tali dati al metodo del server Node.js per convalidare l'accesso utente. Per inviare i dati, utilizzerai un altro script chiamato axiosAxios è un client HTTP basato su promise per il browser e Node.js. Includi axios nella pagina index.html.

All'interno del metodo signin nel file main.jsx, aggiungi la seguente riga di codice per inviare una richiesta post.

Il codice fa una richiesta post al metodo /signin con i parametri mostrati. Una volta che la richiesta è riuscita, la promise viene risolta nel callback then. In caso di errore, la risposta viene registrata nel callback catch.

Creiamo un metodo signin sul lato Node.js per convalidare il processo di accesso utente. Nel file app.js, crea un metodo chiamato signin.

Utilizzerai il modulo body-parser per analizzare la richiesta inviata dal lato client React. Installa il modulo body-parser nel progetto.

Richiedere il modulo body-parser nel file app.js.

Aggiungi la seguente riga di codice per abilitare l'analisi di JSON.

All'interno del metodo signin, è possibile analizzare la richiesta come mostrato:

Modificare il metodo signin come mostrato per convalidare l'accesso utente.

Per il momento, le credenziali dell'utente sono state inserite nel codice. Puoi sostituirlo con il servizio appropriato secondo le tue preferenze.

Una volta che i parametri sono stati analizzati, vengono convalidati contro le credenziali previste. Se è vero, viene passato un messaggio di successo, altrimenti viene restituito un messaggio di errore.

Salva le modifiche di cui sopra e riavvia il server node. Inserisci un nome utente e una password validi e fai clic sul metodo sign-in. Basandosi sulle credenziali, restituirà un messaggio di successo o di errore che verrà visualizzato nella console del browser.

Creazione della visualizzazione di registrazione utente

Il processo di creazione della visualizzazione di registrazione utente è abbastanza simile a come si è implementato il modulo di accesso utente. Iniziamo creando il componente Signup nel file main.jsx.

Poiché sign-up e sign-in sono due componenti diversi, è necessario collegare i due componenti. Per il routing, userai il react-router. Se non conosci il routing in React, ti consiglio di leggere il tutorial di routing React.

Includi il react-router nella pagina index.html.

Definisci le variabili react-router richieste per creare i collegamenti nel file main.jsx.

Definisci i diversi percorsi dell'applicazione e il percorso predefinito come mostrato di seguito:

Includi un collegamento al componente accesso nel componente iscrizione e viceversa. Ecco il metodo render del componente Signin con il collegamento a sign-up:

Salva le modifiche di cui sopra e riavvia il server node. Punta il tuo browser a http://localhost:7777/index.html e dovresti essere in grado di visualizzare la schermata di accesso con il link a sign-up. Fai clic sul link di iscrizione e dovresti essere spostato nella schermata di iscrizione.

Sign In Screen with Sign Up Link

L'implementazione dell'iscrizione utente è simile a come è stato implementato l'accesso dell'utente. Lascerò l'implementazione di iscrizione utente come esercizio. Pubblicherò l'implementazione della registrazione utente nella parte successiva di questa serie di tutorial.

Ricapitolando

In questa parte della serie di tutorial è stata creata e implementata la schermata di Accesso. Hai anche visto come utilizzare react-router per implementare il routing in React. Nella prossima parte di questo tutorial vedrai come implementare la registrazione e la pagina Aggiungi Post.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Facci sapere i tuoi pensieri e suggerimenti nei commenti qui sotto.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.