Erstellen Sie eine grundlegende CRUD -App mit Knoten und reagieren Sie

Dieses Tutorial führt Sie durch den Bau eines sicheren React Frontend und Node.js Backend -Anwendung mit Okta zur Authentifizierung. Das Frontend verfügt über eine Homepage und einen Post -Manager, der nur für authentifizierte Benutzer zugänglich ist. Das Backend erzwingt die Authentifizierung für die Erstellung und Bearbeitung nach der Erstellung und Bearbeitung. OpenID Connect (OIDC) von Okta übernimmt die Authentifizierung und nutzt den Okta React SDK am Frontend und den Okta JWT -Verifier im Backend. Der Backend verwendet Express.js, Folge für die Datenmodellierung und Epilog für die Erstellung von REST -API.

Warum reagieren

Die Beliebtheit von

React beruht auf der effizienten virtuellen DOM -Manipulation und ermöglicht schnelle Aktualisierungen. Die Verwendung von JSX, einer Syntax, die HTML innerhalb von JavaScript ermöglicht, vereinfacht die Entwicklung und verbessert die Lesbarkeit im Vergleich zu herkömmlichem JavaScript -Rendering. Dieses Beispiel zeigt die prägnante Syntax von JSX:

const Form = () => (
  <form>
    <label>Name</label><input value="Arthur Dent" />
    <label>Answer to life, the universe, and everything</label><input type="number" value={42} />
  </form>
);

Der äquivalente einfache JavaScript -Code ist signifikant mehr ausführlicher:

const Form = () => React.createElement(
  "form",
  null,
  React.createElement(
    "label",
    null,
    "Name",
    React.createElement("input", { value: "Arthur Dent" })
  ),
  React.createElement(
    "label",
    null,
    "Answer to life, the universe, and everything",
    React.createElement("input", { type: "number", value: 42 })
  )
);

Erstellen der React App

React App creamlines react -Entwicklung erstellen. Installieren Sie es mit:

npm i -g create-react-app@1.5.2 yarn@1.7.0
create-react-app my-react-app
cd my-react-app
yarn start

Dies startet die Standard -App unter http://localhost:3000.

Material UI und Authentifizierung

hinzufügen

Material UI verbessert das Erscheinungsbild der App. Installieren Sie es mit:

yarn add @material-ui/core@1.3.1 @material-ui/icons@1.1.0

public/index.html Roboto -Schrift in

:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

einschließen

.env.local okta vereinfacht sichern die sichere Authentifizierung. Erstellen Sie ein kostenloses Entwicklerkonto und fügen Sie eine einseitige App in Ihre Okta Developer Console hinzu, wobei Ihre Kunden-ID und Ihre Organisations-URL festgestellt werden. Speichern Sie diese in

:

<code>REACT_APP_OKTA_CLIENT_ID={yourClientId}
REACT_APP_OKTA_ORG_URL=https://{yourOktaDomain}</code>

Installieren Sie Oktas React SDK und React Router:

yarn add @okta/okta-react@1.0.2 react-router-dom@4.3.1

src/index.js konfigurieren Sie OKTA in src/App.js und fügen Sie Routing in LoginButton hinzu, um Authentifizierung und Rückrufe zu verarbeiten. Erstellen Sie eine

-Komponente, um die Anmeldungs-/Abmeldefunktionalität zu verwalten. Integrieren Sie diese Schaltfläche in Ihren App -Header.

Erstellen des Node.js Backend

Backend -Abhängigkeiten installieren: <🎜>

const Form = () => (
  <form>
    <label>Name</label><input value="Arthur Dent" />
    <label>Answer to life, the universe, and everything</label><input type="number" value={42} />
  </form>
);

Erstellen Sie einen Server in src/server/index.js. Dadurch wird Express festgelegt, die JWT -Überprüfung mit Okta übernommen, ein Folgenmodell für Beiträge definiert und verwendet Epilog, um REST -Endpunkte zu erstellen. Konfigurieren Sie package.json, um sowohl Frontend als auch Backend gleichzeitig auszuführen.

Hinzufügen des Posts Manager

reagieren Sie das endgültige Formular und die zugehörigen Pakete:

const Form = () => React.createElement(
  "form",
  null,
  React.createElement(
    "label",
    null,
    "Name",
    React.createElement("input", { value: "Arthur Dent" })
  ),
  React.createElement(
    "label",
    null,
    "Answer to life, the universe, and everything",
    React.createElement("input", { type: "number", value: 42 })
  )
);

Erstellen Sie eine PostEditor -Komponente für die Verwaltung einzelner Beiträge und eine PostsManager -Seite, um die Postliste anzuzeigen und zu interagieren. Integrieren Sie diese in Ihr Routing.

Testen und weiteres Lernen

Ausführen yarn start, um die vollständige Anwendung zu testen. Der Quellcode ist unter https://www.php.cn/link/44f455185e5ae730f5e12534aaaa5e02 verfügbar. Erforschen Sie zusätzliche Ressourcen im Okta Developer -Blog für tiefere Tauchgänge in React, Node.js und Okta.

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