使用Firebase设置带有功能组件的React App

问题描述

如何使用Firebase设置React应用程序？ 使用功能组件和Material UI库，实现挂钩可以保留auth状态。

解决方法

我设法通过FireUP使用SignUP和SignIN为React Dashboard开发了一个简单的样板项目。路由在App.js文件中维护。为了简化流程，项目使用了React功能组件以及Hooks-useState，useEffect。这对初学者真的很有帮助。

该项目是使用Material UI库构建的。使用以下模板：

1. 仪表板（https://material-ui.com/getting-started/templates/dashboard/）
2. 登录（https://material-ui.com/getting-started/templates/dashboard/）
3. 注册（https://material-ui.com/getting-started/templates/sign-up/）

该项目利用了不同的Material-ui组件，例如：

1. 日期选择器
2. 切换
3. 文本字段
4. 选择
5. 自定义对话框可重用模式
6. 图标

开始，

1. 从Github中拉回仓库。
2. 使用“ npm install”安装所有节点依赖项。
3. 使用您的firebase项目凭据更新src / Components / firebase.js文件。
4. 运行“ yarn start”或“ npm start”以启动项目。

您最初将被重定向到SignIN页面。选择选项“没有帐户？注册”，您将被重定向到“注册”页面。输入凭据，您将登录到仪表板。

视频演示链接：https://youtu.be/aWUr3GRbhhs

Github存储库：https://github.com/aaygupta/react-dashboard-boilerplate