The create-react-app package quickly spins up a working ReactJS application. We use it here to create a basic application for our demonstration. The latest version of ReactJS is used by the create-react-app package. I have used the Visual Studio Code IDE but you are free to follow along in an IDE of your choice.<\/p>\n
2. Setting up Application<\/h2>\n
We run the below command to execute create-react-app and generate our sample application
>npx create-react-app my-app\n<\/pre>\nnpx downloads a temporary copy of create-react-app and runs it with the parameters provided. The above command should create a project in the my-app directory. And the structure of the application should look like below:<\/p>\n
\nProject Structure<\/figcaption><\/figure>\n<\/div>\n 3. Building Password Checker<\/h2>\n
Let us now create our password strength checker component. To keep things simple we only set three rules for new passwords. With each pass of the rules earning the new password 1 points. For a total of 3 for a strong password, 2 for a medium one and 1 for a weak password. We write this component in a file named StrengthChecker.js. Our code for this component looks like below:<\/p>\n
StrengthChecker.js<\/em><\/span><\/p>\n
import React, { useState } from 'react';\n\nfunction StrengthChecker(props) {\n const [strength, setStrength] = useState(\"weak\");\n const [password, setPassword] = useState(\"\");\n const handleChange = ({ target }) => {\n setPassword(target.value);\n let score = 0;\n if (password.length >= 6) {\n score += 1;\n }\n if ((password.match(\/[A-Z]\/g) || []).length >= 1) {\n score += 1;\n }\n if ((password.match(\/[0-9]\/g) || []).length >= 1) {\n score += 1;\n }\n switch (score) {\n case 1: setStrength(\"weak\");\n break;\n case 2: setStrength(\"medium\");\n break;\n case 3: setStrength(\"strong\");\n break;\n\n }\n }\n return \n <div style={{\n display: 'flex', flexDirection: 'column', \n alignItems: 'center', justifyContent: 'center',\n height: '100vh', width: '100vw'\n }}>\n <label>Please type in a new Password<\/label>\n <input type=\"password\" value={password} \nonChange={handleChange} \/>\n <span>Password Strength<\/span>\n <span className={strength}>\n{strength.toUpperCase()}<\/span>\n <ul>\n <li>Atleast 6 characters in length<\/li>\n <li>Atleast one Capital letter<\/li>\n <li>Atleast on numeric character<\/li>\n <\/ul>\n <\/div> \n}\nexport default StrengthChecker;\n<\/pre>\nAs you can see from the code above we have attached the handleChange event handler to the onChange event of the input tag. In the handler we access the value of the tag and check its strength. In the process setting our password strength checker text and corresponding CSS Class.<\/p>\n
4. Running the application<\/h2>\n
Let us run our application to see our component in action. We run the below command at the root of our project.<\/p>\n
\/my-app> npm start\n<\/pre>\nThis opens the URL http:\/\/localhost:3020 in our browser. As we type in to the text box we should see the password strength update simultaneously.<\/p>\n
Project Output<\/figcaption><\/figure>\n 5. Download the Source Code<\/h2>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/ReactJS-OnChange-ExProjectStructure.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/ReactJS-onChange-Project-Output-1.jpg\")