{"id":3028,"date":"2021-08-17T20:00:48","date_gmt":"2021-08-17T15:30:48","guid":{"rendered":"http:\/\/rabsana.ir\/tutorials\/?p=3028"},"modified":"2021-10-31T12:17:32","modified_gmt":"2021-10-31T08:47:32","slug":"consume-data-from-firebase-firestore-in-a-react-app","status":"publish","type":"post","link":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/","title":{"rendered":"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React"},"content":{"rendered":"

Firebase \u06cc\u06a9\u06cc \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u06af\u0648\u06af\u0644 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u0645\u0627\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u062f\u0647\u062f. \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u062d\u062a \u0648\u0628 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0633\u0631\u0648\u0631\u060c \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0648 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/strong><\/p>\n

\u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc\u06cc \u0645\u062b\u0644 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c \u062a\u0648\u0627\u0628\u0639 cloud \u06cc\u0627 \u0641\u0636\u0627\u06cc \u0627\u0628\u0631\u06cc\u060c \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 real-time (\u0628\u0644\u0627\u062f\u0631\u0646\u06af) \u0648 … \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u06a9\u0627\u0645\u0644 \u0648 \u0648\u0627\u0642\u0639\u06cc \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u062e\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647<\/strong><\/h3>\n

\u0627\u0628\u062a\u062f\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc Firebase \u062f\u0627\u0631\u06cc\u062f. \u0633\u067e\u0633 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0627\u06cc\u062c\u0627\u062f \u0648 \u0628\u0631 \u0631\u0648\u06cc Add Firebase to Your Web App \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f. \u0628\u0639\u062f \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0628\u062e\u0634 Could Firestore \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f \u0648 \u06cc\u06a9 \u0645\u062c\u0645\u0648\u0639\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 Blogs <\/em> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0645\u0637\u0627\u0628\u0642 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u06cc\u06a9 \u062f\u0627\u06a9\u06cc\u0648\u0645\u0646\u062a \u06cc\u0627 \u0633\u0646\u062f \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

body: “Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.”<\/p>\n

created_at: November 11, 2020 at 12:00:00 AM UTC+5:30<\/p>\n

posted_by: “Sam<\/p>\n

title: “New Egg Recipe”<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u0648\u0627\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 React \u0634\u0648\u06cc\u062f \u0648 Firebase \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n

npm i firebase<\/p>\n

\u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0647\u0627<\/h4>\n

\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u062c\u0647\u062a \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062a\u0645\u0627\u0645\u00a0 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632\u060c \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0628\u0633\u0627\u0632\u06cc\u062f. \u0646\u0627\u0645 \u0622\u0646 \u0631\u0627 firebase.config.js <\/em>\u0628\u06af\u0630\u0627\u0631\u06cc\u062f. \u0633\u067e\u0633 \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0648\u06cc\u062f \u0648 firebaseConfig<\/em> \u0631\u0627 \u06a9\u067e\u06cc \u0648 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0641\u0627\u06cc\u0644 firebase.config.js<\/em> \u067e\u06cc\u0633\u062a (paste) \u06a9\u0646\u06cc\u062f.<\/p>\n

import firebase from ‘firebase’<\/p>\n

var firebaseConfig = {<\/p>\n

apiKey: “xxxxxxxxxxxxxxxx”,<\/p>\n

authDomain: “xxxxxxxxxxxxxxxx”,<\/p>\n

databaseURL: “xxxxxxxxxxxxxxxx”,<\/p>\n

projectId: “xxxxxxxxxxxxxxxx”,<\/p>\n

storageBucket: “xxxxxxxxxxxxxxxx”,<\/p>\n

messagingSenderId: “xxxxxxxxxxxxxxxx”,<\/p>\n

appId: “xxxxxxxxxxxxxxxx”,<\/p>\n

measurementId: “xxxxxxxxxxxxxxxx”<\/p>\n

};<\/p>\n

const firebaseApp=firebase.initializeApp(firebaseConfig);<\/p>\n

const db=firebase.firestore();<\/p>\n

export default db;<\/p>\n

\u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 firebaseConfig<\/em> \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u062e\u0648\u062f \u0631\u0627\u060c \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f. \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Firebase \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 firebaseConfig \u0628\u0647 \u0645\u062a\u062f ()firebase.initializeapp \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f .<\/p>\n

\u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062a\u062f firestore<\/em> \u062f\u0631 Object \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0645\u0631\u0627\u062c\u0639\u0647 \u0648 \u062f\u0631 \u0622\u0646 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore<\/strong><\/h2>\n

\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 \u0627\u0632 \u0641\u0627\u06cc\u0631 \u0627\u0633\u062a\u0648\u0631 \u0634\u0628\u06cc\u0647 \u062f\u0631\u0633\u062a \u0634\u0628\u06cc\u0647 \u0628\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a \u0641\u0627\u06cc\u0644 JSON \u0627\u0632 REST API \u0645\u06cc \u0645\u0627\u0646\u062f.<\/p>\n

\u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u062f\u0633\u062a\u0648\u0631 db \u0627\u0632 \u06a9\u0627\u0646\u0641\u06cc\u06af \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc\u06a9\u0646\u06cc\u0645. \u0633\u067e\u0633 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 state \u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648\u0627\u06a9\u0634\u06cc \u06cc\u0627 fetch \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0633\u062a\u0648\u0631\u0627\u062a useState <\/em>\u0648 useEffect<\/em> \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n

import db from ‘.\/firebase.config’;<\/p>\n

import React,{useState,useEffect} from ‘react’;<\/p>\n

\u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 state \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0645\u0634\u062e\u0635 \u0648 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

const [blogs,setBlogs]=useState([])<\/p>\n

\u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0641\u0627\u06cc\u0631 \u0627\u0633\u062a\u0648\u0631 \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0622\u0646 \u062f\u0631 useEffect<\/em>\u060c \u0645\u0627\u0646\u0646\u062f \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u06cc\u06a9 \u062a\u0627\u0628\u0639 async<\/em> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

useEffect(() => {<\/p>\n

fetchBlogs();<\/p>\n

}, [])<\/p>\n

\u062f\u0631\u0648\u0646 \u0645\u062a\u062f ()fetchBlogs<\/em> \u060c \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062a\u062f ()collection<\/em> \u062f\u0631 \u0634\u06cc db<\/em> \u0645\u0631\u062c\u0639 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0631\u0648\u06cc\u062f \u0648 \u0646\u0627\u0645 \u0645\u062c\u0645\u0648\u0639\u0647 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n

const fetchBlogs=async()=>{<\/p>\n

const response=db.collection(‘Blogs’);<\/p>\n

}<\/p>\n

\u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0634\u06cc response<\/em> \u060c \u0627\u0632 \u06a9\u0644\u0645\u0647 \u06a9\u0644\u06cc\u062f\u06cc await<\/em> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u0634\u06cc response<\/em>\u060c \u0645\u062a\u062f ()get<\/em> \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0645\u062a\u063a\u06cc\u0631 data<\/em> \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

const fetchBlogs=async()=>{<\/p>\n

const response=db.collection(‘Blogs’);<\/p>\n

const data=await response.get();<\/p>\n

}<\/p>\n

\u0634\u06cc data \u0686\u0647 \u0648\u06cc\u0698\u06af\u06cc \u062e\u0627\u0635\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u062f\u0647\u062f\u061f<\/h4>\n

\u0634\u06cc data<\/em> \u0634\u0627\u0645\u0644 \u0648\u06cc\u0698\u06af\u06cc \u0627\u06cc\u06cc \u0628\u0647 \u0646\u0627\u0645 docs<\/em> \u0627\u0633\u062a \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u0633\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0648 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0647\u0631 \u0633\u0646\u062f \u062f\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u0633\u062a. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0647\u0631 \u062f\u0627\u06a9\u06cc\u0648\u0645\u0646\u062a \u06cc\u0627 \u0633\u0646\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062d\u0627\u0648\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0648 \u0634\u062e\u0635\u06cc \u0628\u0627\u0634\u062f. \u062f\u0633\u062a\u0648\u0631 data.docs<\/em> \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u06cc\u06a9 \u0622\u06cc\u062a\u0645 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u062a\u062f ()data<\/em> \u0631\u0627 \u062f\u0631 \u0647\u0631 \u0622\u06cc\u062a\u0645 \u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062f\u0627\u062e\u0644 \u0622\u0646\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

const fetchBlogs=async()=>{<\/p>\n

const response=db.collection(‘Blogs’);<\/p>\n

const data=await response.get();<\/p>\n

data.docs.forEach(item=>{<\/p>\n

setBlogs([…blogs,item.data()])<\/p>\n

})<\/p>\n

}<\/p>\n

\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u062d\u0644\u0642\u0647 \u0628\u0627\u0644\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u060c \u0645\u06cc\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 state \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f .<\/p>\n

\u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 Blogs<\/em> \u0627\u0632 \u06cc\u06a9 \u0633\u0646\u062f \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c state<\/em> \u0634\u0645\u0627 \u0647\u0645 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0622\u06cc\u062a\u0645 \u0645\u06cc\u0634\u0648\u062f. \u062f\u0631 \u0622\u062e\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 state<\/em> \u0648 \u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 DOM \u0686\u0631\u062e\u0647 \u0631\u0627 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f.<\/p>\n

return (<\/p>\n

<div className=”App”><\/p>\n

{<\/p>\n

blogs && blogs.map(blog=>{<\/p>\n

return(<\/p>\n

<div className=”blog-container”><\/p>\n

<h4>{blog.title}<\/h4><\/p>\n

<p>{blog.body}<\/p><\/p>\n

<\/div><\/p>\n

)<\/p>\n

})<\/p>\n

}<\/p>\n

<\/div><\/p>\n

);<\/p>\n

\u06a9\u062f \u0646\u0647\u0627\u06cc\u06cc<\/strong><\/h4>\n

\u062a\u0645\u0627\u0645 \u06a9\u062f\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06cc\u06a9 \u0645\u062c\u0645\u0648\u0639\u0647 \u0641\u0627\u06cc\u0631 \u0627\u0633\u062a\u0648\u0631 \u060c \u0645\u0635\u0631\u0641 \u0645\u06cc\u06a9\u0646\u0646\u062f \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n

import ‘.\/App.css’;<\/p>\n

import db from ‘.\/firebase.config’;<\/p>\n

import React,{useState,useEffect} from ‘react’;<\/p>\n

 <\/p>\n

function App() {<\/p>\n

const [blogs,setBlogs]=useState([])<\/p>\n

const fetchBlogs=async()=>{<\/p>\n

const response=db.collection(‘Blogs’);<\/p>\n

const data=await response.get();<\/p>\n

data.docs.forEach(item=>{<\/p>\n

setBlogs([…blogs,item.data()])<\/p>\n

})<\/p>\n

}<\/p>\n

useEffect(() => {<\/p>\n

fetchBlogs();<\/p>\n

}, [])<\/p>\n

return (<\/p>\n

<div className=”App”><\/p>\n

{<\/p>\n

blogs && blogs.map(blog=>{<\/p>\n

return(<\/p>\n

<div className=”blog-container”><\/p>\n

<h4>{blog.title}<\/h4><\/p>\n

<p>{blog.body}<\/p><\/p>\n

<\/div><\/p>\n

)<\/p>\n

})<\/p>\n

}<\/p>\n

<\/div><\/p>\n

);<\/p>\n

}<\/p>\n

 <\/p>\n

export default App;<\/p>\n

\u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0645\u0637\u0627\u0644\u0628\u06cc \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f\u060c \u0634\u0645\u0627 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u0635\u0631\u0641 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0646\u06cc\u0632 \u0645\u06cc\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u062f\u0627\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633\u060c \u0645\u06cc\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u062f \u062a\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u062a\u0648\u0644\u06cc\u062f \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0647\u0631 \u0632\u0645\u0627\u0646\u06cc \u0648 \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u06af\u0648\u0646\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u06cc \u062f\u0631 \u0633\u0631\u0648\u0631\u060c \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u06cc\u062f.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Firebase \u06cc\u06a9\u06cc \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u06af\u0648\u06af\u0644 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u0645\u0627\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u062f\u0647\u062f. \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u062d\u062a \u0648\u0628 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0633\u0631\u0648\u0631\u060c \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0648 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f. \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc\u06cc \u0645\u062b\u0644 \u0627\u062d\u0631\u0627\u0632 …<\/p>\n","protected":false},"author":4,"featured_media":3029,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[73],"tags":[],"yoast_head":"\n\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627<\/title>\n<meta name=\"description\" content=\"\u0622\u0645\u0648\u0632\u0634 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0646\u0635\u0628 Firebase \u060c \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore \u060c \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0686\u06cc\u0633\u062a\u061f\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/\" \/>\n<meta property=\"og:locale\" content=\"fa_IR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React\" \/>\n<meta property=\"og:description\" content=\"\u0622\u0645\u0648\u0632\u0634 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0646\u0635\u0628 Firebase \u060c \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore \u060c \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0686\u06cc\u0633\u062a\u061f\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-17T15:30:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-31T08:47:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/08\/Consume-Data-from-Firebase-Firestore-in-a-React-App.webp\" \/>\n<meta name=\"twitter:label1\" content=\"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u0632\u0645\u0627\u0646 \u062a\u0642\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u062f\u0642\u06cc\u0642\u0647\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b\",\"name\":\"bagher rezvan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#personlogo\",\"inLanguage\":\"fa-IR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/43c698432e5f8e000d945d3945e15b50?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/43c698432e5f8e000d945d3945e15b50?s=96&d=mm&r=g\",\"caption\":\"bagher rezvan\"},\"logo\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#personlogo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#website\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/\",\"name\":\"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627\",\"description\":\"\u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc \u0634\u0631\u06a9\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0631\u0627\u0628\u0633\u0627\u0646\u0627\",\"publisher\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rabsana.ir\/tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fa-IR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#primaryimage\",\"inLanguage\":\"fa-IR\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/08\/Consume-Data-from-Firebase-Firestore-in-a-React-App.webp\",\"contentUrl\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/08\/Consume-Data-from-Firebase-Firestore-in-a-React-App.webp\",\"width\":1200,\"height\":360,\"caption\":\"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#webpage\",\"url\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/\",\"name\":\"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627\",\"isPartOf\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#primaryimage\"},\"datePublished\":\"2021-08-17T15:30:48+00:00\",\"dateModified\":\"2021-10-31T08:47:32+00:00\",\"description\":\"\u0622\u0645\u0648\u0632\u0634 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0646\u0635\u0628 Firebase \u060c \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore \u060c \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0686\u06cc\u0633\u062a\u061f\",\"breadcrumb\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#breadcrumb\"},\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u062e\u0627\u0646\u0647\",\"item\":\"https:\/\/rabsana.ir\/tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#webpage\"},\"author\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd\"},\"headline\":\"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React\",\"datePublished\":\"2021-08-17T15:30:48+00:00\",\"dateModified\":\"2021-10-31T08:47:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#webpage\"},\"wordCount\":467,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b\"},\"image\":{\"@id\":\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/08\/Consume-Data-from-Firebase-Firestore-in-a-React-App.webp\",\"articleSection\":[\"\u0622\u062e\u0631\u06cc\u0646 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\"],\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd\",\"name\":\"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/rabsana.ir\/tutorials\/#personlogo\",\"inLanguage\":\"fa-IR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0910931d9fb93b2b6b0627aa03c9f1c6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0910931d9fb93b2b6b0627aa03c9f1c6?s=96&d=mm&r=g\",\"caption\":\"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc\"},\"url\":\"https:\/\/rabsana.ir\/tutorials\/author\/mahsa-mhmdi\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","description":"\u0622\u0645\u0648\u0632\u0634 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0646\u0635\u0628 Firebase \u060c \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore \u060c \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0686\u06cc\u0633\u062a\u061f","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/","og_locale":"fa_IR","og_type":"article","og_title":"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React","og_description":"\u0622\u0645\u0648\u0632\u0634 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0646\u0635\u0628 Firebase \u060c \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore \u060c \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0686\u06cc\u0633\u062a\u061f","og_url":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/","og_site_name":"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","article_published_time":"2021-08-17T15:30:48+00:00","article_modified_time":"2021-10-31T08:47:32+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/08\/Consume-Data-from-Firebase-Firestore-in-a-React-App.webp","twitter_misc":{"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a":"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc","\u0632\u0645\u0627\u0646 \u062a\u0642\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646":"4 \u062f\u0642\u06cc\u0642\u0647"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Person","Organization"],"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b","name":"bagher rezvan","image":{"@type":"ImageObject","@id":"https:\/\/rabsana.ir\/tutorials\/#personlogo","inLanguage":"fa-IR","url":"https:\/\/secure.gravatar.com\/avatar\/43c698432e5f8e000d945d3945e15b50?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/43c698432e5f8e000d945d3945e15b50?s=96&d=mm&r=g","caption":"bagher rezvan"},"logo":{"@id":"https:\/\/rabsana.ir\/tutorials\/#personlogo"}},{"@type":"WebSite","@id":"https:\/\/rabsana.ir\/tutorials\/#website","url":"https:\/\/rabsana.ir\/tutorials\/","name":"\u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","description":"\u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc \u0634\u0631\u06a9\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0631\u0627\u0628\u0633\u0627\u0646\u0627","publisher":{"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rabsana.ir\/tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fa-IR"},{"@type":"ImageObject","@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#primaryimage","inLanguage":"fa-IR","url":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/08\/Consume-Data-from-Firebase-Firestore-in-a-React-App.webp","contentUrl":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/08\/Consume-Data-from-Firebase-Firestore-in-a-React-App.webp","width":1200,"height":360,"caption":"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore"},{"@type":"WebPage","@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#webpage","url":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/","name":"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React | \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0628\u0633\u0627\u0646\u0627","isPartOf":{"@id":"https:\/\/rabsana.ir\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#primaryimage"},"datePublished":"2021-08-17T15:30:48+00:00","dateModified":"2021-10-31T08:47:32+00:00","description":"\u0622\u0645\u0648\u0632\u0634 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0646\u0635\u0628 Firebase \u060c \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648 consume \u06a9\u0631\u062f\u0646 \u062f\u06cc\u062a\u0627 \u0627\u0632 Firestore \u060c \u0641\u0627\u06cc\u0631\u0628\u06cc\u0633 \u0686\u06cc\u0633\u062a\u061f","breadcrumb":{"@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#breadcrumb"},"inLanguage":"fa-IR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u062e\u0627\u0646\u0647","item":"https:\/\/rabsana.ir\/tutorials\/"},{"@type":"ListItem","position":2,"name":"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React"}]},{"@type":"Article","@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#article","isPartOf":{"@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#webpage"},"author":{"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd"},"headline":"\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0627\u0632 Firebase Firestore \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React","datePublished":"2021-08-17T15:30:48+00:00","dateModified":"2021-10-31T08:47:32+00:00","mainEntityOfPage":{"@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#webpage"},"wordCount":467,"commentCount":0,"publisher":{"@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/4ae2a08dbbdf43f1d2e6fe967155aa4b"},"image":{"@id":"https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#primaryimage"},"thumbnailUrl":"https:\/\/rabsana.ir\/tutorials\/wp-content\/uploads\/2021\/08\/Consume-Data-from-Firebase-Firestore-in-a-React-App.webp","articleSection":["\u0622\u062e\u0631\u06cc\u0646 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631"],"inLanguage":"fa-IR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rabsana.ir\/tutorials\/consume-data-from-firebase-firestore-in-a-react-app\/#respond"]}]},{"@type":"Person","@id":"https:\/\/rabsana.ir\/tutorials\/#\/schema\/person\/f95a0ac81e3ccf2f7b115822a7a815cd","name":"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc","image":{"@type":"ImageObject","@id":"https:\/\/rabsana.ir\/tutorials\/#personlogo","inLanguage":"fa-IR","url":"https:\/\/secure.gravatar.com\/avatar\/0910931d9fb93b2b6b0627aa03c9f1c6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0910931d9fb93b2b6b0627aa03c9f1c6?s=96&d=mm&r=g","caption":"\u0645\u0647\u0633\u0627 \u0645\u062d\u0645\u062f\u06cc"},"url":"https:\/\/rabsana.ir\/tutorials\/author\/mahsa-mhmdi\/"}]}},"_links":{"self":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3028"}],"collection":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/comments?post=3028"}],"version-history":[{"count":1,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3028\/revisions"}],"predecessor-version":[{"id":3030,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/posts\/3028\/revisions\/3030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/media\/3029"}],"wp:attachment":[{"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/media?parent=3028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/categories?post=3028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rabsana.ir\/tutorials\/wp-json\/wp\/v2\/tags?post=3028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}