Firebase 作为 React 应用程序的简单数据库
Firebase 是一个一体化的后端即服务提供商 (BaaS)，提供数据库、身份验证、云存储等众多服务。在本教程中，你将学习如何在 React 应用程序中使用 Firebase 实时数据库服务。
您将构建一个简单的团队列表应用程序，用户可以在其中添加、删除和编辑团队成员信息。
创建数据库应用程序
首先，您需要在 Firebase 控制台中创建您的应用程序。
然后转到数据库菜单并向下滚动到选择实时数据库部分。
设置安全规则以测试模式启动。
（这会使您的数据库不安全，但对于本教程的目的来说这是可以的。）
最后，获取将 Firebase 集成到您的 Web 应用所需的配置。
从这个 codesandbox 获取源代码并分叉它：
并将您的凭证放入配置文件中：
const config = {
apiKey: "{YOUR KEY}",
authDomain: "{YOUR KEY}",
databaseURL: "{YOUR KEY}",
}
export default config;
设置你的 React 应用程序
使用以下命令启动你的 React 应用程序create-react-app
npx create-react-app react-firebase-basic
然后安装 firebase 和 Bootstrap（这样您就可以跳过编写自己的 css。）
npm i firebase bootstrap
然后你可以删除所有内容，src/因为你不需要大多数样板
创建config.js文件
让我们在单独的config.js文件中编写 Firebase 配置：
const config = {
apiKey: "{YOUR KEY}",
authDomain: "{YOUR KEY}",
databaseURL: "{YOUR KEY}",
}
export default config;
您稍后会将此配置导入到您的配置中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'));
创建您的应用程序
现在该编写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: []
}
}
//...
然后，您可以编写获取和保存数据的逻辑：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');
}
将这些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();
}
}
剩下的就是编写渲染和处理表单提交的逻辑：我们将映射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;
}
现在，你的 React 应用程序已经准备好读取数据并将其写入 Firebase 数据库了。以下是最终的演示：
您可能想知道，将 Firebase Api 密钥放在配置中，让经验丰富的程序员可以轻松获取，这样是否安全？实际上，这样做是可以的，因为 Firebase 有安全规则，可以确保只有经过身份验证的用户才能访问您的数据库。只是在本教程中我没有设置安全规则。
我将在下一篇文章中编写一个更完整的教程，涵盖身份验证、数据库规则以及使用 Firebase 云存储存储用户上传的图像，敬请期待！
