How to Run an Email Server on React.js
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?
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!
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:
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…
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.
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:
Great! Now you set up your email server. Let’s head over to the next step!
3. Implement EmailJS into your React App
The first step is running the following code into your terminal:
$ npm install emailjs-com --saveNow 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:
import emailjs from "emailjs-com"Now that you have all the necessary requirements, you can finally write your handleSubmit function:
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!
