노드와 반응이있는 기본 CRUD 앱을 구축하십시오

이 튜토리얼은 인증을 위해 OKTA를 사용하여 보안 반응 프론트 엔드 및 Node.js 백엔드 응용 프로그램을 구축하여 안내합니다. 프론트 엔드에는 홈페이지와 게시물 관리자가 있으며 인증 된 사용자 만 액세스 할 수 있습니다. 백엔드는 포스트 생성 및 편집에 대한 인증을 시행합니다. OKTA의 OpenID Connect (OIDC)는 인증을 처리하여 프론트 엔드의 Okta React SDK를 활용하고 백엔드의 Okta JWT Verifier를 활용합니다. 백엔드는 Express.js, 데이터 모델링 속도 및 간소화 된 REST API 생성을위한 에필로그를 사용합니다.

> 왜 반응?

React의 인기는 효율적인 가상 DOM 조작에서 비롯되어 빠른 업데이트가 가능합니다. JavaScript 내에서 HTML을 허용하는 구문 인 JSX 사용은 기존 JavaScript 렌더링에 비해 개발을 단순화하고 가독성을 향상시킵니다. 이 예제는 JSX의 간결한 구문을 보여줍니다 : 동등한 일반 JavaScript 코드는 훨씬 더 장점입니다

반응 앱 구축

React App Create Relainlines React Developt. 다음을 사용하여 설치하십시오

이것은 기본 앱에서

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

재료 ui 및 인증 추가 <🎜

재료 UI는 앱의 모양을 향상시킵니다. 다음과 같이 설치하십시오

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

에 로봇 공간을 포함시킵니다

okta는 안전한 인증을 단순화합니다. 무료 개발자 계정을 만들고 OKTA 개발자 콘솔에 클라이언트 ID 및 조직 URL을 기록한 단일 페이지 앱을 추가하십시오. 이것들을

: <🎜 in에 저장하십시오

<'s> Okta의 React SDK 및 REACT 라우터를 설치하십시오 : <🎜 🎜>

<🎜 🎜>에서 okta를 구성하고 <🎜 🎜>에 라우팅을 추가하여 인증 및 콜백을 처리합니다. 로그인/로그 아웃 기능을 관리하려면 구성 요소를 만듭니다. 이 버튼을 앱 헤더에 통합하십시오

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

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

<🎜 🎜>에서 서버를 만듭니다. 이는 Express를 설정하고 OKTA를 사용하여 JWT 검증을 처리하고 게시물의 속편 모델을 정의하며 Epilogue를 사용하여 REST 엔드 포인트를 만듭니다. Frontend와 백엔드를 동시에 실행하도록

를 구성하십시오 게시물 관리자 추가 <🎜 src/server/index.js 반응 최종 양식 및 관련 패키지를 설치하십시오 : <🎜 🎜> 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 })
  )
);

run 전체 응용 프로그램을 테스트합니다. 소스 코드는 PostEditor에서 사용할 수 있습니다. Okta Developer 블로그에서 추가 리소스를 탐색하여 React, Node.js 및 Okta 로의 깊은 다이빙.

위 내용은 노드와 반응이있는 기본 CRUD 앱을 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!