Devoir Développement d’application mobile

Nom : MATCHOU SIMO Charlotte Manuella

Sjp5 GIT-RT

1) Correction de l’erreur
La seule erreur apparente dans le code est l'utilisation de la variable email dans la fonction go
alors qu'elle n'est pas définie dans l'état. Il devrait s'agir de username pour être cohérent avec la
variable d'état et la logique du code

import React, { Component } from 'react';

import { Text, Alert, Button, View, StyleSheet } from 'react-native';
import { TextInput } from 'react-native-paper';

export default class App extends Component {

constructor(props) {
super(props);

this.state = {
username: '',
password: '',
};
}

go = () => {
const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (reg.test(this.state.username) === true){
alert('valid');
}
else{
alert();
}

onLogin() {
const { username, password } = this.state;

Alert.alert('Credentials', `${username} + ${password}`);

}

render() {
 return (
<View style={styles.container}>
<Text style={styles.inputext}>Sample Login Form</Text>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
label='Email'
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
label='Password'
secureTextEntry={true}
style={styles.input}
/>

<Button
title={'Login'}
style={styles.input}
onPress={this.onLogin.bind(this)}
/>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#00FFFF',
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
},
inputext: {
width: 200,
height: 44,
 padding: 10,
textAlign:'center',
fontWeight:'bold',
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
},
});

2) Commenter l'exploitation des propriétés dans le code. Quelle est l'utilité des
propriétés dans ce code (soyez spécifique)

Le code exploite les propriétés de React Native pour créer des composants et définir leurs
propriétés. Les propriétés permettent de définir l'apparence et le comportement des composants
de l'interface utilisateur.

Dans ce code nous avons les propriétés suivantes :

• Value : Dans ce code elle permet de définir la valeur initiale du champ de saisie ;
• onChangeText : Permet de définir une fonction qui sera appelée chaque fois que le texte
change dans le champ de saisie ;
• Label : Permet de définir une étiquette pour le champ de saisie ;
• SecureTextEntry : Permet de masquer le texte saisi dans le champ de saisie (pour le mot
de passe) ;
• Style : Permet de définir le style du composant ;
• Title : Permet définir le titre du formulaire de connexion.

3) Commenter l'exploitation d'état dans le code. Quelle est l'utilité de "state" dans ce
code (soyez spécifique)

L'état est utilisé pour garder une trace des valeurs des champs de saisie et pour les utiliser
plus tard dans la fonction "onLogin" lorsqu'elle est appelée pour afficher une Alert Box avec les
valeurs saisies par l'utilisateur. Cela permet de stocker temporairement les valeurs des champs de
saisie jusqu'à ce qu'elles soient utilisées.

L'utilité de state dans ce code permet de stocker et de gérer les valeurs des variables
"username" et "password" qui sont utilisées dans le formulaire de connexion :
La variable "username" est mise à jour avec la valeur du champ de texte lorsqu'elle est modifiée
par l'utilisateur ;

La variable "password" est mise à jour avec la valeur du champ de texte du mot de passe
lorsqu'elle est modifiée par l'utilisateur.