Create Application Structure of QR Code Generator
In this step, we will create the basic structure to the application such as input and output display area. This will make it easy to view the elements we need for the application.
- For the QR generator, we need one display area to display the generated QR code under the input area.
- As the first stage, create a components folder in the
srcdirectory and create a file with the nameQrGenerator.jsx
- Now, copy and paste the code to create the basic structure of the application.
import QRCode from "qrcode";
// QrGenerator.jsx
// Functional Component to Create the QR code generator
function QrGenerator() {
return (
// The main container
<div>
// Input container
<div>
// Input field
<input
type="text"
id="input"
placeholder="Eg: https://google.com/ "
/>
// Generate QR code button
<button>
Generate
</button>
</div>
// Display area
<div>
// Qr code display in image format
<img src="/" alt="QR code" id="qr" />
// Download QR code button
<a href="/" download="qrcode.png">Download QR Code</a>
</div>
</div>
);
}
export default QrGenerator;- After the QrGenerator component export, you need to import the component in the main component
App.jssince it is the entry point for your application. - Modify the code in
App.jsfile similar to the below code.
// App.js
// Import the QrGenerator component
import QrGenerator from "./components/QrGenerator";
function App() {
return (
<div>
<QrGenerator />
</div>
);
}
export default App;- After updating the App component, you will see the following result.
Build Your QR Code Generator using React JS
