react如何在服务器运行_如何在React JS上运行电子邮件服务器

react如何在服务器运行

Have you ever applied to a job and wondered, “How do they get the form that they’re having me fill out? Where does it go?” Probably not… But now you might have! Some websites might have the data posted to an API backend, but many sites use an email server as a way to get the form sent directly to their email. This is used mainly on those handy-dandy “Contact Us” pages. But how can a form be emailed to a recipient without a sender email?

您是否曾经申请过一份工作，并想知道：“他们如何得到他们要我填写的表格？ 去哪儿了？” 可能不是……但是现在您可能已经拥有了！ 一些网站可能会将数据发布到API后端，但是许多网站使用电子邮件服务器作为将表单直接发送到其电子邮件的一种方式。 这主要用于那些方便的“联系我们”页面。 但是，如何在没有发件人电子邮件的情况下将表单通过电子邮件发送给收件人呢？

This is where email servers come in! An email server is a message transfer agent; a software that relays a message from a computer to an email. Although getting into the technically of how email servers work would be fun, we’re not here to talk about that! What we are here to talk about is how you can use one of these in your next React application!

这是电子邮件服务器进来的地方！ 电子邮件服务器是邮件传输代理； 一种将消息从计算机中继到电子邮件的软件。 尽管从技术上讲究电子邮件服务器的工作方式会很有趣，但是我们这里并不是要谈论这个！ 我们在这里谈论的是如何在下一个React应用程序中使用其中之一！

步骤1：建立表格 (Step 1: Create Your Form)

Typically, forms created on React applications have their input values change the values of the variables in your component’s state. You do this by setting up your eventHandler function:

通常，在React应用程序上创建的表单的输入值会更改组件状态下变量的值。 您可以通过设置eventHandler函数来做到这一点：

import React from "react"export default class Example extends React.Component {state = {
name: null,
email: null,
message: null
}eventHandler(event){
  this.setState({[event.target.name]: event.target.value})
}handleSubmit(event){
  event.preventDefault
}render(){
return(<form>Name: <input type="text" name="name" onChange = {this.eventHandler}/>Email: <input type="email" name="email" onChange = {this.eventHandler}/>Message: <textarea type="text" name="message" onChange = {this.eventHandler}/><button type = "submit" onClick = {this.handleSubmit}>
Submit
</button></form>)}}

This will render a form that, on change, will save the value inputted to the component’s state. However, that handleSubmit function isn’t doing much at the moment…

这将呈现一个表单，该表单在更改时将保存输入到组件状态的值。 但是，该handleSubmit函数目前执行的不多...

步骤2：使用EmailJS进行设置 (Step 2: Get Set Up with EmailJS)

EmailJS is an email server specifically designed for Javascript applications. Start off by creating an account with them (it’s free) and logging in. After that, you will need to head to “Email Services” on your dashboard and click “Add New Service.” Choose whatever server your email is registered with, then enter the name of the recipient and the email address where it says “Service ID.” You will be asked to log into the email for verification purposes.

EmailJS是专门为Javascript应用程序设计的电子邮件服务器。 首先，使用他们创建一个帐户(免费)并登录。然后，您需要转到仪表板上的“电子邮件服务”，然后单击“添加新服务”。 选择您的电子邮件注册到的服务器，然后输入收件人的姓名和显示“服务ID”的电子邮件地址。 系统将要求您登录电子邮件以进行验证。

Great! You’ve set your email up. Now it’s time to set up the template of the email you want sent to your email. Head over to “Email Templates” on your dashboard and click “Create New Template.” Enter the recipient’s name. When entering the name of the variables in JSX, ensure that the names match the names of the variables in the state that is being sent to the email server, like so:

大！ 您已设置好电子邮件。 现在是时候设置要发送到电子邮件的电子邮件的模板了。 转到仪表板上的“电子邮件模板”，然后单击“创建新模板”。 输入收件人的姓名。 在JSX中输入变量名称时，请确保名称与正在发送到电子邮件服务器的状态下的变量名称匹配，如下所示：

Great! Now you set up your email server. Let’s head over to the next step!

大！ 现在，您设置了电子邮件服务器。 让我们继续下一步！

3.在您的React App中实现EmailJS (3. Implement EmailJS into your React App)

The first step is running the following code into your terminal:

第一步是将以下代码运行到您的终端中：

$ npm install emailjs-com --save

Now you have successfully installed the necessary EmailJS package. The next step is to set up that handleSubmit function. However, before we do that, there are two necessary pieces of information needed for this to work. Head over to your EmailJS dashboard and click on “Integration.” On that page, where it says “API Keys,” you will see a User ID. Save the value into a variable within your handleSubmit function. Next, head over to “Email Templates” and check out that template you just created. You should see that it has a “template_id.” Also save the value that into a variable. You should also save the email you added to your “Email Services” into a variable. Next, make sure to add this to the top of your component:

现在，您已经成功安装了必要的EmailJS软件包。 下一步是设置handleSubmit函数。 但是，在执行此操作之前，需要两项必要的信息才能使其起作用。 转到您的EmailJS仪表板，然后单击“集成”。 在该页面上显示“ API密钥”的位置，您将看到一个用户ID。 将值保存到handleSubmit函数中的变量中。 接下来，转到“电子邮件模板”，并检查刚刚创建的模板。 您应该看到它具有一个“ template_id”。 还将值保存到变量中。 您还应该将添加到“电子邮件服务”中的电子邮件保存到变量中。 接下来，确保将其添加到组件的顶部：

import emailjs from "emailjs-com"

Now that you have all the necessary requirements, you can finally write your handleSubmit function:

现在，您已经具备了所有必要的要求，您终于可以编写handleSubmit函数了：

handleSubmit(event){
event.preventDefault()let userId = "user_ID123456789"
let templateId = "template_123456789"
let recipientEmail = "johndoe@yahoo.com"emailjs.send(recipientEmail, templateId, this.state, userId)//The following code is not necessary to complete the task but is a
//nice way to test if it worked.then(response => {console.log("You Successfully Sent an Email!")})
.catch(error => console.error("Looks like something went wrong"))}

Once you completed all the necessary steps, the values inputted into the form will fill in the JSX on that template you created. Then, an email formatted in that template will be sent to “johndoe@yahoo.com.” This is a great way for developers to get contact information directly to their email addresses from their portfolio websites. Just add some styling to your page and you are good to go. Happy coding!

完成所有必要步骤后，输入表单的值将填充您创建的模板上的JSX。 然后，以该模板格式化的电子邮件将发送到“ johndoe@yahoo.com”。 这是开发人员从其投资组合网站直接将联系信息获取到其电子邮件地址的好方法。 只需在页面上添加一些样式，就可以了。 编码愉快！

资源资源 (Resources)

https://blog.mailtrap.io/react-send-email/

https://blog.mailtrap.io/react-send-email/

https://www.emailjs.com/docs/

https://www.emailjs.com/docs/

翻译自: https://medium.com/@ghaxhaj/how-to-run-an-email-server-on-react-js-7127d438f6a1

react如何在服务器运行