it-swarm.com.de

Wie füge ich eine React App ein?

Wir bewegen uns in Richtung eines Hybrid-Headless-Modells mit Drupal 7. Alle unsere Daten werden durch RESTful verfügbar gemacht, und ich habe erfolgreich die React App mit den Daten erstellt).

Wie kann diese App als Block eingezogen werden? Ich habe den Code in einen Block eingefügt und die App verliert viel von ihrem Stil und 1 Drittel der Daten ist versteckt. Die Grundfunktionalität funktioniert immer noch, aber das reicht nicht aus.

Gibt es einen Trick, um die vollständige App in einem Block korrekt auszuführen?

Vielen Dank

4
Daniel Lefebvre

Ich habe das wie folgt gelöst:

  1. installieren Sie React-App-Rewired: npm i --D React-App-Rewired - Dies ist wichtig, damit Sie nicht mehr als einmal versuchen, React zu laden

  2. ändern Sie package.json, damit build den React-App-Rewired-Build ausführt - vollständige Anweisungen hier: https://github.com/timarney/react-app-rewired

  3. Wählen Sie einen Platz in Ihrer Drupal Installation für Ihre React App - Ich habe Sites/All/React ausgewählt, es schien mir richtig

  4. laden Sie über die CDN-Links https://reactjs.org/docs/cdn-links.html in Ihre Vorlage

  5. aktualisieren Sie package.json mit der Startseite für Ihre App, um anzuzeigen, wo Sie sie speichern. Beispiel: "Startseite": "/ sites/all/library/myapp /",

  6. erstellen Sie Ihre Reaktions-App und kopieren Sie den Inhalt des Erstellungsordners an den Speicherort, den Sie zum Speichern Ihrer App ausgewählt haben

  7. erstellen Sie ein einfaches Modul, um Ihre App als Block zu laden (Code unten).
  8. fügen Sie den Block Ihrer Seite hinzu, wie Sie es für richtig halten
/* Fügt den Block zum Blockmenü hinzu */
 Funktion my_app_block_info () {
 $ Blocks ['my_react_app'] = array (// ein neues Array für jede neue App 
 'Info' => t ('My React App'), 
 'Cache' => DRUPAL_NO_CACHE, 
); 
 
 $ Blocks zurückgeben; 
} 

/ * setze den Inhalt für den Block * /

 Funktion my_app_block_view ($ delta = '') {
 $ block = array (); 
 switch ($ delta) {
 case 'my_react_app': // ein neuer Fall für jede neue App 
 $ block ['content'] = file_get_contents (library_get_path ('appfolder'). '/ index.html'); 
 
 break; 
} 
 $ block zurückgeben; 
} 
 /* 
   file_get_contents loads the index.html page that loads 
   the react app don't use libraries_get_path if you saved your app 
   somewhere else
 */
3
Daniel Lefebvre