Steps to Create React Application and Installing Modules
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
Step 3: Installing Required Dependencies:
npm install md5
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"md5": "^2.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Below is the code example of the above explained approach.
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 view the output, navigate to http://localhost:3000/
npm start
Output:
How to Convert Input Value in Md5 using React JS ?
MD5 is a hash function often used to create a fixed-size hash from input. Though not secure for cryptography, it’s still useful for tasks like checksums. Learn to build a basic React.js app converting user-input values into MD5 hashes.
Contact Us