Erstellen Sie eine Preact -App mit Authentifizierung

Dieser Artikel wurde ursprünglich im Okta Developer Blog veröffentlicht. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

reags ist eine schnelle und leichte Bibliothek, die zu einer schnellen Einführung des Spa-Ökosystems (Single-Page-App) geführt hat. Preact ist eine noch leichtere und schnellere Alternative zum Reaktieren und wiegt bei einem massiven 3 KB! Für weniger komplexe Anwendungen kann es eine gute Wahl sein.

In diesem Tutorial erstellen Sie eine grundlegende Preact-Anwendung mit ein paar Seiten und der Benutzerauthentifizierung mit dem Okta-Anmeldet-Widget.

Key Takeaways

• Verwenden Sie Preactcli, um eine neue Vorwirkungsanwendung effizient zu senken und ihre Kompatibilität mit einigen React -Plugins zu nutzen und gleichzeitig ein leichteres, schnelleres Framework zu genießen.
• Integrieren Sie die Benutzerauthentifizierung in Ihre Preact-App mit dem Okta-Anmelde-Widget, um den Prozess der Verwaltung von Benutzersitzungen und Sicherheit zu vereinfachen.
• Implementieren von Komponenten höherer Ordnung (HOCs) für die Authentifizierung zur Verwaltung von Benutzeranmeldeszuständen und dem Schutz von Routen in Ihrer Vorwirkungsanwendung effektiv.
• Verwenden Sie den Router und die benutzerdefinierten Umleitungskomponenten von Preact, um Navigation und Routenschutz zu behandeln, und stellen Sie sicher, dass die Benutzer anhand ihres Authentifizierungsstatus angemessen gerichtet sind.
• Aktualisieren Sie verschiedene Komponenten, wie z.

Bootstrap Ihre App mit Preactcli

Um Ihr Projekt zu starten, installieren Sie die Preactcli mit NPM.

npm install -g preact-cli

Sobald Sie die CLI installiert haben, führen Sie den Befehl aus, um eine Basisvorwirkung zu erstellen:

preact create okta-preact-example

Dieser Befehl tuckert ein paar Minuten Gerüst mit einer grundlegenden Preact -App und installiert alle Abhängigkeiten. Sobald dies erledigt ist, sollten Sie eine Reihe von Informationen über die Befehlszeile sehen, die Sie darüber informieren, was Sie als nächstes tun können.

in das Anwendungsverzeichnis wechseln.

cd okta-preact-example

Dann starten Sie die Anwendung, nur um sicherzustellen, dass alles wie erwartet funktioniert.

npm start

Sie sollten einen schnellen Build -Lauf sehen, und der Bildschirm wird klargestellt und Ihnen zeigen, dass die Anwendung unter http: // localhost: 8080 ausgeführt wird. Wenn Sie diese URL in Ihrem Browser öffnen, sollten Sie eine solche Seite sehen:

Einige Dinge, die über Preactcli

beachten müssen,

Obwohl die von Preactcli-generierte App eine React-App aussieht, die durch Create-React-App erzeugt wird und Sie sogar einige der React-Plugins (wie React-Router) in Ihrer Preact-Anwendung verwenden können, gibt es einige wichtige Unterschiede.

Zum Beispiel gibt es im Gegensatz zum ReactCli keine Möglichkeit, die Webpack -Konfiguration auszuwerfen. Stattdessen ermutigt PREACT Entwickler, WebPack durch das Erstellen einer Datei namens Preact.config.js anzupassen, wobei die Webpack -Konfigurationshelper von PREACT und Exportfunktionen zur Änderung der Art und Weise, wie sich Webpack verhält, ändern.

Obwohl die Preactcli sagt, dass die Anwendung unter http://0.0.0.0:8080 ausgeführt wird, verwenden Sie http: // localhost: 8080. Es ist dasselbe und wenn Sie Ihre Anwendung im Okta -Dashboard einrichten, setzen Sie http: // localhost: 8080 als Basis -URL und Callback -URL. >

Erstellen Sie Ihre Okta -Anwendung

Jetzt, da Sie die grundlegende Shell einer Anwendung haben, ist es Zeit, die Benutzerauthentifizierung hinzuzufügen. Wenn Sie noch keinen haben, erstellen Sie bei Okta ein kostenloses (für immer) Konto.

Sobald Sie ein Konto erstellt haben, gehen Sie zum Administrator -Dashboard und klicken Sie im Menü Seiten auf "Anwendungen". Klicken Sie dann auf die Schaltfläche „Grüne Anwendung hinzufügen“ und dann die Schaltfläche „Neue App erstellen“, damit Sie ein modales Fenster wie:

sehen

Wählen Sie "Spa" aus den Plattform -Schaltflächen. Klicken Sie auf die Schaltfläche „Weiter“, um Ihre Anwendung zu erstellen.

Auf diese Weise führt Sie zu einem Bildschirm zur Seite "Anwendungseinstellungen" des Assistenten für Anwendungsassistenten. Geben Sie "oktapreactexample" in das Feld Anwendungsname ein und fügen Sie http: // localhost: 8080 als Basis -URI und als Login -Umleitungs -URI hinzu. Wenn Sie fertig sind, sollte Ihr Formular so aussehen:

Sie müssen einen Benutzer erstellen (wenn Sie noch keine haben) und diese auch Ihrer neuen Anwendung ihm zuweisen. Oder Sie können sich mit den Anmeldeinformationen anmelden, mit denen Sie sich in Ihrem OKTA -Konto anmelden (dem Administratorbenutzer).

Installieren Sie das Okta -Zeichen in Widget

Der einfachste Weg, um die Authentifizierung von Okta in Ihre neue Preact-Anwendung zu bringen, besteht darin, das Anmeldewidget von Okta zu verwenden. Sie installieren es mit NPM mit:

npm install -g preact-cli

Sie müssen auch Preact-Router mit:

installieren

preact create okta-preact-example

Fügen Sie eine Auth-Komponente höherer Ordnung

hinzu

Mit diesem erledigt müssen Sie jetzt einige Komponenten höherer Ordnung hinzufügen, um die Authentifizierung zu unterstützen.

Fügen Sie eine Datei mit dem Namen auth.js im Ordner /src /lib und fügen Sie den folgenden Code hinzu:

cd okta-preact-example

In der ersten Codezeile können Sie etwas anderes erkennen. Das H -Modul in Preact verwandelt JSX in DOM -Elemente. Normalerweise würde React die React -Bibliothek verwenden, um React.Createelement -Anweisungen zu erzeugen, um DOM -Elemente aus JSX zu erstellen. Preact verwendet die H -Bibliothek, um so etwas wie H ('Div', {Klasse: 'etwas'}, 'Inhalt') zu machen, um dies zu tun.

Als nächstes haben Sie die Route vom Preact-Router direkt unter dem H-Import importiert. Dies wird von Preact verwendet, um die Weiterleitungen in der Anmeldefunktion durchzuführen. Beachten Sie, dass die Auth -Klasse nur eine reguläre Funktion ist und die Komponente nicht erweitert. Im Konstruktor wurden die internen Funktionen mit diesem Kontext aus der Auth -Klasse gebunden.

Geben Sie dann Ihre OKTA-Organisations-URL- und Client-ID in die Okta-Anmelde-Widget-Konfiguration ein. Ihre Organisations-URL ist die URL, die Sie verwenden, wenn Sie sich in Ihrem OKTA-Konto anmelden (z. B. http://dev-12345.oktapreview.com). Registerkarte "Registerkarte" für Ihre Anwendung (offensichtlich wird Ihre nicht verschwommen):

Sie möchten auch die Recirecturi -Eigenschaft in http: // localhost: 8080 ändern, da der Preact Port 8080 anstelle von 3000 für normale React -Apps verwendet.

Die Anmeldungsfunktion leitet einfach den Benutzer zur Anmeldeseite, während die Abmeldefunktion die im Widget -Token -Manager gespeicherten Token löscht, die Anmeldung auf dem Widget aufruft und den Benutzer zum Stammerwalt der Anwendung umleitet.

Schließlich wird ein Singleton der Auth -Klasse erstellt, um von allen Komponenten gemeinsam genutzt zu werden, und wird als Requisite als Auth genannt an eine beliebige Komponente übergeben, die Sie mit auth einwickeln.

Erstellen Sie einen Widget -Wrapper

Erstellen Sie eine Datei in Ihrem /src /lib -Ordner namens oktasigninwidget.js. Geben Sie den Code für diese Komponente ein:

npm install -g preact-cli

Hier macht die KomponentDidmount-Methode das Okta-Anmelde-Widget in der DIV in Ihrer Render-Methode, und die Komponentiermount-Funktion entfernt das Widget.

In der Render-Methode gibt es einen seltsam aussehenden Code. Auf diese Weise können Sie eine Referenz auf das aktuelle Element in eine Variable namens WidgetContainer einstellen und diese dann im componentDidmount as this.widgetContainer verwenden. Ordentlich, oder? Vielen Dank an Matt Raible, dass Sie mir diesen Trick gezeigt haben!

Erstellen Sie eine Weiterleitungskomponente

Der React-Router enthält eine Umleitungskomponente, aber der Preact-Router nicht, sodass Sie eine benötigen. Zum Glück ist es einfach, Ihre eigenen zu erstellen. Erstellen Sie in Ihrem /src /lib -Ordner eine Datei namens redirect.js und fügen Sie den folgenden Code hinzu:

preact create okta-preact-example

Dies ist nur eine Komponente, die basierend auf einer URL, die an sie weitergegeben wurde, umleitet. In diesem Fall wird die Verwendung mit dem Mechanismus "Fenster.location" umgeleitet, hauptsächlich, weil Sie die Seite aktualisieren möchten. Sie können auch die Route (this.props.to.PathName) verwenden und den Router von Preact den Benutzer umleiten lassen.

Erstellen Sie eine Anmeldekomponente

Erstellen Sie als nächstes einen Anmeldeordner in SRC/Routen. Erstellen Sie in diesem Ordner eine Index.js -Datei und eine style.css -Datei. Dies folgt nur zusammen mit der Art und Weise, wie die Preact CLI Komponenten erstellt.

Erstellen Sie in der Datei index.js eine Anmeldekomponente, die in die WithAuth -Komponente eingewickelt ist. Erstens durch Importieren der benötigten Module:

npm install -g preact-cli

Starten Sie die Komponente, indem Sie in die zuvor erstellte Komponente höherer Ordnung einwickeln, und legen Sie den Anfangszustand fest. Hier haben Sie den RedirectTorferrer standardmäßig auf False eingestellt.

preact create okta-preact-example

In der Komponentiermount -Lebenszyklusfunktion verdrahten Sie die Onsuccess- und OnError -Funktionen und erstellen Sie sie in Ihrer Komponente.

cd okta-preact-example

Sie werden feststellen, dass Ihre Komponente die Handhabung der Authentifizierung an die Komponente höherer Ordnung übergibt. Dies ist ein Hauptbeispiel für die Vorteile von Komponenten höherer Ordnung und Zusammensetzung in JavaScript.

Erstellen Sie schließlich die Render -Funktion, mit der die Entscheidung über das Anmeldungs ​​-Widget angezeigt wird, oder, wenn der Benutzer bereits angemeldet ist, sie auf die Startseite umleiten. Sie konnten den Benutzer auch auf die Seite umleiten, auf die sie zu der Anmeldeseite umgeleitet wurden, aber lassen Sie uns das vorerst überspringen.

npm start

Sie werden hier feststellen, dass Preact etwas anders ist, da es Ihnen Griffe zu Requisiten und Status als Parameter für die Renderfunktion gibt. Dieser Code verwendet lediglich die Zerstörung dieser Parameter, um die Verwendung von Ort, Auth und RedirectTorferrer einfach zu erstellen, ohne eine Tonne davon zu haben. {Was auch immer}.

Also deine endgültige /src/routes/login/index.js Datei sieht aus wie:

npm install @okta/okta-signin-widget --save

Aktualisieren Sie die Profilseite

Jetzt, da Sie die Anmeldekomponente haben und das OKTA-Sign-In-Widget verwendet, verwenden Sie die von Ihnen erstellte Auth-Komponente und aktualisieren Sie die Profilseite (in /src/routes/profile/index.js), um Ihnen weitere zu geben Informationen über den Benutzer. So sollte Ihre endgültige Datei Ihre endgültige /src/routes/profile/index.js aussehen:

npm install preact-router --save

Sie haben den Authentifizierungsschutz auf Komponentenebene in der Komponentenfunktion der Komponente hinzugefügt. Wenn der Benutzer authentifiziert ist, ruft er die Funktion GetCurrentuser in der Komponente höherer Ordnung auf und fügt den Benutzer in den Status der Komponente hinzu. In der Renderfunktion geben Sie einfach den Namen und die E -Mail des Benutzers aus.

Aktualisieren Sie die Header -Komponente

Jetzt müssen Sie nur die Routen in Ihre Anwendung einholen und das Menü zum Verknüpfen mit ihnen erhalten. Beginnen Sie mit der Änderung der Datei /src/components/header/index.js in:

import {h} from 'preact';
import { route } from 'preact-router';
import OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
import '@okta/okta-signin-widget/dist/css/okta-theme.css';

class Auth {
  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);

    this.widget = new OktaSignIn({
      baseUrl: 'https://{yourOktaDomain}.com/',
      clientId: '{clientId}',
      redirectUri: 'http://localhost:8080',
      authParams: {
        responseType: ['id_token', 'token'],
        scopes: ['openid', 'email', 'profile']
      }
    });
  }

  isAuthenticated() {
    // Checks if there is a current accessToken in the TokenManger.
    return !!this.widget.tokenManager.get('accessToken');
  }

  getCurrentUser(){
    return this.widget.tokenManager.get('idToken');
  }

  login() {
    // Redirect to the login page
    route('/login/');
  }

  async logout() {
    this.widget.tokenManager.clear();
    await this.widget.signOut();
    location = '/';
  }

  handleAuthentication(tokens) {
    for (let token of tokens) {
      if (token.idToken) {
        this.widget.tokenManager.add('idToken', token);
      } else if (token.accessToken) {
        this.widget.tokenManager.add('accessToken', token);
      }
    }
  }
}

// create a singleton
const auth = new Auth();
export const withAuth = WrappedComponent => props =>
  <wrappedcomponent auth="{auth}"></wrappedcomponent>;

Dies wird die Schaltfläche "Anmeldung" angezeigt, wenn der Benutzer nicht angemeldet ist, und die Schaltfläche „Abmelden“, wenn er es ist. Es wird auch nur das Menüelement "Profil" an die Benutzer angezeigt, die angemeldet sind.

Ändern Sie Ihr Routing

Ändern Sie schließlich die Routen in Ihrer Datei Ihrer /src/components/app.js so, dass Ihre Bewerbung über Ihre neuen Routen und deren Umgang mit ihnen Bescheid weiß. So sieht Ihre neue App.js -Datei aus wie:

import { h, Component } from 'preact';

export default class OktaSignInWidget extends Component {
  componentDidMount() {
    this.widget = this.props.widget;
    this.widget.renderEl({ el: this.widgetContainer }, this.props.onSuccess, this.props.onError);
  }

  componentWillUnmount() {
    this.widget.remove();
  }

  render() {
    return <div ref="{(div)"> { this.widgetContainer = div; }} />
  }
};

<p> Alles, was sich wirklich geändert hat, ist, dass Sie die neu erstellte Anmeldekomponente importiert und die Benutzereigenschaft in die Profilkomponente entfernen und eine neue Route für die Anmeldekomponente hinzugefügt haben. </p>
<h2 id="Führen-Sie-Ihre-neue-Preact-Anwendung-aus"> Führen Sie Ihre neue Preact -Anwendung aus! </h2>
<p> Sie sollten jetzt in der Lage sein, Ihre Arbeit zu speichern und NPM-Start im Root-Ordner auszuführen und eine voll funktionsfähige Preact-Anwendung mit Benutzerauthentifizierung über OKTA! </p> anzusehen
<p> Es gibt viele Ähnlichkeiten zwischen Preact und React, aber es gibt einige wichtige Unterschiede. Preact ist für Anwendungen gedacht, bei denen die Größe des Downloads kleiner Download von entscheidender Bedeutung ist. Es gibt einige schöne Annehmlichkeiten im Preact -Router, aber es fehlen einige Dinge (wie Witrouter). Es gibt auch einige ordentliche Annehmlichkeiten, wie Requisiten und der Zustand an die Renderfunktion übergeben. Alles in allem denke ich, dass Preact ordentlich ist, aber ich konnte wirklich sehen, wie ein vollwertiger Reakt für komplexe Apps benötigt wird. </p>
<h2 id="Erfahren-Sie-mehr"> Erfahren Sie mehr </h2>
<p> Sie können mehr über Preact von ihrer Website und Preact-Router aus dem Github-Repository erfahren. </p>
<p> Sie können auch den vollständigen Code für diesen Artikel aus dem Okta -Entwickler Github Repository erhalten. </p>
<p> Wie immer, wenn Sie Fragen, Kommentare oder Bedenken hinsichtlich des Artikels, dem Code, der Preact oder OKTA haben, können Sie mich per E -Mail an mich wenden oder mich in den Kommentaren oder über Twitter @leebrandt treffen. </p>



<h2 id="häufig-gestellte-Fragen-zum-Erstellen-einer-Preact-App-mit-Authentifizierung"> häufig gestellte Fragen zum Erstellen einer Preact -App mit Authentifizierung </h2>



<h3 id="Was-ist-Preact-und-wie-unterscheidet-es-sich-von-React-Es-ist-so-ausgelegt-dass-es-klein-und-effizient-ist-mit-einer-komprimierten-Größe-von-nur-KB-PREACT-bietet-die-gleiche-moderne-UI-Bibliothek-und-React-Merkmale-wie-virtuelle-DOM-Differenz-und-Komponenten-jedoch-mit-einem-kleineren-Fußabdruck-Es-ist-perfekt-für-mobile-Geräte-auf-denen-Bandbreite-und-Leistung-Probleme-sein-können-Preact-zielt-auch-darauf-ab-in-der-API-so-nahe-wie-möglich-zu-reagieren-sodass-React-Entwickler-mit-minimalen-Anpassungen-anfangen-können-Ein-Vorwirkungsprojekt-ist-unkompliziert-Sie-können-Preact-Cli-verwenden-ein-Befehlszeilen-Tool-mit-dem-Sie-Preact-Projekte-erstellen-und-verwalten-können-Um-es-zu-installieren-müssen-Sie-Node-js-und-NPM-auf-Ihrem-Computer-installieren-lassen-Sobald-Sie-die-Installation-installiert-haben-können-Sie-ein-neues-Projekt-erstellen-indem-Sie-den-Befehl-Preact-erstellen-my-project-ausführen-wobei-My-Project-der-Name-Ihres-Projekts-ist-Dadurch-wird-ein-neues-Verzeichnis-mit-den-Projektdateien-und-Abhängigkeiten-erstellt"> Was ist Preact und wie unterscheidet es sich von React? Es ist so ausgelegt, dass es klein und effizient ist, mit einer komprimierten Größe von nur 3 KB. PREACT bietet die gleiche moderne UI -Bibliothek und -React -Merkmale wie virtuelle DOM -Differenz und Komponenten, jedoch mit einem kleineren Fußabdruck. Es ist perfekt für mobile Geräte, auf denen Bandbreite und Leistung Probleme sein können. Preact zielt auch darauf ab, in der API so nahe wie möglich zu reagieren, sodass React -Entwickler mit minimalen Anpassungen anfangen können. Ein Vorwirkungsprojekt ist unkompliziert. Sie können Preact-Cli verwenden, ein Befehlszeilen-Tool, mit dem Sie Preact-Projekte erstellen und verwalten können. Um es zu installieren, müssen Sie Node.js und NPM auf Ihrem Computer installieren lassen. Sobald Sie die Installation installiert haben, können Sie ein neues Projekt erstellen, indem Sie den Befehl Preact erstellen my-project ausführen, wobei "My-Project" der Name Ihres Projekts ist. Dadurch wird ein neues Verzeichnis mit den Projektdateien und Abhängigkeiten erstellt. </h3> <p> Wie füge ich meiner Preact -App Authentifizierung hinzu? Zunächst müssen Sie die erforderlichen Bibliotheken installieren und importieren, z. Anschließend müssen Sie ein Anmeldeformular und einen Authentifizierungsdienst erstellen, der die Anmeldeanforderungen behandelt und die Sitzung des Benutzers verwaltet. Schließlich müssen Sie Ihre Routen schützen, indem Sie prüfen, ob der Benutzer vor dem Rendern der geschützten Komponenten authentifiziert ist. </p>
<h3> Wie gehe ich mit dem Routing in Preact aus? Es ist ein einfacher und kleiner Router, der die API des Browser -Verlaufs verwendet. Um es zu verwenden, müssen Sie es über NPM installieren und in Ihr Projekt importieren. Anschließend können Sie Ihre Routen mithilfe der Komponenten <router> und <route> definieren. Jede <route> -Komponente repräsentiert eine Seite und hat eine 'Pfad', die der URL entspricht. Status “, um Daten zu verwalten. Requisiten werden von ihren übergeordneten Komponenten übergeben, während der Status innerhalb der Komponenten verwaltet wird. Das staatliche Management von Preact ähnelt der von React. Sie können die Methode this.setState () verwenden, um den Status zu aktualisieren und die Komponente neu zu rendern. Für das komplexe Zustandsmanagement können Sie Bibliotheken wie Redux oder MOBX verwenden. </route></route></router>
</h3> <p> Wie verwende ich Hooks in Preact? ohne eine Klasse zu schreiben. Um Hooks in Preact zu verwenden, müssen Sie sie aus „Preact/Hooks“ importieren. Die Hooks -API in Preact ist die gleiche wie in React, sodass Sie Haken wie Usestate, UseEffect und Usecontext auf die gleiche Weise verwenden können. </p> <h3 id="Wie-teste-ich-meine-Preact-App-Kann-Ihre-Preact-App-mit-Testbibliotheken-und-Frameworks-wie-Scherz-und-Enzym-testen-Jest-ist-ein-JavaScript-Test-Framework-das-gut-mit-Preact-funktioniert-während-Enzym-ein-Testdienstprogramm-für-React-ist-das-auch-mit-Preact-verwendet-werden-kann-Sie-können-auch-Preact-Test-Utils-verwenden-eine-Bibliothek-die-Helferfunktionen-zum-Testen-von-Preact-Komponenten-bereitstellt-Plattformen-wie-Netlify-Vercel-und-Github-Seiten-Um-bereitzustellen-müssen-Sie-Ihre-App-für-die-Produktion-erstellen-indem-Sie-den-Befehl-npm-run-build-ausführen-Dadurch-wird-mit-Ihrer-kompilierten-App-ein-Build-Verzeichnis-erstellt-Dann-können-Sie-dieses-Verzeichnis-auf-Ihrer-ausgewählten-Hosting-Plattform-bereitstellen"> Wie teste ich meine Preact -App? Kann Ihre Preact -App mit Testbibliotheken und Frameworks wie Scherz und Enzym testen. Jest ist ein JavaScript -Test -Framework, das gut mit Preact funktioniert, während Enzym ein Testdienstprogramm für React ist, das auch mit Preact verwendet werden kann. Sie können auch Preact-Test-Utils verwenden, eine Bibliothek, die Helferfunktionen zum Testen von Preact-Komponenten bereitstellt. Plattformen wie Netlify-, Vercel- und Github -Seiten. Um bereitzustellen, müssen Sie Ihre App für die Produktion erstellen, indem Sie den Befehl npm run build ausführen. Dadurch wird mit Ihrer kompilierten App ein "Build" -Verzeichnis erstellt. Dann können Sie dieses Verzeichnis auf Ihrer ausgewählten Hosting -Plattform bereitstellen. </h3> <p> Wie optimiere ich meine Preact -App für die Leistung? Dinge, die Sie tun können, um Ihre App noch schneller zu machen. Dies beinhaltet Code-Splitting, faule Ladekomponenten und Optimierung von Bildern und anderen Assets. Sie können auch PREACT-Lebenszyklus-Methode verwenden, um unnötige Wiederherstellungen zu verhindern. Komponenten in Ihrer Preact-App dank 'Preact-compat', einer dünnen Schicht gegenüber Preact, die versucht, mit React eine 100% ige Kompatibilität zu erreichen. Dies bedeutet, dass Sie mit minimalen Änderungen Ihres Codes von reagieren können. Aufgrund der geringen Größe der Präaktionen werden jedoch einige Merkmale von React nicht außerhalb des Boxs unterstützt. </p>
</div>

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Preact -App mit Authentifizierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!