React in Apex - doag.org · © VERBUND AG, React in Apex Mit React zu noch besseren Apex Apps...

© VERBUND AG, www.verbund.com

React in ApexMit React zu noch besseren Apex Apps

Martin Schumacher, Apex Connect 2018

© VERBUND AG, www.verbund.com Seite24.4.2018 [email protected], Twitter: @mschuApex

Demo 1: React Komponente in IG Report Column

Intro

mailto:[email protected]


Demo 2: Eine komplette Apex Seite als React Komponente

Intro



Demo 2: Eine komplette Apex Seite als React Komponente

Intro

Die Apex Felder dienen hier zur zwei Wege Kommunikation mit der React Komponente



React

https://reactjs.org/



React

Komponenten JSX Shadow DOM

State <component>

</component>

render()

Props className="..."

componentDidMount() { javascript }

Programmierer kümmert sich um die Inhalte,

React um das rendern



Aufsetzen der Arbeitsumgebung

Arbeitsumgebung

Node.js VSCode

https://github.com/facebook/create-react-app



Installation create-react-app und Erstellung erstes Projekt

Arbeitsumgebung



Debugging

VSCode

VSCodePer Wizard Chrome als

Debugger eintragen



VSCode



Einbau React in Apex

Einbau der React Komponente in Apex

Einmal auf Seite per DIV ID

Mehrmals per DIV class




Kommunikation zwischen Apex und React

Apex übergibt an React:

Über Attribute der DIV beim Rendern





React liest und schreibt aus Apex:

Über die $v und $s Funktionen von Apex





Apex ruft eine Funktion von React auf:






Direkt






Über Events und Eventhandler






Direkt oder über Events und Eventhandler

Direkter Aufruf schnell gemacht,

Events sind die bessere Lösung,

wenn sie für mehrere Komponenten

verwendet werden können



Apex Komponenten in React nachbauen


1. Apex Seite als Mockup erstellen

2. Apex Html analysieren

3. React Komponenten erstellen,

die das HTML von Apex nachbauen

4. Komponenten mit Properties (Label, …) versehen

5. State liegt in der obersten App-Komponente


© VERBUND AG, www.verbund.com Seite

6. Change Events rufen mittels Props übergebene

Funktionen der obersten Komponente auf

7. State wird über diese Funktionen geändert

8. React holt sich Detaildaten über REST Calls

9. Apex übernimmt die Daten von React in Hidden Fields

24.4.2018 [email protected], Twitter: @mschuApex





Blick in den CodeApex React Komponenten




CodebeispielApexButton.js



React in Apex - doag.org · © VERBUND AG, React in Apex Mit React zu noch besseren Apex Apps...

Documents

Transcript of React in Apex - doag.org · © VERBUND AG, React in Apex Mit React zu noch besseren Apex Apps...