Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

React wird meist als "View"-Komponente in der MVC-Architektur verwendet, in der die Benutzeroberfläche aktualisiert werden kann, ohne zum Server zurückzugehen, um eine neue Ansicht zu erhalten.

Um ein neues React-Projekt zu erstellen, führen Sie im System Folgendes aus:

...

Um die neu erstellte App auszuführen, gehen Sie auf dem Endgerät in das Verzeichnis my-app und führen dort aus:

Code Block
npm start

...

Wir gehen davon aus, dass Sie node.js auf Ihrem Computer installiert haben

...

.

...

CMPv1 Implementation

  • Öffnen Sie index.html im öffentlichen Verzeichnis

  • Fügen Sie das folgende Skript in den <head>-Tag ein:

    Code Block
    languagehtml
    //Change 'xxxxxx' to your settingsID
    <script>
       window.["usercentrics"] = {
        settingsId: 'xxxxxx',
      };   window["usercentrics"] = {
        paths: {settingsVersionOverwrite: 'preview',
      };
    </script>
    <script  "bundle": type="application/javascript" src="https://app.usercentrics.eu/latest/bundlemain.js",
        },
        settingsIds: 'xxxxxx',
        settingsVersionOverwrite: 'preview',
      };
    </script>
     async></script>
  • Dann speichern, der localhost wird neu geladen und lädt in die Seite die bundle.js.

...

CMPv2 Implementation (Dieser ist eher einfach gehalten)

  • Öffnen Sie index.html innerhalb des öffentlichen Verzeichnisses

  • Fügen Sie das folgende Skript in den <head>-Tag ein:

    Code Block
    //Change 'xxxxxx' to your settingsID
    
    //Normal Bundle
    <script id="usercentrics-cmp" data-settings-id="xxxxxxXXXXXXXX" src="https://app.usercentrics.eu/browser-ui/latest/bundleloader.js" data-tcf-enabled></script>
    
    //Legacy Bundle
    <script id="usercentrics-cmp" data-settings-id="xxxxxx" src="https://app.usercentrics.eu/browser-ui/latest/bundle_legacy.js" defer>< async></script>
  • Dann speichern, der localhost wird neu geladen und lädt in die Seite die bundle.js. 

...

Weitere Hilfe benötigt?

Wie bekomme ich Hilfe bei technischen Fragen?

...