reactjs

Au lancement d’une application react, via la commande npm start, il se peut que le port 3000 (port par défaut) soit déjà pris par un autre process.

Libérer le port via command DOS.

Dans un premier temps, identifier (via les commandes netstate, et findstr) le processus qui occupe le port (on relève son identifiant PID), ensuite lancer la commande taskill pour libérer le port.

C:>netstat -ano | findstr :3000
Sortie
TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING 12345

Suppression du PID
tskill 12345

Exemple avec l’événement onClick d’un bouton

Imaginons qu’en cliquant sur notre bouton, un compteur s’incrémente et s’affiche à l’écran.

Pour cela, on va assigner à l’event onClick, une fonction qu’on nommera handleIncrement. L’appel de la fonction handleIncrement ne peut pas être paramétrée.

Autrement dit, on ne peut pas écrire

<button onClick={this.handleIncrement(number)}>INCREMENT</button>

Pour passer un paramètre à la fonction (handleIncrement(number)), 2 solutions :

I Hack

Écrire une fonction sans argument, qu’on va nommer doHandleIncrement. Dans le corps de cette fonction appeler la fonction avec argument.

handleIncrement = (number) => this.setState({ count: this.state.count + number });

doHandleIncrement = ()=>{
this.handleIncrement(number)
}

<button onClick={this.doHandleIncrement}>INCREMENT</button>

II Meilleur solution

Ecrire ‘inline’ la fonction dont le corp possède la fonction avec argument.

De cette manière on évite de ré-écrire à chaque fois une fonction non paramétrée qui encapsule la fonction paramétrée.

handleIncrement = (number) => this.setState({ count: this.state.count + number });

<button onClick={()=>this.handleIncrement(number)}>INCREMENT</button>