Firebase cho phép bạn dễ dàng xây dựng các ứng dụng web không có máy chủ bằng cách cung cấp cho bạn nhiều tính năng ngay lập tức. Nó đóng vai trò là toàn bộ phần phụ trợ dưới dạng dịch vụ bằng cách cung cấp xác thực, chức năng đám mây, cơ sở dữ liệu thời gian thực, Cloud Firestore, v.v.
Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng dữ liệu từ Firebase Cloud Firestore trong ứng dụng React của bạn
Thiết lập ban đầu
Đảm bảo rằng bạn có tài khoản trên firebase. Google. com và tạo một dự án Firebase mới. Nhấp vào Thêm Firebase vào Ứng dụng web của bạn và làm theo các bước. Chuyển đến phần Cloud Firestore và tạo bộ sưu tập mới có tên
1 . Thêm một tài liệu như hình dưới đây. 1npm i firebase
1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
json
Bây giờ hãy truy cập ứng dụng React của bạn và cài đặt Firebase
1npm i firebase
vỏ bọc
Tạo một tệp mới có tên
2 để lưu trữ tất cả các chi tiết cấu hình cần thiết để kết nối với dự án Firebase của bạn. Đi tới phần cài đặt dự án của bạn và sao chép 1npm i firebase
3 rồi dán vào bên trong 1npm i firebase
2 file.1npm i firebase
1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
jav
Đảm bảo bạn đã thêm chính xác dự án Firebase của riêng mình ______03 . Khởi tạo ứng dụng Firebase bằng cách chuyển phương thức
3 đến 1npm i firebase
7 và nhận . 1npm i firebase
8 method on the Firebase object and storing it in a variable.1npm i firebase
Tiêu thụ dữ liệu từ Firestore
Việc sử dụng dữ liệu từ Firestore tương tự như sử dụng dữ liệu JSON từ API REST. Đầu tiên, nhập
9 từ tệp cấu hình cùng với 1npm i firebase
0 và 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
1 to create 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
2, and fire the request to fetch data.1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
5jav
Tạo một phần
2 để lưu trữ dữ liệu của bạn. 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
7jav
Tạo một hàm
4 để lấy dữ liệu từ Firestore và gọi nó bên trong 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
1, as shown below.1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
1npm i firebase
0jav
Bên trong phương thức
6 , lấy tham chiếu đến cơ sở dữ liệu của bạn bằng cách gọi 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
7 method on the 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
9 object and passing in the name of the collection as a parameter.1npm i firebase
1npm i firebase
4jav
Để lấy dữ liệu từ đối tượng
9 này, hãy sử dụng 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
50 keyword, call the 1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
51 method on the 1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
9 object and store it inside a variable 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
53.1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
1npm i firebase
0jav
Đối tượng
53 chứa thuộc tính có tên là 1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
55 that . Do đó, mỗi tài liệu có thể chứa thông tin về một blog riêng lẻ. Lặp lại ______156 để lấy một mục riêng lẻ và gọi phương thức 1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
57 . 1body: "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."
2created_at: November 11, 2020 at 12:00:00 AM UTC+5:30
3posted_by: "Sam"
4title: "New Egg Recipe"
1npm i firebase
5jav
Bạn có thể thêm dữ liệu vào trạng thái của mình như được hiển thị bên trên trong vòng lặp. Vì bộ sưu tập
1 bao gồm một tài liệu duy nhất nên 1npm i firebase
2 của bạn cũng sẽ . Cuối cùng, duyệt qua ____ 62 của bạn và hiển thị dữ liệu trên DOM. 1import firebase from 'firebase'
2var firebaseConfig = {
3 apiKey: "xxxxxxxxxxxxxxxx",
4 authDomain: "xxxxxxxxxxxxxxxx",
5 databaseURL: "xxxxxxxxxxxxxxxx",
6 projectId: "xxxxxxxxxxxxxxxx",
7 storageBucket: "xxxxxxxxxxxxxxxx",
8 messagingSenderId: "xxxxxxxxxxxxxxxx",
9 appId: "xxxxxxxxxxxxxxxx",
10 measurementId: "xxxxxxxxxxxxxxxx"
11 };
12
13const firebaseApp=firebase.initializeApp[firebaseConfig];
14const db=firebase.firestore[];
15
16export default db;
1npm i firebase
9jsx
Mã cuối cùng
Hãy xem toàn bộ mã tiêu thụ dữ liệu từ bộ sưu tập Firestore bên dưới
1npm i firebase
0jsx
Phần kết luận
Bạn không chỉ có thể sử dụng dữ liệu mà còn có thể thêm dữ liệu vào bộ sưu tập Firebase. Bạn cũng có thể tạo các cấu trúc phức tạp bằng cách lồng các tập hợp tùy thuộc vào độ phức tạp của cơ sở dữ liệu mà bạn muốn có. Sử dụng React với Firebase có thể giúp bạn phát triển cả nguyên mẫu cũng như ứng dụng dựa trên sản xuất ngay lập tức mà không cần bất kỳ thiết lập máy chủ phức tạp nào. Bạn có thể khám phá thêm các tính năng của Firebase bằng cách đọc tài liệu chính thức