Page Comparison

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

language	html

//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.

...

Versions Compared

Old Version 2

New Version Current

Key

CMPv1 Implementation

CMPv2 Implementation (Dieser ist eher einfach gehalten)