Share
Dans cette série de didacticiels, vous apprendrez à créer une application de blogging à l'aide de React. Tout au long de cette série de didacticiels, vous allez vous expliquer comment utiliser React pour développer l'interface utilisateur de l'application. Vous allez utiliser Node.js pour le côté serveur de l'application.
Dans ce tutoriel, vous verrez comment mettre en œuvre l'interface utilisateur et le back-end pour l'enregistrement et la connexion de l'utilisateur..
Créez un répertoire de projet appelé ReactNodeApp. Accédez au répertoire du projet et lancez le projet de noeud..
npm init
Remplissez les informations requises et vous devriez avoir le package.json fichier créé. Voici à quoi ça ressemble:
"name": "react-node-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": " echo \ "Erreur: pas de test spécifié \" && exit 1 "," author ":" roy "," license ":" MIT "
Vous utiliserez le cadre express pour servir votre application. Installez Express en utilisant la commande suivante:
npm install express --save
En utilisant le framework express, créons notre application en écoutant une adresse de port. Dans le répertoire du projet, créez un fichier appelé app.js. Exiger le module express à l'intérieur du app.js et créer une application. Définissez le chemin statique de l'application où trouver les fichiers statiques. Voici à quoi ça ressemble:
Accentsconagua
var express = require ("express"); var path = require ("chemin"); var app = express (); app.use (express.static (path.join (__ nom de répertoire, "/ html")));Attribuez un numéro de port à l'application pour l'écouter sur un port. Ajoutez le code suivant pour créer un serveur:
app.listen (7777, function () console.log ("Commence à écouter sur le port", 7777);)Dans le répertoire du projet, créez un dossier appelé html. À l'intérieur de html dossier, créer un fichier appelé index.html. Ajoutez le code suivant à index.html:
Bonjour le monde
Enregistrez les modifications ci-dessus et démarrez le serveur à l'aide de la commande suivante:
noeud app.js
Pointez votre navigateur sur http: // localhost: 7777 / index.html et vous devriez pouvoir voir le index.html page.
Vous utiliserez bootstrap pour créer l'interface utilisateur. Téléchargez et incluez bootstrap dans le index.html page.
Ajoutez les bibliothèques React requises dans le répertoire index.html page.
Vous allez créer la vue en utilisant JSX. Si vous n'êtes pas familier avec JSX, je vous recommanderais de lire un tutoriel d'introduction à React et JSX.
Pour transformer le code JSX en JavaScript, vous aurez besoin de babel, un compilateur JavaScript. Inclure babel dans le index.html page.
Créez un fichier appelé main.jsx à l'intérieur de html dossier. Ce fichier contiendra les composants de l'interface utilisateur de React.
Créons un nouveau composant React appelé Se connecter à l'intérieur de main.jsx fichier.
la classe de connexion étend React.Component
Ajouter une méthode de rendu à l'intérieur du Se connecter composant qui affichera l'interface utilisateur pour notre Se connecter composant.
la classe de connexion étend React.Component render () return ()
Dans le code ci-dessus, tout est HTML avec une seule différence. le classe attribut a été modifié pour nom du cours quand utilisé dans JSX.
le Se connecter Le composant, lorsqu'il est affiché, affichera le code HTML à l'intérieur du rendre méthode.
Ajouter un conteneur div dans le index.html page où vous rendrez le Se connecter composant.
Rendre le Se connecter composant à l'intérieur du .récipient div dans le index.html.
ReactDOM.render ( < Signin / > , document.getElementById ('app'));Enregistrez les modifications ci-dessus et redémarrez le serveur de noeud. Pointez votre navigateur sur http: // localhost: 7777 / index.html et vous devriez pouvoir afficher l'écran de connexion..
Pour mettre en œuvre le processus de connexion, vous devez gérer le texte saisi. sur le changement event et conservez les valeurs de la zone de texte dans une variable d'état. Lorsque l'utilisateur clique sur le bouton, vous utiliserez les variables d'état pour lire les valeurs de la zone de texte d'adresse électronique et du mot de passe. Alors, ajoutons le sur le changement événement aux zones de texte:
Définir les sur le changement événements dans le Se connecter composant:
handleEmailChange (e) this.setState (email: e.target.value) handlePasswordChange (e) this.setState (mot de passe: e.target.value)
Liez les événements définis ci-dessus et les variables d'état dans la méthode du constructeur de composant:
constructeur (accessoires) super (accessoires); this.handleEmailChange = this.handleEmailChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this); this.state = email: ", mot de passe:";
Définir un sur clic méthode que vous invoquerez sur un clic de bouton.
signIn () alert ('L'adresse email est' + this.state.email + 'Le mot de passe est' + this.state.password); Ajouter le Sur clic événement au Se connecter bouton.
Enregistrez les modifications ci-dessus et redémarrez le serveur de noeud. Pointez votre navigateur sur http: // localhost: 7777 / index.html. Entrez l'adresse e-mail et le mot de passe, puis cliquez sur le bouton Se connecter bouton, et vous devriez pouvoir voir l'email et le mot de passe pop-up.
Une fois que vous avez les données côté client, vous devez les publier sur la méthode serveur Node.js pour valider la connexion de l'utilisateur. Pour publier les données, vous utiliserez un autre script appelé axios. Axios est un client HTTP basé sur des promesses pour le navigateur et Node.js. Comprendre axios dans le index.html page.
À l'intérieur de se connecter méthode dans le main.jsx fichier, ajoutez la ligne de code suivante pour faire une demande de publication.
axios.post ('/ signin', email: this.state.email, mot de passe: this.state.password) .then (fonction (réponse) console.log (réponse);) .catch (fonction (erreur ) console.log (error););Le code fait une demande de publication à la /se connecter méthode avec les paramètres indiqués. Une fois que la demande est réussie, la promesse est résolue dans le puis rappeler. En cas d'erreur, la réponse est enregistrée dans le capture rappeler.
Créons un se connecter méthode du côté Node.js pour valider le processus de connexion de l'utilisateur. dans le app.js fichier, créer une méthode appelée se connecter.
app.post ('/ signin', fonction (req, res) )Vous allez utiliser le analyseur de corps module permettant d’analyser la demande postée du côté du client React. Installez le analyseur de corps module dans le projet.
npm install body-parser --save
Exiger le analyseur de corps module dans le app.js fichier.
var bodyParser = require ("analyseur de corps");Ajoutez la ligne de code suivante pour activer JSON analyse.
app.use (bodyParser.json ());
À l'intérieur de se connecter méthode, vous pouvez analyser la requête comme indiqué:
var nom_utilisateur = req.body.email; var password = req.body.password;
Modifier le se connecter méthode comme indiqué pour valider la connexion de l'utilisateur.
app.post ('/ signin', fonction (req, res) var nom_utilisateur = req.body.email; mot de passe var = req.body.password; if (nom_utilisateur == 'admin' && mot_passe == 'admin') res.send ('success'); else res.send ('échec'); Pour le moment, les informations d'identification de l'utilisateur ont été codées en dur. Vous pouvez le remplacer par le service approprié selon vos préférences..
Une fois les paramètres analysés, ils sont validés par rapport aux informations d'identification attendues. Si la valeur est true, un message de réussite est transmis, sinon un message d'échec est renvoyé..
Enregistrez les modifications ci-dessus et redémarrez le serveur Node.js. Entrez un nom d'utilisateur et un mot de passe valides, puis cliquez sur la méthode de connexion. Sur la base des informations d'identification, il renverra un message de succès ou d'échec, qui sera affiché dans la console du navigateur..
Le processus de création de la vue d'enregistrement d'utilisateur est assez similaire à la manière dont vous avez implémenté le module de connexion d'utilisateur. Commençons par créer le S'inscrire composant dans le main.jsx fichier.
La classe Signup étend React.Component render () return ()
Étant donné que l'inscription et la connexion sont deux composants différents, vous devez les lier. Pour le routage, vous utiliserez: réagir-routeur. Si vous êtes nouveau sur le routage dans React, je vous recommande de lire le didacticiel de routage de React..
Comprendre réagir-routeur dans le index.html page.
Définir le requis réagir-routeur variables pour créer des liens dans le main.jsx fichier.
var Router = window.ReactRouter.Router; var Route = window.ReactRouter.Route; var hashHistory = window.ReactRouter.hashHistory; var Link = window.ReactRouter.Link;
Définissez les différents itinéraires d'application et l'itinéraire par défaut comme indiqué ci-dessous:
ReactDOM.render (, document.getElementById ('app'));
Incluez un lien vers le composant de connexion dans le composant de connexion et inversement. Voici la Se connecter Méthode de rendu du composant avec le lien d'inscription:
render () return ()'S'inscrire'
Enregistrez les modifications ci-dessus et redémarrez le serveur Node.js. Pointez votre navigateur sur http: // localhost: 7777 / index.html et vous devriez pouvoir voir l'écran de connexion avec le lien d'inscription. Cliquez sur le lien d'inscription et vous devriez accéder à l'écran d'inscription..
L'implémentation de la connexion utilisateur est similaire à celle de la procédure de connexion de l'utilisateur. Je laisserai l'implémentation de la connexion de l'utilisateur comme exercice. J'afficherai l'implémentation d'inscription d'utilisateur dans la prochaine partie de cette série de tutoriels..
Dans cette partie de la série de didacticiels, vous avez créé et implémenté l’écran de connexion. Vous avez également vu comment utiliser réagir-routeur implémenter le routage dans React. Dans la suite de ce didacticiel, vous apprendrez à implémenter la partie Inscription et la page Ajouter un message..
Le code source de ce tutoriel est disponible sur GitHub.
Faites-nous savoir vos pensées et suggestions dans les commentaires ci-dessous.
