Tích hợp Biểu mẫu liên hệ với EmailJS trong React

React là một thư viện front-end để xây dựng giao diện người dùng cho các ứng dụng front-end. Ngoài ra, React rất hữu ích khi tạo các ứng dụng của bạn vì nó sử dụng các thành phần có thể tái sử dụng. Câu hỏi luôn tồn tại đối với các nhà phát triển front-end là làm thế nào để xử lý các yêu cầu từ dữ liệu biểu mẫu mà không cần viết hoặc không có kiến thức về các chức năng phụ trợ. Việc xây dựng một máy chủ phụ trợ có thể khá tẻ nhạt và việc sử dụng dịch vụ của bên thứ ba là bắt buộc đối với nhiệm vụ này để giảm bớt khó khăn trong việc viết logic. EmailJS là gì? EmailJS là một dịch vụ giúp gửi email bằng các ứng dụng phía máy khách như React, Vue và Angular mà không cần máy chủ trong quá trình cấu hình và thiết lập. Trong hướng dẫn này, bạn sẽ học cách kết nối thư viện front-end, React, với EmailJS để nhận tin nhắn của người dùng trên trang web hoặc ứng dụng di động của bạn mà không cần phải xây dựng từ đầu. Thử nghiệm Hãy bắt đầu bằng mã khởi động trong hoặc tạo một ứng dụng React mới. kho lưu trữ này Điều kiện tiên quyết Để làm theo hướng dẫn này, bạn cần có những điều sau: được cài đặt trên máy cục bộ của bạn Node> = 14.0.0 và npm> = 5.6 Hiểu biết cơ bản về React Một để dùng thử dịch vụ. tài khoản EmailJS Bắt đầu Bước đầu tiên của việc xây dựng một dự án mới là có các công cụ để phát triển giúp việc xây dựng trở nên dễ dàng. Trong thiết bị đầu cuối của bạn, hãy chạy lệnh này: npx create-react-app react-contact-form-with-emailjs Lệnh trên tạo bảng soạn sẵn bằng lệnh có tất cả các tệp và gói cho ứng dụng React. create-react-app Cài đặt EmailJS Như một phần phụ thuộc, hãy chạy lệnh để cài đặt EmailJS SDK vào ứng dụng React. npm install @emailjs/browser Chạy dự án Để chạy ứng dụng React, hãy điều hướng đến thư mục dự án và chạy máy chủ phát triển có tính năng tải lại nóng, từ đó cập nhật ứng dụng với bất kỳ thay đổi nào được thực hiện trong quá trình phát triển. Chạy lệnh này: cd react-contact-form-with-emailjs npm start Ứng dụng có thể truy cập trên . http: // localhost: 3000 Tạo biểu mẫu liên hệ Thu thập và nhận phản hồi từ người dùng của bạn thông qua biểu mẫu liên hệ là một tính năng quan trọng mà một trang web cần phải có, vì nó khiến bạn trở nên đáng tin cậy trong mắt khách truy cập. Vì vậy, hãy tạo biểu mẫu liên hệ. Trong tệp App.js của bạn, hãy sao chép và dán mã sau: // src/App.js import React from 'react' import './App.css'; function App() { return ( Contact Form ); } export default App; Tạo kiểu cho Biểu mẫu liên hệ Giao diện người dùng ứng dụng cần trông đẹp mắt đối với người dùng, vì vậy trong tệp , hãy sao chép và dán đoạn mã sau: 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; } Trang sẽ trông như thế này với mọi thứ được thực hiện đúng: Thiết lập EmailJS Với việc hoàn thành trang biểu mẫu liên hệ mà không có bất kỳ chức năng nào để gửi tin nhắn, hãy thiết lập dịch vụ sẽ gửi nội dung của biểu mẫu đến email của bạn. Thêm dịch vụ email Phần này nói về sự tích hợp giữa EmailJS và máy chủ email của bạn. Trên trang tổng quan EmailJS của bạn, hãy chọn dịch vụ từ tab , tab này sẽ mở ra một trang mới được gọi là . Gmail Dịch vụ Email dịch vụ cấu hình Tiếp theo, thay đổi và các thông số . sẽ được sử dụng sau này trong khi khởi tạo biểu mẫu liên hệ để kết nối nó với EmailJS. Đảm bảo nhấp vào nút và để xác nhận các thay đổi của bạn. tên id dịch vụ Id dịch vụ Kết nối Tài khoản Tạo Dịch vụ Tạo Mẫu Email Mẫu email rất cần thiết khi bạn muốn bao gồm chủ đề của email, nội dung mà nó sẽ chứa và đích của nó trong hộp thư đến của bạn khi người dùng gửi thư từ phía máy khách của trang web của bạn. Trên trang tổng quan, nhấp vào và . tab Mẫu Email Tạo Mẫu Mới Tiếp theo, bạn phải nhấp vào tab và thay đổi và thành bất kỳ thứ gì bạn muốn. sẽ được sử dụng sau này, như thể hiện trong hình ảnh bên dưới: Cài đặt Tên ID Mẫu ID mẫu Quay trở lại tab Nội dung, các giá trị bên trong dấu ngoặc nhọn là các biến động phải có cùng giá trị như được xác định trong phần tử trong biểu mẫu liên hệ, như , và . message user_name user_email Tạo các biến môi trường Các biến môi trường là một tệp lưu trữ các khóa công khai của bạn và các giá trị khác mà bạn không muốn chia sẻ và là riêng tư đối với một mình bạn. .env Trong thư mục gốc của thư mục dự án của bạn, hãy tạo một tệp, và dán thông tin sau: .env // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY Đối với khóa công khai, bạn có thể tìm thấy nó bằng cách nhấp vào tab và sao chép giá trị như được hiển thị trong phần : Account public key Khởi tạo EmailJS Trong ứng dụng React, nhập gói đã cài đặt, . @emailjs/browser Sao chép và dán nội dung sau: // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( // form element ); } export default App; Xử lý việc gửi biểu mẫu xử lý việc gửi biểu mẫu liên hệ. useRef Sao chép và cập nhật mã trong tệp : 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; Điều sau xảy ra trong đoạn mã trên: được nhập và khởi tạo với một biến có tên là biểu mẫu useRef Hook, , được sử dụng làm tham chiếu và được gán cho phần tử useRef Trên chức năng , biểu mẫu có phương thức ngăn trang làm mới sendEmail preventDefault Tuy nhiên, trong hàm , hàm được gọi và khởi tạo với , thuộc tính của tham và sendEmail sendForm service ID template ID form .current ref public key Một hàm gọi lại cho các trường hợp thành công và thất bại xảy ra với phương thức .then() Bây giờ chúng ta hãy xem kết quả của dự án này: Email xác nhận Sự kết luận Sử dụng EmailJS để xử lý các yêu cầu dữ liệu ở phía máy khách của ứng dụng của bạn là một cách tuyệt vời để nhận phản hồi từ biểu mẫu liên hệ. EmailJS cung cấp các tính năng khác để khám phá và mang đến cho bạn trải nghiệm mạnh mẽ mà không cần phải xây dựng máy chủ của bạn hoặc có kiến thức về phát triển phụ trợ. Nó làm mọi thứ cho bạn dưới mui xe. Bạn đã sử dụng EmailJS trước đây chưa? Bạn nghĩ gì về cách tiếp cận của tôi ở trên? Cho chúng tôi biết trong các ý kiến dưới đây!

Tích hợp Biểu mẫu liên hệ với EmailJS trong React

dài quá đọc không nổi

Company Mentioned

@terieyenike

NHỮNG BÀI VIẾT LIÊN QUAN