How To Send Emails with React.js using Fetch (2024) #113
2 minutes
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
Like what you see, support the channel.
Get Merch Buy Me A Coffee Join Patreon Watch on YouTube View Projects on GitHub