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 ( <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;   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à   . <form> 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 ( <div> // form element </div> ); } 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 ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } 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 <form>  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!

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

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

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

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

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

147 Stories To Learn About Reading Books Online

581 Stories To Learn About Non Fiction

309 Stories To Learn About Smart Contracts

72 Stories To Learn About Adam Smith

147 Stories To Learn About Reading Books Online

581 Stories To Learn About Non Fiction

309 Stories To Learn About Smart Contracts

72 Stories To Learn About Adam Smith

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps