title: how to send email with react.js front end?
body: <p>i have created a websites and deployed it ( using react js ) in my website there is a contact form which will send the client message to my work email ( myname@comany.com) . i know i can't send email with react js because rereact only handle the front end so i'm looking for a solution using nodemailer or other solutions ! how can i do that ?</p>
  <p>i tried the following tutorials to link react with express : [https://medium.com/@maison.moa/setting-up-an-express-backend-server-for-create-react-app-bc7620b20a61][1]</p>
  <p>i made a quick app for testing :
  folder structure :</p>
  <pre><code>client ( created with create-react app )
  node_modules
  config.js
  package.json
  package_lock.json
  server.js
  </code></pre>
  <p>in the front end : client/src
  app.js code :</p>
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import Form from './Form.js';
  
  class App extends Component {
  state = {
      data: null
    };
  
    componentDidMount() {
        // Call our fetch function below once the component mounts
      this.callBackendAPI()
        .then(res =&gt; this.setState({ data: res.express }))
        .catch(err =&gt; console.log(err));
    }
      // Fetches our GET route from the Express server. (Note the route we are fetching matches the GET route from server.js
    callBackendAPI = async () =&gt; {
      const response = await fetch('/express_backend');
      const body = await response.json();
  
      if (response.status !== 200) {
        throw Error(body.message) 
      }
      return body;
    };
  
    render() {
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;header className=&quot;App-header&quot;&gt;
            &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
            &lt;h1 className=&quot;App-title&quot;&gt;Welcome to React&lt;/h1&gt;
          &lt;/header&gt;
        &lt;Form/&gt;
          &lt;p className=&quot;App-intro&quot;&gt;{this.state.data}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>Email.js code :</p>
  <pre><code>import React from 'react';
  import { Email, Item, A} from 'react-html-email';
  export default function InlineLink({name, children}) {
    return (
    &lt;Email title='link'&gt;
      &lt;Item&gt;
         Hello {name}
         &lt;p&gt;helooo&lt;/p&gt;
      &lt;/Item&gt;
      &lt;Item&gt;
        {children}
      &lt;/Item&gt;
    &lt;/Email&gt;
  )};
  </code></pre>
  <p>Form.js code :</p>
  <pre><code>import MyEmail from './Email'
  import { renderEmail } from 'react-html-email'
  import axios from 'axios';
  import React, { Component } from 'react';
  
  class Form extends Component {
  
      resetForm(){
  
          this.setState({feedback: ''});
      }
  
      constructor(props) {
          super(props);
          this.state = { feedback: '', name: 'Name', email: 'email@example.com' };
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
        }
  
     
    render() {
      return (
          &lt;form className=&quot;test-mailing&quot;&gt;
          &lt;h1&gt;Let's see if it works&lt;/h1&gt;
          &lt;div&gt;
          &lt;textarea
              id=&quot;test-mailing&quot;
              name=&quot;test-mailing&quot;
              onChange={this.handleChange}
              placeholder=&quot;Post some lorem ipsum here&quot;
              required
              value={this.state.feedback}
              style={{width: '100%', height: '150px'}}
          /&gt;
          &lt;/div&gt;
          &lt;input type=&quot;button&quot; value=&quot;Submit&quot; className=&quot;btn btn--submit&quot; onClick={this.handleSubmit} /&gt;
      &lt;/form&gt;
      );
    }
    handleChange(event) {
      this.setState({feedback: event.target.value})
    };
    handleSubmit(event){
  
      const messageHtml =  renderEmail(
        &lt;MyEmail name={this.state.name}&gt; {this.state.feedback}&lt;/MyEmail&gt;
      );
      
              axios({
                  method: &quot;POST&quot;, 
                  url:&quot;http://localhost:3000/send&quot;, 
                  data: {
                name: this.state.name,
                email: this.state.email,
                messageHtml: messageHtml
                  }
              }).then((response)=&gt;{
                  if (response.data.msg === 'success'){
                      alert(&quot;Email sent, awesome!&quot;); 
                      this.resetForm()
                  }else if(response.data.msg === 'fail'){
                      alert(&quot;Oops, something went wrong. Try again&quot;)
                  }
              })
          }
  }
  export default Form;
  </code></pre>
  <p>in the backend
  server.js code :</p>
  <pre><code>const express = require('express');
  const app = express();
  const port = process.env.PORT || 5000;
  
  // console.log that your server is up and running
  app.listen(port, () =&gt; console.log(`Listening on port ${port}`));
  
  // create a GET route
  app.get('/express_backend', (req, res) =&gt; {
    res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
  });
  const nodemailer = require('nodemailer');
  const creds = require('./config');
  
  var transport = {
    host: 'smtp.gmail.com', // e.g. smtp.gmail.com
    auth: {
      user: creds.USER,
      pass: creds.PASS
    }
  }
  
  var transporter = nodemailer.createTransport(transport)
  
  transporter.verify((error, success) =&gt; {
    if (error) {
      console.log(error);
    } else {
      console.log('All works fine, congratz!');
    }
  });
  app.use(express.json()); app.post('/send', (req, res, next) =&gt; {
      const name = req.body.name
      const email = req.body.email
      const message = req.body.messageHtml
    
    
      var mail = {
        from: name,
        to: 'mellitir11@gmail.com',  
        subject: 'Contact form request',
    
        html: message
      }
    
      transporter.sendMail(mail, (err, data) =&gt; {
        if (err) {
          res.json({
            msg: 'fail'
          })
        } else {
          res.json({
            msg: 'success'
          })
        }
      })
    })
  </code></pre>
  <p>config.js code :</p>
  <pre><code>module.exports = {
      USER: 'mellitir11@gmail.com', 
      PASS: 'my_email_password',
  }
  </code></pre>
  <p>even that it shows the error message which is &quot;Oops, something went wrong. Try again&quot;
  [1]: <a href="https://medium.com/@maison.moa/setting-up-an-express-backend-server-for-create-react-app-bc7620b20a61" rel="nofollow noreferrer">https://medium.com/@maison.moa/setting-up-an-express-backend-server-for-create-react-app-bc7620b20a61</a></p>