Password checker met React

Back

Sinds ik 12 jaar oud ben is het bouwen van websites een bezigheid van mij. Om elke keer weer wat bij te leren probeer ik me vaak te verdiepen in nieuwe technieken. Dit keer heb ik mij verdiept in het framework React.

React is een framework dat ontwikkeld is door Facebook. Het is specifiek gemaakt voor het bouwen van userinterfaces. Naast Facebook wordt het ook gebruikt door de web-versie van Whatsapp. Ik heb besloten om mij in deze techniek te verdiepen omdat ik vanuit mijn omgeving veel hierover hoorde. Daarnaast wordt de taal Javascript ook steeds vaker gebruikt in het bedrijfsleven.

Om kennis te kunnen maken met dit framework heb ik mijzelf het doel gesteld om een kleine web-applicatie te bouwen: een password checker. Deze checker zal een simpele website worden waarop de gebruiker een wachtwoord kan invoeren. Dit wachtwoord zal worden gecontroleerd op enkele eisen en zo worden beoordeeld op veiligheid. De volgende MoSCoW eisen heb ik aan deze web-applicatie gesteld:

Must have

  • De applicatie heeft een invoerveld waarin de gebruiker zijn wachtwoord kan invoeren
  • Aan de hand van het ingevulde wachtwoord geeft de applicatie feedback over hoe het wachtwoord verbeterd kan worden

Should have

  • Het wachtwoord wordt getest aan de hand van een zichtbare lijst met criterea

Could have

  • Er wordt een schatting gemaakt hoe lang het zou duren om dit wachtwoord te raden

Resultaat

Bij het ontwikkelen van de website ben ik uiteindelijk gekomen tot het verwerken van de “Should have”. De gemaakte web-applicatie is online te vinden op http://n9iels.github.io/password-checker.

Password Checker screenshot

Ervaring met React

Mijn eerste kennismaking met React beviel mij erg goed. Ik ben best wel enthousiast over de manier waarop het werkt en hoe je een applicatie opbouwt. Bij een website gebouwd in React bestaat deze namelijk uit allemaal losse onafhankelijke onderdelen, zogenoemde componenten. Deze componenten kunnen binnen de website hergebruikt worden.

Tijdens mijn stage zal ik ook gaan werken met dit framework. Deze kleine web-applicatie heeft me al veel inzicht gegeven in wat er mogelijk is. Ik ben dan ook heel benieuwd wat ik nog meer ga ontdekken en leren!