Докато работех върху създаването на моя сайт за портфолио, исках да мога да получавам имейли, тъй като добавях раздел „Контакт“, но не бях сигурен как. Използвах React.js, за да създам моя сайт за портфолио и търсих в Google начини за изпращане на имейли с React и намерих Email.Js и изглеждаше като перфектен избор!

Email.js е безплатна платформа, която позволява имейлите да се изпращат директно с JavaScript, без да се изисква бекенд сървър. Email.Js има страхотна документация и беше много лесен за използване. Това ще бъде прост урок за това как да го използвате!

Създаване на нашето приложение за контакт

Тук ще създам малко приложение за реакция, което ще съдържа форма за контакт. Преди да можем да започнем да използваме Email.js, първо трябва да създадем акаунт при тях (което също е безплатно!). След създаването на акаунта вече ни се дава уникален потребителски идентификатор и токен за достъп. Също така имаме ограничение от 200 имейла на месец.

След като създадем нашия акаунт, нека да продължим и да завършим настройването на нашия профил. Първо трябва да изберем имейл услуга, която ще използваме за получаване на имейли, аз използвам gmail, но можете да изберете всяка от наличните опции, които имат.

След като изберем нашия доставчик, вече можем да изберем Името и ID на доставчика на услуги, които ще използваме, когато създаваме нашата форма в React.
След тази стъпка ще продължим и ще изберем нашия имейл шаблон. EmailJS по подразбиране ви дава основен имейл шаблон. Тези шаблони могат да бъдат създадени и във вашето табло за управление.

Изграждането на вашите шаблони е много лесно. Всички променливи, които подавате, трябва да бъдат обвити в {{}}. В противен случай информацията няма да бъде предадена правилно.

Можем да форматираме вашия имейл както желаете.

след като приключите с избора на вашия шаблон, вече сме готови и можем да продължим да правим нашето приложение!

Добре! сега, след като успешно направихме акаунт при тях и завършихме нашия шаблон, нека създадем нашето приложение за реакция

npx create-react-app my-email

сега пуска cd в нашето приложение и го отваря. Когато използваме React, можем или да инсталираме EmailJS с командата npm по-долу.

$ npm install emailjs-com --save

използвайки Bower
$ bower install emailjs-com --save

Или можем ръчно да вградим EmailJS CDN директно във вашия index.html по следния начин:

<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js">
</script>
<script type="text/javascript">
   (function(){
      emailjs.init("YOUR_USER_ID");
   })();
</script>

Можем да създадем нашия файл Contact.js и за тази част ще ви трябва идентификаторът на имейл шаблона и идентификаторът на услугата, които сте създали.

import React, { Component } from 'react'
class ContactForm extends Component {
state = {
name: '',
email: '',
feedback: '',
}
handleSubmit= (e)=>{
e.preventDefault();
const templateId = "template_OSnwlhmv";;
this.setState({name:'',feedback:'',email:''})
this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
console.log('sent')
}
handleChange=(event) =>{
const{name,value}=event.target
this.setState({[name]:value})
}
sendFeedback= (templateId, variables) =>{
window.emailjs.send(
'gmail', templateId,
variables
).then(res => {
console.log('Email successfully sent!')
})
.catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
}
resetForm() {
this.setState({
name: '',
email: '',
subject: '',
message: '',
})
}
handleChange=(event) =>{
const{name,value}=event.target
this.setState({[name]:value})
}
render() {
return (
<>
<form onSubmit={this.handleSubmit}>
<h2 className="title3">Contact</h2><br></br>
<div className="form-group">
<input
required
onChange={this.handleChange}
value={this.state.name}
name='name'
type="name"
className="form-control"
id="exampleFormControlInput1"
placeholder="Name"
/>
</div>
<div className="form-group">
<input
required
onChange={this.handleChange}
value={this.state.email}
name='email'
type="email"
className="form-control"
id="exampleFormControlInput1"
placeholder="[email protected]"
/>
</div>
<div className="form-group">
<textarea
placeholder='Message...'
name='feedback'
className="form-control message"
id="exampleFormControlTextarea1"
rows="3"
onChange={this.handleChange}
value={this.state.feedback}
required
/>
</div>
<button className="btn btn--submit"  >Send</button>
</form>
</>
)
}
}
export default ContactForm

това е нашата форма за контакт и вече приключихме с този урок, сега можем да го тестваме и....

работи!!! Email.js е супер лесен за използване, можете да проверите тяхната документация https://www.emailjs.com/docs/