Skip to main content

How To Send Emails with React.js using Fetch (2024) #113


Published: June 14, 2024 | DevDrawer


Estimated Reading Time
2 minutes
Video Duration
23:49 minutes

Thank you to Mailtrap.io for sponsoring this video. Use the sponsor code DEVDRAWER to receive a free Mailtrap "10k Basic Email Sending" plan for a month.

Try Mailtrap for free: https://l.rw.rw/devdrawer

Continuing our previous React JS video, we will add an email send function to the previously created contact form. You can view the crash course on this URL:

React JS Crash Course: https://youtu.be/Ou-RUuujpXY

Since React is JavaScript and does not process emails like server-side code (PHP, Node, etc), we have to make a call to an external location. For this tutorial, we will be using a simple PHP email function that is referenced in the React code using FETCH. This works the same way you would use it for an API. You have to worry about CORS, but if you are accessing the send file on your server, it is less important.

Essentially, you set up a typical PHP send function, and then call it from React. Easy.

🔗 Timestamps:

00:00 - Intro

02:18 - Create the PHP send function

14:00 - Sponsor: Mailtrap.io

15:26 - Add Fetch method

19:54 - Debugging and CORS

21:29 - Success

⭐ Programmer Merch: https://store.thedevdrawer.com/#!/

⭐ Join the Discord: https://discord.gg/4nRPmBFSDj

⭐ If you would like to buy me a coffee because I created something that helped you, it would be much appreciated! : https://www.buymeacoffee.com/devdrawer

⭐ Join this channel to get access to perks:

https://www.youtube.com/channel/UCcr8eSk5xCfn3AbYy8WOWzg/join

⭐ Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer

View Project on GitHub: https://github.com/thedevdrawer/sample-react