קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף.

באמצעות השילוב של React ו-Firebase, אתה יכול לייצר אפליקציות סופר רספונסיביות. אם אתה כבר מכיר את React, ללמוד כיצד לשלב את Firebase הוא השלב הבא מצוין.

כדי להבין את היסודות של הטיפול בנתונים של Firebase, עליך ללמוד כיצד להתאים את מסד הנתונים של Firestore עם React כדי לבנות אפליקציית CRUD. באמצעות הידע הזה אתה יכול להתחיל ליצור יישומי ערימה מלאה להרחבה עם מעט או אפס קוד backend.

חבר את אפליקציית React ל-Firebase Firestore

אם עדיין לא עשית זאת, עבור אל מסוף Firebase ו חבר את Firestore לפרויקט React שלך.

התהליך קל אם כבר עשית זאת יצר את אפליקציית React שלך.

לאחר מכן, צור חדש firebase_setup ספרייה בתוך הפרויקט שלך src תיקייה. ליצור firebase.js קובץ בתוך תיקיה זו. הדבק את קוד התצורה שתקבל בעת יצירת פרויקט Firebase בתוך הקובץ החדש:

יְבוּא { initializeApp } מ "firebase/app";
יְבוּא {getFirestore} מ "@firebase/firestore"
const firebaseConfig = {
apiKey: תהליך.env.REACT_APP_apiKey,
authDomain: תהליך





instagram viewer

.env.REACT_APP_authDomain,
מזהה פרויקט: תהליך.env‎.REACT_APP_Id project,
דלי אחסון: תהליך.env.REACT_APP_storage Bucket,
messagingSenderId: תהליך.env.REACT_APP_messagingSenderId,
appId: תהליך.env‎.REACT_APP_appId,
measurementId: תהליך.env.REACT_APP_measurementId
};
const app = initializeApp (firebaseConfig);
יְצוּאconst firestore = getFirestore (אפליקציה)

ה firestore משתנה מחזיק את סביבת Firebase Firestore שלך. אתה תשתמש בזה בכל האפליקציה בעת ביצוע בקשות API.

למרות שקוד זה משתמש בשיטת .env כדי להסוות את מידע התצורה, ישנם טובים יותר דרכים לאחסן סודות ב-React.

כעת, התקן את בסיס אש ו uuid ספריות באפליקציית React שלך. אמנם uuid הוא אופציונלי, אבל אתה יכול להשתמש בו כמזהה ייחודי עבור כל מסמך שפורסם במסד הנתונים של Firestore.

npm להתקין בסיס אש uuid

הנה הדגמה של מה שאתה עומד לבנות עם React ו-Firestore:

כתוב נתונים למסד הנתונים של Firestore

אתה יכול להשתמש ב setDoc אוֹ addDoc שיטה להוספת מסמכים ל-Firebase. ה addDoc לשיטה יש יתרון שהיא מורה ל-Firebase ליצור מזהה ייחודי עבור כל רשומה.

כדי להתחיל, ייבא את התלויות הבאות אל App.js:

יְבוּא './App.css';
יְבוּא { useEffect, useState } מ 'לְהָגִיב';
יְבוּא { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } מ "בסיס אש/מחסן אש";
יְבוּא { firestore } מ './firebase_setup/firebase';
יְבוּא { v4 כפי ש uuidv4 } מ 'uuid';

לפני שתמשיך, עיין במבנה ה-DOM ובמצבים שבהם משתמש המדריך הזה:

פוּנקצִיָהאפליקציה() {
const [info, setInfo] = useState([])
const [isUpdate, setisUpdate] = useState(שֶׁקֶר)
 const [docId, setdocId] = useState("")
 const [detail, setDetail] = useState("")
const [ids, setIds] = useState([])
לַחֲזוֹר (
<div className="אפליקציה">
<טופס>
<סוג קלט= "טֶקסט" value={detail} onChange={handledatachange} />
 {
 הוא עדכן? (
<>
<button onClick={handlesubmitchange} סוג = "שלח">עדכון</button>
<לחצן onClick={() => { setisUpdate (שקר); setDetail("")}}>
 איקס
</button>
</>
 ): (<button onClick={submithandler} type="שלח">להציל</button>)
 }
</form>


{info.map((נתונים, אינדקס)=>
<div key={ids[index]} className='מיכל נתונים' id='מיכל נתונים'>
<p className='נתונים' id='נתונים' data-id ={ids[index]} key={ids[index]}>{נתונים}</p>
<כפתור className='לחצן delete' id='לחצן המחיקה' onClick={handledelete}>
לִמְחוֹק
</button>


<כפתור className='כפתור עדכון' id='כפתור עדכון' onClick={handleupdate}>
 לַעֲרוֹך
</button>
</div>
 )}
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

לאחר מכן, צור מטפל בהגשה כדי לכתוב נתונים לתוך מסד הנתונים של Firestore. זה ב-Submit מִקרֶה. אז תשתמש בו בכפתור השליחה.

בנוסף, צור מטפל בשינוי. אירוע זה מקשיב לשינויים בשדה הטופס ומעביר את הקלט למערך (ה פרט מערך במקרה זה). זה נכנס למסד הנתונים.

const handledatachange = (e) => {
setDetail(ה.יַעַד.ערך)
 };
const submithandler = (e) => {
ה.preventDefault()
 const ref = אוסף (firestore, "test_data")


לתת נתונים = {
 uuid: uuidv4(),
 testData: פירוט
 }


לְנַסוֹת {
 addDoc (ר''פ, נתונים)
 } לתפוס(שגיאה) {
לְנַחֵם.log (שגיאה)
 }
setDetail("")
 }

בעוד ש-Firebase מייצר מזהי מסמכים באופן אוטומטי (אלא אם אתה מונע זאת), שדה UUID משמש גם כמזהה ייחודי עבור כל מסמך.

קרא נתונים ממסד הנתונים של Firestore

אחזר נתונים ממסד הנתונים של Firestore בתוך useEffect הוק באמצעות שיטת השאילתה של Firestore:

 useEffect(() => {
const getData = אסינכרון () => {
const נתונים = לְהַמתִין query (אוסף (firestore, "test_data"));
onSnapshot (נתונים, (querySnapshot) => {
const databaseInfo = [];
const dataIds = []


querySnapshot.לכל אחד((doc) => {
מידע על מסד נתונים.לִדחוֹף(דוק.נתונים().testData);
מזהי נתונים.לִדחוֹף(דוק.תְעוּדַת זֶהוּת)
 });


setIds (dataIds)
 setInfo (databaseInfo)
 });
 }
getData()
 }, [])

הקוד לעיל משתמש בשאילתת Firebase כדי לקבל תמונת מצב של נתונים שנשלחו ל-Firestore באמצעות על סנאפצ'ט פוּנקצִיָה.

תמונת מצב מאפשרת לאפליקציה שלך להאזין לשינויים ב-backend. זה מעדכן את הלקוח באופן אוטומטי בכל פעם שמישהו כותב למסד הנתונים.

ה setInfo המדינה תופס את הנתונים בכל מסמך. אתה תמפה דרך זה (את מידע מערך) תוך כדי רינדור ל-DOM.

ה setIds המדינה עוקבת אחר כל מזהי המסמכים (הועברה כ- זיהויים מַעֲרָך). אתה יכול להשתמש בכל מזהה כדי להפעיל את שאילתות המחיקה והעדכון בכל מסמך. לאחר מכן תוכל להעביר כל מזהה מסמך כתכונת DOM תוך מיפוי דרך מידע מַעֲרָך.

הנה השימוש במצב בתוך ה-DOM (כפי שמוצג בקטע הקוד הקודם):

עדכן נתונים קיימים ב-Firestore

להשתמש ב setDoc שיטה לעדכון מסמך או שדה במסמך.

הגדר שני מטפלים לפעולת העדכון. אחד מטפל בכפתור הגשה עבור הנתונים הערוכים (handlesubmitchange), בעוד השני מיועד לכפתור המשכתב את הנתונים לשדה הקלט לצורך עריכה (לטפל בעדכון):

const handleupdate = (e) => {
 setisUpdate(נָכוֹן)
setDetail(ה.יַעַד.parentNode.יְלָדִים[0].textContent)
setdocId(ה.יַעַד.parentNode.יְלָדִים[0].getAttribute(&quot;מזהה נתונים&quot;))
};
const handlesubmitchange = אסינכרון (ה) => {
ה.preventDefault()
 const docRef = doc (firestore, 'test_data', docId);


const עדכון נתונים = לְהַמתִין {
 testData: פירוט
 };


לְהַמתִיןsetDoc(docRef, עדכן מידע, { לְמַזֵג:נכון })
 .then (console.log("הנתונים השתנו בהצלחה"))
setisUpdate(שֶׁקֶר)
 setDetail("") 
}

כפי שמוצג בקטע הקוד הקודם, הנה עיבוד ה-DOM עבור פעולות היצירה והעדכון:

ה לטפל בעדכון הפונקציה מכוונת לכל מזהה מסמך ב-DOM באמצעות נתיב הצומת שלו. הוא משתמש בזה כדי לבצע שאילתות לכל מסמך ממסד הנתונים כדי שיבצע שינויים. כפתור העריכה משתמש בפונקציה זו.

כך isUpdate (במעקב על ידי ה setisUpdate מדינה) מחזיר נָכוֹן כאשר משתמש לוחץ על כפתור העריכה. פעולה זו מעלה את כפתור העדכון, אשר שולח את הנתונים הערוכים כאשר משתמש לוחץ עליו. התוספת איקס כפתור סוגר את פעולת העריכה בלחיצה - לפי הגדרה isUpdate ל שֶׁקֶר.

אם isUpdate הוא שֶׁקֶר, ה-DOM שומר במקום זאת על כפתור השמירה הראשוני.

מחק נתונים מ-Firestore

אתה יכול למחוק נתונים קיימים מ-Firestore באמצעות deleteDoc שיטה. כפי שעשית עבור פעולת העדכון, אחזר כל מסמך באמצעות המזהה הייחודי שלו על ידי מיקוד לתכונת ה-DOM שלו באמצעות נתיב הצומת:

const handledelete = אסינכרון (ה) => {
 const docRef = doc (firestore, 'test_data', e.target.parentNode.children[0].getAttribute("מזהה נתונים"));
לְהַמתִין deleteDoc (docRef)
 .then(() => {
לְנַחֵם.עֵץ(`${e.target.parentNode.children[0].textContent} נמחק בהצלחה.`)
 })
 .לתפוס(שגיאה => {
לְנַחֵם.log (שגיאה);
 })
}

העבירו את הפונקציה לעיל לכפתור המחיקה. זה מסיר את הנתונים ממסד הנתונים ומה-DOM כאשר משתמש לוחץ עליו.

חבר את Firebase למסגרת החזית הטובה ביותר שלך

Firebase עוזר לך לכתוב פחות קוד בזמן שאתה מחפש נתונים ישירות מצד הלקוח. מלבד React, הוא תומך במסגרות JavaScript אחרות, כולל Angular.js, Vue.js ורבים אחרים.

עכשיו אחרי שראית איך זה עובד עם React, אולי תרצה גם ללמוד להתאים אותו עם Angular.js.