F

Firebase 作为 React 应用程序的简单数据库

2025-06-07

Firebase 作为 React 应用程序的简单数据库

Firebase 是一个一体化的后端即服务提供商 (BaaS)，提供数据库、身份验证、云存储等众多服务。在本教程中，你将学习如何在 React 应用程序中使用 Firebase 实时数据库服务。

您将构建一个简单的团队列表应用程序，用户可以在其中添加、删除和编辑团队成员信息。

创建数据库应用程序

首先，您需要在 Firebase 控制台中创建您的应用程序。

然后转到数据库菜单并向下滚动到选择实时数据库部分。

创建实时数据库

设置安全规则以测试模式启动。

（这会使您的数据库不安全，但对于本教程的目的来说这是可以的。）

最后，获取将 Firebase 集成到您的 Web 应用所需的配置。

创建实时数据库

从这个 codesandbox 获取源代码并分叉它：

并将您的凭证放入配置文件中：

const config = {
  apiKey: "{YOUR KEY}",
  authDomain: "{YOUR KEY}",
  databaseURL: "{YOUR KEY}",
}

export default config;
Enter fullscreen mode Exit fullscreen mode

设置你的 React 应用程序

使用以下命令启动你的 React 应用程序create-react-app

npx create-react-app react-firebase-basic
Enter fullscreen mode Exit fullscreen mode

然后安装 firebase 和 Bootstrap（这样您就可以跳过编写自己的 css。）

npm i firebase bootstrap
Enter fullscreen mode Exit fullscreen mode

然后你可以删除所有内容，src/因为你不需要大多数样板

创建config.js文件

让我们在单独的config.js文件中编写 Firebase 配置：

const config = {
  apiKey: "{YOUR KEY}",
  authDomain: "{YOUR KEY}",
  databaseURL: "{YOUR KEY}",
}

export default config;
Enter fullscreen mode Exit fullscreen mode

您稍后会将此配置导入到您的配置中App.js。

写入index.js文件

该文件将作为 React 入口点：

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

ReactDOM.render(<App />, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

创建您的应用程序

现在该编写App.js文件了。让我们在构造函数中初始化 Firebase 应用：

import React from 'react';

import Firebase from 'firebase';
import config from './config';


class App extends React.Component {

  constructor(props){
    super(props);
    Firebase.initializeApp(config.firebase);

    this.state = {
      developers: []
    }
  }

  //...
Enter fullscreen mode Exit fullscreen mode

然后，您可以编写获取和保存数据的逻辑：writeUserdata将我们的状态写入数据库，同时在路径getUserData上创建一个监听器/，并且在发生value更改时，我们将快照值分配为状态。

writeUserData = () => {
  Firebase.database().ref('/').set(this.state);
  console.log('DATA SAVED');
}

getUserData = () => {
  let ref = Firebase.database().ref('/');
  ref.on('value', snapshot => {
    const state = snapshot.val();
    this.setState(state);
  });
  console.log('DATA RETRIEVED');
}
Enter fullscreen mode Exit fullscreen mode

将这些writeUserData和分别放入和getUserData中。componentDidMountcomponentDidUpdate

componentDidMount() {
  this.getUserData();
}

componentDidUpdate(prevProps, prevState) {
  // check on previous state
  // only write when it's different with the new state
  if (prevState !== this.state) {
    this.writeUserData();
  }
}
Enter fullscreen mode Exit fullscreen mode

剩下的就是编写渲染和处理表单提交的逻辑：我们将映射developers数组state并将每个项目放入卡片组件中。每个卡片都会有一个删除和更新按钮。点击删除按钮时，我们会筛选出特定的项目；点击更新按钮时，我们会将项目数据导入表单。

handleSubmituid当值为时将插入数据false，当值为 时将更新数据true。我们使用refs 从表单输入中获取数据。

// ...
render() {
  const { developers } = this.state;
  return(
    <div className="container">
      <div className="row">
        <div className='col-xl-12'>
          <h1>Firebase Development Team</h1>
        </div>
      </div>
      <div className='row'>
        <div className='col-xl-12'>
        { 
          developers
          .map(developer => 
            <div key={developer.uid} className="card float-left" style={{width: '18rem', marginRight: '1rem'}}>
              <div className="card-body">
                <h5 className="card-title">{ developer.name }</h5>
                <p className="card-text">{ developer.role }</p>
                <button onClick={ () => this.removeData(developer) } className="btn btn-link">Delete</button>
                <button onClick={ () => this.updateData(developer) } className="btn btn-link">Edit</button>
              </div>
            </div>
            )
        } 
        </div>
      </div>
      <div className='row'>
        <div className='col-xl-12'>
          <h1>Add new team member here</h1>
          <form onSubmit={ this.handleSubmit }>
            <div className="form-row">
              <input type='hidden' ref='uid' />
              <div className="form-group col-md-6">
                <label>Name</label>
                <input type="text" ref='name' className="form-control" placeholder="Name" />
              </div>
              <div className="form-group col-md-6">
                <label>Role</label>
                <input type="text" ref='role' className="form-control" placeholder="Role" />
              </div>
            </div>
            <button type="submit" className="btn btn-primary">Save</button>
          </form>
        </div>
      </div>
    </div>
  )
}

handleSubmit = (event) => {
  event.preventDefault();
  let name = this.refs.name.value;
  let role = this.refs.role.value;
  let uid = this.refs.uid.value;

  if (uid && name && role){
    const { developers } = this.state;
    const devIndex = developers.findIndex(data => {
      return data.uid === uid 
    });
    developers[devIndex].name = name;
    developers[devIndex].role = role;
    this.setState({ developers });
  }
  else if (name && role ) {
    const uid = new Date().getTime().toString();
    const { developers } = this.state;
    developers.push({ uid, name, role })
    this.setState({ developers });
  }

  this.refs.name.value = '';
  this.refs.role.value = '';
  this.refs.uid.value = '';
}

removeData = (developer) => {
  const { developers } = this.state;
  const newState = developers.filter(data => {
    return data.uid !== developer.uid;
  });
  this.setState({ developers: newState });
}

updateData = (developer) => {
  this.refs.uid.value = developer.uid;
  this.refs.name.value = developer.name;
  this.refs.role.value = developer.role;
}
Enter fullscreen mode Exit fullscreen mode

现在，你的 React 应用程序已经准备好读取数据并将其写入 Firebase 数据库了。以下是最终的演示：

您可能想知道，将 Firebase Api 密钥放在配置中，让经验丰富的程序员可以轻松获取，这样是否安全？实际上，这样做是可以的，因为 Firebase 有安全规则，可以确保只有经过身份验证的用户才能访问您的数据库。只是在本教程中我没有设置安全规则。

我将在下一篇文章中编写一个更完整的教程，涵盖身份验证、数据库规则以及使用 Firebase 云存储存储用户上传的图像，敬请期待！

文章来源：https://dev.to/codewithnathan/firebase-as-simple-database-to-react-app-430p
Devto 翻译
PREV
React 101 - 实用介绍
NEXT
Vs Code 多光标 Visual Studio Code 中的多光标