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 ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } 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   . <form> 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 ( <div> // form element </div> ); } 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 ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } 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 <form>  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!

Initialized

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

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

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps