리액트 로그인 예제

참고: 다른 구성 요소와 구성 요소의 행동 방식에 대한 간략한 설명일 뿐입니다. 실제로 이 섹션에서 만든 마지막 구성 요소인 SubscriptionFormForm도 기능 구성 요소로 쉽게 변환할 수 있습니다. 이 경우 구성 요소 트리에서 내부 상태를 위로 이동 하 고 상태 변경 을 트리거하려면 이러한 값 및 함수를 전달 해야 합니다. React 구성 요소에 대한 자세한 내용은 이 문서를 참조하세요. 백 엔드 자습서에서 처리 된 대로 백 엔드에서 코드 200을 수신할 때 로그인을 위해 사용자를 다시 로그인 페이지로 되돌리거나 원하는 경우 인덱스 페이지로 리디렉션 할 수 있습니다. Loginscreen.js 페이지의 컨텍스트를 부모컨텍스트 소품으로 보냈는데, 이를 통해 자식에서 로그인 화면의 상태 변수를 조작할 수 있습니다. 첫 번째 기능의 경우 응용 프로그램에서 /new-question에 새 경로를 만듭니다. 이 경로는 사용자가 인증되었는지 여부를 확인하는 구성 요소에 의해 보호됩니다. 사용자가 아직 인증되지 않은 경우 이 구성 요소는 Auth0으로 리디렉션되므로 사용자가 인증할 수 있습니다.

사용자가 이미 인증된 경우 구성 요소는 React가 새 질문이 생성되는 양식을 렌더링하도록 합니다. 참고: 모바일 장치에 대한 앱을 개발하기 위해 네이티브 반응을 사용하는 경우 대신 반응 라우터 네이티브를 설치합니다. “React는 렌더링 논리가 본질적으로 다른 UI 논리와 결합된다는 사실을 수용합니다: 이벤트가 처리되는 방법, 시간이 지남에 따라 상태가 변경되는 방법 및 데이터를 표시하기 위해 준비되는 방법.” – JSX 소개 그러나, 사물을 처리하는 구성 요소를 만들려는 경우 일부 상태를 유지하고 구독 양식과 같이 보다 복잡한 작업을 수행해야 하는 경우 클래스 구성 요소가 필요합니다. React에서 클래스 구성 요소를 만들려면 다음과 같이 진행합니다. 이것은 Auth0이 제공하는 공식 라이브러리로, 사용자처럼 SP를 보호합니다. 설치하려면 개발 서버를 중지하고 이 명령을 내보세요: 정리한 후 앱에서 React Router를 구성해야 합니다. 이것은 당신이 볼 수 있듯이, 매우 간단한 단계가 될 것입니다. 그러나 React 라우터를 마스터하려면 주제와 모든 기능을 구체적으로 소개하는 다른 기사를 하나 이상 읽어야 합니다. React와 부트스트랩을 함께 통합하는 방법에는 여러 가지가 있습니다. 그러나 첫 번째 응용 프로그램에 대한 요구 사항은 매우 간단하고 대화형 구성 요소가 필요하지 않기 때문에 (즉,이 라이브러리가 제공하는 기본 스타일에 관심이 있음) 가장 쉬운 전략을 따르십시오. 사용할 수 있습니다.

즉, ./public/index.html 파일을 열고 다음과 같이 업데이트하기만 하면 됩니다. 그 문제에 당신을 도울 수있는 좋은 자원은 Jest 블로그 게시물과 테스트 반응 응용 프로그램입니다. 이 명령은 앱에서 탐색을 처리하는 데 도움이 되는 두 개의 라이브러리를 설치합니다. 첫 번째, 반응 라우터, 원활한 탐색을 가능하게 하는 주요 라이브러리입니다. 두 번째, 반응 라우터-돔, 반응 라우터에 대 한 DOM 바인딩을 제공 합니다. 이 기사에서 는 많은 다른 주제를 소개했기 때문에 모든 주제를 완전히 파악할 기회가 없었습니다.

This entry was posted in Uncategorized by admin. Bookmark the permalink.

Comments are closed.