React 및 HarperDB를 사용하여 해커 뉴스 클론을 구축하십시오

이 튜토리얼은 React 및 HarperDB를 사용하여 해커 뉴스 클론을 구축하는 것을 보여줍니다. 효율적인 개발 및 배포에 중점을 둔 해커 뉴스 홈페이지를 복제하는 방법을 배우자.

우리의 목표는 다음과 같이 보이는 클론을 만드는 것입니다.

완전한 코드는 github에서 사용할 수 있습니다 주요 장점 :

React & HarperDB를 통한 빠른 개발 : 이 조합은 개발을 간소화합니다. HarperDB는 SQL 및 NOSQL 기능을 모두 제공하여 백엔드 설정 및 확장 성을 단순화합니다.

:

를 사용한 단순화 된 설정을 표준 구성으로 반응 프로젝트를 신속하게 부트 스트랩합니다. : 가있는 실시간 데이터는 HarperDB 클라우드 인스턴스와 직접적인 실시간 상호 작용을 제공합니다. 포괄적 인 프론트 엔드 실습 :

복제 해커 뉴스는 설계 복제, 상태 관리 및 사용자 상호 작용에 귀중한 경험을 제공합니다. GitHub 페이지에 쉽게 배포 할 수 있습니다 : 확장 가능한 디자인 :

재단은 사용자 인증 및 동적 컨텐츠 업데이트와 같은 향후 추가를 허용합니다.

클로닝의 이점 :

디자인 마스터리 :

디자인 세부 사항과 뉘앙스를 위해 예리한 눈을 개발하십시오. 색상 및 타이포그래피 숙련도 :
• 이 중요한 프론트 엔드 개념에 대한 전문 지식을 얻으십시오. 기술 탐색 : 새로운 기술을 배우고 활용하고 스킬 셋을 확장하십시오.
테크 스택 :
• 이 프로젝트는 React/UseHarperDB 스택을 사용합니다. HarperDB는 SQL과 NOSQL을 모두 지원하는 다목적 데이터 관리 시스템으로 빠른 응용 프로그램 개발 및 서버리스 아키텍처를 가능하게합니다. 주요 기능은 다음과 같습니다 단일 엔드 포인트 쿼리 SQL 및 NOSQL 쿼리 지원 JSON 및 SQL 데이터 업로드 벌크 CSV 데이터 업로드. 빠르고 간단하며 서버리스 설정 create-react-app 우리는 다음 도구를 사용할 것입니다 :
  반응 : 사용자 인터페이스 구축을위한 JavaScript 라이브러리. 프로젝트 설정을 단순화합니다 종속성 관리에는 js 및 npm : node.js (버전 12 이상 권장) 및 NPM (Node 패키지 관리자)이 필요합니다.
  • HarperDB 클라우드 계정 : 데이터베이스를 호스팅하기 위해 무료 계정 및 인스턴스를 만듭니다. : create-react-app는 원활한 HarperDB 통합을위한 반응 후크입니다 SQL (기본) :
  이 프로젝트에는 기본 SQL 쿼리 만 필요합니다. CSS :
  • 스타일을위한 순수한 CSS (CSS 프레임 워크가 사용되지 않음) 해커 뉴스 로고 (SVG) : 정확한 복제를 위해 로고를 다운로드하십시오. HarperDB 클라우드 인스턴스 설정 :
  • 무료 HarperDB 계정에 가입하십시오 사용자 이름, 비밀번호 및 인스턴스 이름을 제공하여 새 클라우드 인스턴스를 만듭니다. URL이 생성됩니다. 이 튜토리얼의 무료 계획을 선택하십시오 인스턴스 URL, 사용자 이름 및 비밀번호 저장 - 나중에 필요합니다. .
  • 프로젝트 설정 및 데이터베이스 모집단 : useHarperDB 새로운 React 프로젝트를 만듭니다 : HarperDB에서 "hackernews"라는 스키마를 만들고 "id"가 "id"가있는 "post"라는 테이블을 해시 속성으로 만듭니다. JSON을 사용하여 Hacker News Post 데이터로"게시물 "테이블을 채 웁니다 (원본 자습서에 제공된 데이터 예).
  • harperdb를 반응 앱에 연결 :
  • install :
  루트 디렉토리에서 파일을 생성하고 harperdb 자격 증명을 추가하십시오 : ,
  • , > in 에 앱을 감싸서 환경 변수를 전달하십시오.
  반응 구성 요소 구축 :
  튜토리얼 세부 사항 구성 요소 (헤더 및 내비게이션 포함) 및 구성 요소 (를 사용하여 HarperDB의 데이터를 가져 오기)를 작성합니다. CSS 스타일링은 해커 뉴스 모양과 일치하도록 제공됩니다. Github 페이지에 배포 :

  1. install : gh-pages npm install gh-pages --save-dev 배포를 위해
  및 로 구성하십시오 package.json run homepage. scripts

FAQS (확장) :

위 내용은 React 및 HarperDB를 사용하여 해커 뉴스 클론을 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!