Contents
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

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é.