LabEx
EntrarJunte-se

Link de Telefone Chamável

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, aprenderemos como criar um link de telefone chamável em React usando o protocolo tel:. Este link permite que os usuários liguem para um número de telefone diretamente de seus dispositivos com apenas um clique. Ao final deste laboratório, você será capaz de implementar este recurso em suas próprias aplicações React, aprimorando sua usabilidade e acessibilidade.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 94%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Para criar um link que liga para um número de telefone, use o componente Callto. Este componente cria um elemento <a> com um atributo href apropriado. Para renderizar o link, especifique o número de telefone usando a prop phone e o texto do link usando a prop children.

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

Para usar o componente Callto, chame o método ReactDOM.render() e passe o elemento Callto com as props phone e children definidas.

ReactDOM.render(
  <Callto phone="+302101234567">Ligue para mim!</Callto>,
  document.getElementById("root")
);

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Link de Telefone Chamável. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.