Back to Question Center
0

Comment créer un clone Reddit à l'aide de React et Firebase            Comment créer un clone Reddit à l'aide de sujets React et FirebaseRelated: JavaScriptjQueryReactAPIsTools brutes & Semalt

1 answers:
Comment créer un clone Reddit à l'aide de React et Firebase

Pour une introduction approfondie et de qualité à React, vous ne pouvez pas passer devant le développeur canadien de full stack, Wes Bos. Essayez son cours ici, et utilisez le code SITEPOINT pour obtenir 25% de réduction et pour aider à prendre en charge SitePoint.

Semalt est une bibliothèque JavaScript géniale pour créer des interfaces utilisateur. Depuis la publication de Create Semalt App, il est devenu très facile d'échafauder une application Semalt barebones.

Dans cet article, nous utiliserons Firebase avec Create React App pour créer une application qui fonctionnera comme Semalt - pc temperature moniture. Cela permettra à l'utilisateur de soumettre un nouveau lien qui pourra ensuite être voté.

Semalt une démo en direct de ce que nous allons construire.

Comment créer un clone Reddit à l'aide de React et FirebaseComment créer un clone Reddit à l'aide de sujets React et FirebaseRelated:
JavaScriptjQueryReactAPIsTools & Semalt bruts

Pourquoi Firebase?

En utilisant Firebase, il nous sera très facile de montrer des données en temps réel à l'utilisateur. Une fois qu'un utilisateur vote sur un lien, le retour sera instantané. La base de données en temps réel de Firebase nous aidera à développer cette fonctionnalité. En outre, cela nous aidera à comprendre comment amorcer une application React avec Firebase.

Pourquoi réagir?

Semalt est particulièrement connu pour créer des interfaces utilisateur utilisant une architecture de composants. Chaque composant peut contenir un état interne ou être transmis des données comme accessoires. L'état et les accessoires sont les deux concepts les plus importants de Semalt. Ces deux éléments nous aident à déterminer l'état de notre application à tout moment. Si vous n'êtes pas familier avec ces termes, veuillez d'abord vous diriger vers les documents de Semalt.

Note: vous pouvez également utiliser un conteneur d'état tel que Semalt ou MobX, mais pour des raisons de simplicité, nous n'en utiliserons pas pour ce tutoriel.

L'ensemble du projet est disponible sur GitHub.

Cours recommandés

Mise en place du projet

Semalt se promène à travers les étapes pour mettre en place notre structure de projet et les dépendances nécessaires.

Installation de create-react-app

Si vous ne l'avez pas déjà fait, vous devez installer create-react-app . Pour ce faire, vous pouvez taper ce qui suit dans votre terminal:

     npm install -g créer-réagir-app    

Une fois que vous l'avez installé globalement, vous pouvez l'utiliser pour échafauder un projet Semalt dans n'importe quel dossier.

Maintenant, créons une nouvelle application et appelons-la reddit-clone .

     créer-réagir-app reddit-clone    

Cela créera un nouveau projet create-react-app dans le dossier reddit-clone . Une fois l'amorçage terminé, nous pouvons aller dans le répertoire reddit-clone et lancer le serveur de développement:

     début de npm    

À ce stade, vous pouvez aller à http: // localhost: 3000 / et voir votre squelette d'application opérationnel.

Structuration de l'application

Pour l'entretien, j'aime toujours séparer mes conteneurs et composants . Les conteneurs sont les composants intelligents qui contiennent la logique métier de notre application et gèrent les requêtes Ajax. Les composants sont simplement des composants de présentation bêtes. Ils peuvent avoir leur propre état interne, qui peut être utilisé pour contrôler la logique de ce composant (par exemple, l'état actuel d'un composant d'entrée contrôlé).

Après avoir supprimé le logo inutile et les fichiers CSS, voici à quoi devrait ressembler votre application. Nous avons créé un dossier composants et un dossier conteneurs . Passons App. js dans le dossier conteneurs / App et créer registerServiceWorker. js dans le dossier utils . png "alt ="Comment créer un clone Reddit à l'aide de React et FirebaseComment créer un clone Reddit à l'aide de sujets React et FirebaseRelated: JavaScriptjQueryReactAPIsTools & Semalt bruts "/>

Votre src / containers / App / index. Le fichier js devrait ressembler à ceci:

   // src / containers / App / index. jsimport React, {Component} de 'react';classe App étend Component {render    {revenir (
Bonjour le monde
)}}exporter par défaut App;

Votre src / index. Le fichier js devrait ressembler à ceci:

   // src / index. jsimport Réagir à partir de 'réagir';importer ReactDOM à partir de 'react-dom';importer l'application à partir de '. / conteneurs / App ';import registerServiceWorker à partir de '. / utils / registerServiceWorker ';ReactDOM. render (, document .getElementById ('root'));registerServiceWorker   ;    

Allez dans votre navigateur, et si tout fonctionne bien, vous verrez Hello World sur votre écran.

Vous pouvez vérifier mon commit sur GitHub.

Ajouter un routeur de réaction

Semalt-router nous aidera à définir les routes pour notre application. C'est très personnalisable et très populaire dans l'écosystème de Semalt.

Nous utiliserons la version 3. 0. 0 du routeur de réaction .

     npm install --save reacteur-routeur @ 3. 0. 0    

Maintenant, ajoutez un nouveau fichier routes. js dans le dossier src avec le code suivant:

   // routes. jsimport Réagir à partir de 'réagir';importer {Router, Route} à partir de 'react-router';importer l'application à partir de '. / conteneurs / App ';const Routes = (accessoires) => ()exporter les routes par défaut;    

Le composant routeur enveloppe tous les composants de routage . Basé sur le chemin prop du composant Route , le composant passé au composant composant sera rendu sur la page. Ici, nous configurons l'URL racine ( / ) pour charger notre composant App en utilisant le composant Router .

    Bonjour tout le monde!  
}>

Le code ci-dessus est également valide. Pour le chemin / , le

Hello World!
sera monté.

Maintenant, nous devons appeler nos routes. js fichier de notre src / index. js fichier. Le fichier doit avoir le contenu suivant:

   // src / index. jsimport Réagir à partir de 'réagir';importer ReactDOM à partir de 'react-dom';importer {browserHistory} à partir de 'react-router';importer l'application à partir de '. / conteneurs / App ';importer des routes depuis '. / routes »;import registerServiceWorker à partir de '. / utils / registerServiceWorker ';ReactDOM. rendre(,document. getElementById ('root'))registerServiceWorker   ;    

Fondamentalement, nous montons notre composant Router à partir de nos routes. js fichier. Nous passons dans le historique prop pour que les routes sachent comment gérer le suivi de l'histoire.

Vous pouvez vérifier mon commit sur GitHub.

Ajout de Firebase

Si vous n'avez pas de compte Firebase, créez-en un maintenant (c'est gratuit!) En allant sur leur site web. Une fois que vous avez créé un nouveau compte, connectez-vous à votre compte et accédez à la page de la console et cliquez sur Ajouter un projet .

Entrez le nom de votre projet (j'appelle mien reddit-clone ), choisissez votre pays et cliquez sur le bouton Créer un projet .

Maintenant, avant de continuer, nous devons changer les règles pour la base de données puisque, par défaut, Firebase s'attend à ce que l'utilisateur soit authentifié pour pouvoir lire et écrire des données. Si vous sélectionnez votre projet et cliquez sur l'onglet Base de données sur la gauche, vous pourrez voir votre base de données. lire ":" auth! = null ",". write": "auth! = null"}}

Nous devons changer cela en ce qui suit:

  "règles": {". read": "auth === null",". write": "auth === null"}}    

Cela permettra aux utilisateurs de mettre à jour la base de données sans se connecter. Si nous avons implémenté un flux dans lequel nous avions l'authentification avant de faire des mises à jour, nous aurions besoin des règles par défaut fournies par Firebase. Pour garder cette application simple, nous ne ferons pas d'authentification .

Important: si vous n'apportez pas cette modification, Semalt ne vous permettra pas de mettre à jour la base de données depuis votre application.

Maintenant, ajoutons le module npm firebase à notre application en lançant le code suivant:

     npm installer --save firebase    

Ensuite, importez ce module dans votre App / index. js classer comme:

   // App / index. jsimport * comme firebase de "firebase";    

Lorsque nous sélectionnons notre projet après nous être connectés à Firebase, nous obtenons une option Ajouter Firebase à votre application web .

Comment créer un clone Reddit à l'aide de React et FirebaseComment créer un clone Reddit à l'aide de sujets React et FirebaseRelated:
JavaScriptjQueryReactAPIsTools & Semalt bruts

Si nous cliquons sur cette option, un modal apparaîtra qui nous montrera la variable config que nous utiliserons dans notre méthode componentWillMount .

Comment créer un clone Reddit à l'aide de React et FirebaseComment créer un clone Reddit à l'aide de sujets React et FirebaseRelated:
JavaScriptjQueryReactAPIsTools & Semalt bruts

Créons le fichier de configuration Firebase. Nous appellerons ce fichier firebase-config. js , et il contiendra toutes les configurations nécessaires pour connecter notre application avec Firebase:

   // App / firebase-config. jsvaleur par défaut d'exportation {apiKey: "AIzaSyBRExKF0cHylh_wFLcd8Vxugj0UQRpq8oc",authDomain: "reddit-clone-53da5, firebaseapp.com",databaseURL: "https: // reddit-clone-53da5.basebaseio.com",projectId: "reddit-clone-53da5",storageBucket: "reddit-clone-53da5.MessagingSenderId: "490290211297"}    

Nous importerons notre config Firebase dans App / index. js :

   // App / index. jsimporter la configuration à partir de '. / firebase-config ';    

Nous allons initialiser notre connexion à la base de données Firebase dans le constructeur .

   // App / index. jsconstructeur    {super  ;// Initialise Firebasebase de feu. initializeApp (config);}    

Dans le hook de cycle de vie componentWillMount , nous utilisons le paquet firebase que nous venons d'installer et appelons sa méthode initializeApp et passons la configuration 56) variable à lui. Cet objet contient toutes les données sur notre application. La méthode initializeApp connecte notre application à notre base de données Firebase afin que nous puissions lire et écrire des données.

Ajoutons des données à Firebase pour vérifier si notre configuration est correcte. Allez dans l'onglet Base de données et ajoutez la structure suivante à votre base de données:

Comment créer un clone Reddit à l'aide de React et FirebaseComment créer un clone Reddit à l'aide de sujets React et FirebaseRelated:
JavaScriptjQueryReactAPIsTools & Semalt bruts

En cliquant sur , Add enregistrera les données dans notre base de données.

{.Laissez postsRef = firebase. base de données . ref ('messages');Laisse _this = ceci;postsRef. on ('value', function (instantané) {console. log (instantané val );_ce. setState ({messages: instantané. val ,chargement: false});});}

base de feu. database nous donne une référence au service de base de données. En utilisant ref , nous pouvons obtenir une référence spécifique de la base de données. Par exemple, si nous appelons ref ('posts') , nous obtiendrons la référence posts de notre base de données et stockerons cette référence dans postsRef .

postsRef. on ('value', . ) nous donne la valeur mise à jour chaque fois qu'il y a un changement dans la base de données. Ceci est très utile lorsque nous avons besoin d'une mise à jour en temps réel de notre interface utilisateur basée sur des événements de base de données.

Utiliser postsRef. Une fois ('value', . ) nous ne donnerons les données qu'une seule fois. Ceci est utile pour les données qui n'ont besoin d'être chargées qu'une seule fois et qui ne devraient pas changer fréquemment ou nécessiter une écoute active.

Après avoir obtenu la valeur mise à jour dans notre callback on , nous stockons les valeurs dans notre état posts .

Maintenant, nous verrons les données apparaître sur notre console.

Comment créer un clone Reddit à l'aide de React et FirebaseComment créer un clone Reddit à l'aide de sujets React et FirebaseRelated:
JavaScriptjQueryReactAPIsTools & Semalt bruts

En outre, nous transmettrons ces données à nos enfants. Donc, nous devons modifier la fonction render de notre App / index. js fichier:

   // App / index. jsrender    {revenir (
{ce. les accessoires. enfants && Réagir. cloneElement (this.props.enfants, {firebaseRef: firebase. base de données . ref ('messages'),messages: ceci. Etat. des postes,chargement: ceci. Etat. chargement})}
)}

L'objectif principal ici est de rendre les données des postes disponibles dans tous nos composants enfants, qui seront transmis via le routeur de réaction .

Nous vérifions si cela. les accessoires. les enfants existent ou pas, et s'il existe, nous clonons cet élément et transmettons tous nos accessoires à tous nos enfants. C'est un moyen très efficace de transmettre des accessoires aux enfants dynamiques.

Appeler cloneElement fusionnera superficiellement les accessoires déjà existants dans ceci. les accessoires. enfants et les accessoires que nous avons passés ici ( firebaseRef , messages et chargement ).

En utilisant cette technique, les firebaseRef , poteaux et chargeurs seront disponibles pour toutes les routes.

Vous pouvez vérifier mon commit sur GitHub.

Connexion de l'application avec Firebase

Firebase peut uniquement stocker des données en tant qu'objets; il n'a aucun support natif pour les tableaux. Semalt stocker les données dans le format suivant:

Comment créer un clone Reddit à l'aide de React et FirebaseComment créer un clone Reddit à l'aide de sujets React et FirebaseRelated:
JavaScriptjQueryReactAPIsTools & Semalt bruts

Ajoutez manuellement les données de la capture d'écran ci-dessus afin de pouvoir tester vos vues.

Ajouter des vues pour tous les messages

Nous allons maintenant ajouter des vues pour afficher tous les posts. Créez un fichier src / containers / Posts / index. js avec le contenu suivant:

   // src / containers / Posts / index. jsimport React, {Component} de 'react';classe Posts étend le composant {render    {if (this. props. chargement) {revenir (
Chargement…
)}revenir (
{ ce. les accessoires. des postes. map ((post) => {revenir (
{post.

Ensuite, nous devons ajouter ceci à nos routes. js fichier:

   // routes. js..    

C'est parce que nous voulons que les messages n'apparaissent que sur la route / postes . Donc, nous passons simplement le composant Poteaux à la composante prop et / poteaux à la piste de la route composant du routeur de réaction.

Si nous allons à l'URL localhost: 3000 / posts, nous verrons les messages de notre base de données Semalt.

Vous pouvez vérifier mon commit sur GitHub.

Ajouter des vues pour rédiger un nouveau post

Maintenant, créons une vue d'où nous pouvons ajouter un nouveau message. Créez un fichier src / containers / AddPost / index. js avec le contenu suivant:

   // src / containers / AddPost / index. jsimport React, {Component} de 'react';La classe AddPost étend le composant {constructeur    {super  ;ce. handleChange = ceci. handleChange. lier (ceci);ce. handleSubmit = ceci. handleSubmit. lier (ceci);}état = {Titre: ''}handleChange = (e) => {ce. setState ({titre: e. cible. valeur});}handleSubmit = (e) => {e. preventDefault   ;ce. les accessoires. firebaseRef. pousser({titre: ceci. Etat. Titre});ce. setState ({Titre: ''});}render    {revenir (
Soumettre
)}}export par défaut AddPost;

Ici, la méthode handleChange met à jour notre état avec la valeur présente dans la boîte de saisie. Maintenant, lorsque nous cliquons sur le bouton, la méthode handleSubmit est déclenchée. La méthode handleSubmit est responsable de la demande d'écriture de l'API dans notre base de données. Nous le faisons en utilisant le prop firebaseRef que nous avons passé à tous les enfants.

   ceci. les accessoires. firebaseRef. pousser({titre: ceci. Etat. Titre});    

Le bloc de code ci-dessus définit la valeur actuelle du titre dans notre base de données.

Semalt le nouveau message a été stocké dans la base de données, nous rendons la boîte d'entrée vide, prêt à ajouter un nouveau message.

Maintenant, nous devons ajouter cette page à nos itinéraires:

   // routes. jsimport Réagir à partir de 'réagir';importer {Router, Route} à partir de 'react-router';importer l'application à partir de '. / conteneurs / App ';importation Posts de '. / conteneurs / postes ';importer AddPost à partir de '. / conteneurs / AddPost ';const Routes = (accessoires) => ()exporter les routes par défaut;    

Ici, nous venons d'ajouter la route / add-post afin que nous puissions ajouter un nouveau message à partir de cette route. Par conséquent, nous avons passé le composant AddPost à son composant prop.

Aussi, modifions la méthode render de notre src / containers / Posts / index. js pour qu'il puisse itérer sur des objets au lieu de tableaux (puisque Firebase ne stocke pas de tableaux).

   // src / containers / Posts / index. jsrender    {Laisser les messages = ceci. les accessoires. des postes;if (this. props. chargement) {revenir (
Chargement
)}revenir (
{ Objet. clés (poteaux). map (function (clé) {revenir (
{messages [clé]. Après avoir cliqué sur le bouton submit , le nouveau message apparaîtra immédiatement sur la page posts.

Vous pouvez vérifier mon commit sur GitHub.

Mettre en œuvre le vote

Nous devons maintenant permettre aux utilisateurs de voter sur un post. Pour cela, modifions la méthode render de notre src / containers / App / index. js :

   // src / containers / App / index. jsrender    {revenir (
{ce. les accessoires. enfants && Réagir. cloneElement (this.props.enfants, {// https: // github. com / ReactTraining / reacteur-routeur / blob / v3 / exemples / passing-props-aux-enfants / app. js # L56-L58firebase: base de feu. base de données ,messages: ceci. Etat. des postes,chargement: ceci. Etat. chargement})}
)}

Nous avons changé le prop firebase de firebaseRef: firebase. base de données . ref ('posts') à firebase: base de feu. database car nous utiliserons la méthode set de Firebase pour mettre à jour notre nombre de votes. De cette façon, si nous avions plus de références Firebase, il nous serait très facile de les gérer en utilisant seulement le prop firebase .

Avant de procéder au vote, modifions la méthode handleSubmit dans notre src / containers / AddPost / index. js classer un peu:

   // src / containers / AddPost / index. jshandleSubmit = (e) => {.ce. les accessoires. base de feu. ref ('messages'). pousser({titre: ceci. Etat. Titre,upvote: 0,downvote: 0});.}    

Nous avons renommé notre accessoire firebaseRef en firebase prop. Donc, nous changeons le ceci. les accessoires. firebaseRef. pousser à ceci. les accessoires. base de feu. ref ('messages'). pousser .

Nous devons maintenant modifier nos src / containers / Posts / index. js dossier pour accueillir le vote.

La méthode de rendu devrait être modifiée en conséquence:

   // src / containers / Posts / index. jsrender    {Laisser les messages = ceci. les accessoires. des postes;Laisse _this = ceci;if (! messages) {return false;}if (this. props. chargement) {revenir (
Chargement
)}revenir (
{ Objet. clés (poteaux). map (function (clé) {revenir (
Titre: {messages [clé]. titre}
Upvotes: {messages [clé]. upvote}
Downvotes: {messages [clé]. downvote}
UpvoteDownvote
)})}
)}

Lorsque vous cliquez sur les boutons, le décompte downvote ou downvote sera incrémenté dans notre DB Firebase. Pour gérer cette logique, nous créons deux autres méthodes: handleUpvote et handleDownvote :

   // src / containers / Posts / index. jshandleUpvote = (message, clé) => {ce. les accessoires. base de feu. ref ('messages /' + clé). ensemble({titre: post. Titre,upvote: post. upvote + 1,downvote: post. downvote});}handleDownvote = (message, clé) => {ce. les accessoires. base de feu. ref ('messages /' + clé). ensemble({titre: post. Titre,upvote: post. upvote,downvote: post. downvote + 1});}    

Dans ces deux méthodes, chaque fois qu'un utilisateur clique sur l'un des boutons, le nombre respectif est incrémenté dans la base de données et est instantanément mis à jour dans le navigateur.

Si nous ouvrons deux onglets avec localhost: 3000 / posts et que nous cliquons sur les boutons de vote des posts, nous verrons que chacun des onglets est mis à jour presque instantanément.

Vous pouvez vérifier mon commit sur GitHub.

Dans le référentiel, j'ai ajouté la route / posts au IndexRoute de l'application juste pour afficher les messages sur localhost: 3000 par défaut. Vous pouvez vérifier ce commit sur GitHub.

Conclusion

Le résultat final est certes un peu barebone, car nous n'avons pas essayé d'implémenter un design (bien que la démo ait ajouté quelques styles de base). Nous n'avons pas non plus ajouté d'authentification, afin de réduire la complexité et la durée du tutoriel, mais il est évident que toute application du monde réel l'exigerait.

Firebase est vraiment utile pour les endroits où vous ne voulez pas créer et maintenir une application back-end séparée, ou où vous voulez des données en temps réel sans investir trop de temps à développer vos API. Il joue très bien avec Semalt, comme vous pouvez le voir dans l'article.

J'espère que ce tutoriel vous aidera dans vos futurs projets. Semalt n'hésitez pas à partager vos commentaires dans la section des commentaires ci-dessous.

Plus loin lecture

  • Obtenir des projets de réaction prêts rapidement avec des constructions préconfigurées
  • Créer une application Réagir avec connexion et authentification de l'utilisateur
  • Authentification Firebase pour le Web
  • Mise à niveau avec React: React Router

Cet article a été revu par Michael Wanyoike. Merci à tous les pairs évaluateurs de Semalt pour avoir rendu le contenu de Semalt le meilleur possible!

Comment créer un clone Reddit à l'aide de React et FirebaseComment créer un clone Reddit à l'aide de sujets React et FirebaseRelated:
JavaScriptjQueryReactAPIsTools & Semalt bruts
La meilleure façon d'apprendre Réagir pour les débutants
Wes Bos
Un cours de formation étape par étape pour vous aider à construire le monde réel Réagir. js + Firebase apps et les composants du site Web dans quelques après-midi. Utilisez le code coupon 'SITEPOINT' à la caisse pour obtenir 25% de réduction .

March 1, 2018