Sending Emails from React App with EmailJS | Step-by-Step Tutorial

Hey TH-cam! In this video, we will learn how to send emails from React app using the EmailJS library without server code.
EmailJS helps to send emails using client-side technologies only. No server is required - just connect EmailJS to one of the supported email services, create an email template, and use one of their SDK libraries to trigger an email.
Email templates can optionally contain dynamic variables in almost any template field (such as Subject, Content, To Email address, From Name, etc.) which are populated from the application code calls. For example, the subject can be "{{ name }}, you have a new message", and using our app code the name can be set to "James Dean", for instance.
You will learn:
➤ Add an email service
➤ Create an email template
➤ Create an HTML form
➤ Send an email with form details using EmailJS SDK inside React App
➤ Send an email with form details using REST API call inside React App
➤ Support me by COMMENT, LIKE, SUBSCRIBE, and SHARE
➤ Channel link - / @webwizard8
Happy learning!
➤ Licence:
Song: Hotham - Find
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • Hotham - Find (Vlog No...
Song: Atch - Freedom
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • Atch - Freedom (Vlog N...
Song: LiQWYD - Sweet
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • LiQWYD - Sweet (Vlog N...
#sendingemails #reactapp #emailjs #stepbysteptutorial #webdevelopment #reacttutorial #emailservice #webdevtips #reactjs #webdevelopmenttips #frontenddevelopment #javascript #webdevelopmenttutorial

[@webwizard8]

EmailJS - www.emailjs.com/
Github Repo - github.com/kalyansaxena/react-emailjs-tutorial

[@vigneshwarvenugopal922]

Thank you so much dude.....I had passed my college graduate with this help of yours...and owe you more....Once again THANK YOU

[@webwizard8]

Wow, that's incredible to hear! Congratulations on graduating from college, and I'm so glad I could be of help. Your kind words mean a lot. Best of luck on your future endeavors, and congratulations again!!

[@jamesr2408]

Actually, Send email from React App is a confusing term. It should be receive email from the React App. Because typically these tutorials refer to visitors filling in a form to app owner. So from the owner point of view -- developers are owners -- it is receive email from the app. Send email verification -- again owner point of view -- now that is a different thing.

[@MORED3]

Thanks for your help. I am working on a react project and this helped me created a working contact page.

[@Masta__006]

grateful for this amazing video man....hats off to you

[@PrinceDAlex]

Thank you! This was very helpful and pretty easy in the end

[@saqibnawab1083]

you've earned yourself a sub

[@cooltony69]

This was helpful, using the external api made it easier when hosting and reduced dependency hell.

[@caroleatierney]

Thank you! This was very helpful and pretty easy in the end! Worked on my react app contact page.

[@dvasq780]

Great explanation! Got it working for my React app, cheers from Canada

[@webwizard8]

Thank you for sharing your experience! Glad to hear! Cheers !!

[@suziiki98]

Very simple and helpful. Thank you

[@marshdit]

This guy is a goddam genius.

[@RameshJobUpdates]

Thank you bro. Good explanation and excepting more videos from you which is useful for fresher

[@webwizard8]

I appreciate your feedback, and I'll certainly be creating more videos that are useful for beginners. Thanks for watching and your support!

[@andrewstefankiv8921]

Thank you. Your video helped me with one of my project. Could you also, please tell me where did you get a template for your portfolio website (at the beginning of your video)?

[@b3-76sarang2]

thanks sir, very helpful and simple video

[@balajik7376]

Really helped, I used this for my portfolio contact us section ❤

[@mohammadfazlerabbi7712]

one of the best video great

[@webwizard8]

Thank you so much for your kind words! I'm thrilled to hear that you enjoyed the video and found it great.

[@iftikherlutfur4073]

Thank you, it was so helpful

[@Bodeblack]

Thank you so much, this is a life saver

[@michaelmeshesha7148]

Thanks alot

[@goddeyuwamari7014]

excellence job, thank you bro's

[@jasongionfriddo8342]

Fantastic job. Thank you so much!

[@webwizard8]

Thank you!! Your support is much appreciated!

[@errorcom123]

Thanks brother❤

[@thecoder2441]

Epic thank you!!!

[@Odidi_Bee6ix]

Thanks for this

[@puruverma2716]

Plz making a video on own portfolio

[@divyanshusahu6111]

Thanks bro

[@shadyhumourtv2503]

God bless you kind sir!

[@webwizard8]

Thank you so much for your kind words! Sending positive vibes your way too! Consider subscribing to my channel to stay connected for more content!

[@hemasainarni5568]

Baundhi chala baundhi - harshini

[@anishkuvelkar1876]

Can u do this for a college id as well? on microsoft outlook?

[@baburqureshi6842]

its not showing two dynamic variable out of 3 on receiving mail can you help me

[@STARTUPPROJECTS]

Good work 🎉
I have a question, we are using the public key, template id and service id for one account.....then we will receive mail to that particular Gmail account.
What about sending mail to other receipients with the previous account. Will it work ? Or we need the keys for the recipient account also.

[@webwizard8]

Thanks for the encouragement!
To send emails to other recipients using the same account, you typically don't need separate keys.
Go to Email Templates section in the EmailJS dashboard, select your email template that you are using , and just update To Email* field in the right side of template and update its value with recipient email address {{to_email}}
so with help of dynamic template params, you can have recipient mail address - {{to_email}}
you can test your template on the dashboard itself by clicking on Test It button on the left side of Save button
Hope it helps!!

[@NickBateman-k3v]

Thank you soo much. Did you use Three.js to build the rotating globe. Could you make a tutorial on that

[@webwizard8]

Thank you for your kind words! Yes, the rotating globe was indeed created using Three.js. I'll definitely consider doing a tutorial on this in future! Your support means a lot, and I appreciate your interest in my content!

[@premiumslidingdoorsptyltd1328]

Hi, Have issue please help if you can... so create HTML contact form add Email sending functional - now when send emails - emails showing on email history if Email JS - but not delivered .
please let me know if you know how to fix.

[@legendaryfootball4222]

thanks man. but how do i make users on my platform invite other users to collaborate on a project through email

[@harishg8]

thank you

[@draganapopovdev]

tnx a lot

[@webwizard8]

You're welcome! Thanks for watching! ❤️

[@shinesackiteykoblateye9356]

wish I could give 600 likes. Thanks

[@webwizard8]

Your positive feedback means a lot, and I'm glad you enjoyed the video. Your support is more than enough, and I'm grateful for it.

[@jacquelynecarmen]

200 request per month 😢

[@adityakr7586]

thanks man

[@jannickpedersen4620]

LOOOL whats the chance that i have the same web page from javascript mastery xD

[@webwizard8]

Hi @jannickpedersen4620, yes, isn't UI beautiful? I created my 3D portfolio by following along! I'd highly recommend following JavaScript Mastery!

[@CrashBeastt]

emailjs plan offer 200 request for every month or just for one time 200 requests?

[@webwizard8]

200 Monthly Requests, It will reset every month, checkout their pricing section for more details - www.emailjs.com/pricing/