Um método para escrever um widget que pode ser usado tanto dentro do Experience Builder quanto em um aplicativo React comum.<\/EM><\/P><\/P>Ao construir um widget personalizado para o Experience Builder, se seu objetivo principal é usar o widget dentro do Experience Builder, construí-lo diretamente usando os fluxos de trabalho padrão<\/A> é a melhor e mais rápida maneira de ter sucesso.<\/P><\/P>Mas e se você precisar criar um widget que funcione tanto em um aplicativo React simples quanto<\/EM> dentro do Experience Builder? Com um pouco de trabalho extra além dos fluxos de trabalho padrão, você pode escrever um componente React (widget) que pode ser incluído em ambos os lugares!<\/P><\/P>Um método para fazer isso é:<\/P>Use TSDX<\/A> para criar e desenvolver um Componente React.<\/LI>npm install<\/CODE> o Componente na pasta client<\/CODE> do Experience Builder.<\/LI>Crie um novo widget personalizado do Experience Builder. Dentro deste widget, importe e use o Componente React que você criou.<\/LI><\/OL><\/P>Bastante simples na teoria. Na prática, pode ficar um pouco complexo, então vou detalhar os passos abaixo.<\/P><\/P>
<\/P>
Mas e se você precisar criar um widget que funcione tanto em um aplicativo React simples quanto<\/EM> dentro do Experience Builder? Com um pouco de trabalho extra além dos fluxos de trabalho padrão, você pode escrever um componente React (widget) que pode ser incluído em ambos os lugares!<\/P><\/P>Um método para fazer isso é:<\/P>Use
npm install<\/CODE> o Componente na pasta client<\/CODE> do Experience Builder.<\/LI>Crie um novo widget personalizado do Experience Builder. Dentro deste widget, importe e use o Componente React que você criou.<\/LI><\/OL><\/P>Bastante simples na teoria. Na prática, pode ficar um pouco complexo, então vou detalhar os passos abaixo.<\/P><\/P>
client<\/CODE> do Experience Builder.<\/LI>Crie um novo widget personalizado do Experience Builder. Dentro deste widget, importe e use o Componente React que você criou.<\/LI><\/OL><\/P>Bastante simples na teoria. Na prática, pode ficar um pouco complexo, então vou detalhar os passos abaixo.<\/P><\/P>
npx tsdx create
example<\/CODE> que você pode usar para ver seu componente no contexto de uma aplicação exemplo durante o desenvolvimento. Durante o desenvolvimento, normalmente você executará npm start<\/CODE> tanto no diretório raiz (para construir o widget) quanto também npm start<\/CODE> dentro do diretório example<\/CODE> para rodar o app e ver a saída do componente.<\/P><\/P>
npm start<\/CODE> tanto no diretório raiz (para construir o widget) quanto também npm start<\/CODE> dentro do diretório example<\/CODE> para rodar o app e ver a saída do componente.<\/P><\/P>
npm start<\/CODE> dentro do diretório example<\/CODE> para rodar o app e ver a saída do componente.<\/P><\/P>
example<\/CODE> para rodar o app e ver a saída do componente.<\/P><\/P>
Thing<\/CODE>. A primeira alteração que faço é exportar o componente como exportação padrão para que a importação fique mais limpa depois. Então faça essas alterações<\/STRONG><\/A> em my-widget\\src\\index.tsx<\/CODE> e my-widget\\example\\index.tsx<\/CODE>. Depois de executar npm start<\/CODE> tanto no diretório raiz quanto no diretório example<\/CODE>, e acessar http:\/\/localhost:1234<\/A>, você deverá conseguir ver seu componente funcionando (apenas uma linha de texto):<\/P><\/P><\/P><\/P>
my-widget\\src\\index.tsx<\/CODE> e my-widget\\example\\index.tsx<\/CODE>. Depois de executar npm start<\/CODE> tanto no diretório raiz quanto no diretório example<\/CODE>, e acessar
my-widget\\example\\index.tsx<\/CODE>. Depois de executar npm start<\/CODE> tanto no diretório raiz quanto no diretório example<\/CODE>, e acessar
npm start<\/CODE> tanto no diretório raiz quanto no diretório example<\/CODE>, e acessar
example<\/CODE>, e acessar
npm install<\/CODE> o Componente no Experience Builder<\/H2>Agora você tem um Componente React rodando em um App React (é isso que está rodando em http:\/localhost:1234<\/A><\/CODE> acima), então vamos mostrar nosso Componente dentro do Experience Builder.<\/P><\/P>Primeiro, instale o Experience Builder conforme as instruu0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000guide aqui.\/
http:\/localhost:1234<\/A><\/CODE> acima), então vamos mostrar nosso Componente dentro do Experience Builder.<\/P><\/P>Primeiro, instale o Experience Builder conforme as instruu0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000u0000guide aqui.\/
Primeiro, instale o Experience Builder conforme as
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
