ノードを使用して基本的なCRUDアプリを構築し、反応します

このチュートリアルは、認証のためにOKTAを使用して、安全なReact FrontEndとnode.jsバックエンドアプリケーションを構築することをガイドします。 フロントエンドには、認証されたユーザーがアクセスできるホームページと投稿マネージャーが搭載されています。バックエンドは、ポスト作成と編集のための認証を強制します。 OktaのOpenID Connect（OIDC）は認証を処理し、フロントエンドのOKTA React SDKとバックエンドのOKTA JWT検証を活用します。 バックエンドはExpress.jsを使用し、データモデリングに続編され、合理化されたREST API作成のエピローグ。

なぜ反応するのか？

Reactの人気は、その効率的な仮想DOM操作に由来し、高速の更新を可能にします。 JavaScript内でHTMLを可能にする構文であるJSXの使用は、従来のJavaScriptレンダリングと比較して開発を簡素化し、読みやすさを向上させます。 この例では、JSXの簡潔な構文：

を示しています

同等のプレーンJavaScriptコードは、vose：

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>
);

です

Reactアプリの構築

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 })
  )
);

Reactアプリの作成React開発が合理化されます。使用してインストールしてください：

これにより、デフォルトのアプリが

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

。

で起動します http://localhost:3000

材料UIと認証の追加

マテリアルUIは、アプリの外観を強化します。 ：

にインストールします

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

：

にロボットフォントを含めます public/index.html

OKTAは安全な認証を簡素化します。無料の開発者アカウントを作成し、OKTA開発者コンソールに単一ページアプリを追加し、クライアントIDと組織URLに注目してください。 これらを

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

：

に保存してください .env.local

Okta's React sdkをインストールし、Reactルーター：

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

をインストールします

oktaを

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

ログイン後にコピー

に追加して、認証とコールバックを処理します。 ログイン/ログアウト機能を管理するために、

コンポーネントを作成します。 このボタンをアプリヘッダーに統合します src/index.jssrc/App.js LoginButton

node.jsバックエンドの構築 バックエンド依存関係をインストールする：

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>
);

src/server/index.jsでサーバーを作成します。これにより、Expressがセットアップされ、OKTAを使用したJWT検証を処理し、投稿の後遺症モデルを定義し、エピローグを使用してRESTエンドポイントを作成します。 フロントエンドとバックエンドの両方を同時に実行するようにpackage.jsonを構成します。

投稿マネージャーの追加

ファイナルフォームと関連するパッケージを反応させるインストール：

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 })
  )
);

個々の投稿を管理するためのPostEditorコンポーネントと、投稿リストを表示およびやり取りするためのPostsManagerページを作成します。 これらをルーティングに統合します。

テストとさらなる学習

完全なアプリケーションをテストするには、yarn start実行します。ソースコードは、https://www.php.cn/link/44f455185e5ae730f5e12534aaaa5e02で入手できます。 Okta Developerブログで追加のリソースを調べて、React、node.js、およびOktaに深いダイビューを求めています。

以上がノードを使用して基本的なCRUDアプリを構築し、反応しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。