Créez une application CRUD de base avec nœud et réagissez

Ce didacticiel vous guide dans la construction d'une application REACT Secure React et Node.js en utilisant OKTA pour l'authentification. Le frontend propose une page d'accueil et un gestionnaire de postes, accessible uniquement aux utilisateurs authentifiés. Le backend applique l'authentification pour la création de post et l'édition. OpenID Connect (OIDC) d'Okta gère l'authentification, tirant parti du SDK Okta React sur le frontend et du vérificateur Okta JWT sur le backend. Le backend utilise Express.js, séquestre pour la modélisation des données et épilogue pour la création de l'API REST rationalisée.

Pourquoi réagir?

La popularité de React découle de sa manipulation efficace DOM virtuelle, permettant des mises à jour rapides. Son utilisation de JSX, une syntaxe permettant le HTML dans JavaScript, simplifie le développement et améliore la lisibilité par rapport au rendu traditionnel JavaScript. Cet exemple démontre la syntaxe concise de JSX:

<code class="language-javascript">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>
);</code>

Le code JavaScript simple équivalent est nettement plus verbeux:

<code class="language-javascript">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 })
  )
);</code>

Construire l'application React

Créer React App Streamlines React Development. L'installez en utilisant:

<code class="language-bash">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</code>

Cela lance l'application par défaut à http://localhost:3000.

Ajout de l'interface utilisateur du matériel et de l'authentification

L'interface utilisateur du matériau améliore l'apparence de l'application. Installez-le avec:

<code class="language-bash">yarn add @material-ui/core@1.3.1 @material-ui/icons@1.1.0</code>

Inclure la police roboto dans public/index.html:

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

Okta simplifie l'authentification sécurisée. Créez un compte de développeur gratuit et ajoutez une application à une seule page dans votre console de développeur OKTA, en notant votre ID client et votre URL de l'organisation. Les stocker dans .env.local:

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

Installez le SDK et le routeur React d'Okta:

<code class="language-bash">yarn add @okta/okta-react@1.0.2 react-router-dom@4.3.1</code>

Configurez Okta dans src/index.js et ajoutez le routage dans src/App.js pour gérer l'authentification et les rappels. Créez un composant LoginButton pour gérer la fonctionnalité de connexion / déconnexion. Intégrez ce bouton dans l'en-tête de votre application.

Construire le backend node.js

Installez les dépendances backend:

<code class="language-javascript">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>
);</code>

Créez un serveur dans src/server/index.js. Cela configure Express, gère la vérification JWT à l'aide d'Okta, définit un modèle séquestre pour les publications et utilise l'épilogue pour créer des points de terminaison de repos. Configurez package.json pour exécuter à la fois le frontend et le backend simultanément.

Ajout du gestionnaire de poteaux

Installez le formulaire final React et les packages connexes:

<code class="language-javascript">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 })
  )
);</code>

Créez un composant PostEditor pour gérer les messages individuels et une page PostsManager pour afficher et interagir avec la liste des messages. Intégrez-les dans votre routage.

Test et apprentissage plus approfondi

Exécutez yarn start pour tester l'application complète. Le code source est disponible sur https://www.php.cn/link/44f455185e5ae730f5e12534aaaa5e02 . Explorez des ressources supplémentaires sur le blog Okta Developer pour des plongées plus profondes dans React, Node.js et Okta.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!