© 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 2Martin.Schumacher@verbund.com, Twitter: @mschuApex

Demo 1: React Komponente in IG Report Column

Intro

© VERBUND AG, www.verbund.com Seite24.4.2018 3Martin.Schumacher@verbund.com, Twitter: @mschuApex

Demo 1: React Komponente in IG Report Column

Intro

© VERBUND AG, www.verbund.com Seite24.4.2018 4Martin.Schumacher@verbund.com, Twitter: @mschuApex

Demo 2: Eine komplette Apex Seite als React Komponente

Intro

© VERBUND AG, www.verbund.com Seite24.4.2018 5Martin.Schumacher@verbund.com, Twitter: @mschuApex

Demo 2: Eine komplette Apex Seite als React Komponente

Intro

© VERBUND AG, www.verbund.com Seite24.4.2018 6Martin.Schumacher@verbund.com, Twitter: @mschuApex

Demo 2: Eine komplette Apex Seite als React Komponente

Intro

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

© VERBUND AG, www.verbund.com Seite24.4.2018 7Martin.Schumacher@verbund.com, Twitter: @mschuApex

React

https://reactjs.org/

© VERBUND AG, www.verbund.com Seite24.4.2018 8Martin.Schumacher@verbund.com, Twitter: @mschuApex

React

Komponenten JSX Shadow DOM

State <component>

</component>

render()

Props className="..."

componentDidMount() { javascript }

Programmierer kümmert sich um die Inhalte,

React um das rendern

© VERBUND AG, www.verbund.com Seite24.4.2018 9Martin.Schumacher@verbund.com, Twitter: @mschuApex

Aufsetzen der Arbeitsumgebung

Arbeitsumgebung

Node.js VSCode

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

© VERBUND AG, www.verbund.com Seite24.4.2018 10Martin.Schumacher@verbund.com, Twitter: @mschuApex

Installation create-react-app und Erstellung erstes Projekt

Arbeitsumgebung

© VERBUND AG, www.verbund.com Seite24.4.2018 11Martin.Schumacher@verbund.com, Twitter: @mschuApex

Debugging

VSCode

VSCodePer Wizard Chrome als

Debugger eintragen

© VERBUND AG, www.verbund.com Seite24.4.2018 12Martin.Schumacher@verbund.com, Twitter: @mschuApex

VSCode

© VERBUND AG, www.verbund.com Seite24.4.2018 13Martin.Schumacher@verbund.com, Twitter: @mschuApex

VSCode

© VERBUND AG, www.verbund.com Seite24.4.2018 14Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

Einbau der React Komponente in Apex

Einmal auf Seite per DIV ID

Mehrmals per DIV class

© VERBUND AG, www.verbund.com Seite24.4.2018 15Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

Einbau der React Komponente in Apex

Einmal auf Seite per DIV ID

Mehrmals per DIV class

© VERBUND AG, www.verbund.com Seite24.4.2018 16Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

© VERBUND AG, www.verbund.com Seite24.4.2018 17Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

Kommunikation zwischen Apex und React

Apex übergibt an React:

Über Attribute der DIV beim Rendern

© VERBUND AG, www.verbund.com Seite24.4.2018 18Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

Kommunikation zwischen Apex und React

React liest und schreibt aus Apex:

Über die $v und $s Funktionen von Apex

© VERBUND AG, www.verbund.com Seite24.4.2018 19Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

Kommunikation zwischen Apex und React

Apex ruft eine Funktion von React auf:

© VERBUND AG, www.verbund.com Seite24.4.2018 20Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

Kommunikation zwischen Apex und React

Apex ruft eine Funktion von React auf:

Direkt

© VERBUND AG, www.verbund.com Seite24.4.2018 21Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

Kommunikation zwischen Apex und React

Apex ruft eine Funktion von React auf:

Über Events und Eventhandler

© VERBUND AG, www.verbund.com Seite24.4.2018 22Martin.Schumacher@verbund.com, Twitter: @mschuApex

Einbau React in Apex

Kommunikation zwischen Apex und React

Apex ruft eine Funktion von React auf:

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

© VERBUND AG, www.verbund.com Seite24.4.2018 23Martin.Schumacher@verbund.com, Twitter: @mschuApex

Apex Komponenten in React nachbauen

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 24Martin.Schumacher@verbund.com, Twitter: @mschuApex

Apex Komponenten in React nachbauen

Apex Komponenten in React nachbauen

© VERBUND AG, www.verbund.com Seite

Blick in den CodeApex React Komponenten

24.4.2018 25Martin.Schumacher@verbund.com, Twitter: @mschuApex

© VERBUND AG, www.verbund.com Seite

CodebeispielApexButton.js

24.4.2018 26Martin.Schumacher@verbund.com, Twitter: @mschuApex