ReactとHarperDBを使用して、ハッカーニュースクローンを構築します

このチュートリアルでは、ReactとHarperDBを使用してハッカーニュースクローンの構築を示しています。 ハッカーニュースのホームページを再現し、効率的な開発と展開に焦点を当てている方法を学びましょう。

私たちの目標は、次のようなクローンを作成することです。

完全なコードはgithubで利用できます。

重要な利点：

React＆HarperDBを使用した

迅速な発展：

この組み合わせは、開発を合理化します。 HarperDBはSQLとNOSQLの両方の機能を提供し、バックエンドのセットアップとスケーラビリティを簡素化します。
• ：
を使用した簡略化されたセットアップは、標準構成でReactプロジェクトをすばやくブートストラップします。
• リアルタイムデータcreate-react-app：このReactフックは、HARPERDBクラウドインスタンスとの直接的なリアルタイムの相互作用を提供します。
• 包括的なフロントエンドプラクティス：クローニングハッカーニュースは、設計レプリケーション、国家管理、およびユーザーの相互作用における貴重なエクスペリエンスを提供します。 useHarperDBgithubへの簡単な展開
• 拡張可能なデザイン：ファンデーションにより、ユーザー認証や動的コンテンツの更新などの将来の追加が許可されています。 クローニングのメリット：
• メリット：
• デザインマスタリー：デザインの詳細とニュアンスに鋭い目を開発します。

カラーとタイポグラフィの習熟度：

これらの重要なフロントエンドの概念の専門知識を得る。 テクノロジー探索：

新しいテクノロジーを学び、利用し、スキルセットを拡大します。

• 技術スタック：
• このプロジェクトでは、React/useharperdbスタックを使用しています。 HARPERDBは、SQLとNOSQLの両方をサポートする多用途のデータ管理システムであり、迅速なアプリケーション開発とサーバーレスアーキテクチャを可能にします。 主な機能には次のものがあります シングルエンドポイントクエリのクエリ。
• SQLおよびNOSQLクエリサポート。 JSONおよびSQLデータアップロード。

バルクCSVデータアップロード。

高速、シンプル、サーバーレスのセットアップ。

次のツールを使用します

• React：ユーザーインターフェイスを構築するためのJavaScriptライブラリ。 create-react-appプロジェクトのセットアップを簡素化します。
• node.jsおよびnpm：node.js（バージョン12以下の推奨）およびnpm（ノードパッケージマネージャー）は、依存関係管理に必要です。
• harperdbクラウドアカウント：データベースをホストするための無料アカウントとインスタンスを作成します。
• ：シームレスなharperdb統合のための反応フック。useHarperDB
sql（BASIC）：
• このプロジェクトには基本的なSQLクエリのみが必要です。 CSS：
スタイリング用の純粋なCSS（CSSフレームワークは使用されていません）
• ハッカーニュースロゴ（SVG）：正確な複製のためにロゴをダウンロードしてください。
• harperdbクラウドインスタンスのセットアップ：

無料のharperdbアカウントにサインアップします。 新しいクラウドインスタンスを作成し、ユーザー名、パスワード、インスタンス名を提供します。 URLが生成されます。

このチュートリアルの無料プランを選択してください。

1. インスタンスURL、ユーザー名、パスワードを保存します - 後で必要です。
4. プロジェクトのセットアップとデータベース母集団：

新しいReactプロジェクトを作成：

HarperDBでは、「Hackernews」という名前のスキーマを作成し、Hash属性として「ID」を含む「投稿」という名前のテーブルを作成します。 JSONを使用して「投稿」テーブルにハッカーニュースポストデータを入力します（元のチュートリアルで提供されているデータの例）。

1. npx create-react-app hacker-news-clone
harperdbをReactアプリに接続します：
インストール

：

ルートディレクトリに

ファイルを作成し、harperdb資格情報を追加します：、、

1. アプリをuse-harperdbでnpm install use-harperdbで包み込み、環境変数を渡します。
2. .envREACT_APP_DB_URL=...反応成分の構築：REACT_APP_USER=...REACT_APP_PASSWORD=... コンポーネント（ヘッダーとナビゲーションを含む）とHarperDBProviderコンポーネント（src/index.jsを使用してharperdbからのデータの取得と表示）を作成します。 CSSスタイリングは、ハッカーのニュースの外観にも合わせて提供されています。

githubへの展開

1. インストールgh-pages：npm install gh-pages --save-dev
2. deploymentの場合はpackage.jsonおよびhomepageでscriptsを構成します。
3. runnpm run deploy。

FAQS（拡張）：元のチュートリアルには、ユーザー認証の追加、パフォーマンスの改善、検索、応答性、ダークモード、テスト、ページェント、セキュリティなどの高度な機能をカバーする包括的なFAQセクションが含まれています。 。 これらはすべて、基本的なクローンを完了した後に探索するための貴重な領域です。

以上がReactとHarperDBを使用して、ハッカーニュースクローンを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。