React-和-Firebase-入门指南-一-

React 和 Firebase 入门指南（一）

原文：Beginning React and Firebase

协议：CC BY-NC-SA 4.0

一、使用 Firebase 设置和部署 ReactJS 项目

在这一章中，你将学习 Firebase，它是 Google 提供的一套工具。您还将学习如何通过 Firebase 托管部署一个简单的 React 应用。

Firebase 简介

Firebase 不仅仅是一个数据库，而是一套工具；它通常被称为后端即服务(BaaS)。Firebase 包含各种服务，如下所示:

• 认证:用户登录和身份

• 实时数据库:实时、云托管的 NoSQL 数据库

• 云 Firestore :实时云托管 NoSQL 数据库

• 云存储:大规模可扩展文件存储

• 云功能:无服务器、事件驱动的后端功能

• Firebase hosting :全球虚拟主机

• ML 套件:一个用于常见机器学习任务的 SDK

Firebase 使前端开发人员可以轻松地将后端集成到他们的应用中，而无需创建任何 API 路由和其他后端代码。图 1-1 显示了一个传统 web 应用的例子，它从客户端应用向服务器发出 API 请求。剩下的代码由服务器处理。正如你在图 1-1 中看到的，Firebase 消除了后端工作，你可以直接与 Firebase 通信，Firebase 通过 SDK 托管在谷歌平台上。

图 1-1

Firebase(火力基地)

以 ReactJS 为前端，在 Firebase 后端构建项目非常容易。如果你在 MERN 做同一个项目(意味着 MongoDB、Express、ReactJS、NodeJS)，它会花费更多的时间，而且会复杂得多，因为你需要在 NodeJS 中做后端 API。

我发现在 Firebase 中另一件容易做的事情是认证部分。身份验证曾经是 JWT 身份验证中最复杂的部分之一，但是使用 Firebase，您只需要几行代码。更好的是，您可以获得所有类型的身份验证。

Firebase 托管对于你的 ReactJS 应用来说也是非常容易使用的，这就是我们在这本书里将要讨论的。

创建 Firebase 帐户

要使用 Firebase，你只需要一个谷歌账户。所以，去 https://firebase.google.com/ 的火基地，点击去右上角的控制台。你需要使用你的谷歌账户登录，如图 1-2 所示。

图 1-2

Firebase 站点

设置托管

点击页面中的添加项目链接，如图 1-3 所示。因为我有很多项目，所以图中显示了它们。第一次，您将只能看到添加项目链接。

图 1-3

添加项目

在打开的页面上，给项目起一个类似 final-space-react 的名字，点击继续按钮，如图 1-4 所示。

图 1-4

命名项目

在下一页面中，禁用 Google Analytics 后点击创建项目按钮，如图 1-5 所示。我们正在禁用谷歌分析，因为我们在这里创建一个演示项目。如果您打算在生产中部署您的应用，您应该保持它处于启用状态。

图 1-5

创建项目

一段时间后，您将看到如图 1-6 所示的屏幕。在这里，你需要点击继续按钮。

图 1-6

持续的

现在点击屏幕左上角的设置图标，如图 1-7 所示。之后，点击项目设置。

图 1-7

项目设置

在下一页中，点击页面底部的代码图标，如图 1-8 所示。

图 1-8

代码图标

在下一页上，输入您之前输入的应用的名称，在我的例子中是 final-space-react 。此外，单击 Firebase hosting 的复选框。之后点击注册 app 按钮，如图 1-9 所示。

图 1-9

选择 Firebase 托管

在下一页，只需点击下一个按钮(图 1-10 )。

图 1-10

下一步按钮

在下一页，您将看到从终端全局安装firebase-tools的命令(图 1-11 )。因此，打开任何终端，从任何地方运行该命令。请注意，这是机器上的一次性设置，因为我们使用了-g选项。-g选项指定需要在全球范围内安装。

图 1-11

全球安装 Firebase

暂时忽略下一组命令，点击继续到控制台按钮(图 1-12 )。

图 1-12

继续到控制台

从终端部署一个简单的 ReactJS 项目

在本节中，您将学习如何部署一个简单的 ReactJS 应用，该应用从一个简单的 API 获取数据。打开 https://github.com/nabendu82/final-space-react 然后点击代码和剪贴板复制图标(图 1-13 )。

图 1-13

开源代码库

现在，转到任意终端，使用以下命令克隆项目:

git clone https://github.com/nabendu82/final-space-react.git

之后，切换到项目的目录并运行npm i来安装所有的依赖项，如下所示:

cd final-space-react
npm i

现在从终端运行firebase login。如果你是第一次运行它，它会给你一个弹出消息。之后，运行firebase init命令。键入Y继续(图 1-14 )。

图 1-14

Firebase 登入

接下来，使用箭头键下到 Hosting，按空格键选择 Hosting，然后按 Enter，如图 1-15 所示。

图 1-15

作战

然后选择Use an existing project，回车，如图 1-16 所示。

图 1-16

现有项目

这里需要选择正确的项目，在我这里是final-space-react-c84fa(图 1-17 )。

图 1-17

选择最终空间 React 项目

接下来选择公共目录，也就是build。下一个选项是Yes单页应用，GitHub 部署，在这里你选择No(图 1-18 )。

图 1-18

构建项目

现在，您需要在终端中运行npm run build来进行生产优化构建，命令如下:

npm run build

n

最后一个命令是firebase deploy将项目部署到 Firebase，如下所示:

firebase deploy

现在，你可以进入 https://final-space-react-c84fa.web.app/ (或者调整到你的项目名称)查看 app 正确运行，如图 1-19 。

图 1-19

完整应用

摘要

在这一章中，你学习了来自 Google 的令人敬畏的 Firebase 工具套件。之后，您学习了如何在 Firebase 中部署 React 项目。

二、使用 React 和 Firebase 构建待办事项应用

在前一章中，您学习了通过 Firebase 部署 React 应用。在本章中，您将学习如何在 ReactJS 中构建一个出色的待办事项列表应用，将数据存储在后端，特别是 Firebase Firestore 数据库中。主机也将在 Firebase。

我们将展示如何为项目中的图标使用材质 UI，我们将在这个项目中使用一个useRef钩子。图 2-1 显示了应用的样子。用户将能够输入一个待办事项，并将其存储在 firebase 数据库中一个可爱的列表中。所以，这个列表是永久的，不会在浏览器刷新后改变。

图 2-1

完成的应用

入门指南

首先，使用create-react-app命令创建一个名为todo-react-firebase的新应用。具体来说，命令如下:

npx create-react-app todo-react-firebase

初始 Firebase 设置

由于我们的前端站点也将通过 Firebase 托管，我们将创建基本设置，而create-react-app命令创建我们的 React 应用。按照第一章中的相同步骤设置 Firebase。

在设置程序中点击继续到控制台按钮后，还需要一个额外的设置步骤。您需要向下滚动并点击配置单选按钮，然后复制firebaseConfig部分的所有数据。这是必需的，因为我们将在我们的项目中使用 Firebase 数据库(图 2-2 )。

图 2-2

Firebase 配置

现在，打开 VS Code 中的代码，在src文件夹中创建一个名为firebase.js的文件。将以下代码粘贴到文件中:

const firebaseConfig = {
        apiKey: "AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "todo-react-xxxxxxxx.firebaseapp.com",
        projectId: "todo-react-xxxxxx",
        storageBucket: "todo-react-xxxxxxxxxxxxxxxxx.com",
        messagingSenderId: "33xxxxxxxxxxx",
        appId: "1:xxxxxxxxxxxx:9xxxxxxxxxxxxx6d0"
};

基本 React 设置

现在，我们将对 ReactJS 进行基本设置。在todo-react-firebase目录中，用npm start启动 React 应用。接下来，我们将删除一些文件，因为我们不需要它们。它们实际上是标志和其他测试的一部分，我们不会在这个项目中使用。图 2-3 显示要删除的文件。

图 2-3

删除选项

我们将删除所有不必要的样板代码，因此我们的index.js文件将如下所示:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

App.js文件只包含“TODO React Firebase”文本，如下所示:

import './App.css';

function App() {
    return (
        <div className="App">
        <h1>TODO React Firebase</h1>
        </div>
    );
}

export default App;

现在，我们的应用在 localhost 中将看起来如图 2-4 所示。

图 2-4

本地主机应用

本地待办事项列表

完成前一部分的设置后，我们将继续我们的待办事项应用。我们将更新我们的App.js文件，以包含基本待办事项列表的逻辑。这里，我们使用两个状态变量:todos和input。我们使用useState钩子来声明它们。todos包含一个包含两个字符串的数组，input包含一个空字符串。

接下来，在return语句中，我们使用 React 的受控输入来更新输入框的输入。接下来，我们有一个按钮和一个分配给该按钮的点击事件。当我们点击它时，我们运行一个名为addTodo()的函数，用setTodos改变todos的状态。这里，它将已经存在的内容附加到用户键入的内容中。

我们使用一个表单来包装我们的输入和按钮，按钮类型是submit。因此，如果我们在输入框中键入任何内容，然后按键盘上的 Enter 键，它就会工作。因此，我们需要在addTodo()函数中使用e.preventDefault()。

import { useState } from 'react';
import './App.css';

function App() {
const [todos, setTodos] = useState([
    'Make a react firebase project',
    'Record a coding video'
])

const [input, setInput] = useState('')

const addTodo = e => {
    e.preventDefault()
    setTodos([...todos, input])
    setInput('')
}

return (
    <div className="App">
        <h1>TODO React Firebase</h1>
        <form>
            <input value={input} onChange={e => setInput(e.target.value)}/>
            <button type="submit" onClick={addTodo}>Add Todo</button>
        </form>
        <ul>
            {todos.map(todo => <li>{todo}</li>)}
        </ul>
    </div>
);
}

export default App;

现在，在 localhost 中，我们将默认获得两个项目，因为它们处于我们的初始状态todos。但是当我们输入的时候，我们会得到新的条目，如图 2-5 所示。

图 2-5

本地主机中的列表

我们将为图标使用材质用户界面。因此，根据文档，我们需要运行两个npm install命令。我们将通过集成终端安装core和icons，如下图所示:

npm install @material-ui/core @material-ui/icons

现在，我们将在我们的项目中使用material-ui中的图标。我们已经用来自material-ui的Button和Input替换了我们的Button和Input字段，并且我们在顶部导入了它们。更新后的代码在这里用粗体标记:

import { Button, FormControl, Input, InputLabel } from '@material-ui/core';

function App() {
...
...

return (
    <div className="App">
    <h1>TODO React Firebase</h1>
    <form>
              <FormControl>
               <InputLabel>Write a TODO</InputLabel>
               <Input value={input} onChange={e => setInput(e.target.value)}/>
              </FormControl>
              <Button type="submit" onClick={addTodo} variant="contained" color="primary" disabled={!input}>Add Todo</Button>
    </form>
    <ul>
           {todos.map(todo => <li>{todo}</li>)}
    </ul>
    </div>
);
}

export default App;

现在，我们的 web 应用看起来不错(图 2-6 )。

图 2-6

更新的 web 应用

接下来，我们将待办事项列表移动到一个单独的组件中。因此，在components文件夹中创建一个名为Todo.js的新文件。我们会将单独的待办事项作为props发送给它。更新后的代码在这里以粗体显示:

import { Button, FormControl, Input, InputLabel } from '@material-ui/core';
import Todo from './components/Todo';

function App() {
...
...

return (
    <div className="App">
    <h1>TODO React Firebase</h1>
    <form>
    ...
    ...
    </form>
    <ul>
            {todos.map(todo => <Todo todo={todo} />)}
    </ul>
    </div>
);
}

export default App;

现在将下面的代码添加到Todo.js文件中。我们只是使用了一堆material-ui图标，显示了被称为todo的props。这些图标帮助我们使列表项更漂亮。

import { List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
import React from 'react'

const Todo = ({ todo }) => {
    return (
        <List className="todo__list">
            <ListItem>
                <ListItemAvatar />
                <ListItemText primary={todo} secondary={todo} />
            </ListItem>
        </List>
    )
}

export default Todo

现在，在 localhost 中，我们将能够看到这些变化，并且我们的列表将看起来不错(图 2-7 )。

图 2-7

所有列表

现在，是时候将 Firebase 连接到项目上了。

使用 Firebase

现在，我们将开始为后端设置 Firebase。为此，我们将首先通过运行以下命令在终端中安装 Firebase 的所有依赖项:

npm i firebase

接下来，我们将更新我们的firebase.js文件以使用配置来初始化应用。之后，我们使用 Firestore 作为数据库。更新后的代码在这里以粗体突出显示:

import firebase from 'firebase'

const firebaseConfig = {
    ...
    ...
};

const firebaseApp = firebase.initializeApp(firebaseConfig)
const db = firebaseApp.firestore()

export { db }

现在，我们将返回到 Firebase，点击云 Firestore ，然后点击创建数据库按钮，如图 2-8 所示。

图 2-8

创建数据库

在下一个画面中，在 测试模式下选择开始，然后点击下一个按钮，如图 2-9 所示。

图 2-9

测试模式

在下一个屏幕上，点击使能按钮(图 2-10 )。

图 2-10

启用按钮

在下一个界面，点击开始采集，如图 2-11 所示。

图 2-11

开始收集

将会打开如图 2-12 所示的弹出窗口。我们需要在收藏 ID 字段中输入 todos ，然后单击下一步按钮。

图 2-12

待办事项

在下一个屏幕上，点击自动 ID 填写文档 ID 字段。在字段中输入 todo 。之后，点击保存按钮(图 2-13 )。

图 2-13

菲尔茨

这将把我们带回主屏幕。现在点击添加文档链接。这将再次打开同一个弹出窗口，我们将在其中添加另一个待办事项的详细信息。现在，我们的数据库中有两个待办事项(图 2-14 )。

图 2-14

两个待办事项

将 Firebase 添加到应用

现在我们将删除App.js中的硬编码待办事项，并使用来自 Firebase 数据库*的数据。*因此，回到App.js，删除todos的useState代码中的硬编码内容。我们还创建了所需的导入。

之后，在useEffect内，我们调用集合todos，然后我们拍摄快照。用 Firebase 的术语来说，它是实时数据，我们可以立即获得。然后，我们将通过setTodos()在todos数组中设置这个数据。

另外，请注意useEffect在数组中有input。因此，任何时候用户添加一个todo，它都会立即显示在我们的应用中。

另外，请注意，我们已经使用todos改变了循环数据的方式。这样做是因为我们接收的数据是一个对象数组。更新后的代码在这里以粗体显示:

import { useState, useEffect } from 'react';
import Todo from './components/Todo';
import { db } from './firebase';

function App() {
const [todos, setTodos] = useState([])
const [input, setInput] = useState('')
useEffect(() => {
  db.collection('todos').onSnapshot(snapshot => {
     setTodos(snapshot.docs.map(doc => doc.data()))
  })
}, [input])

...
...
return (
   <div className="App">
   <h1>TODO React Firebase</h1>
         ...
         ...
   <ul>
   {todos.map(({ todo }) => <Todo todo={todo} />)}
   </ul>
   </div>
);
}

export default App;

现在，我们将添加功能，以便用户可以添加待办事项。为此，我们只需要使用add()将输入添加到集合中。另外，请注意，我们在添加待办事项的同时添加了服务器时间戳。我们这样做是因为我们需要按降序排列待办事项。更新后的代码在这里用粗体标记:

import { db } from './firebase';
import firebase from 'firebase';

function App() {
const [todos, setTodos] = useState([])
const [input, setInput] = useState('')
useEffect(() => {
  db.collection('todos').orderBy('timestamp','desc').onSnapshot(snapshot => {
    setTodos(snapshot.docs.map(doc => doc.data()))
  })
}, [input])

const addTodo = e => {
      e.preventDefault()
      db.collection('todos').add({
      todo: input,
      timestamp: firebase.firestore.FieldValue.serverTimestamp()
      })
      setInput('')
}

...
...

现在，我们需要删除 Firebase 中的旧集合，因为没有一个记录有时间戳(图 2-15 )。

图 2-15

删除收藏

它还会显示一个弹出窗口来确认这一点(图 2-16 )。

图 2-16

删除前确认

现在，我们还想获得键和删除所需的每个项目的 ID，这是我们将要实现的。这个键在 React for optimization 中是必不可少的，我们还会在控制台中得到一个警告。所以，我们需要改变我们在setTodos()中设置数据的结构。

现在，我们以不同的方式映射它，特别是当我们将单个项目传递给一个Todo组件时。下面是更新后的代码:

function App() {
...
useEffect(() => {
  db.collection('todos').orderBy('timestamp','desc').onSnapshot(snapshot => {
           setTodos(snapshot.docs.map(doc => ({
           id: doc.id,
          item: doc.data()
          })))
  })
}, [input])

...
console.log(todos);
return (
    <div className="App">
    <h1>TODO React Firebase</h1>
           ...
           ...
    <ul>
    {todos.map(it => <Todo key={it.id} arr={it} />)}
    </ul>
    </div>
);
}

export default App;

现在，在Todo.js文件中，我们得到了一个不同的结构，我们正在为此更新我们的文件。

我们还添加了删除功能，在该功能中，我们必须获取项目的 ID 并调用delete()。更新后的代码在这里用粗体标记:

import { db } from '../firebase'
import DeleteForeverIcon from '@material-ui/icons/DeleteForever'

const Todo = ({ arr }) => {
          return (
          <List className="todo__list">
          <ListItem>
                       <ListItemAvatar />
                       <ListItemText
                        primary={arr.item.todo}
                        secondary={arr.item.todo}
                        />
     </ListItem>
     <DeleteForeverIcon
             onClick={() => {db.collection('todos').doc(arr.id).delete()}}
     />
     </List>
     )
}

export default Todo

现在，在 localhost 中，我们可以添加和删除任何项目。另外，请注意控制台日志中的结构(图 2-17 )。

图 2-17

控制台日志

我们完成了应用，只剩下样式。现在让我们把它变得更漂亮。在App.js文件中，将className改为app。更新后的代码在这里用粗体标记:

return (
   <div className="app">
   ...
   </div>
);
}

export default App;

接下来，在App.css文件中，删除所有内容并插入如下所示的内容:

.app {
    display:grid;
    place-items: center;
}

现在，在Todo.js文件中，为Todo.css文件添加导入。另外，将删除图标的fontSize设置为large。更新后的代码在这里用粗体标记:

import './Todo.css'

const Todo = ({ arr }) => {
    return (
    <List className="todo__list">
             ...
    <DeleteForeverIcon fontSize='large'
             onClick={() => {db.collection('todos').doc(arr.id).delete()}}
    />
    </List>
    )
}

接下来，在Todo.css文件中，添加以下内容:

.todo__list{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    border: 1px solid lightgray;
    margin-bottom: 10px !important;
}

现在，在 localhost，这个应用看起来很完美(图 2-18 )。

图 2-18

添加样式后的应用

部署火力基地

为了部署应用，我们将遵循第一章中的相同步骤。完成后，我们可以看到从终端成功部署了 app(图 2-19 )。

图 2-19

完整的应用

摘要

在本章中，你创建了一个漂亮的待办事项应用。该应用的数据存储在 Firebase Firestore 数据库中，它甚至具有删除功能。

三、使用 React 和 Firebase 构建故事应用

在本章中，您将学习如何在 ReactJS 中构建一个 stories 应用。如今，故事应用非常受欢迎，每个大型社交媒体平台都有能力让用户将短视频故事添加到他们的平台上。在我们的应用中，我们将能够滚动存储在 Firebase Firestore 数据库中的短视频。最终的应用将如图 3-1 所示。

图 3-1

正在使用的最终应用

主机和数据库将在 Firebase。我们也将在项目中使用图标的材料用户界面。

因此，使用create-react-app命令创建一个名为stories-firebase-app的新应用。具体来说，打开任何终端并运行以下命令:

npx create-react-app stories-firebase-app

初始 Firebase 设置

由于我们的前端站点也将通过 Firebase 托管，我们将创建基本设置，而create-react-app命令创建我们的 React 应用。继续按照第一章中列出的步骤创建应用。我已经创建了一个名为stories-firebase-app的应用(图 3-2 )。

图 3-2

创建应用

现在，点击屏幕左上角的设置图标。之后点击项目设置按钮(图 3-3 )。

图 3-3

设置

现在，向下滚动，点击配置单选按钮，然后复制firebaseConfig部分的所有代码(图 3-4 )。

图 3-4

。firebaseConfig 程式码

基本 React 设置

我们的 React 设置应该已经完成了。所以，回到终端，将cd放入新创建的stories-firebase-app目录。

之后，在 VS 代码中打开目录，在src文件夹中创建一个名为firebase.js的文件，并将之前 Firebase 屏幕中的内容粘贴到那里。代码如下所示:

const firebaseConfig = {
        apiKey: "AIxxxxxxxxxxxxxxxxxxxxxxxxxxKT4",
        authDomain: "stories-xxxxxx.xxxxxxxx.com",
        projectId: "stories-xxxxxx",
        storageBucket: "stories-fxxxxxxxx.com",
        messagingSenderId: "50xxxxxxxx63",
        appId: "1:507xxxxxxx63:web:0c9xxxxxxxxxxda8e"
};

在stories-firebase-app目录下，用npm start启动 React app。接下来，我们将删除一些文件，如图 3-5 所示，因为我们不需要它们。

图 3-5

删除一些代码

我们将删除所有不必要的样板代码，因此我们的index.js文件将如下所示:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />

    </React.StrictMode>,
    document.getElementById('root')
);

App.js文件只包含“Stories app React”文本。我们已经从App.css文件中删除了所有其他内容。这里显示了App.css文件的更新代码:

import './App.css';

function App() {
    return (
        <div className="app">
        <h1>Stories app React</h1>
        </div>
    );
}
export default App;

在index.css文件中，更新 CSS 以通篇使用margin: 0。具体来说，在顶部添加以下代码:

* {
   margin: 0;
}

应用的基本结构

我们现在将在应用中创建基本结构。所以，用下面的内容更新App.js。我们首先添加图像和标题。这里，我们创建了两个div:app__top和app__videos。现在，app__top包含一个图像和一个h1。

import './App.css';

function App() {
    return (
        <div className="app">
        <div className="app__top">
            <img src="logo192.png" alt="App Logo" className="app__logo"/>
            <h1>Shorts</h1>
        </div>
        <div className="app__videos">

        </div>
        </div>
    );
}

export default App;

接下来，我们将在App.css文件中添加新内容。在这里，我们使用网格将所有东西放置在中心。我们在两个地方也有scroll-snap-type: y mandatory的风格。它用于在我们的应用中提供平滑滚动的滚动功能。

html{
    scroll-snap-type: y mandatory;
}

.app{
    display: grid;
    place-items: center;
    height: 100vh;
    background-color: black;
}

.app__top {
    margin-bottom: -150px;
}
.app__top > h1 {
    text-align: center;
    color: white;
}

.app__logo {
    height: 12vh;
}

.app__videos {
    position:relative;
    height: 65vh;
    background-color: white;
    width: 70%;
    border-radius: 20px;
    max-width: 450px;
    max-height: 1200px;
    overflow: scroll;
    scroll-snap-type: y mandatory;
}

.app__videos::-webkit-scrollbar{
    display: none;
}

.app__videos{
    -ms-overflow-style: none;
    scrollbar-width: none;
}

现在，我们的应用在 localhost 中将看起来如图 3-6 所示。

图 3-6

应用大纲

在应用中显示短视频

在上一节设置了基本布局后，我们现在将开始创建在我们的应用中显示短视频的功能。

首先，在src文件夹中创建一个components文件夹，并在src文件夹中创建两个名为VideoCard.js和VideoCard.css的文件。

接下来，在VideoCard.js文件中，放置video标签和一个垂直视频链接。我从我的频道上的一个简短的 YouTube 视频中复制了链接。

import React from 'react'
import './VideoCard.css'

const VideoCard = () => {
    return (
        <div className="videoCard">
            <video
                src="https://res.cloudinary.com/dxkxvfo2o/video/upload/v1608169738/video1_cvrjfm.mp4"
                className="videoCard__player"
                alt="Short Video App"
                loop
            />
        </div>
    )
}

export default VideoCard

现在，我们将在VideoCard.css文件中添加以下代码。这里，我们再次需要添加scroll-snap-align: start来实现视频的平滑滚动功能。

.videoCard{
    position: relative;
    background-color: white;
    width: 100%;
    height:100%;
    scroll-snap-align: start;
}

.videoCard__player{
    object-fit: fill;
    width: 100%;
    height: 100%;
}

现在，在App.js中，添加两个VideoCard组件，因为我们需要不止一个视频来查看捕捉功能。更新后的代码在这里以粗体显示:

import './App.css';
import VideoCard from './components/VideoCard';

function App() {
         return (
         <div className="app">
         <div className="app__top">
                 ...
         </div>
         <div className="app__videos">
                 <VideoCard />
                 <VideoCard />
          </div>
         </div>
         );
}

export default App;

现在，视频通过抓拍功能完美显示(图 3-7 )。

图 3-7

视频抓拍

现在我们的视频无法播放，因为我们还没有实现onClick功能。为了让它们播放，我们需要使用一个引用(或 ref )。ref 是必需的，因为我们将实现用户在屏幕上单击鼠标时的暂停和播放功能。我们将首先导入useRef和useState钩子，然后我们将添加一个videoRef变量。我们在video元素中使用了videoRef，我们还创建了一个触发函数handleVideoPress的onClick处理程序。

在handleVideoPress函数中，我们使用一个名为playing的状态变量来检查视频是否正在播放。我们将videoRef.current.pause()设置为暂停，并将playing状态改为false。我们在else部分做相反的事情。更新后的代码在这里用粗体标记:

import React, { useRef, useState } from 'react'
import './VideoCard.css'

const VideoCard = () => {
        const [playing, setPlaying] = useState(false)
        const videoRef = useRef(null)

        const handleVideoPress = () => {
        if(playing){
               videoRef.current.pause()
               setPlaying(false)
        } else {
               videoRef.current.play()
               setPlaying(true)
       }
       }

       return (
        <div className="videoCard">
                  <video
                  ...
                  loop
                  ref={videoRef}
                  onClick={handleVideoPress}
                  />
        </div>
       )
}

export default VideoCard

现在，在 localhost 中，只需点击视频，它就会播放。再次点按以暂停播放。

创建标题组件

我们将为图标使用材质 UI，这是我们接下来要用到的。因此，我们需要根据文档做两个npm install。我们将使用以下命令通过终端安装core和icons:

npm i @material-ui/core @material-ui/icons

我们现在将为我们的视频组件创建标题。因此，在components文件夹中创建名为VideoHeader.js和VideoHeader.css的文件。

import React from 'react'
import './VideoHeader.css'

const VideoHeader = () => {
         return (
         <div className="videoHeader">

         </div>
         )
}

export default VideoHeader

现在，在VideoHeader.js文件中，放入以下内容。这里，我们使用material-ui来显示两个图标:ArrowBackIos和CameraAltOutlined。更新的内容在此处标记为粗体:

import React from 'react'
import './VideoHeader.css'
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'
import CameraAltOutlinedIcon from '@material-ui/icons/CameraAltOutlined'

const VideoHeader = () => {
    return (
        <div className="videoHeader">
            <ArrowBackIosIcon />
            <h3>Shorts</h3>
            <CameraAltOutlinedIcon />
        </div>
    )
}

export default VideoHeader

接下来，我们将在VideoHeader.css文件中设置这些样式。

.videoHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    color: white;
}

.videoHeader > * {
    padding: 20px;
}

现在，将这个VideoHeader组件包含在VideoCard.js文件中。更新的内容在此处标记为粗体:

import VideoHeader from './VideoHeader'

const VideoCard = () => {
    ...
    ...
        return (
        <div className="videoCard">
                <VideoHeader />
                  <video
                          ...
                  />
     </div>
     )
}

export default VideoCard

现在，在 localhost 中，我们看到了我们漂亮的 header 组件(图 3-8 )。

图 3-8

页眉

创建页脚组件

我们现在将为视频组件创建一个页脚。页脚组件将在应用的页脚显示一些图标。因此，在components文件夹中创建两个名为VideoFooter.js和VideoFooter.css的文件。

此外，我们还通过在VideoCard组件中传递来自App.js文件的属性进行了一些优化。我们传递两组不同的属性，在两个VideoCard组件中。更新的内容在这里用粗体标记:

import './App.css';
import VideoCard from './components/VideoCard';

function App() {
         return (
         <div className="app">
         <div className="app__top">
                  ...
         </div>
        <div className="app__videos">
        <VideoCard
                url="https://res.cloudinary.com/dxkxvfo2o/video/upload/v1608169738/video1_cvrjfm.mp4"
                channel="TWD"
                avatarSrc="https://pbs.twimg.com/profile_images/1020939891457241088/fcbu814K_400x400.jpg"
                song="I am a Windows PC"
                likes={950}
                shares={200}
         />

         <VideoCard
               url="https://res.cloudinary.com/dxkxvfo2o/video/upload/v1608169739/video2_mecbdo.mp4"
               channel="nabendu"
               avatarSrc="https://pbs.twimg.com/profile_images/1020939891457241088/fcbu814K_400x400.jpg"
               song="I am a good PC"
                likes={850}
                shares={150}
         />
         </div>
         </div>
        );
}

export default App;

那么在VideoCard.js文件中，我们将首先使用video中名为url的属性。此外，调用新的VideoFooter组件，在那里我们将传递其余的属性。更新的内容在这里用粗体标记:

import VideoFooter from './VideoFooter'
import VideoHeader from './VideoHeader'

const VideoCard = ({ url, channel, avatarSrc, song, likes, shares }) => {
    ...
    ...
       return (
       <div className="videoCard">
                <VideoHeader />
                <video
                src={url}
                className="videoCard__player"
                alt="Short Video App"
                loop
                ref={videoRef}
                onClick={handleVideoPress}
                />
                <VideoFooter
                channel={channel}
                likes={likes}
                shares={shares}
                avatarSrc={avatarSrc}
                song={song}
                />
       </div>
      )
}

export default VideoCard

现在，我们的VideoFooter.js文件将包含以下内容。我们使用了channel和avatarSrc属性，展示了一个头像和一个频道名称。

import React from 'react'
import './VideoFooter.css'
import { Button, Avatar } from '@material-ui/core'

const VideoFooter = ({ channel, avatarSrc, song, likes, shares }) => {
    return (
        <div className='videoFooter'>
            <div className="videoFooter__text">
                <Avatar src={avatarSrc} />
                <h3>
                    {channel} . <Button>Follow</Button>
                </h3>
            </div>
        </div>
    )
}

export default VideoFooter

接下来，我们将在VideoFooter.css文件中添加这些样式。

.videoFooter__text{
    position: absolute;
    bottom: 0;
    color: white;
    display: flex;
    margin-bottom: 20px;
}

.videoFooter__text > h3 {
    margin-left: 10px;
    padding-bottom: 20px;
}

.videoFooter__text > h3 > button {
    color: white;
    font-weight: 900;
    text-transform: inherit;
}

现在，在 localhost 中我们将开始设置页脚组件(图 3-9 )。

图 3-9

页脚

现在，让我们在项目中创建一个漂亮的 ticker。为此，我们将在项目中安装一个名为react-ticker的包。这个包允许我们显示移动的文本，比如新闻提要。我们可以使用集成终端通过以下命令进行安装:

npm i react-ticker

接下来，我们将根据文档将Ticker与MusicNoteIcon一起包含在我们的VideoFooter.js文件中，如下所示:

import MusicNoteIcon from '@material-ui/icons/MusicNote'
import Ticker from 'react-ticker'

const VideoFooter = ({ channel, avatarSrc, song, likes, shares }) => {
     return (
     <div className='videoFooter'>
     <div className="videoFooter__text">
             ..
     </div>
     <div className="videoFooter__ticker">
                   <MusicNoteIcon className="videoFooter__icon" />
                   <Ticker mode="smooth">
                   {({ index }) => (
                   <>

                   <h1>{song}</h1>
                   </>

                   )}
                   </Ticker>

     </div>
     </div>
     )
}

export default VideoFooter

接下来，我们将在VideoFooter.css文件中包含以下样式:

    .videoFooter{
        position: relative;
        bottom: 100px;
        margin-left: 20px;
    }

    .videoFooter__ticker > .ticker{
        height: fit-content;
        margin-left: 30px;
        margin-bottom: 20px;
        width: 60%;
    }

    .videoFooter__ticker h1{
        padding-top: 7px;
        font-size: 12px;
        color: white;
    }

    .videoFooter__icon{
        position: absolute;
        left: 5px;
        color: white;
    }

现在，我们将看到这个漂亮的滚动条在本地主机的屏幕上滚动(图 3-10 )。

图 3-10

心脏

现在，我们将在VideoFooter.js文件中添加一些剩余的元素来完成我们的应用。这里，我们添加了更多的图标，并使用了likes和shares属性:

import Ticker from 'react-ticker'
import { Favorite, ModeComment, MoreHoriz, Send } from '@material-ui/icons'

const VideoFooter = ({ channel, avatarSrc, song, likes, shares }) => {
     return (
     <div className='videoFooter'>
             <div className="videoFooter__text">
                   ...
             </div>
             <div className="videoFooter__ticker">
                   ...
            </div>
            <div className="videoFooter__actions">
            <div className="videoFooter__actionsLeft">
            <Favorite fontSize="large" />
            <ModeComment fontSize="large" />
            <Send fontSize="large" />
            <MoreHoriz fontSize="large" />
            </div>
            <div className="videoFooter__actionsRight">
            <div className="videoFooter__stat">
                    <Favorite />
                    <p>{likes}</p>
            </div>
            <div className="videoFooter__stat">
                    <ModeComment />
                    <p>{shares}</p>
            </div>
            </div>
            </div>
     </div>
     )
}

export default VideoFooter

接下来，我们将在VideoFooter.css文件中添加一些新的样式，如下所示:

.videoFooter__actions{
    display: flex;
    position: absolute;
    width: 95%;
    color: white;
    justify-content: space-between;
}

.videoFooter__actionsLeft > .MuiSvgIcon-root{
    padding: 0 10px;
}

.videoFooter__actionsRight{
    display: flex;
}

.videoFooter__stat{
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.videoFooter__stat > p{
    margin-left: 3px;
}

现在，我们的应用完成了我们刚刚添加的附加元素(图 3-11 )。

图 3-11

应用完成

设置 Firebase 数据库

我们现在将建立燃烧基地。首先要做的是通过从终端运行以下命令在我们的项目中安装 Firebase:

npm i firebase

接下来，我们将更新我们的firebase.js文件以使用配置来初始化应用。之后，我们可以使用 Firestore 作为数据库。此处的更新内容以粗体标记:

import firebase from 'firebase';

const firebaseConfig = {
    ...
};

const firebaseApp = firebase.initializeApp(firebaseConfig)
const db = firebaseApp.firestore()

export default db

现在，我们将返回 Firebase 并单击云 Firestore，然后单击创建数据库按钮(图 3-12 )。

图 3-12

创建数据库

在下一个屏幕上，在 测试模式下选择开始，然后点击下一步按钮(图 3-13 )。

图 3-13

测试模式

在下一个屏幕上，点击使能按钮(图 3-14 )。

图 3-14

启用按钮

在下一个屏幕上，点击开始采集(图 3-15 )。

图 3-15

开始收集

这将打开如图 3-16 所示的弹出窗口。我们需要给出收藏 ID，所以在收藏 ID 字段中输入视频，然后点击下一步按钮。

图 3-16

输入收藏 ID

在下一个屏幕上，点击自动 ID 创建文档 ID。还要添加字段网址、频道、 avatarSrc 、歌曲、喜欢、分享。将App.js文件中的所有值输入值字段。另外，请注意，喜欢、分享和消息是number类型，其余是string类型。之后点击保存按钮(图 3-17 )。

图 3-17

创建收藏

这将把我们带回到主屏幕。现在点击添加文档链接。这将再次打开我们之前看到的同一个弹出窗口，在这里我们将添加来自App.js文件的另一个视频的细节(图 3-18 )。

图 3-18

另一个系列

现在，我们的数据库中有两个视频(图 3-19 )。

图 3-19

两个视频

将 Firebase 数据库与 React 集成

现在，返回到App.js并使用useState钩子创建一个名为 videos 的新状态。然后我们将映射它，并将参数传递给VideoCard组件。请注意，我们已经删除了硬编码的内容，因为我们不会从数据库中获得这些数据。更新的内容在这里用粗体标记:

import { useState } from 'react';
import './App.css';
import VideoCard from './components/VideoCard';

function App() {
  const [videos, setVideos] = useState([])

  return (
         <div className="app">
         <div className="app__top">
         ...
         </div>
         <div className="app__videos">
                 {videos.map(({ url, channel, avatarSrc, song, likes, shares }) => (
                 <VideoCard
                        url={url}
                        channel={channel}
                        avatarSrc={avatarSrc}
                        song={song}
                        likes={likes}
                        shares={shares}
                 />
                 ))}
       </div>
       </div>
  );
}

export default App;

现在，我们将在应用中使用存储在本地 Firebase 文件中的数据。之后，在useEffect中，我们调用集合videos，然后拍摄快照。用 Firebase 的术语来说，这是实时数据，我们可以立即获得。然后，我们将通过setVideos()在视频数组中设置这些数据。

另外，请注意useEffect在数组中有视频。因此，每当一个新的视频被添加到 Firebase 数据库中，它就会立即显示在我们的应用中。更新的内容在这里用粗体标记:

import { useEffect, useState } from 'react';
import './App.css';
import VideoCard from './components/VideoCard';
import db from './firebase';

function App() {
  const [videos, setVideos] = useState([])

  useEffect(() => {
     db.collection('videos').onSnapshot(snapshot => {
     setVideos(snapshot.docs.map(doc => doc.data()))
    })
  }, [videos])

  return (
  ...
  )

现在，我们的应用已经完成，我们正在从 Firebase 后端获取数据(图 3-20 )。

图 3-20

从数据库获取数据

通过 Firebase 部署和托管

现在，我们可以在 Firebase 中部署我们的应用。我们只是按照前面描述的相同步骤。

部署成功，我们的应用工作正常(图 3-21 )。

图 3-21

部署的应用

摘要

在本章中，您学习了如何创建故事视频应用。该应用的数据存储在 Firebase Firestore 数据库中，它还有一个很好的滚动功能。

四、使用 React 和 Firebase 构建存储应用

欢迎来到新的 ReactJS 项目，我们将在 ReactJS 中构建一个存储应用。存储应用用于将您的数据存储在云中作为备份。有许多流行的存储应用，如 Dropbox 和 Google Drive。

主机和数据库将在 Firebase。该应用的登录将通过谷歌认证。我们也将在项目中使用图标的材料用户界面。最终项目将如图 4-1 所示。

图 4-1

已完成项目

入门指南

使用create-react-app命令创建一个名为storage-firebase-app的新应用。具体来说，打开任何终端并提供以下命令:

npx create-react-app storage-firebase-app

初始 Firebase 设置

由于我们的前端站点也将通过 Firebase 托管，我们将创建基本设置，而这个create-react-app命令创建我们的 React 应用。在这一部分，我们将遵循与第一章相同的步骤。我已经创建了一个名为storage-firebase-app的应用(图 4-2 )。

图 4-2

创建存储应用

现在，点击屏幕左上角的设置图标。之后点击项目设置按钮，如图 4-3 。

图 4-3

项目设置

现在，向下滚动，点击配置单选按钮，然后复制firebaseConfig元素的所有代码，如图 4-4 所示。

图 4-4

火基配置

基本 React 设置

我们现在将完成 React 设置。所以，回到终端，将cd放入新创建的storage-firebase-app目录。

之后，在 VS 代码中打开目录，在src文件夹中创建一个名为firebase.js的文件。将前面 Firebase 屏幕中的以下内容粘贴到该文件中:

const  xxxxxxConfig = {
     apiKey: "AIXXXXXXXXXXXXXXXXXXXXXXXXXX",
     authDomain: "storage-XXXXXXXX.XXXXXXXXX.com",
     projectId: "storage- xxxxxx-app",
     storageBucket: "storage- xxxxxx-app.appspot.com",
     messagingSenderId: "14xxxxxxxx",
     appId: "1:142xxxxxxxxxxxxx:web:6xxxxxxxxxxx"
};

在storage-firebase-app目录中，用npm start启动 React 应用。接下来，我们将删除一些文件，因为我们不需要它们。我们正在删除它们，因为它们显示了 React 徽标和其他东西，需要在开始项目之前进行清理。图 4-5 显示要删除的文件。

图 4-5

删除文件

我们将删除所有不必要的样板代码，我们的index.js文件将如下所示:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

App.js文件仅包含“存储应用 React”文本。我们还删除了App.css文件中的所有内容。

import './App.css';

        function App() {
            return (
                <div className="app">
                <h1>Storage app React</h1>
                </div>
            );
        }
        export default App;

在index.css文件中，更新 CSS 以对所有内容使用margin: 0，如下所示:

*{
  margin: 0;
}

创建标题

我们的 React 设置已经完成，我们将首先处理Header组件。因此，在src文件夹中创建一个名为components的文件夹。在components文件夹中创建一个Header.js文件。我们将首先将其导入到App.js文件中。

function App() {
  return (
     <div className="app">
       <Header />
       </div>
  );
}
export default App;

我们也将为图标使用材质界面。因此，我们需要根据文档做两个npm install。

npm i @material-ui/core @material-ui/icons

现在，我们的Header.js文件大部分是静态的。它将主要包含图标和标志。

这里我们有一个div叫做header，包含三个div，第一个是header__logo，包含一个图片和文字。下一个div是header__searchContainer，包含一个SearchIcon，一个输入框，和ExpandMoreIcon。

第三个div，称为header__icons，包含四个图标:HelpOutlineIcon、SettingsIcon、AppsIcon和Avatar。

import React from 'react'
import SearchIcon from '@material-ui/icons/Search'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
import SettingsIcon from '@material-ui/icons/Settings'
import AppsIcon from '@material-ui/icons/Apps'
import { Avatar } from '@material-ui/core'
import './Header.css'

const Header = () => {
    return (
        <div className="header">
            <div className="header__logo">
                <img src="logo192.png" alt="logo" />
                <span>Storage</span>
            </div>
            <div className="header__searchContainer">
                <div className="header__searchBar">
                    <SearchIcon />
                    <input type="text" placeholder='Search in Storage' />
                    <ExpandMoreIcon />
                </div>
            </div>
            <div className="header__icons">
                <span>
                    <HelpOutlineIcon />
                    <SettingsIcon />
                </span>
                <AppsIcon />
                <Avatar className="header__iconsAvatar" />
            </div>
        </div>
    )
}

export default Header

现在，在同一个文件夹中创建一个名为Header.css的文件，并向其中添加以下内容。这里，我们使用了很多 flexboxes 来设计我们的页眉。

.header {
    display: flex;
    height: 60px;
    border-bottom: 1px solid rgb(219, 219, 219);
    width: 100vw;
}

.header>div {
    padding: 12px;
}

.header__logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header__logo>img {
    height: 100%;
    object-fit: contain;
}

.header__logo>span {
    color: gray;
    font-size: 20px;
    font-weight: 500;
    margin-left: 16px;
}

.header__searchContainer {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 8px;
}

.header__searchBar {
    width: 45%;
    height: 120%;
    border-radius: 6px;
    background-color: rgb(237, 237, 237);
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.MuiSvgIcon-root {
    color: rgb(82, 82, 82);
}

.header__searchBar>input {
    flex: 1;
    height: 60%;
    font-size: 16px;
    color: lightgray;
    background: none;
    border: none;
    margin-left: 12px;
}

.header__searchBar>input:focus {
    outline: none;
    color: black;
}

.header__icons {
    display: flex;
    align-items: center;
    margin-right: -30px;
}

.header__icons .MuiSvgIcon-root {
    font-size: 28px;
    color: rgb(82, 82, 82);
    margin: 4px;
}

.header__icons>span{
    margin-right: 20px;
}

.header__iconsAvatar{
    margin-right: 24px;
}

现在，我们的头已经完成，看起来像 localhost 上的图 4-6 。

图 4-6

我们在本地主机上的标题

创建侧栏

现在我们的 header 组件已经完成，我们将创建Siderbar组件。为此，首先将Siderbar组件导入到我们的App.js文件中。这里的代码以粗体显示:

import './App.css';
import Header from './components/Header';
import Sidebar from './components/Sidebar';

function App() {
  return (
     <div className="app">
     <Header />
     <Sidebar />
     </div>
  );
}
export default App;

接下来，在components文件夹中创建一个名为Sidebar.js的文件，并在其中添加以下内容。这里，我们调用两个组件:FileComponent和SidebarItem。在SidebarItem组件中，我们也传递属性，其中之一就是图标。

import React from 'react';
import FileComponent from './FileComponent';
import SidebarItem from './SidebarItem';
import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
import ImportantDevicesIcon from '@material-ui/icons/ImportantDevices';
import PeopleAltIcon from '@material-ui/icons/PeopleAlt';
import QueryBuilderIcon from '@material-ui/icons/QueryBuilder';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
import StorageIcon from '@material-ui/icons/Storage';
import './Sidebar.css';

const Sidebar = () => {
    return (
        <div className="sidebar">
            <FileComponent />
            <div className="sidebar__itemsContainer">
                <SidebarItem arrow icon={(<InsertDriveFileIcon />)} label={'My Drive'} />
                <SidebarItem arrow icon={(<ImportantDevicesIcon />)} label={'Computers'} />
                <SidebarItem icon={(<PeopleAltIcon />)} label={'Shared with me'} />
                <SidebarItem icon={(<QueryBuilderIcon />)} label={'Recent'} />
                <SidebarItem icon={(<StarBorderIcon />)} label={'Starred'} />
                <SidebarItem icon={(<DeleteOutlineIcon />)} label={'Bin'} />
                <hr/>
                <SidebarItem icon={(<StorageIcon />)} label={'Storage'} />
            </div>
        </div>

    )
}

export default Sidebar

现在，在同一个components文件夹中创建一个FileComponent.js文件。它包含AddIcon和New图标。

import React from 'react'
import AddIcon from '@material-ui/icons/Add'
import './FileComponent.css'

const FileComponent = () => {
    return (
        <div className="file">
            <div className="file__container">
                <AddIcon fontSize='large' />
                <p>New</p>
            </div>
        </div>
    )
}

export default FileComponent

现在，在components文件夹中创建一个名为SidebarItem.js的文件。需要三个属性:arrow、icon、label。只有当arrow属性通过时，我们才显示ArrowRightIcon。

import React from 'react'
import './SidebarItem.css'

import ArrowRightIcon from '@material-ui/icons/ArrowRight';

const SidebarItem = ({ arrow, icon, label }) => {
    return (
        <div className='sidebarItem'>
            <div className="sidebarItem__arrow">
                {arrow && (<ArrowRightIcon />)}
            </div>

            <div className='sidebarItem__main'>
                {icon}
                <p>{label}</p>
            </div>
        </div>

)
}

export default SidebarItem

图 4-7 显示了图标在本地主机上的样子。

图 4-7

本地主机上的图标

现在，是时候改变我们的风格了。因此，在Sidebar.css文件中添加以下代码:

.sidebar{
    width: 15%;
    height: 100vh;
    margin-right: 5px;
}

hr{
    background-color: rgb(197, 197, 197);
    height: 1px;
    border: none;
}

接下来，在SidebarItem.css文件中，添加以下内容:

.sidebarItem{
    display: flex;
    padding: 10px 0;
    border-radius: 0 100px 100px 0;
}

.sidebarItem:hover{
    background-color: rgba(0, 0, 0, 0.04);
}

.sidebarItem__arrow{
    width: 28px;
    margin-left: 12px;
}

.sidebarItem__main{
    display: flex;
}

.sidebarItem__main>p{
    margin-left: 12px;
}

在FileComponent.css中，增加以下内容:

.file {
    display: flex;
    align-items: center;
    padding: 12px 0;
    padding-left: 20px;
}

.file__container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 32px 6px 8px;
    border-radius: 50px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 1px 3px 1px rgba(60, 64, 67, 0.149);
    cursor: pointer;
}

.file__container>p{
    margin-left: 14px;
}

侧边栏看起来很棒，如图 4-8 所示。

图 4-8

补充报道

使用 Firebase 上传文件

我们需要有一些上传文件的逻辑，但为此我们首先需要在我们的项目中有 Firebase。

首先要做的是通过从终端运行以下命令在我们的项目中安装 Firebase:

npm i firebase

接下来，我们将更新我们的firebase.js文件，以使用配置来初始化应用。之后，我们可以使用 Firestore 作为数据库。我们还在项目中使用谷歌认证和存储。

import firebase from 'firebase'

  const firebaseConfig = {
      ...
      ...
  };

  const firebaseApp = firebase.initializeApp(firebaseConfig)

  const auth = firebase.auth()
  const provider = new firebase.auth.GoogleAuthProvider()
  const storage = firebase.storage()
  const db = firebaseApp.firestore()

  export { auth, provider, db, storage }

回到FileComponent.js文件，我们将导入必要的模块。我们在这里使用来自材质 UI 的Modal。更新后的代码在这里用粗体标记:

import React, { useState } from 'react'
import AddIcon from '@material-ui/icons/Add'
import './FileComponent.css'
import firebase from 'firebase'
import { storage, db } from '../firebase'
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
function getModalStyle() {
     return {
     top: `50%`,
     left: `50%`,
     transform: `translate(-50%, -50%)`,
     };
}
const useStyles = makeStyles((theme) => ({
     paper: {
     position: 'absolute',
     width: 400,
     backgroundColor: theme.palette.background.paper,
     border: '2px solid #000',
     boxShadow: theme.shadows[5],
     padding: theme.spacing(2, 4, 3),
     },
}));

const FileComponent = () => {
     const classes = useStyles();
     const [modalStyle] = useState(getModalStyle);
     const [open, setOpen] = useState(false);
     const [file, setFile] = useState(null)
     const [uploading, setUploading] = useState(false)
     const handleOpen = () => { setOpen(true); };
     const handleClose = () => { setOpen(false); };
     return (
     <div className="file">
             <div className="file__container">
             <AddIcon fontSize='large' />
             <p>New</p>
             </div>
      </div>
     )
}

export default FileComponent

现在，在FileComponent.js的return块中，我们将显示Modal。Modal的内容将是一个输入类型文件和一个按钮。更新后的代码在这里用粗体标记:

...
...
     return (
         <div className="file">
                 <div className="file__container" onClick={handleOpen}>
                 <AddIcon fontSize='large' />
                 <p>New</p>
                 </div>
                 <Modal
                 open={open}
                 onClose={handleClose}
                 aria-labelledby="simple-modal-title"
                 aria-describedby="simple-modal-description"
                 >
                 <div style={modalStyle} className={classes.paper}>
                 <p>Select files you want to upload!</p>
                 {
                       uploading ? (
                       <p>Uploading...</p>
                       ) : (
                       <>
                       <input type="file" onChange={handleChange} />
                       <button onClick={handleUpload}>Upload</button>
                       </>

                       )
                 }
                 </div>
                 </Modal>
       </div>

       )
...
...

接下来，我们将在FileComponent.js文件中创建handleChange和handleUpload函数。在handleChange函数中，我们将文件设置为setFile()，在handleUpload函数中，我们获取上传的文件并将它的各种元素保存在fileUrl中，比如它的标题。这些将在我们的应用中稍后显示。更新后的代码在这里用粗体标记:

...
...
const FileComponent = () => {
  ...
  ...

     const handleChange = (e) => {
     if (e.target.files[0]) {
    setFile(e.target.files[0])
    }

    }

    const handleUpload = () => {
    setUploading(true)
    storage.ref(`files/${file.name}`).put(file).then(snapshot => {
    console.log(snapshot)
    storage.ref('files').child(file.name).getDownloadURL().then(url => {
                    db.collection('myFiles').add({
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                    caption: file.name,
                    fileUrl: url,
                    size: snapshot._delegate.bytesTransferred,
                    })
                    setUploading(false)
                    setOpen(false)
                    setFile(null)
    })

    storage.ref('files').child(file.name).getMetadata().then(meta => {
    console.log(meta.size)
    })

    })
    }

    return (
    ...
    ...
    )

}

export default FileComponent

为了让我们的代码工作，我们需要在 Firebase 中设置存储。因此，从 Firebase 控制台，点击存储，然后开始。现在会弹出如图 4-9 所示的窗口，需要点击下一步按钮。

图 4-9

入门指南

在下一个画面中，点击完成按钮，如图 4-10 所示。

图 4-10

完成的

Firebase 需要验证才能上传文件。由于我们还没有设置认证，我们需要改变规则，如图 4-11 所示。

图 4-11

规则

现在，回到 localhost，单击 New 按钮，将显示一个弹出窗口。在弹出的界面中，您可以上传任何文件，如图 4-12 所示。

图 4-12

上传文件的弹出窗口

选择一个文件后点击上传按钮，将该文件上传到 Firebase，如图 4-13 所示。

图 4-13

Firebase 上传

使用 FileViewer 组件显示文件

我们有上传文件的逻辑，但是现在我们想在我们的项目中显示文件。

我们还需要首先启用 Firestore。为此，返回到 Firebase 控制台，点击云 Firestore ，然后点击创建数据库按钮，如图 4-14 所示。

图 4-14

创建数据库

在下一个画面中，在 测试模式下选择开始，然后点击下一个按钮，如图 4-15 所示。

图 4-15

测试模式

之后，在下一个屏幕上，点击使能按钮，如图 4-16 所示。

图 4-16

启用按钮

现在，创建一个名为FilesViewer.js的文件，并在其中添加以下内容。在这里，我们通过调用useEffect钩子内的FilesViewer.js从 Firebase 获取所有文件细节。获得数据后，我们对其进行映射，并将其传递给我们接下来将创建的FileItem组件。

import React, { useEffect, useState } from 'react'
import './FilesViewer.css'
import { db } from '../firebase'
import FileItem from './FileItem'

const FilesViewer = () => {
    const [files, setFiles] = useState()

useEffect(() => {
        db.collection('myFiles').onSnapshot(snapshot => {
            setFiles(snapshot.docs.map(doc => ({
                id: doc.id,
                item: doc.data()
            })))
        })
    }, [])

    return (
        <div className='fileViewer'>
            <div className="fileViewer__row">
            </div>
            <div className="fileViewer__titles">
                <div className="fileViewer__titles--left">
                    <p>Name</p>
                </div>
                <div className="fileViewer__titles--right">
                    <p>Last modified</p>
                    <p>File size</p>
                </div>
            </div>

            {
                files.map(({ id, item }) => (
                    <FileItem id={id} caption={item.caption} timestamp={item.timestamp} fileUrl={item.fileUrl} size={item.size} />
                ))
            }
        </div>
    )
}

export default FilesViewer

接下来，创建一个名为FileItem.js的文件，并在其中添加以下内容。在这里，我们只是显示数据。但是其中一个主要的是readableFileSizeStr函数。通过这个功能，我们可以显示正确的数字。

import React from 'react'
import './FileItem.css'

import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';

const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

const FileItem = ({ id, caption, timestamp, fileUrl, size }) => {
    const fileDate = `${timestamp?.toDate().getDate()} ${monthNames[timestamp?.toDate().getMonth() + 1]} ${timestamp?.toDate().getFullYear()}`

const readableFileSizeStr = (fileSizeInBytes) => {
        let i = -1;
        const byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];
        do {
            fileSizeInBytes = fileSizeInBytes / 1024;
            i++;
        } while (fileSizeInBytes > 1024);
        return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
    };

return (
        <div className='fileItem'>
            <a href={fileUrl} target="_blank" rel="noreferrer" download>
                <div className="fileItem--left">
                    <InsertDriveFileIcon />
                    <p>{caption}</p>
                </div>
                <div className="fileItem--right">
                    <p>{fileDate}</p>
                    <p>{readableFileSizeStr(size)}</p>
                </div>
            </a>
        </div>
    )
}

export default FileItem

现在，回到App.js，我们已经包含了FilesViewer组件，还添加了一个叫做app__main的div来包含它和Sidebar组件。更新后的代码以粗体显示:

import './App.css';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import FilesViewer from './components/FilesViewer';

function App() {
  return (
     <div className="app">
     <Header />
     <div className="app__main">
            <Sidebar />
            <FilesViewer />
     </div>
     </div>
  );
}

export default App;

接下来，在App.css中，添加以下样式:

.app__main{
    display: flex;
}

现在，回到 localhost，我们必须上传另一个文件；然后我们会看到文件细节，如图 4-17 所示。

图 4-17

文件详细信息

现在，我们将在这些组件中添加样式。首先在FileItem.css文件中添加样式。

.fileItem{
    height: 55px;
    border-bottom: 1px solid rgb(219, 219, 219);
    border-top: 1px solid rgb(219, 219, 219);
    width: 100%;
}

.fileItem>a{
    height: 100%;
    display: flex;
    text-decoration: none;
    color: rgb(85, 78, 78);
}

.fileItem>a>div{
    display: flex;
align-items: center;
}

.fileItem>a>div>*{
    margin: 10px;
}

.fileItem--left{
    flex: 1;
}

接下来，在FilesViewer.css文件中添加样式。

.fileViewer{
width: 100%;
}

.fileViewer__row{
    height: 250px;
    display: flex;
    align-items: center;
}

.fileViewer__titles{
    display: flex;
    margin-bottom: 5px;
    color: rgb(85, 78, 78);
}

.fileViewer__titles>div>*{
    margin: 5px;
}

    .fileViewer__titles--left{
        flex: 1;
}

.fileViewer__titles--right{
    display: flex;
}

现在，我们的文件在 localhost 上看起来很棒，如图 4-18 所示。

图 4-18

布局

创建文件卡组件

我们现在创建一个FileCard组件来显示项目中文件的漂亮图标。

创建一个名为FileCard.js的文件，并将以下内容放入其中。在这里，我们只是显示一个大图标和文件名，从父组件传递过来。

import React from 'react'
import './FileCard.css'

import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';

const FileCard = ({ name }) => {
    return (
        <div className='fileCard'>
            <div className="fileCard--top">
                <InsertDriveFileIcon style={{ fontSize: 130 }} />
            </div>
            <div className="fileCard--bottom">
                <p>{name}</p>
            </div>
        </div>
    )
}

export default FileCard

接下来，在FileCard.css中，放入以下样式:

.fileCard {
    height: 190px;
    width: 240px;
    border-radius: 10px;
    border: 1px solid rgb(219, 219, 219);
    margin: 5px;
}

.fileCard--top {
    height: 70%;
    border-bottom: 1px solid rgb(219, 219, 219);
    display: flex;
    justify-content: center;
    align-items: center;
}

.fileCard--bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30%;
}

.fileCard--bottom>p {
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
}

现在，我们需要在FilesViewer.js文件中导入FileCard组件。这里，我们映射了所有的文件，但只选择了五个，并将name值发送给FileCard组件。更新后的代码在这里被标记为粗体:

...
import FileCard from './FileCard'

const FilesViewer = () => {
    ...
    ...

      return (
      <div className='fileViewer'>
         <div className="fileViewer__row">
         {
         files.slice(0, 5).map(({ id, item }) => (
         <FileCard key={id} name={item.caption} />
         ))

         }
         </div>
         ...
         ...
     </div>

     )
}

export default FilesViewer

现在，我们可以在 localhost 上看到一个大图标，如图 4-19 所示。

图 4-19

大图标

创建侧图标组件

我们现在创建一个SideIcons组件，在侧面显示一些漂亮的图标。创建一个名为SideIcons.js的文件，并将以下内容放入其中:

import React from 'react'
import './SideIcons.css'
import AddIcon from '@material-ui/icons/Add'

const SideIcons = () => {
    return (
        <div className='sideIcons'>
            <div className="sideIcons__top">
                <img src="https://cdn4.iconfinder.com/data/icons/logos-brands-in-colors/48/google-calendar-512.png" alt="Calendar" />
                <img src="https://assets.materialup.com/uploads/64f5506e-2577-4d19-9425-11a1e1fa31a8/0x0ss-85.jpg" alt="Keep" />
                <img src="https://www.androidpolice.com/wp-content/uploads/2018/03/nexus2cee_new-tasks-icon.png" alt="Tasks" />
            </div>
            <hr />
            <div className="sideIcons__plusIcon">
                <AddIcon />
            </div>
        </div>
    )
}

export default SideIcons

接下来，在SideIcons.css中，放入以下样式:

.sideIcons{
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid rgb(219, 219, 219);
}

.sideIcons__top{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sideIcons__top>img{
    object-fit: contain;
    width: 30px;
    margin: 10px 0;
}

.sideIcons>hr{
    margin: 12px 0;
    width: 90%;
}

.sideIcons__plusIcon{
    display: flex;
    align-items: center;
}

现在，导入App.js文件中的代码。此处的更新代码以粗体标记:

...
import SideIcons from './components/SideIcons';

function App() {
  return (
     <div className="app">
     <Header />
     <div className="app__main">
     <Sidebar />
     <FilesViewer />
     <SideIcons />
     </div>
     </div>
  );
}
export default App;

现在，我们可以在右边栏看到这些漂亮的图标，如图 4-20 所示。

图 4-20

右侧的图标

添加 Google 身份验证

现在，我们的应用几乎完成了，但我们仍然需要添加谷歌认证。因此，进入 Firebase 控制台，点击认证选项卡，然后点击开始按钮，如图 4-21 所示。

图 4-21

身份验证入门

在下一个界面中，点击 Google 旁边的编辑配置图标，如图 4-22 所示。

图 4-22

点击谷歌

在弹出的消息中，点击启用按钮，之后输入您的 Gmail ID，点击保存按钮，如图 4-23 所示。

图 4-23

正在登录

接下来在App.js文件中，我们只需要从本地 Firebase 文件中导入auth和provider。之后，我们使用名为signInWithPopup()的方法来启用认证。

之后，在return块中，我们使用一个三元运算符来显示所有组件，如果我们有一个用户的话。如果没有找到用户，我们显示一个登录名div。此处的更新代码以粗体标记:

import { auth, provider } from "./firebase";
import { useState } from 'react';

function App() {
  const [user, setUser] = useState(null)
  const handleLogin = () => {
     if (!user) {
     auth.signInWithPopup(provider).then(result => setUser(result.user))
      .catch(error => alert(error.message));
    }
  }

  return (
       <div className="app">
       {user ? (
       <>

       <Header userPhoto={user?.photoURL}/>
       <div className="app__main">
       <Sidebar />
       <FilesViewer />
       <SideIcons />
       </div>
       </>

       ) : (
       <div className='app__login'>
       <img src="logo512.png" alt="Storage" />
       <button onClick={handleLogin}>Log in to Storage</button>
       </div>
       )}
       </div>
  );
}
export default App;

现在，在App.css文件中，添加这些额外的样式:

.app__login {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
}

.app__login>button{
    border: none;
    font-size: 24px;
    background-color: rgb(67, 130, 244);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    transition: all 0.2s;
}

.app__login>button:hover{
    cursor: pointer;
    background-color: rgb(49, 94, 179);
    transform: scale(1.1);
}

因为我们将把userPhoto属性传递给Header组件，所以我们将在Header.js文件中使用它。此处的更新代码以粗体标记:

...

const Header = ({ userPhoto }) => {
return (
         <div className="header">
              ...
              ...
             <div className="header__icons">
             <span>
             <HelpOutlineIcon />
             <SettingsIcon />
             </span>
             <AppsIcon />
             <Avatar className="header__iconsAvatar"src={userPhoto} />
             </div>
     </div>
     )
}

export default Header

现在，当我们转到 localhost 并点击登录存储时，我们会看到谷歌认证弹出窗口，如图 4-24 所示。

图 4-24

谷歌认证弹出窗口

当我们点击 Gmail ID 时，我们将进入我们的应用。在这里，我们可以在右上角看到已登录的用户图像，如图 4-25 所示。

图 4-25

登录用户

通过 Firebase 部署和托管

现在，我们可以按照前面描述的相同步骤在 Firebase 中部署我们的应用。部署成功且工作正常，如图 4-26 所示。

图 4-26

存储应用

摘要

在本章中，您学习了如何制作一个存储应用，您可以通过 Google 认证登录并上传文件。我们用 React 创建了 web 应用，并将数据存储在 Firebase 存储中。您还学习了如何在 Firebase 中进行托管。