React를 사용하여 전자 상거래 사이트를 만드는 방법

이 튜토리얼은 React를 사용하여 간단한 전자 상거래 웹 애플리케이션을 구축함으로써 안내합니다. 본격적인 Shopify 경쟁사는 아니지만 동적 사용자 인터페이스를 생성하기위한 React의 기능을 효과적으로 보여줍니다.

응용 프로그램에는 기본 카트 시스템과 사용자 인증이 있습니다. Redux 또는 Mobx와 같은 복잡한 상태 관리 라이브러리 대신 React Context를 활용합니다. 모의 백엔드는

및 를 사용하여 생성됩니다. 전체 코드는 github에서 사용할 수 있습니다

주요 특징 및 기술 :

json-server 반응 컨텍스트 : 단순화 된 상태 관리, redux 또는 mobx의 오버 헤드를 피하십시오. 사용자 인증 : json-server-auth 현실 인증 흐름을 위해

및 jwts를 사용하여 시뮬레이션되었습니다. 반응 라우터 :

핸들 애플리케이션 내비게이션 axios : 효율적인 데이터 가져 오기에 대한 ajax 요청을 관리합니다 Bulma CSS :

는 반응적이고 시각적으로 매력적인 UI를 제공합니다 JWT-DECODE :

보안 인증을위한 jwts
• 로컬 스토리지 : 세션에서 사용자 데이터와 카트 내용을 지속합니다. 전제 조건 :
이 자습서는 기본 JavaScript와 반응 지식을 가정합니다. 반응이 처음이라면 초보자 안내서 검토를 고려하십시오.
• Node.js 및 NPM (Node Package Manager)이 설치해야합니다. 다음을 사용하여 설치를 확인하십시오 프로젝트 설정 : json-server-auth
Create React 앱 : 를 사용하여 새로운 React 프로젝트를 만듭니다
• 필요한 패키지를 설치하십시오 :
• Bulma 스타일 시트를 : 에 추가하십시오
• 컨텍스트 및 구성 요소 구조 :
튜토리얼은 국가 관리에 반응 컨텍스트를 사용합니다. 파일은 컨텍스트를 생성하고
• 는 컨텍스트를 구성 요소에 쉽게 주입 할 수있는 고차 컴포넌트를 제공합니다. 기본 구성 요소 (, , , )는 응용 프로그램을 구조화하기 위해 생성됩니다. 가짜 백엔드 설정 :
• a 파일 (a 디렉토리에 위치)은 사용자 및 제품의 모의 데이터베이스를 정의합니다. 인증으로 를 시작하십시오 : 이것은 에서 rest api를 설정합니다 인증 구현 :

구성 요소는 및 를 사용하여 사용자 인증을 처리합니다. App.js 메소드는 에 대한 게시물 요청, JWT를 디코딩하며 사용자 정보를 주 및 로컬 스토리지에 저장합니다. axios 메소드는이 데이터를 지 웁니다. jwt-decode 구성 요소는 로그인에 대한 사용자 인터페이스를 제공합니다 login 제품 조회 및 카트 관리 : /login logout 구성 요소는 제품을 가져오고 표시합니다. 는 개별 제품 카드를 렌더링합니다. , Login 및 메소드는 쇼핑 카트를 관리하여 로컬 스토리지에서 데이터를 지속합니다.

구성 요소는 개별 항목에

를 사용하여 카트 내용을 표시합니다. Mock Backend에서 제품 재고를 업데이트하여 메소드는 체크 아웃을 시뮬레이션합니다. 구성 요소를 통해 관리자 사용자는 신제품을 추가 할 수 있습니다. 결론 :

이 자습서는 React와 함께 구축 된 기본 전자 상거래 응용 프로그램을 제공합니다. 추가 개선에는 강력한 백엔드, 서버 측 인증 및보다 정교한 기능이 포함될 수 있습니다. 전체 코드는 Github에서 사용할 수 있습니다. 보다 고급 React 개발을 보려면 Sitepoint Premium에서 React Design 패턴 및 모범 사례를 탐색하십시오.

위 내용은 React를 사용하여 전자 상거래 사이트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!