


Construisez un clone de nouvelles de pirate en utilisant React et Harperdb
Ce tutoriel démontre la construction d'un clone de nouvelles de pirate à l'aide de React et Harperdb. Apprenons à reproduire la page d'accueil de Hacker News, en nous concentrant sur un développement et un déploiement efficaces.
Notre objectif est de créer un clone qui ressemble à ceci:
Le code complet est disponible sur github.
Avantages clés:
- Développement rapide avec React & Harperdb: Cette combinaison rationalise le développement. HarperDB offre à la fois des capacités SQL et NOSQL, simplifiant la configuration et l'évolutivité du backend.
- Configuration simplifiée en utilisant
create-react-app
: Bootstrap rapidement un projet React avec des configurations standard. - Données en temps réel avec
useHarperDB
: Ce crochet React fournit une interaction directe et en temps réel avec votre instance cloud Harperdb. - Pratique complète du frontage: Les nouvelles de pirate de clonage offrent une expérience précieuse dans la réplication de conception, la gestion de l'État et l'interaction des utilisateurs.
- Déploiement facile aux pages GitHub: Le tutoriel vous guide en déploiement de votre clone pour un partage facile.
- Conception extensible: La fondation permet de futurs ajouts comme l'authentification des utilisateurs et les mises à jour dynamiques de contenu.
Avantages du clonage:
- Maîtrise de conception: Développez un œil vif pour les détails de conception et les nuances.
- Couleur et typographie Compétence: Gagnez l'expertise dans ces concepts frontaux cruciaux.
- Exploration technologique: Apprenez et utilisez de nouvelles technologies et développez vos compétences.
pile technologique:
Ce projet utilise la pile React / useHarperDB. HarperDB est un système de gestion des données polyvalent prenant en charge SQL et NOSQL, permettant un développement rapide des applications et une architecture sans serveur. Les caractéristiques clés incluent:
- Interrogation à point final unique.
- Prise en charge de la requête SQL et NOSQL.
- Téléchargement de données JSON et SQL.
- Téléchargement de données CSV en vrac.
- Configuration rapide, simple et sans serveur.
Nous utiliserons les outils suivants:
- réagir: une bibliothèque JavaScript pour la création d'interfaces utilisateur.
create-react-app
simplifie la configuration du projet. - node.js et npm: node.js (version 12 ou plus recommandés) et npm (Node Package Manager) sont requis pour la gestion de la dépendance.
- Compte cloud Harperdb: Créez un compte et une instance gratuits pour héberger votre base de données.
-
useHarperDB
: Un crochet React pour l'intégration Harperdb sans couture. - SQL (BASIC): Seules les requêtes SQL de base sont nécessaires pour ce projet.
- CSS: CSS pur pour le style (pas de cadres CSS utilisés).
- Hacker News Logo (SVG): Téléchargez le logo pour une réplication précise.
Configuration de l'instance cloud Harperdb:
- Inscrivez-vous à un compte Harperdb gratuit.
- Créez une nouvelle instance cloud, fournissant un nom d'utilisateur, un mot de passe et un nom d'instance. Une URL sera générée.
- Choisissez un plan gratuit pour ce tutoriel.
- Enregistrez votre URL, nom d'utilisateur et mot de passe de votre instance - vous en aurez besoin plus tard.
Configuration du projet et population de base de données:
- Créer un nouveau projet React:
npx create-react-app hacker-news-clone
- Dans Harperdb, créez un schéma nommé "Hackernews" et une table nommée "Posts" avec "ID" comme l'attribut de hachage.
- remplir le tableau "Posts" avec des données de post-actualités à l'aide de JSON (exemple de données fournies dans le tutoriel d'origine).
Connexion Harperdb à votre application React:
- installer
use-harperdb
:npm install use-harperdb
- Créez un fichier
.env
dans le répertoire racine et ajoutez vos informations d'identification Harperdb:REACT_APP_DB_URL=...
,REACT_APP_USER=...
,REACT_APP_PASSWORD=...
- Enveloppez votre application dans
HarperDBProvider
danssrc/index.js
, en passant dans vos variables d'environnement.
Construire les composants de la réact:
Les détails du didacticiel créant le composant App
(contenant l'en-tête et la navigation) et le composant Posts
(récupérer et afficher les données de Harperdb à l'aide de useHarperDB
). Le style CSS est également fourni pour correspondre à l'apparence des hackers News.
Déploiement des pages github:
- installer
gh-pages
:npm install gh-pages --save-dev
- Configurez
package.json
avechomepage
etscripts
pour le déploiement. - Run
npm run deploy
.
FAQ (élargi): Le tutoriel d'origine comprend une section FAQ complète couvrant des fonctionnalités avancées telles que l'ajout d'authentification des utilisateurs, l'amélioration des performances, la gestion des erreurs, l'ajout de recherche, de réactivité, de mode sombre, de test, de pagination et de sécurité . Ce sont tous des domaines précieux à explorer après avoir terminé le clone de base.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

Problèmes de mise à jour des données dans les opérations asynchrones de Zustand. Lorsque vous utilisez la bibliothèque de gestion de l'État de Zustand, vous rencontrez souvent le problème des mises à jour de données qui entraînent des opérations asynchrones prématurées. � ...
