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

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

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

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

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.

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 đó, Y & N

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

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

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.