Currently, I am embarking on the development of a basic starter app that deals with SMTP anonymously in React. This project is primarily for educational purposes.
Prior to diving into actual development work, I have decided to keep things simple and focus on creating a basic script to ensure that the code functions correctly.
In my App.js file, I have a straightforward script that generates random keyword emails and allows users to copy the generated email address each time they refresh the page.
import logo from './logo.svg';
import './App.css';
const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
function generateString(length)
{
let result = ' ';
let addr = "@example.com";
const charactersLength = characters.length;
for ( let i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
result=result+addr;
return result;
}
var mail=generateString(9)
function CopyIt() {
var copyText = document.getElementById("evar");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999);
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
function App() {
return (
<>
<pre>
<h1>This is Temporarily mail site </h1>
<p>It helps you Access your Anonymous mail without logins Required </p>
</pre>
<nav className="navbar navbar-light bg-light">
<form className="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" id="evar" class="form-control" value={mail} aria-label="Username" aria-describedby="basic-addon1"></input>
<button onClick='Copyit()'>Copy text</button>
</div>
</form>
</nav>
</>
);
}
export default App;
However, I encountered an issue where the previously generated email was copied every time I refreshed the main App.js file. To resolve this problem, I created a new JavaScript file named logic.js and moved both the generateStrings and CopyIt functions there.
I then imported the logic.js file into App.js:
import './logic.js'
Subsequently, my logic.js file looks like this:
const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
function generateString(length)
{
let result = ' ';
let addr = "@example.com";
const charactersLength = characters.length;
for ( let i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
result=result+addr;
return result;
}
function CopyIt() {
var copyText = document.getElementById("evar");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999);
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
Upon running the code, I encountered errors stating that genrateStrings() and CopyIt() were not found. In an attempt to rectify this issue, I updated import './logic.js' in public/index.html and src/index.js as well.
Despite trying different methods, such as using
<ScriptTag type="text/javascript" src="logic.js" />As a beginner in React, I found it challenging to understand the complexities involved in importing external JS files and incorporating them seamlessly within my project.