MD5 (Message-Digest Algorithm 5) is a cryptographic hash function widely utilized for generating a fixed-size 128-bit hash value from an input. Despite its vulnerability to security breaches, MD5 still finds practical applicability in non-cryptographic tasks such as checksums and data verification.
In this article, we will explore the process of developing a simple React.js application that empowers users to enter a value and convert it into an MD5 hash.
Prerequisites:
- Introduction to React
- React useState
- NPM and NPX
Steps to Create React Application
Step 1: Create a react application by using this command
npx create-react-app md5-converter-react
Step 2: After creating your project folder, i.e. md5-converter-react, use the following command to navigate to it:
cd md5-converter-react
Project Structure:
Step 3: Installing Dependencies
In this project, we will use the “md5” library. To install the md5 library use the following commands:
npm install md5
Example: The provided code demonstrates the React.js implementation of the `App` component, enabling users to enter text. By clicking on the “Convert to MD5” button, the corresponding MD5 hash of the input is shown. The layout and appearance are shaped using CSS styles. The `useState` hook effectively manages both input and hash states within this component. When triggered by a button click event, the `md5` library computes the desired hash value.
Javascript
// App.js import React, { useState } from "react"; import md5 from "md5"; const styles = { container: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", backgroundColor: "#f0f0f0", }, input: { padding: "10px", border: "1px solid #ccc", width: "250px", marginBottom: "15px", borderRadius: "8px", }, convertButton: { padding: "8px 16px", backgroundColor: "#007bff", color: "white", border: "none", borderRadius: "4px", cursor: "pointer", }, md5Text: { marginTop: "20px", fontSize: "16px", fontWeight: "bold", }, }; function App() { const [inputValue, setInputValue] = useState(""); const [md5Hash, setMd5Hash] = useState(""); const convertToMd5 = () => { const hash = md5(inputValue); setMd5Hash(hash); }; return ( <div style={styles.container}> <h1>MD5 Hash Converter</h1> <input placeholder="Enter a value" value={inputValue} onChange={(e) => setInputValue(e.target.value) } style={styles.input} /> <button onClick={convertToMd5} style={styles.convertButton} > Convert to MD5 </button> {md5Hash !== "" && ( <p style={styles.md5Text}> MD5 Hash: {md5Hash} </p> )} </div> ); } export default App; |
Step 4: To run the application, launch the Terminal and type the following command. To view the output, navigate to http://localhost:3000/.
npm start
Output:
