Intégration d'un formulaire de contact avec EmailJS dans React

React est une bibliothèque frontale permettant de créer des interfaces utilisateur pour les applications frontales. De plus, React est utile lors de la création de vos applications car il utilise des composants réutilisables. La question qui a toujours existé pour les développeurs front-end est de savoir comment gérer les requêtes à partir de données de formulaire sans écrire ni avoir connaissance des fonctionnalités back-end. La création d'un serveur principal peut être fastidieuse et l'utilisation d'un service tiers est nécessaire pour cette tâche afin de faciliter l'écriture de la logique. Qu'est-ce qu'EmailJS ? EmailJS est un service qui permet d'envoyer des e-mails à l'aide d'applications côté client telles que React, Vue et Angular, sans serveur lors de la configuration et de l'installation. Dans ce didacticiel, vous apprendrez à connecter une bibliothèque frontale, React, à EmailJS pour recevoir des messages d'utilisateurs sur votre site Web ou vos applications mobiles sans le stress de créer à partir de zéro. Démo Prenez une longueur d'avance avec le code de démarrage dans ou créez une nouvelle application React. ce référentiel Conditions préalables Pour suivre le tutoriel, vous devez disposer des éléments suivants : installé sur votre machine locale Node >= 14.0.0 et npm >= 5.6 Comprendre les bases de React Un pour tester le service. compte EmailJS Commencer La première étape de la construction d'un nouveau projet consiste à disposer des outils de développement qui facilitent la construction. Dans votre terminal, exécutez cette commande : npx create-react-app react-contact-form-with-emailjs La commande ci-dessus crée le passe-partout à l'aide de la commande qui contient tous les fichiers et packages pour l'application React. create-react-app Installer EmailJS En tant que dépendance, exécutez la commande pour installer le SDK EmailJS dans l'application React. npm install @emailjs/browser Exécution du projet Pour exécuter l'application React, accédez au répertoire du projet et exécutez le serveur de développement fourni avec la fonction de rechargement à chaud, qui, à son tour, met à jour l'application avec toute modification apportée au cours du développement. Exécutez cette commande : cd react-contact-form-with-emailjs npm start L'application est accessible sur . http://localhost:3000 Création du formulaire de contact La collecte et la réception des réponses de vos utilisateurs via le formulaire de contact est une fonctionnalité essentielle qu'un site Web doit avoir, car elle vous rend digne de confiance aux yeux des visiteurs. Alors, créons le formulaire de contact. Dans votre fichier App.js, copiez et collez le code suivant : // src/App.js import React from 'react' import './App.css'; function App() { return ( Contact Form ); } export default App; Styliser le formulaire de contact L'interface utilisateur de l'application doit être belle pour les utilisateurs, donc dans le fichier , copiez et collez le code suivant : App.css // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; } La page devrait ressembler à ceci avec tout ce qui est bien fait : Configurer EmailJS Avec l'achèvement de la page du formulaire de contact sans aucune fonctionnalité pour envoyer des messages, configurons le service qui enverra le contenu du formulaire à votre adresse e-mail. Ajouter un service de messagerie Cette section concerne l'intégration entre EmailJS et votre serveur de messagerie. Sur votre tableau de bord EmailJS, choisissez le service dans l'onglet , qui devrait ouvrir une nouvelle page appelée . Gmail Services de messagerie service de configuration Ensuite, modifiez les paramètres de et . L' sera utilisé plus tard lors de l'initialisation du formulaire de contact pour le connecter à EmailJS. Assurez-vous de cliquer sur le bouton et pour confirmer vos modifications. nom d'ID de service identifiant du service Connecter un compte créer un service Création d'un modèle d'e-mail Le modèle d'e-mail est essentiel lorsque vous souhaitez inclure l'objet de l'e-mail, le contenu qu'il contiendra et sa destination dans votre boîte de réception lorsqu'un utilisateur envoie un message depuis le côté client de votre site Web. Sur le tableau de bord, cliquez sur l' et . onglet Modèle d'e-mail Créer un nouveau modèle Ensuite, vous devez cliquer sur l'onglet et modifier le et l' en tout ce que vous désirez. L' sera utilisé plus tard, comme illustré dans l'image ci-dessous : Paramètres nom ID du modèle ID du modèle En revenant à l'onglet Contenu, les valeurs entre accolades sont des variables dynamiques qui doivent avoir la même valeur que celle définie dans l'élément du formulaire de contact, comme le , et . message user_name user_email Création des variables d'environnement Les variables d'environnement est un fichier qui stocke vos clés publiques et d'autres valeurs que vous ne souhaitez pas partager et qui est privé pour vous seul. .env À la racine du répertoire de votre projet, créez un fichier, , et collez ce qui suit : .env // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY Pour la clé publique, vous pouvez la trouver en cliquant sur l'onglet et en copiant la valeur comme indiqué dans la section : Account public key Initialiser EmailJS Dans l'application React, importez le package installé, package. @emailjs/browser Copiez et collez ce qui suit : // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( // form element ); } export default App; Traitement de la soumission du formulaire Le crochet gère la soumission du formulaire de contact. useRef Copiez et mettez à jour le code dans le fichier : App.js // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( Contact Form // div container with input element ); } export default App; Ce qui suit se produit dans le code ci-dessus : Le hook est importé et initialisé avec une variable appelée form useRef Le crochet, , est utilisé comme référence et assigné à l'élément useRef Sur la fonction , le formulaire a la méthode qui arrête l'actualisation de la page sendEmail preventDefault Pourtant, dans la fonction , la fonction est invoquée et initialisée avec l'ID de de , la propriété de la et la sendEmail sendForm service ID template ID form .current ref public key Une fonction de rappel pour les cas de réussite et d'échec qui se produisent avec la méthode .then() Voyons maintenant le résultat de ce projet : Email de confirmation Conclusion L'utilisation d'EmailJS pour gérer les demandes de données côté client de votre application est un excellent moyen de recevoir des réponses d'un formulaire de contact. EmailJS fournit d'autres fonctionnalités à explorer et vous offre une expérience robuste sans jamais construire votre serveur ou avoir des connaissances en développement backend. Il fait tout pour vous sous le capot. Avez-vous déjà utilisé EmailJS ? Que pensez-vous de mon approche ci-dessus ? Faites-nous savoir dans les commentaires ci-dessous!