Từng bước tạo ứng dụng React với Firebase

Firebase là một nền tảng để phát triển ứng dụng di động và trang web, bao gồm các API đơn giản và mạnh mẽ mà không cần backend hay server. Firebase còn giúp các lập trình viên rút ngắn thời gian triển khai và mở rộng quy mô của ứng dụng mà họ đang phát triển.


1053

React Template

React Template được lấy từ github

Bạn có thể sao chép kho lưu trữ và bắt đầu từ đó

Mã ở trên được tạo bằng create-react-app

npm install -g create-react-app
create-react-app react-firebase
// install react-router-dom
npm install react-router-dom

Code mẫu

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';
import Navigation from '../Navigation';
import LandingPage from '../Landing';
...
import * as ROUTES from '../../constants/routes';
const App = () => (
  <Router>
    <div>
      <Navigation />
      <hr />
      <Route exact path={ROUTES.LANDING} component={LandingPage} />
      <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
      ...
  </Router>
);
export default App;

Tích hợp với Firebase & Deploy bằng Firebase

Bước 1 : Tạo account

firebase

Bước 2 : Tạo project

  • click Go to console , góc trên bên phải cạnh avatar google của bạn
  • click Create a project

Bước 3 :  Chọn Hosting option

Bạn sẽ thấy landing page của Firebase

react

Chọn Hosting ở trong phần Develop phía bên trái vầ nhấn Get started

Deploy app react vs firebase

Bước 4 : Cài đặt Firebase CLI

Chúng ta cài đặt Firebase CLI bằng câu lệnh sau

// vào folder app React
run npm install -g firebase-tools 

Bước 5 : Build React

npm run build

Điều này sẽ tạo một thư mục mới trong thư mục gốc dự án của bạn, chứa tất cả các tệp html, css & javascript cho lưu trữ tĩnh

<USEFUL FIREBASE COMMAND>
firebase projects:list : show all the projects available
firebase use : use / change the project to use

Bước 6 : Khởi tạo dự án của bạn

Khởi tạo firebase vào project. Code được viết như sau :

// dùng để đăng nhập google
firebase login
//đăng nhập thành công sẽ hiện
// success! Logged in as <Your gmail>
firebase init

Chọn hosting (nhấn space để chọn, ở đây chọn Database.

Deploy app react vs firebase

Sau đó chọn Use an existing project & chọn <project name> bạn đã tạo trên firebase.google.com

Chọn build thư mục *IMPORTANT* sau đó, & N

react

Bước 7 : Deploying!

Khởi tạo Firebase với project của bạn đã hoàn thành! Trong phần console & bạn đã có hai file .firebaserc & firebase.json đã được tạo thành công.

firebase deploy
react
Deploy app react vs firebase

Copy và dán URL của hosting vào project của bạn, để liên kết với firebase và sử dụng sử dụng.

Kết luận

Qua bài viết, bạn đã deploy thành công project với Firebase. Chúng ta tận dụng để sử dụng database realtime và nhiều chức năng khác của Firebase nữa.

Hãy tham khảo thêm bài viết để tạo project : Tự học React JS thời đại dịch Corona nCoV – Phần 1


Like it? Share with your friends!

1053