Een methode om een widget te schrijven die zowel binnen Experience Builder als in een gewone React-app kan worden gebruikt.<\/EM><\/P><\/P>Wanneer je een aangepaste widget bouwt voor Experience Builder, is het, als je primaire doel is om de widget binnen Experience Builder te gebruiken, het beste en snelste om deze direct te bouwen met behulp van de standaard workflows<\/A>.<\/P><\/P>Maar wat als je een widget moet maken die werkt in zowel een gewone React-app en<\/EM> binnen Experience Builder? Met een beetje extra werk bovenop de standaard workflows kun je een React-component (widget) schrijven die op beide plaatsen kan worden opgenomen!<\/P><\/P>Een methode om dit te doen is:<\/P>Gebruik TSDX<\/A> om een React Component te maken en te ontwikkelen.<\/LI>npm install<\/CODE> de Component in de <CODE>client<\/CODE>-map van Experience Builder.<\/LI><LI>Maak een nieuwe aangepaste Experience Builder-widget. Importeer en gebruik binnen deze widget de React Component die je hebt gemaakt.<\/LI><\/OL><P><\/P><P>In theorie vrij eenvoudig. In de praktijk kan het wat complexer worden, dus ik zal hieronder de details stap voor stap uitleggen.<\/P><P><\/P><H2 id="toc-hId-1824853506" id="toc-hId-1824853506">1. Gebruik TSDX om een React Component te maken<\/H2><P><A href="https:\/\/github.com\/jaredpalmer\/tsdx" rel="nofollow noopener noreferrer" target="_blank">TSDX<\/A> is een "zero-config CLI die je helpt moderne TypeScript [React components] gemakkelijk te ontwikkelen, testen en publiceren." Maak een nieuwe map aan en voer in een terminal uit:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE class="lang-cmd">npx tsdx create <SPAN class="hljs-keyword">my<\/SPAN>-widget cd <SPAN class="hljs-keyword">my<\/SPAN>-widget npm start<\/CODE><\/PRE><BLOCKQUOTE><P>Zorg ervoor dat je "react" kiest als template.<\/P><\/BLOCKQUOTE><P>Dit geeft je een mappenstructuur met ondersteunende bestanden -- dit is de infrastructuur waarbinnen je je widget-functionaliteit kunt bouwen als een React Component. Bekijk de <A href="https:\/\/github.com\/jaredpalmer\/tsdx#quick-start" rel="nofollow noopener noreferrer" target="_blank">TSDX-documentatie<\/A> voor meer details over het ontwikkelen van je component. TSDX wordt geleverd met een "playground" React-app onder de <CODE>example<\/CODE>-map die je kunt gebruiken om je component binnen de context van een voorbeeldapplicatie tijdens ontwikkeling te zien. Tijdens ontwikkeling draai je meestal <CODE>npm start<\/CODE> zowel in de hoofdmap (om de widget te bouwen) als ook in de <CODE>example<\/CODE>-map om de app te draaien en het componentresultaat te zien.<\/P><P><\/P><H3 id="toc-hId--923816960" id="toc-hId--923816960">Aanbevolen wijziging - Default Export<\/H3><P>Standaard exporteert de template een React-component genaamd <CODE>Thing<\/CODE>. De eerste wijziging die ik maak is om het component als default export te exporteren zodat importeren later wat netter gaat. Maak dus <A href="https:\/\/github.com\/gavinr\/the-one-widget-simple\/commit\/15f98def08af0c93f7db62a1dcdcbd82b8e443f9?diff=split" rel="nofollow noopener noreferrer" target="_blank"><STRONG>deze wijzigingen<\/STRONG><\/A> aan in <CODE>my-widget\\src\\index.tsx<\/CODE> en <CODE>my-widget\\example\\index.tsx<\/CODE>. Na het uitvoeren van <CODE>npm start<\/CODE> in zowel de hoofdmap als de <CODE>example<\/CODE>-map, en navigeer naar <A href="http:\/\/localhost:1234" rel="nofollow noopener noreferrer" target="_blank">http:\/\/localhost:1234<\/A>, zou je je werkende component moeten kunnen zien (slechts één regel tekst):<\/P><P><\/P><P><IMG alt="React app" class="jive-emoji image-1 jive-image j-img-original" src="https:\/\/i.imgur.com\/DoDC9Xl.png" \/><\/P><P><IMG alt="" src="https:\/\/community.esri.com\/blog\/react-app.png" \/><\/P><H2 id="toc-hId-1015506880" id="toc-hId-1015506880">2. <CODE>npm install<\/CODE> de Component in Experience Builder<\/H2><P>Nu heb je een React Component die draait in een React App (dat is wat draait op <CODE><A href="http:\/\/localhost:1234" target="_blank" rel="nofollow noopener noreferrer">http:\/\/localhost:1234<\/A><\/CODE> hierboven), laten we verder gaan met het tonen van onze Component binnen Experience Builder.<\/P><P><\/P><P>Eerst installeer je Experience Builder volgens de <A href="https:\/\/developers.arcgis.com\/experience-builder\/guide\/install-guide\/" rel="nofollow noopener noreferrer" target="_blank">instructies hier<\/A>.<\/P><P><\/P><P>Open vervolgens een terminal en ga naar de <CODE>client<\/CODE>-map in de uitgepakte bestanden van Experience Builder. Voer <CODE>npm install <PATH><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code> waar <CODE><PATH><\/> is het lokale pad naar jouw React component. Bijvoorbeeld, als je het commando <CODE>npm tsdx create ...<\/> hebt uitgevoerd op <CODE>C:\code\my-widget<\/> dan voer je uit: <CODE>npm install C:\code\my-widget<\/><br \/></p> <p>(Tip: voeg <code>--no-audit</code toe aan het commando <code>npm install... om het auditen van alle bestanden van Experience Builder over te slaan)
<\/P>
Maar wat als je een widget moet maken die werkt in zowel een gewone React-app en<\/EM> binnen Experience Builder? Met een beetje extra werk bovenop de standaard workflows kun je een React-component (widget) schrijven die op beide plaatsen kan worden opgenomen!<\/P><\/P>Een methode om dit te doen is:<\/P>Gebruik
npm install<\/CODE> de Component in de <CODE>client<\/CODE>-map van Experience Builder.<\/LI><LI>Maak een nieuwe aangepaste Experience Builder-widget. Importeer en gebruik binnen deze widget de React Component die je hebt gemaakt.<\/LI><\/OL><P><\/P><P>In theorie vrij eenvoudig. In de praktijk kan het wat complexer worden, dus ik zal hieronder de details stap voor stap uitleggen.<\/P><P><\/P><H2 id="toc-hId-1824853506" id="toc-hId-1824853506">1. Gebruik TSDX om een React Component te maken<\/H2><P><A href="https:\/\/github.com\/jaredpalmer\/tsdx" rel="nofollow noopener noreferrer" target="_blank">TSDX<\/A> is een "zero-config CLI die je helpt moderne TypeScript [React components] gemakkelijk te ontwikkelen, testen en publiceren." Maak een nieuwe map aan en voer in een terminal uit:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE class="lang-cmd">npx tsdx create <SPAN class="hljs-keyword">my<\/SPAN>-widget cd <SPAN class="hljs-keyword">my<\/SPAN>-widget npm start<\/CODE><\/PRE><BLOCKQUOTE><P>Zorg ervoor dat je "react" kiest als template.<\/P><\/BLOCKQUOTE><P>Dit geeft je een mappenstructuur met ondersteunende bestanden -- dit is de infrastructuur waarbinnen je je widget-functionaliteit kunt bouwen als een React Component. Bekijk de <A href="https:\/\/github.com\/jaredpalmer\/tsdx#quick-start" rel="nofollow noopener noreferrer" target="_blank">TSDX-documentatie<\/A> voor meer details over het ontwikkelen van je component. TSDX wordt geleverd met een "playground" React-app onder de <CODE>example<\/CODE>-map die je kunt gebruiken om je component binnen de context van een voorbeeldapplicatie tijdens ontwikkeling te zien. Tijdens ontwikkeling draai je meestal <CODE>npm start<\/CODE> zowel in de hoofdmap (om de widget te bouwen) als ook in de <CODE>example<\/CODE>-map om de app te draaien en het componentresultaat te zien.<\/P><P><\/P><H3 id="toc-hId--923816960" id="toc-hId--923816960">Aanbevolen wijziging - Default Export<\/H3><P>Standaard exporteert de template een React-component genaamd <CODE>Thing<\/CODE>. De eerste wijziging die ik maak is om het component als default export te exporteren zodat importeren later wat netter gaat. Maak dus <A href="https:\/\/github.com\/gavinr\/the-one-widget-simple\/commit\/15f98def08af0c93f7db62a1dcdcbd82b8e443f9?diff=split" rel="nofollow noopener noreferrer" target="_blank"><STRONG>deze wijzigingen<\/STRONG><\/A> aan in <CODE>my-widget\\src\\index.tsx<\/CODE> en <CODE>my-widget\\example\\index.tsx<\/CODE>. Na het uitvoeren van <CODE>npm start<\/CODE> in zowel de hoofdmap als de <CODE>example<\/CODE>-map, en navigeer naar <A href="http:\/\/localhost:1234" rel="nofollow noopener noreferrer" target="_blank">http:\/\/localhost:1234<\/A>, zou je je werkende component moeten kunnen zien (slechts één regel tekst):<\/P><P><\/P><P><IMG alt="React app" class="jive-emoji image-1 jive-image j-img-original" src="https:\/\/i.imgur.com\/DoDC9Xl.png" \/><\/P><P><IMG alt="" src="https:\/\/community.esri.com\/blog\/react-app.png" \/><\/P><H2 id="toc-hId-1015506880" id="toc-hId-1015506880">2. <CODE>npm install<\/CODE> de Component in Experience Builder<\/H2><P>Nu heb je een React Component die draait in een React App (dat is wat draait op <CODE><A href="http:\/\/localhost:1234" target="_blank" rel="nofollow noopener noreferrer">http:\/\/localhost:1234<\/A><\/CODE> hierboven), laten we verder gaan met het tonen van onze Component binnen Experience Builder.<\/P><P><\/P><P>Eerst installeer je Experience Builder volgens de <A href="https:\/\/developers.arcgis.com\/experience-builder\/guide\/install-guide\/" rel="nofollow noopener noreferrer" target="_blank">instructies hier<\/A>.<\/P><P><\/P><P>Open vervolgens een terminal en ga naar de <CODE>client<\/CODE>-map in de uitgepakte bestanden van Experience Builder. Voer <CODE>npm install <PATH><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code><\/>code> waar <CODE><PATH><\/> is het lokale pad naar jouw React component. Bijvoorbeeld, als je het commando <CODE>npm tsdx create ...<\/> hebt uitgevoerd op <CODE>C:\code\my-widget<\/> dan voer je uit: <CODE>npm install C:\code\my-widget<\/><br \/></p> <p>(Tip: voeg <code>--no-audit</code toe aan het commando <code>npm install...
Nu het geïnstalleerd is, kun je deze Component opnemen in elke aangepaste Experience Builder-widget. Als je nog geen widget hebt, kun je de widget simple kopiëren vanuit client/sample-widgets/simplenaar client/your-extensions/widgetsom mee te beginnen.
simple
client/sample-widgets/simple
client/your-extensions/widgets
Binnen
Binnen client\\your-extensions\\widgets\\simple\\src\\runtime\\widget.tsximporteer jouw component door bovenaan in het bestand een importverklaring toe te voegen:
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
