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

React est une fantastique bibliothèque frontale pour la création d'interfaces utilisateur. Lorsque vous choisissez un back-end à utiliser avec lui, vous ne pouvez pas vous tromper avec Firebase un backend-as-a-service (Baas) qui facilite l'ajout de la persistance des données (et bien plus encore) ) à votre application React.

Dans ce didacticiel, nous utiliserons Firebase avec Create React App pour créer une application qui fonctionnera de la même manière que Reddit . Cela permettra à l'utilisateur de soumettre un nouveau message qui pourra ensuite être voté. Je vais également vous montrer comment déployer notre clone Reddit sur Vercel .

Une fois que vous aurez fini de lire, vous comprendrez comment configurer Firebase, comment le connecter à votre application React et comment pour déployer le résultat.

Pourquoi Firebase?

L'une des forces de Firebase est qu'il nous permet de montrer très facilement des données en temps réel à l'utilisateur. Une fois qu'un utilisateur vote sur un lien, la rétroaction sera instantanée. La base de données en temps réel de Firebase nous aidera à développer cette fonctionnalité. De plus, cela nous aidera à comprendre comment amorcer une application React avec Firebase.

Pourquoi React?

React est particulièrement connu pour créer des interfaces utilisateur en utilisant une architecture de composants. Chaque composant peut contenir un état interne ou recevoir des données comme accessoires . L'état et les accessoires sont les deux concepts les plus importants de React. 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 rendre dans la React docs .

Remarque: vous pouvez également utiliser un conteneur d'état comme Redux ou MobX mais par souci de simplicité, nous n'en utiliserons pas un pour ce tutoriel.

Voici une démo en direct de ce que nous allons construire. Le code de cette application est disponible sur GitHub .

Configuration du projet

Pour continuer, vous devez avoir installé Node et npm sur votre ordinateur. Si ce n'est pas le cas, rendez-vous sur la page de téléchargement de Node.js et récupérez la dernière version de votre système (npm est fourni avec Node). Vous pouvez également consulter notre tutoriel sur l'installation de Node à l'aide d'un gestionnaire de version .

Voyons les étapes pour configurer la structure de notre projet et les dépendances nécessaires.

Démarrer une application React

Nous pouvons créer une nouvelle application React à l'aide de Create React App en utilisant la commande suivante:

 npx create-react-app reddit-clone

Ceci échafaudera un nouveau projet create-react-app dans le répertoire reddit-clone . Notre structure de répertoire doit être la suivante:

Une fois le bootstrapping terminé, nous pouvons entrer dans le répertoire reddit-clone et lancer le serveur de développement :

 cd reddit-clone && npm start

À ce stade, nous pouvons visiter http: // localhost: 3000 / et voir notre application opérationnelle.

Structuration de l'application

C'est toujours une bonne pratique de supprimer tous les fichiers dont nous n'avons pas besoin après avoir amorcé une application. Il y a quelques fichiers générés par Create React App dont nous n'avons pas besoin, donc nous les supprimerons.

Nous pouvons supprimer les fichiers suivants:

1. src / App.css
2. src / App.test .js
3. src / index.css
4. src / logo.svg
5. src / serviceWorker.js
6. src / setupTests.js

Nous pouvons également supprimer les dépendances suivantes de notre paquet .json fichier:

1. @ testing-library / jest-dom
2. @ testing-library / react
3. @ testing-library / user-event

Nous pouvons également supprimer le test de notre fichier package.json . En effet, nous n’écrirons aucun test pour notre application. Si vous souhaitez tester une application React, veuillez consulter notre tutoriel, « Comment tester les composants React à l'aide de Jest ».

Notre src / index.js Le fichier doit contenir les éléments suivants:

 import React from "react";
importer ReactDOM depuis "react-dom";
importer l'application depuis "./app";

ReactDOM.render (
  
    
  ,
  document.getElementById ("racine")
);

Nous renommerons notre src / App.js en src / app.js . Modifiez-le pour qu'il contienne ce qui suit:

 import React de "react";

function App () {
  return 
 Bonjour tout le monde! 
;
}

exporter l'application par défaut;

Maintenant, nous pouvons redémarrer notre serveur de développement en utilisant la commande suivante depuis notre répertoire racine:

 npm start

Notre serveur de développement devrait être opérationnel sur http: // localhost: 3000 / et il devrait ressembler à ce qui suit:

Dans cette section, nous allons installer et intégrer Firebase à notre application.

Si vous n'avez pas de compte Firebase, vous pouvez créer un compte gratuit maintenant en visitant leur site Web . Une fois que vous avez terminé de créer un nouveau compte, connectez-vous à votre compte et allez sur la page de la console et cliquez sur Créer un projet .

Entrez le nom de votre projet ( J'appelle le mien reddit-clone ), j'accepte les termes et conditions, et je clique sur le bouton Continuer .

À l'étape suivante, vous devez choisir d'activer ou non Google Analytics pour le projet, puis cliquer sur le bouton Continuer .

À la troisième étape, nous devons sélectionner un compte Google Analytics puis cliquer sur le bouton Créer un projet :

Après quelques instants, vous verrez un message indiquant que votre nouveau projet est prêt. Cliquez sur Continuer pour quitter l'assistant.

Création d'une nouvelle application dans le projet Firebase

Dans cette section, nous allons créer une nouvelle application Firebase à partir de la console Firebase . Nous pouvons créer une application Web en sélectionnant l'option Web.

Ensuite, nous devrons entrer le nom de le projet et cliquez sur le bouton Enregistrer l'application en laissant la case Configurer également Firebase Hosting décochée.

Vous verrez maintenant toutes les informations d'identification de notre nouvelle application Web Firebase.

Notez ces informations d'identification et cliquez sur Continuez vers la console .

Nous pouvons maintenant ajouter les informations d'identification de notre application à un fichier d'environnement :

 // .env

REACT_APP_FIREBASE_API_KEY = "123456"
REACT_APP_FIREBASE_AUTH_DOMAIN = "reddit-clone-123456.firebaseapp.com"
REACT_APP_FIREBASE_PROJECT_ID = "reddit-clone-123456"
REACT_APP_FIREBASE_STORAGE_BUCKET = "reddit-clone-123456.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "123456"
REACT_APP_FIREBASE_APP_ID = "1: 123456: web: 123456"
REACT_APP_FIREBASE_MEASUREMENT_ID = "G-123456"

Remarque: c'est toujours une bonne idée de stocker toutes les informations d'identification dans un fichier d'environnement et d'ajouter ce fichier à .gitignore afin que les informations d'identification ne soient jamais divulguées dans le code source. [19659004] Ensuite, nous pouvons créer un nouveau fichier src / lib / firebase.js où nous stockerons tous nos identifiants Firebase:

 import firebase de "firebase";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  mesureId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const initFirebase = firebase.initializeApp (firebaseConfig);
const db = initFirebase.firestore ();

exporter la base de données par défaut;

Enfin, nous devrons installer le package firebase afin de pouvoir interagir avec notre base de données:

 npm install firebase

Continuer la lecture
Comment créer un clone Reddit à l'aide de React et Firebase
sur SitePoint .