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

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

על פי סקר Stack Overflow 2022, 21.14 אחוז מהמפתחים משתמשים ב-Firebase, מה שהופך אותה לפלטפורמת הענן הרביעית הכי פופולרית. זוהי טכנולוגיה מתפתחת לשילוב הקצה האחורי בצורה חלקה.

עם Firebase, אתה יכול לפתח יישום ערימה מלאה מבלי לכתוב שורה אחת של קוד אחורי. למד כיצד לחבר את אפליקציית React.js שלך עם Firebase עוד היום ולבנות תוך כדי תנועה.

התקן את חבילת Firebase

לאחר יצירת אפליקציית React שלך, שנה את הספרייה לתיקיית השורש של הפרויקט שלך והתקן את חבילת Firebase על ידי הפעלת:

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

הוסף את אפליקציית React שלך לפרויקט Firebase

השלב הבא הוא ליצור פרויקט Firebase ולקשר אותו לאפליקציית React שלך. עבור אל קונסולת Firebase:

1. נְקִישָׁה הוסף פרויקט כדי להתחיל פרויקט Firebase חדש.
2. הזן שם פרויקט ולאחר מכן לחץ לְהַמשִׁיך.
3. נְקִישָׁה לְהַמשִׁיך בעמוד הבא.
4. בחר את חשבון Firebase שלך ​​מהתפריט הנפתח או לחץ צור חשבון חדש אם עדיין אין לך אחד.
instagram viewer
5. לבסוף, לחץ צור פרויקט.
6. נְקִישָׁה לְהַמשִׁיך לאחר השלמת התהליך.
7. לאחר מכן, לחץ על סמל האינטרנט () לכיוון הפינה השמאלית העליונה של הדף הבא כדי להגדיר את Firebase עבור האינטרנט.
8. הזן כינוי לאפליקציה שלך בשדה המסופק. לאחר מכן לחץ הרשמה אפליקציה.
9. העתק את הקוד שנוצר ושמור אותו לשלב הבא (נדון בסעיף הבא).
10. נְקִישָׁה המשך לקונסולה.
11. ישנן אפשרויות רבות בעמוד הבא. גלול מטה ובחר Cloud Firestore מכיוון שאתה רק צריך להגדיר מסד נתונים במקרה זה.
12. לאחר מכן, לחץ צור מסד נתונים.
13. נְקִישָׁה הַבָּא. בחר את המיקום המועדף עליך ב-Firestore מהתפריט הנפתח.
14. לאחר מכן לחץ לְאַפשֵׁר כדי ליצור מסד נתונים של Firestore.

אתחל את Firebase באפליקציית React שלך

צור תיקיה חדשה בתוך הפרויקט שלך src מַדרִיך. אתה יכול לקרוא לזה firebase_setup. לאחר מכן, צור א firebase.js קובץ בתוך אותה תיקייה. לאחר מכן הדבק את הקוד שנוצר קודם לכן בקובץ זה.

לעת עתה, אתה יכול לאחסן את אובייקט התצורה (firebaseConfig) בתוך a .env קוֹבֶץ. אבל שקול להשתמש במכשיר מאובטח יותר דרך להסוות את סודות ה-React בהפקה. נתונים שאתה מאחסן ב-a .env קובץ יכול בקלות לדלוף בבניית האפליקציה שלך.

לדוגמה, כדי להזין את המפתח הסודי Firebase של האפליקציה שלך ב- .env קוֹבֶץ:

REACT_APP_apiKey = yourFirebaseAccessKey

לפיכך, אתה יכול לכוונן את הקוד שנוצר באופן הבא:

יְבוּא { initializeApp } מ "firebase/app";
יְבוּא { getFirestore } מ "@firebase/firestore"
const firebaseConfig = {
apiKey: תהליך.env.REACT_APP_apiKey,
authDomain: תהליך.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 (אפליקציה)

בדוק את חיבור Firebase שלך

אתה יכול לבדוק את החיבור על ידי שליחת נתוני דמה ל-Firestore. התחל ביצירת א ידיות תיקייה בתוך הפרויקט שלך src מַדרִיך. צור מטפל להגשה בתוך הקובץ הזה. אתה יכול לקרוא לזה handlesubmit.js, לדוגמה:

יְבוּא { addDoc, collection } מ "@firebase/firestore"
יְבוּא { firestore } מ "../firebase_setup/firebase"
const handleSubmit = (testdata) => {
const ref = collection (firestore, "test_data") // Firebase יוצר את זה באופן אוטומטי
לתת נתונים = {
 testData: testdata
 }
לְנַסוֹת {
 addDoc (ר''פ, נתונים)
 } לתפוס(שגיאה) {
לְנַחֵם.log (שגיאה)
 }
}
יְצוּאבְּרִירַת מֶחדָל handleSubmit

ואז פנימה App.js:

יְבוּא './App.css';
יְבוּא handleSubmit מ './handles/handlesubmit';
יְבוּא { useRef } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
const dataRef = useRef()
const submithandler = (e) => {
ה.preventDefault()
handleSubmit(נתוניםRef.נוֹכְחִי.ערך)
 dataRef.current.value = ""
 }
לַחֲזוֹר (
<div className="אפליקציה">
<form onSubmit={submithandler}>
<סוג קלט= "טֶקסט" ref={dataRef} />
<סוג כפתור = "שלח">להציל</button>
</form>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

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

בנה בדרכים עם Firebase ו-React

Firebase הוא פתרון backend-as-a-service רב-תכליתי המאפשר לך להתאים את האפליקציה שלך ביעילות. לאחר שתחבר את אפליקציית React שלך, תוכל למנף את התכונות הרבות שלה כדי לבנות את האתר שלך לפי טעמך.

לדוגמה, ערכת הכלים לאימות Firebase היא אחת התכונות שאולי תרצה לחקור.