Lien téléphonique appelable

Introduction

Dans ce laboratoire, nous allons apprendre à créer un lien téléphonique appelable dans React en utilisant le protocole tel:. Ce lien permet aux utilisateurs d'appeler un numéro de téléphone directement depuis leur appareil en cliquant simplement. À la fin de ce laboratoire, vous serez capable de mettre en œuvre cette fonctionnalité dans vos propres applications React, améliorant leur ergonomie et leur accessibilité.

Lien téléphonique appelable

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Pour créer un lien qui appelle un numéro de téléphone, utilisez le composant Callto. Ce composant crée un élément <a> avec un attribut href approprié. Pour afficher le lien, spécifiez le numéro de téléphone à l'aide de la propriété phone et le texte du lien à l'aide de la propriété children.

const Callto = ({ phone, children }) => {
  return <a href={`tel:${phone}`}>{children}</a>;
};

Pour utiliser le composant Callto, appelez la méthode ReactDOM.render() et passez l'élément Callto avec les propriétés phone et children définies.

ReactDOM.render(
  <Callto phone="+302101234567">Appelez-moi!</Callto>,
  document.getElementById("root")
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Lien téléphonique appelable. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.